diff options
Diffstat (limited to '')
-rw-r--r-- | style.css | 673 |
1 files changed, 673 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..e562bca --- /dev/null +++ b/style.css @@ -0,0 +1,673 @@ +html { + font-size: 14pt; + background-image: url("/assets/background.jpg"); + background-size: cover; + background-attachment: fixed; + width: 100vw; + height: 100vh; + color: #e3b69b; + background-color: #06360f; + font-family: 'Flowerfont', Redaction; +} + +* { + word-break: break-word !important; + overflow-wrap: break-word !important; +} + +body { + margin: 10vh auto; + padding: 2vw; + max-width: 1200px; +} + +h1 { + font-size: 2.5rem; +} + +h1, +blockquote { + font-family: 'Flowerfont', 'Syne Mono'; + color: #6bc7df +} + +h2 { + font-size: 1.5rem; + font-family: 'Flowerfont', Louise; + color: #ffbc05; +} + +h3 { + font-family: 'Flowerfont', 'Syne Mono'; +} + +ul { + list-style-image: url("/assets/list.svg"); +} + +pre { + width: 100%; + white-space: pre-wrap; + overflow: auto; + border: 1px solid #e8cdcf; +} + +.meta { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.meta h2, +.meta h3 { + margin: 0; +} + +.post-list { + font-family: 'Syne Mono'; + /* text-shadow: 0px 0px 2px #e3b69b; */ + filter: drop-shadow(0px 0px 2px #e3b69b); +} + +.post-list a:hover { + /* text-shadow: 0px 0px 4px #e3b69b; */ + filter: drop-shadow(0px 0px 1px #e3b69b); +} + +#public-license:hover { + position: relative; +} + +#public-license:hover:after { + content: url("/assets/cc-by-nc-sa.png"); + /* no need for qoutes */ + display: block; + position: absolute; + left: 0px; + /* change this value to one that suits you */ + top: -31px; + /* change this value to one that suits you */ +} + +#statement { + font-size: 2rem; +} + +#statement .infoculture { + text-shadow: 0px 0px 4px #e3b69b; +} + +#statement .bracket { + color: #06360f; + font-family: 'Louise'; +} + +#statement .culture { + color: #ffbc05; + font-family: 'Louise'; +} + +header img { + filter: drop-shadow(0px 0px 1px #e3b69b); + max-width: 80vw; +} + +nav { + filter: drop-shadow(0px 0px 4px #e3b69b); + background-color: #06360f; + border: 4px groove #800080; + padding: 1vw; + margin-bottom: 2vw; +} + +nav ul { + display: flex; + /* justify-content: flex-end; */ + /* justify-content: space-between; */ + gap: 2vw; + list-style: none; + list-style-image: none; + padding-left: 0; + margin: 0; + flex-wrap: wrap; + align-items: center; +} + +#atom-badge { + flex-grow: 1; +} + +#atom-badge a { + float: right; +} + +.title { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 0 1em; +} + +.title * { + margin: 0; +} + +.thumbs { + display: flex; + /* flex-direction: column; */ + /* justify-content: space-around; */ + align-items: center; + flex-wrap: wrap; + gap: 2vw; +} + +.thumb { + flex: 1 1 auto; +} + +.thumb-title a { + display: flex; + flex-wrap: wrap; + gap: 0em 1em; + align-items: baseline; + justify-content: flex-end; + filter: drop-shadow(0px 0px 1px #e3b69b); +} + +.thumb-title a>* { + color: #d1a2e7; + margin: 0; +} + +.thumb-title a h3 { + float: right; +} + +.thumb-title a:hover { + filter: drop-shadow(0px 0px 2px #e3b69b); +} + +#atom-badge { + font-size: 1px; +} + +article { + display: flex; + flex-direction: column; + /* align-items: center; */ + gap: 2vw; +} + +.thumb.panel { + padding: 2vw; + /* margin: auto; */ +} + +.thumbnail { + filter: drop-shadow(0px 0px 4px #e3b69b); + border: 4px groove #800080; + padding: 0vw; +} + +.thumbnail>* { + width: 100%; + height: 100%; +} + +.panel { + filter: drop-shadow(0px 0px 4px #e3b69b); + background-color: #06360f; + border: 4px groove #800080; + padding: 8vw; +} + +a { + color: #d1a2e7; +} + +/**************/ +/* */ +/* code */ +/* */ +/**************/ +/* https://github.com/jaspervdj/hakyll/blob/master/web/css/syntax.css */ + +a.sourceLine { + display: inline-block; + line-height: 1.25; +} + +a.sourceLine { + pointer-events: none; + color: inherit; + text-decoration: inherit; +} + +a.sourceLine:empty { + height: 1.2em; +} + +.sourceCode { + overflow: visible; +} + +code.sourceCode { + white-space: pre; + position: relative; +} + +div.sourceCode { + margin: 1em 0; +} + +pre.sourceCode { + margin: 0; +} + +@media screen { + div.sourceCode { + overflow: auto; + } +} + +@media print { + code.sourceCode { + white-space: pre-wrap; + } + + a.sourceLine { + text-indent: -1em; + padding-left: 1em; + } +} + +pre.numberSource a.sourceLine { + position: relative; + left: -4em; +} + +pre.numberSource a.sourceLine::before { + content: attr(title); + position: relative; + left: -1em; + text-align: right; + vertical-align: baseline; + border: none; + pointer-events: all; + display: inline-block; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + padding: 0 4px; + width: 4em; + color: #aaaaaa; +} + +pre.numberSource { + margin-left: 3em; + border-left: 1px solid #aaaaaa; + padding-left: 4px; +} + +div.sourceCode {} + +@media screen { + a.sourceLine::before { + text-decoration: underline; + } +} + +code span.al { + color: #ff0000; + font-weight: bold; +} + +/* Alert */ +code span.an { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Annotation */ +code span.at { + color: #7d9029; +} + +/* Attribute */ +code span.bn { + color: #40a070; +} + +/* BaseN */ +code span.bu {} + +/* BuiltIn */ +code span.cf { + color: #007020; + font-weight: bold; +} + +/* ControlFlow */ +code span.ch { + color: #4070a0; +} + +/* Char */ +code span.cn { + color: #880000; +} + +/* Constant */ +code span.co { + color: #60a0b0; + font-style: italic; +} + +/* Comment */ +code span.cv { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* CommentVar */ +code span.do { + color: #ba2121; + font-style: italic; +} + +/* Documentation */ +code span.dt { + color: #902000; +} + +/* DataType */ +code span.dv { + color: #40a070; +} + +/* DecVal */ +code span.er { + color: #ff0000; + font-weight: bold; +} + +/* Error */ +code span.ex {} + +/* Extension */ +code span.fl { + color: #40a070; +} + +/* Float */ +code span.fu { + color: #06287e; +} + +/* Function */ +code span.im {} + +/* Import */ +code span.in { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Information */ +code span.kw { + color: #007020; + font-weight: bold; +} + +/* Keyword */ +code span.op { + color: #666666; +} + +/* Operator */ +code span.ot { + color: #007020; +} + +/* Other */ +code span.pp { + color: #bc7a00; +} + +/* Preprocessor */ +code span.sc { + color: #4070a0; +} + +/* SpecialChar */ +code span.ss { + color: #bb6688; +} + +/* SpecialString */ +code span.st { + color: #4070a0; +} + +/* String */ +code span.va { + color: #19177c; +} + +/* Variable */ +code span.vs { + color: #4070a0; +} + +/* VerbatimString */ +code span.wa { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Warning */ + +/***************/ +/* */ +/* fonts */ +/* */ +/***************/ + +@font-face { + font-family: 'Flowerfont'; + src: url('/fonts/flowerfont.ttf'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Syne Mono'; + src: url('/fonts/syne-mono.woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Louise'; + src: url('/fonts/louise.woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction'; + src: url('/fonts/Redaction-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 10'; + src: url('/fonts/Redaction_10-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 50'; + src: url('/fonts/Redaction_50-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 70'; + src: url('/fonts/Redaction_70-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction'; + src: url('/fonts/Redaction-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction'; + src: url('/fonts/Redaction-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 10'; + src: url('/fonts/Redaction_10-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction 35'; + src: url('/fonts/Redaction_35-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 50'; + src: url('/fonts/Redaction_50-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction 70'; + src: url('/fonts/Redaction_70-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 20'; + src: url('/fonts/Redaction_20-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 100'; + src: url('/fonts/Redaction_100-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 50'; + src: url('/fonts/Redaction_50-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 100'; + src: url('/fonts/Redaction_100-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction 35'; + src: url('/fonts/Redaction_35-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 20'; + src: url('/fonts/Redaction_20-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction 10'; + src: url('/fonts/Redaction_10-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 35'; + src: url('/fonts/Redaction_35-Italic.woff2') format('woff2'); + font-weight: normal; + font-style: italic; + font-display: block; +} + +@font-face { + font-family: 'Redaction 100'; + src: url('/fonts/Redaction_100-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 70'; + src: url('/fonts/Redaction_70-Regular.woff2') format('woff2'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +@font-face { + font-family: 'Redaction 20'; + src: url('/fonts/Redaction_20-Bold.woff2') format('woff2'); + font-weight: bold; + font-style: normal; + font-display: block; +}
\ No newline at end of file |