From 23c1f6ebff741bffb011bc98985ab27601b05a48 Mon Sep 17 00:00:00 2001
From: Ash Entwisle <ash.entwisle@protonmail.com>
Date: Tue, 20 Feb 2024 14:36:20 +0000
Subject: [PATCH] added styles

Signed-off-by: Ash Entwisle <ash.entwisle@protonmail.com>
---
 src/styles/base.scss                 |  82 ++++++++++++++++
 src/styles/colours.scss              | 108 +++++++++++++++++++++
 src/styles/components/centerbox.scss |  24 +++++
 src/styles/components/footer.scss    |  82 ++++++++++++++++
 src/styles/components/header.scss    | 105 ++++++++++++++++++++
 src/styles/components/markdown.scss  |  60 ++++++++++++
 src/styles/main.scss                 |  46 +++++++++
 src/styles/pages/404.scss            |  43 +++++++++
 src/styles/pages/index.scss          | 137 +++++++++++++++++++++++++++
 src/styles/sizes.scss                |  12 +++
 10 files changed, 699 insertions(+)
 create mode 100644 src/styles/base.scss
 create mode 100644 src/styles/colours.scss
 create mode 100644 src/styles/components/centerbox.scss
 create mode 100644 src/styles/components/footer.scss
 create mode 100644 src/styles/components/header.scss
 create mode 100644 src/styles/components/markdown.scss
 create mode 100644 src/styles/main.scss
 create mode 100644 src/styles/pages/404.scss
 create mode 100644 src/styles/pages/index.scss
 create mode 100644 src/styles/sizes.scss

