embed styles.css into head

This commit is contained in:
Nils Schulte 2020-06-18 08:43:46 +02:00
parent 630e1f7d3c
commit a634d5b8d4

View File

@ -9,7 +9,202 @@
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/normalize.css">
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/style.css">
<style>
html {
background-color: black;
color: #dfdfdf;
}
/* ubuntu-font */
@font-face {
font-family: "UbuntuMono";
src: local('UbuntuMono-B'), url("../fonts/UbuntuMono-Bold.ttf");
font-weight: bold;
}
@font-face {
font-family: "UbuntuMono";
src: local('UbuntuMono-RI'), url("../fonts/UbuntuMono-Italic.ttf");
font-style: italic;
}
@font-face {
font-family: "UbuntuMono";
src: local('UbuntuMono-R'), url("../fonts/UbuntuMono-Regular.ttf");
}
#background {
position: fixed;
z-index: -1;
background-color: rgb(47, 41, 41);/*rgb(153, 34, 13);*/
width: 100%;
height: 100%;
}
@keyframes backgroundFallin {
00% {height: 0%;}
10% {height: 0%;}
50% {height: 100%;}
65% {height: 80%;}
80% {height: 100%;}
90% {height: 90%;}
100% {height: 100%;}
}
@keyframes headspin {
0% {transform: rotate(-760deg) scale(0,0);}
100% {transform: rotate(0deg) scale(1,1);}
}
@keyframes dealfall {
0% {transform: translateY(-2000%) }
1% {transform: translateY(-200%) }
100% {transform: translateY(0%) }
}
body {
font-family: 'UbuntuMono';
display: flex;
flex-flow: row;
text-align: center;
font-size: 20px;
}
body > header {
width: 100%;
position: absolute;
text-align: center;
align-content: center;
display: flex;
flex-flow: row;
}
body > header h1 {
display: flex;
flex-flow: row;
margin: 0;
}
#main {
flex: auto;
min-height: 100vh;
overflow: hidden;
display: flex;
flex-flow: column;
align-items: center;
}
#main > nav, #main > main, #main > footer {
padding: 15px;
}
#main > main {
flex: 1;
margin-right: 25px;
}
#main > footer {
padding-top: 50px;
}
@media (prefers-color-scheme: dark) {
html {
background-color: black;
color: #dfdfdf;
}
article img:not([src$=".jpg"]):not([src$=".jpeg"]) {
/* prevent transparent images from showing the black background */
background-color: white;
border: 5px solid white;
box-sizing: border-box;
}
}
/* Article list */
.article-list {
max-width: 45em;
width: 90vw;
}
.article-list article{
margin: 1.2em 0 0 0;
}
.article-list article > header {
display: flex;
flex-flow: row;
align-items: center;
margin-bottom: 0;
}
.article-list article time {
color:grey;
}
.article-list article h3 {
display: inline-block;
margin: 0.5em;
}
.article-list .summary {
text-align: justify;
margin: 0 1em;
}
.article-list article small {
font-weight: normal;
color: gray;
}
a, a:visited {
color: inherit;
}
article > header {
text-align: center;
margin-bottom: 2em;
}
article > header time {
color: gray;
}
article {
max-width: 45em;
width: 90vw;
text-align: justify;
}
table {
margin: auto;
width: 90%;
background: #221d1d;
}
table, th, td {
padding: 15px;
text-align: left;
border-color: #4c4c4c;
border-collapse: collapse;
border: 1px solid black;
}
article video, article img {
max-width: 100%;
}
article img[src$='#center'] {
display: block;
margin: 0.7rem auto;
}
article img[src$='#floatleft'] {
float:left;
margin: 0.7rem;
}
article img[src$='#floatright'] {
float:right;
margin: 0.7rem;
}
article .footnotes {
font-size: 0.75em;
}
pre {
background-color: #272822;
color: #f8f8f2;
padding: 15px;
overflow: auto;
tab-size: 2;
-moz-tab-size: 2;
}
p code, li code {
color: #930d72;
}
.centerdiv {
margin: 0;
position: absolute;
display: flex;
width: 100%;
height: 90%;
z-index: -1;
}
.logo_anim {
margin:auto;
max-height: 60%;
max-width: 60%;
}
</style>
<link rel="shortcut icon" type="image/x-icon" href="{{ .Site.BaseURL }}\img\favicon.ico" />
</head>
<body>