initial commit

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