First commit

css/logo.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="200" height="300" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#a40000" d="M 186,188 C 184,98 34,105 47,192 C 59,279 130,296 130,296 C 130,296 189,277 186,188 z" />
+  <path fill="#ffffff" d="M 73,238 C 119,242 140,241 177,222 C 172,270 131,288 131,288 C 131,288 88,276 74,238 z" />
+  <g fill="none" stroke="#4e9a06" stroke-width="15">
+    <path d="M 103,137 C 77,69 13,62 13,62" />
+    <path d="M 105,136 C 105,86 37,20 37,20" />
+    <path d="M 105,135 C 112,73 83,17 83,17" />
+  </g>
+</svg>

css/main.scss

@@ -0,0 +1,191 @@
+---
+# Scss for Radicale
+---
+
+@charset "utf-8";
+@import url(https:\/\/fonts.googleapis.com/css?family=Oxygen:400,300);
+
+body {
+  background: #e4e9f6;
+  color: #424247;
+  display: flex;
+  flex-direction: column;
+  font-family: Oxygen, sans;
+  font-size: 14pt;
+  margin: 0;
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+}
+
+nav, footer {
+  background: #a40000;
+  color: white;
+  padding: 0 20%;
+
+  ul {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: block;
+      padding: 0 1em 0 0;
+
+      a {
+        color: inherit;
+        display: block;
+        padding: 1em 0.5em 1em 0;
+        text-decoration: inherit;
+        transition: 0.2s;
+
+        &:hover,
+        &:focus {
+          color: black;
+          outline: none;
+        }
+      }
+    }
+  }
+}
+
+header {
+  background: url(logo.svg), linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
+  background-position: 22% 45%;
+  background-repeat: no-repeat;
+  color: #efdddd;
+  font-size: 1.5em;
+  min-height: 250px;
+  overflow: auto;
+  padding: 3em 22%;
+  text-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.5);
+
+  & > * {
+    padding-left: 220px;
+  }
+
+  h1 {
+    font-size: 2.5em;
+    font-weight: lighter;
+    margin: 0.5em 0;
+  }
+}
+
+main {
+  flex: 1;
+}
+
+section {
+  padding: 0 20% 2em;
+
+  &:not(:last-child) {
+    border-bottom: 1px dashed #ccc;
+  }
+
+  h1 {
+    background: linear-gradient(to bottom right, rgba(5, 10, 2, 1), rgba(0, 0, 0, 1));
+    color: #e5dddd;
+    font-size: 2.5em;
+    margin: 0 -33.33% 1em;
+    padding: 1em 33.33%;
+  }
+
+  h2, h3, h4 {
+    font-weight: lighter;
+    margin: 1.5em 0 1em;
+  }
+}
+
+article {
+  border-top: 1px solid transparent;
+  position: relative;
+  margin: 3em 0;
+
+  aside {
+    box-sizing: border-box;
+    color: #aaa;
+    font-size: 0.8em;
+    right: -30%;
+    top: 0.5em;
+    position: absolute;
+  }
+
+  &:before {
+    border-top: 1px dashed #ccc;
+    content: '';
+    display: block;
+    left: -33.33%;
+    position: absolute;
+    right: -33.33%;
+  }
+}
+
+pre {
+  border-radius: 3px;
+  background: black;
+  color: #d3d5db;
+  margin: 0 -1em;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+@media (max-width: 800px) {
+  body {
+    font-size: 12pt;
+  }
+
+  header, section {
+    padding-left: 2em;
+    padding-right: 2em;
+  }
+
+  nav, footer {
+    padding-left: 0;
+    padding-right: 0;
+
+    ul {
+      justify-content: center;
+
+      li {
+        padding: 0 0.5em;
+
+        a {
+          padding: 1em 0;
+        }
+      }
+    }
+  }
+
+  header {
+    background-position: 50% 30px, 0 0;
+    padding-bottom: 0;
+    padding-top: 330px;
+    text-align: center;
+
+    & > * {
+      margin: 0;
+      padding-left: 0;
+    }
+  }
+
+  section h1 {
+    margin: 0 -0.8em 1.3em;
+    padding: 0.5em 0;
+    text-align: center;
+  }
+
+  article {
+    aside {
+      top: 0.5em;
+      right: -1.5em;
+    }
+
+    &:before {
+      left: -2em;
+      right: -2em;
+    }
+  }
+}