Initial commit

2025-10-02 17:01:55 +02:00 · 2025-10-02 17:01:55 +02:00 · f48cdc268b
commit f48cdc268b
31 changed files with 628 additions and 0 deletions
--- a/custom/styles/base.css
+++ b/custom/styles/base.css
@ -0,0 +1,172 @@
+/* MINIMAL CSS RESET*/
+* { margin-bottom: 0; }
+
+/* VARIABLES */
+:root {
+  --font-body: Roboto, sans-serif;
+  --font-heading: "PT serif", Georgia, "Nimbus Roman", serif;
+  --color-blue: #6391b5;
+  --color-blue: oklch(0.6376 0.0739 242.84);
+  --color-green: #009c80;
+  --color-green: oklch(0.618 0.1176 173.93);
+  --color-green-light: #f2fbf8;
+  --color-green-light: oklch(0.9811 0.01 173.93);
+  --color-grey: #404040;
+  --color-grey: oklch(0.3715 0 0);
+}
+
+/* GLOBAL */
+html { font-family: var(--font-body); font-size: clamp(16px, 2.3vw, 20px); scroll-behavior: smooth; }
+body { margin: 0; color: var(--color-grey) }
+p, ul { line-height: 1.5em; hyphens: auto }
+img { max-width: 100%; height: auto; }
+h1 { color: var(--color-green); font-size: 2.3rem }
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading);
+  font-weight: 400;
+  line-height: 1.3em;
+  margin-top: 1.3em;
+  text-wrap: pretty;
+}
+a {
+    color: var(--color-green);
+    text-decoration: none;
+    &:hover { color: var(--color-blue) }
+}
+
+.grid-container {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 1fr;
+  grid-template-areas: "header" "main" "footer";
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  min-height: 100vh;
+  align-items: stretch;
+}
+
+.contain, :where(main>article) {
+  display: grid;
+  grid-template-columns: minmax(.4rem, 1fr) minmax(0, 42rem) minmax(.3rem, 1fr);
+  > * {
+    grid-column: 2;
+  }
+}
+
+.escape {
+  grid-column: 1 / -1 !important;
+}
+
+/* HEADER */
+header {
+  border-bottom: 3px #00000022 solid;
+  grid-area: header;
+  > div {
+    padding-bottom: .2rem;
+    display: flex;
+    .logo {
+      margin-right: .3rem;
+      svg {
+        width: 7rem;
+        height: 100%;
+        #symbol {
+          fill: var(--color-blue);
+        }
+        #tekst {
+          fill: var(--color-green);
+        }
+      }
+    }
+
+    nav {
+      display:flex;
+      align-items: center;
+      justify-content:flex-end;
+      flex: 1;
+      ul {
+        display: flex;
+        list-style: none;
+        flex-wrap: wrap;
+        margin-top: .4rem;
+        padding: 0;
+        justify-content: flex-end;
+        /* align-self: end; */
+        a {
+          text-decoration: none;
+          color: white;
+          border-radius: 1rem;
+          background-color: var(--color-grey);
+          padding: 0.35rem 1rem;
+          margin-left:0.4rem;
+          margin-top:0.4rem;
+          &:hover, &.active {
+            background-color: var(--color-green);
+            color: white;
+          }
+          &:focus {
+            outline: .1rem var(--color-green) solid;
+            color: var(--color-grey);
+            background-color: white;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* MAIN */
+main {
+  grid-area: main;
+  background-color: var(--color-green-light);
+  padding-bottom: 2rem;
+
+  article {
+    margin-top: 1.3em;
+    
+    .intro {
+      font-size: 1.2rem;
+      line-height: 1.35em;
+    }
+  }
+}
+
+/* LIST VIEW */
+main > article {
+  > article {
+    background-color: white;
+    padding: 0;
+    margin-bottom: 1.5rem;
+    overflow: hidden;
+    
+    > :not(img) {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+    
+    h1 {
+      margin-top: 1rem;
+    }
+    
+    p {
+      margin-bottom: 1rem;
+    }
+  }
+}
+
+/* FOOTER  */
+
+footer {
+  color: var(--color-green-light);
+  a {
+      color: var(--color-green-light);
+      &:hover { color: white; text-decoration: underline }
+  }
+  background-color: var(--color-green);
+  grid-area: footer;
+  > div {
+    margin: 1rem 0;
+    text-align: center;
+    .generated { font-size: .6rem }
+  }
+}