blob: e562bca069697b46e3f30f326dbfc0a15ebcfe30 (
plain) (
tree)
|
|
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;
}
|