diff --git a/src/styles/base.scss b/src/styles/base.scss
new file mode 100644
index 0000000..857c380
--- /dev/null
+++ b/src/styles/base.scss
@@ -0,0 +1,82 @@
+@import 'colours.scss';
+
+main {
+  width: $size-main-w;
+  min-height: 70vh;
+
+  background-color: $col-bg-default;
+
+  padding-top: 50px;
+  padding-bottom: 50px;
+  padding-left: 5%;
+  padding-right: 5%;
+}
+
+h1 {
+  font-size: 1.3em;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.25em;
+  font-weight: 500;
+}
+
+h3 {
+  font-size: 1.15em;
+  font-weight: 500;
+}
+
+h4 {
+  font-size: 1.1em;
+  font-weight: 400;
+}
+
+h5 {
+  font-size: 1.0em;
+  font-weight: 400;
+}
+
+h6 {
+  font-size: 0.9em;
+  font-weight: 400;
+}
+
+p {
+  font-size: 0.9em;
+  font-weight: 300;
+}
+
+a {
+  // font-size: 0.9em;
+  // font-weight: 300;
+
+  color: $col-fg-accent;
+
+  transition: color 0.1s;
+
+  text-decoration: underline;
+  text-decoration-style: wavy;
+  
+  transition: text-decoration-style 0.1s;
+
+  // on hover, make line straight in 0.1s 
+  &:hover {
+    text-decoration-style: solid;
+    transition: text-decoration-style 0.1s;
+
+    color: $col-light-5;
+    transition: color 0.1s;
+  }
+
+  // on click, remove the underline and change to white
+  &:active {
+    text-decoration: none;
+    color: $col-mono-1;
+  }
+}
+
+span {
+  font-size: 0.9em;
+  font-weight: 300;
+}
\ No newline at end of file
diff --git a/src/styles/colours.scss b/src/styles/colours.scss
new file mode 100644
index 0000000..0ab2ba9
--- /dev/null
+++ b/src/styles/colours.scss
@@ -0,0 +1,108 @@
+// Monochrome colours
+$col-mono-1:          hsl(220,   11%,  71%);
+$col-mono-2:          hsl(220,   10%,  62%);
+$col-mono-3:          hsl(220,    8%,  54%);
+$col-mono-4:          hsl(220,    9%,  45%);
+$col-mono-5:          hsl(221,   11%,  38%);
+$col-mono-6:          hsl(219,   12%,  28%);
+$col-mono-7:          hsl(220,   13%,  18%);
+$col-mono-8:          hsl(222,   15%,  13%);
+
+// Lighter Colours
+$col-light-1:         hsl(  0,  41%,  64%);
+$col-light-2:         hsl( 33,  34%,  63%);
+$col-light-3:         hsl( 52,  38%,  67%);
+$col-light-4:         hsl(120,  20%,  66%);
+$col-light-5:         hsl(204,  49%,  68%);
+$col-light-6:         hsl(222,  67%,  70%);
+$col-light-7:         hsl(238,  43%,  66%);
+$col-light-8:         hsl(270,  42%,  64%);
+
+// Normal Colours
+$col-normal-1:        hsl(  0,  40%,  43%);
+$col-normal-2:        hsl( 33,  38%,  46%);
+$col-normal-3:        hsl( 52,  50%,  47%);
+$col-normal-4:        hsl(120,  36%,  46%);
+$col-normal-5:        hsl(204, 100%,  45%);
+$col-normal-6:        hsl(221,  34%,  39%);
+$col-normal-7:        hsl(231,  44%,  34%);
+$col-normal-8:        hsl(270,  41%,  34%);
+
+// Darker Colours
+$col-dark-1:          hsl(  0,  53%,  30%);
+$col-dark-2:          hsl( 33,  56%,  30%);
+$col-dark-3:          hsl( 52,  37%,  33%);
+$col-dark-4:          hsl(120,  37%,  35%);
+$col-dark-5:          hsl(204,  60%,  32%);
+$col-dark-6:          hsl(222,  49%,  31%);
+$col-dark-7:          hsl(230,  36%,  24%);
+$col-dark-8:          hsl(270,  36%,  26%);
+
+// pre-defined colours for UI, DARK MODE
+
+// Foreground Colours
+$col-fg-default:        $col-mono-1;
+$col-fg-muted:          $col-mono-2;
+$col-fg-subtle:         $col-mono-2;
+$col-fg-onemph:         $col-mono-1;
+
+$col-fg-accent:         $col-light-4;
+$col-fg-success:        $col-normal-4;
+$col-fg-attention:      $col-normal-2;
+$col-fg-danger:         $col-normal-1;
+$col-fg-open:           $col-normal-4;
+$col-fg-done:           $col-normal-5;
+$col-fg-closed:         $col-normal-1;
+$col-fg-done:           $col-normal-8;
+
+// Emphasis Colours
+
+$col-emph-default:      $col-mono-2;
+$col-emph-muted:        $col-mono-3;
+$col-emph-subtle:       $col-mono-3;
+$col-emph-onemph:       $col-mono-1;
+
+$col-emph-accent:       $col-normal-4;
+$col-emph-success:      $col-normal-4;
+$col-emph-attention:    $col-normal-2;
+$col-emph-danger:       $col-normal-1;
+$col-emph-open:         $col-normal-4;
+$col-emph-done:         $col-normal-5;
+$col-emph-closed:       $col-normal-1;
+$col-emph-done:         $col-normal-8;
+
+
+// Background Colours
+
+$col-bg-default:        $col-mono-7;
+$col-bg-muted:          $col-mono-8;
+$col-bg-subtle:         $col-mono-8;
+$col-bg-onemph:         $col-mono-1;
+
+$col-bg-accent:         $col-dark-4;
+$col-bg-success:        $col-dark-4;
+$col-bg-attention:      $col-dark-2;
+$col-bg-danger:         $col-dark-1;
+$col-bg-open:           $col-dark-4;
+$col-bg-done:           $col-dark-5;
+$col-bg-closed:         $col-dark-1;
+$col-bg-done:           $col-dark-8;
+
+// Border Colours
+
+$col-border-default:    $col-mono-7;
+$col-border-muted:      $col-mono-8;
+$col-border-subtle:     $col-mono-7;
+$col-border-onemph:     $col-mono-1;
+
+$col-border-accent:     $col-normal-4;
+$col-border-success:    $col-normal-4;
+$col-border-attention:  $col-normal-2;
+$col-border-danger:     $col-normal-1;
+$col-border-open:       $col-normal-4;
+$col-border-done:       $col-normal-5;
+$col-border-closed:     $col-normal-1;
+$col-border-done:       $col-normal-8;
+
+
+
diff --git a/src/styles/components/centerbox.scss b/src/styles/components/centerbox.scss
new file mode 100644
index 0000000..7147976
--- /dev/null
+++ b/src/styles/components/centerbox.scss
@@ -0,0 +1,24 @@
+.centerbox {
+  // center centerbox_content in the middle of the screen
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+
+
+  height: 100%;
+  width: 100%;
+}
+
+.centerbox_content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  // center centerbox_content in the middle of the screen
+  height: 100%;
+  width: 100%;
+
+}
diff --git a/src/styles/components/footer.scss b/src/styles/components/footer.scss
new file mode 100644
index 0000000..7995e97
--- /dev/null
+++ b/src/styles/components/footer.scss
@@ -0,0 +1,82 @@
+footer {
+
+  // center divs in the footer
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+
+  // if overflow, wrap divs
+  flex-wrap: wrap;
+
+  padding-left: 5%;
+  padding-right: 5%;
+  padding-top: 10px;
+  padding-bottom: 10px;
+
+  background-color: $col-bg-muted;
+
+  h2 {
+    text-decoration: underline;
+
+    font-size: 1.1em;
+    font-weight: 600;
+  }
+
+  .info {
+    max-width: 375px;
+  }
+
+  .copywright {
+    padding-top: 0;
+
+    span a {
+      font-size: 1em;
+      font-weight: 400;
+    }
+  }
+
+  .misc {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  div {
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+  }
+
+  p {
+    width: 85%;
+  }
+
+  .link_list {
+    ul {
+      list-style-type: disc;
+
+      font-size: 0.9em;
+      font-weight: 300;
+    }
+  }
+
+  // if less than 500px, flex to column
+  @media (max-width: 500px) {
+    flex-direction: column;
+
+    .link_list {
+      padding: 10%;
+
+      padding-top: 10px;
+      padding-bottom: 10px;
+    }
+
+    .info {
+      width: auto;
+
+      p {
+        width: 100%;
+      }
+    }
+  } 
+}
\ No newline at end of file
diff --git a/src/styles/components/header.scss b/src/styles/components/header.scss
new file mode 100644
index 0000000..bec8eb0
--- /dev/null
+++ b/src/styles/components/header.scss
@@ -0,0 +1,105 @@
+@import '../colours.scss';
+
+header {
+  height: 60px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  color: $col-mono-1;
+  background-color: $col-bg-muted;
+
+  padding-left: 5px;
+  padding-right: 5px;
+
+  .image {
+
+    img {
+      height: 50px;
+    }
+  }
+
+  .left {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    .link {
+      margin: 0 10px;
+    }
+
+    #favicon {
+      display: none;
+    }
+
+    // if less than 550px width, hide the h1
+    @media (max-width: 550px) {
+      #favicon {
+        display: block;
+      }
+
+      #full {
+        display: none;
+      
+      }
+    }
+  }
+
+  .right {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+
+    padding-right: 10px;
+
+    .link {
+      margin: 0 15px;
+    }
+
+    .link_button {
+      padding: 7.5px;
+      border-radius: 5px;
+
+      color: $col-mono-1;
+
+      font-size: 1em;
+      font-weight: 500;
+
+      text-decoration: none;
+
+      // center text
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+
+      &:hover {
+        text-decoration: underline;
+        text-decoration-style: solid;
+        text-decoration-thickness: 1.5px;
+
+        transition: text-decoration 0.1s;
+      }
+    }
+  }
+
+  // if less than 400, hide left and center the right
+  @media (max-width: 400px) {
+
+    justify-content: center;
+    align-items: center;
+
+    .left {
+      display: none;
+    }
+
+    .right {
+      justify-content: center;
+      width: 100%;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/components/markdown.scss b/src/styles/components/markdown.scss
new file mode 100644
index 0000000..7e0c856
--- /dev/null
+++ b/src/styles/components/markdown.scss
@@ -0,0 +1,60 @@
+markdown {
+
+  max-width: 700px;
+
+  h1 {
+    text-decoration: underline;
+
+    font-size: 1.5em;
+
+    padding-bottom: 5px;
+  }
+
+  h2 {
+    text-decoration: underline;
+
+    padding-top: 15px;
+    padding-bottom: 5px;
+  }
+
+  h3 {
+    text-decoration: underline;
+
+    padding-top: 10px;
+    padding-bottom: 5px;
+  }
+
+  p {
+    font-size: 0.9em;
+    font-weight: 300;
+
+    em {
+      font-style: italic;
+
+      font-size: 0.9em;
+      font-weight: 300;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+
+    padding-left: 15px;
+
+    li {
+      font-size: 0.9em;
+      font-weight: 300;
+    }
+  }
+
+  ol {
+    list-style-type: decimal;
+
+    padding-left: 30px;
+
+    li {
+      font-size: 0.9em;
+      font-weight: 300;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 0000000..81c5ed6
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,46 @@
+// Tailwind Base
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+// @import '../static/fonts.css';
+@import 'colours.scss';
+@import 'sizes.scss';
+
+// base styles
+@import 'base.scss';
+
+// Component Styles
+@import 'components/header.scss';
+@import 'components/footer.scss';
+@import 'components/centerbox.scss';
+@import 'components/markdown.scss';
+
+// Page Styles
+@import 'pages/index.scss';
+@import 'pages/404.scss';
+
+// import fonts from ash's CDN
+@import url('https://proot.zip/styles/jb-mono.css');
+@import url('https://proot.zip/styles/fa-icons.css');
+
+
+// Default Styles
+:root {
+  // Set font to urbanist, fall back to system fonts, include Font Awesome
+  font-family: 'JetBrains Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands';
+
+  font-size: 0.9em;
+  font-weight: 400;
+
+
+  // Foreground Colours
+  color: $col-fg-default;
+
+  // Background Colours
+  background-color: $col-bg-muted;
+
+  // Border Colours 
+  border-color: $col-border-default;
+
+}
\ No newline at end of file
diff --git a/src/styles/pages/404.scss b/src/styles/pages/404.scss
new file mode 100644
index 0000000..4d100cf
--- /dev/null
+++ b/src/styles/pages/404.scss
@@ -0,0 +1,43 @@
+main {
+  #error_main {
+    height: 400px;
+
+    .centerbox_content {
+      width: 40%;
+      min-width: 450px;
+    }
+
+    h1 {
+      font-size: 2em;
+      font-weight: 600;
+
+      width: 100%;
+      max-width: 600px;
+    }
+
+    p {
+      font-size: 1.15em;
+      font-weight: 400;
+    }
+
+    // if less than 500 px, set centerbox_content width to 100% and remove min-width
+    @media (max-width: 500px) {
+      height: 250px;
+
+      .centerbox_content {
+        width: 85%;
+        min-width: 0;
+      }
+
+      h1 {
+        font-size: 1.5em;
+        font-weight: 500;
+      }
+
+      h2 {
+        font-size: 1.5em;
+        font-weight: 500;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/pages/index.scss b/src/styles/pages/index.scss
new file mode 100644
index 0000000..4be21ba
--- /dev/null
+++ b/src/styles/pages/index.scss
@@ -0,0 +1,137 @@
+main {
+  #landing_main {
+      // add 5% padding to l and r
+    padding-left: 10%;
+    padding-right: 10%;
+
+    h2 {
+        text-decoration: underline;
+        padding-bottom: 10px;
+
+        font-size: 1.5em;
+        font-weight: 700;
+    }
+    .about {
+      padding-top: 200px;
+      padding-bottom: 200px;
+
+      padding-left: 5%;
+      padding-right: 5%;
+
+      h1 span {
+        text-decoration: underline;
+
+        font-size: 1.75em;
+        font-weight: 600;
+
+      }
+
+      p {
+        font-size: 1.1em;
+        font-weight: 300;
+        
+        padding-top: 10px;
+      }
+
+      @media only screen and (max-width: 1000px) {
+        padding-top: 0px;
+        padding-bottom: 25px;
+        padding-left: 0px;
+        padding-right: 0px;
+      }
+
+      // if less than 550, set h1 to 1.5em
+      @media only screen and (max-width: 550px) {
+        h1 span {
+          font-size: 1.3em;
+        }
+      }
+    }
+    .execs {
+        display: flex;
+        flex-direction: column;
+
+
+        .exec {
+            display: flex;
+            flex-direction: row;
+
+            padding-bottom: 25px;
+
+            h3 {
+              margin: 0px;
+              margin-bottom: 10px;
+
+              i {
+                font-weight: 300;
+                font-size: 0.9em;
+              }
+            }
+
+            p {
+              margin: 0px;
+            }
+
+
+            .exec-pfp {
+                // center image;
+                justify-content: center;
+                align-items: center;
+            }
+
+            img {
+
+                box-sizing: border-box;
+
+                margin-right: 25px;
+                border-radius: 20px;
+
+                min-height: 175px;
+                min-width: 175px;
+
+                max-width: 175px;
+                max-height: 175px;
+
+                background-color: $col-bg-muted;
+
+                &:hover {
+                    transition: 0.2s ease-in-out;
+                    transform: scale(1.05);
+                    border-radius: 10px;
+                }
+
+                // on not hover, transition back to normal
+                &:not(:hover) {
+                    transition: 0.1s ease-in-out;
+                    transform: scale(1);
+                    border-radius: 20px;
+                }
+            }
+
+            // if less than 800, hide exec-pfp
+            @media only screen and (max-width: 800px) {
+                .exec-pfp {
+                    display: none;
+                }
+            }
+        }
+
+    }
+
+    a {
+      font-weight: 300;
+    }
+
+    code {
+        padding-top: 1.5px;
+        padding-bottom: 1.5px;
+        padding-left: 3.5px;
+        padding-right: 3.5px;
+
+        border-radius: 5px;
+
+        background-color: $col-bg-muted;
+
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/sizes.scss b/src/styles/sizes.scss
new file mode 100644
index 0000000..9ebebaa
--- /dev/null
+++ b/src/styles/sizes.scss
@@ -0,0 +1,12 @@
+
+
+$size-header-h: 60px;
+$size-header-w: 100vw;
+
+$size-footer-h: 60px;
+$size-footer-w: 100vw;
+
+$size-main-h: calc(100vh - #{$size-header-h});
+$size-main-w: 100vw;
+
+