Initial commit

1 files changed, 300 insertions, 0 deletions

diff --git a/static/sass/main.scss b/static/sass/main.scss
new file mode 100644
index 0000000..5d7e9ad
--- /dev/null
+++ b/static/sass/main.scss
@@ -0,0 +1,300 @@
+/* Main style sheet for Moeka
+ * Copyright (C) 2023 Daniel Schadt
+ *
+ *  This program is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  This program is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ *  GNU General Public License for more details.
+ *
+ *  You should have received a copy of the GNU General Public License
+ *  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+$font-prefix: '../fonts' !default;
+@import "plex/ibm-plex.scss";
+
+$link-color: #35317A;
+$link-hover-color: #0C00E0;
+$primary-color: #292933;
+$muted-color: #5e5e5e;
+
+$tag-background-color: #CBE6FA;
+$tag-background-hover-color: #CC3948;
+$tag-hover-color: #CBE6FA;
+
+$spacing: 30px;
+$social-icon-size: 32px;
+
+$breakpoint: 1150px;
+
+/* General typographic improvements. */
+a {
+  text-decoration: none;
+  font-style: italic;
+  color: $link-color;
+
+  &:hover {
+    color: $link-hover-color;
+  }
+}
+body {
+  hyphens: auto;
+}
+
+/* Font selection */
+body {
+  font-family: "IBM Plex Sans", sans-serif;
+}
+pre, code, tt {
+  font-family: "IBM Plex Mono", monospace;
+}
+
+/* Main content styling */
+#mainArea {
+  font-size: 15pt;
+  padding-top: $spacing;
+}
+.topmost {
+  margin-top: 0px;
+}
+h1.topmost {
+  text-align: center;
+}
+
+/* Styling for the article list */
+.article-list {
+  .article-meta {
+    margin-top: 0;
+    margin-bottom: 5px;
+    color: $muted-color;
+    font-size: 13pt;
+  }
+
+  h1 {
+    font-size: 25pt;
+    /* There is enough margin around the paragraphs */
+    margin: 0;
+    a {
+      color: $primary-color;
+      font-style: normal;
+      &:hover {
+        color: $link-hover-color;
+      }
+    }
+  }
+
+  .read-more-link {
+    display: block;
+    text-align: right;
+  }
+
+  article {
+    margin-bottom: 100px;
+  }
+}
+
+/* Styling for a single article */
+.article {
+  .article-meta {
+    margin-top: 0;
+    color: $muted-color;
+    text-align: center;
+    font-size: 13pt;
+  }
+
+  h1 {
+    text-align: center;
+    font-size: 30pt;
+    margin-bottom: 10px;
+  }
+
+  .content {
+    line-height: 1.4;
+  }
+
+  code, tt {
+    font-weight: 350;
+  }
+
+  img {
+    display: block;
+    margin: 0 auto;
+  }
+}
+
+/* Styling for a page (reuses a lot of the article style) */
+.page h1 {
+  margin-top: 0;
+}
+
+/* Styling for article tags */
+ul.tags {
+  list-style-type: none;
+  padding-left: 0;
+  font-size: 12pt;
+  li {
+    display: inline-block;
+    margin-right: 5px;
+  }
+  a {
+    font-style: normal;
+    display: inline-block;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background-color: $tag-background-color;
+    &:hover {
+      color: $tag-hover-color;
+      background-color: $tag-background-hover-color;
+    }
+  }
+}
+
+/* Special code block handling */
+.highlight {
+  padding: 10px;
+  font-size: 12pt;
+  border-radius: 4px;
+  pre {
+    margin: 0;
+    width: 100%;
+    overflow: scroll;
+  }
+}
+.literal-block {
+  padding: 10px;
+  font-size: 12pt;
+  border-radius: 4px;
+  background-color: #272822;
+  color: #f8f8f2;
+  overflow: scroll;
+}
+
+/* Blockquotes */
+blockquote {
+  margin: 0;
+  font-size: 14pt;
+  font-weight: 350;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+/* Side menu styling */
+#sideBanner {
+  #mainTitle {
+    font-size: 20pt;
+    font-weight: bold;
+  }
+  a {
+    color: $primary-color;
+    font-style: normal;
+    &:hover {
+      color: $link-hover-color;
+    }
+  }
+  font-size: 15pt;
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+    li a {
+      padding-bottom: 10px;
+      display: block;
+    }
+  }
+}
+
+/* Footer styles */
+footer {
+  margin-top: 40px;
+  text-align: center;
+  font-size: 12pt;
+  color: $muted-color;
+  p {
+    margin: 5px 0;
+  }
+  .icons {
+    margin-bottom: 40px;
+  }
+}
+div.social-icon {
+  display: inline-block;
+  width: $social-icon-size;
+  height: $social-icon-size;
+  margin-right: calc($spacing / 2);
+}
+img.social-icon {
+  width: 100%;
+  margin: auto;
+}
+#licenceLine {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+}
+.cc-icon {
+  height: 20px;
+  margin-right: 5px;
+}
+
+/* Main layout for big screens */
+@media (min-width: $breakpoint) {
+  #openSideBanner {
+    display: none;
+  }
+  #hideMenu {
+    display: none;
+  }
+  #sideBanner {
+    max-width: 20%;
+    position: fixed;
+    padding-top: $spacing;
+    padding-left: $spacing;
+  }
+}
+
+#mainArea {
+  max-width: 35em;
+  margin: 0 auto;
+}
+
+/* Style for small screens */
+@media (max-width: $breakpoint) {
+  #openSideBanner {
+    position: absolute;
+    top: 0;
+    width: 95%;
+    margin: 0 auto;
+    img {
+      position: absolute;
+      top: $spacing;
+      right: $spacing;
+    }
+  }
+  #sideBanner {
+    position: absolute;
+    text-align: center;
+    background-color: white;
+    width: 95%;
+    margin: 0 auto;
+    z-index: 100;
+    transform: translateY(-100%);
+    transition: transform 0.2s ease;
+    top: 0;
+    &:target {
+      transform: translateY(0);
+    }
+    #hideMenu {
+      position: absolute;
+      top: $spacing;
+      right: $spacing;
+    }
+  }
+  #mainArea {
+    max-width: 35em;
+  }
+}