Get a basic blog up and running

[styx.blog] / core / templates / core / style.css

diff --git a/core/templates/core/style.css b/core/templates/core/style.css
new file mode 100644 (file)
index 0000000..d208566
--- /dev/null
+++ b/core/templates/core/style.css
@@ -0,0 +1,114 @@
+html { height: 100%; font-family: "Lucida Grande", Verdana, Arial, sans-serif;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0;
+  font-family: Palatino, serif;
+}
+
+time {
+  font-family: Verdana, sans-serif;
+}
+
+p {
+  line-height: 1.8;
+  margin-bottom: 1.2rem;
+}
+
+p:last-child {
+  margin-bottom: 0;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin: 0;
+  min-height: 100%;
+}
+
+body > header {
+  margin: 5rem 0;
+}
+
+body > header > h1 {
+  font-size: 5rem;
+}
+
+body > nav {
+  margin-bottom: 4rem;
+}
+
+body > main {
+  width: calc(100% - 4rem);
+  max-width: 40rem;
+  min-height: 100%;
+}
+
+body > footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  margin: 5rem 0;
+}
+
+body > footer .licenses {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+body > footer .licenses > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  margin-left: 1rem;
+}
+
+body > footer .licenses > div > span:not(:first-child) {
+  margin-top: 1rem;
+}
+
+article {
+  display: flex;
+  flex-direction: column;
+
+  margin: 2.5rem 0;
+}
+
+article h1 a,
+article h1 a:visited {
+  text-decoration: none;
+}
+
+article h1 a:hover,
+article h1 a:active{
+  text-decoration: underline;
+}
+
+article h1 {
+  font-size: 2rem;
+}
+
+article a.read-more {
+  margin-top: 1rem;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color: #dfdede;
+    background: #121212;
+  }
+
+  a {
+    color: #dfdede;
+  }
+
+  article.teaser:not(:first-of-type) {
+    border-top: 1px solid #dfdddd;
+  }
+}