initial commit

themes/janw/static/css/style.css

@@ -0,0 +1,192 @@
+@font-face {
+  font-family: Catamaran;
+  src: url(/fonts/catamaran.ttf);
+}
+
+html {
+    overflow-y: scroll;
+}
+
+body {
+    background: white;
+    background-size: cover;
+    background-attachment: fixed;
+    font-family: Catamaran, sans-serif;
+    max-width: 60em;
+    margin: auto;
+    padding: 1.5em;
+    hyphens: auto;
+    cursor: default;
+}
+
+header {
+    text-align: center;
+}
+
+header .title {
+    display: block;
+    font-size: 2em;
+}
+
+header .subtitle {
+    display: block;
+    font-size: 1.1em;
+}
+
+.nav-container {
+    display: block;
+    background: #ffffffb3;
+    backdrop-filter: blur(32px);
+    padding: 1rem;
+    margin: 2rem;
+    border-style: solid;
+    border-width: 1px;
+    border-color: #b1b1b1;
+    border-radius: 0.5rem;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.25rem 0.2rem;
+}
+
+.big-container {
+    display: block;
+    padding: 1rem;
+    margin: 2rem;
+}
+
+.sub-container {
+    display: block;
+    background: rgb(251, 255, 252);
+    padding: 0.75rem;
+    margin: 1rem;
+    border-radius: 0.5rem;
+    box-shadow: rgba(0, 0, 0, 0.45) 0 0.25rem 0.2rem;
+    transition: color 0.2s, box-shadow 0.2s;
+}
+
+.sub-container:hover {
+    box-shadow: rgba(0, 0, 0, 0.2) 0 0.5rem 0.5rem;
+}
+
+.sub-container .img-container {
+    border-radius: 0.5rem;
+    width: 100%;
+    height: 14rem;
+    overflow: hidden;
+}
+
+.img-container .img-container-child {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    transition: transform 0.5s;
+}
+
+.sub-container:hover .img-container-child {
+    transform: scale(1.1);
+}
+
+hr {
+    border-width: 0 0 1px 0;
+}
+
+p {
+    text-align: justify;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+nav li {
+    display: inline-block;
+    padding: 0 0 0 1em;
+}
+
+nav a {
+    text-decoration: none;
+}
+
+nav li.active a {
+    text-decoration: underline;
+}
+
+ul.blogtoc, ul.projecttoc {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul.blogtoc li {
+    margin: 1em 0;
+}
+
+.projecttoc {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+ul.projecttoc li {
+    flex: 1 0 50%;
+}
+
+pre {
+	border-style: ridge;
+	border-color: #e0e0e0;
+    margin: 1em;
+	padding: 0.5em;
+	max-width: 100%;
+	overflow-x: scroll;
+}
+
+footer {
+    margin-top: 4em;
+    font-size: 0.8em;
+    transition: opacity 0.2s;
+}
+
+@media (max-width: 30em) {
+    nav ul {
+        float: none;
+    }
+
+    nav li {
+        display: block;
+        padding: 0;
+        margin: 0.2em 0;
+    }
+}
+
+a {
+	color: #108f10;
+    transition: color 0.2s;
+}
+
+a:hover {
+	color: #59aa59;
+}
+
+::selection {
+	color: #ffffff;
+	background: #108f10;
+}
+
+@media (prefers-color-scheme: -dark) {
+	a {
+		color: #5fe35f;
+	}
+
+	body {
+		background: #0d0d0d;
+		color: #ebebeb;
+	}
+
+	::selection {
+		color: #0d0d0d;
+		background: #5fe35f;
+	}
+
+	pre {
+		border-color: #5f5f5f;
+	}
+}