flasky flasky

static/css/_aside.scss

@@ -0,0 +1,118 @@
+@mixin aside-item($color) {
+    background-color: rgba($color, 0.1);
+    border: 1px solid rgba($color, 0.5);
+    color: $color;
+}
+
+.aside {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+
+    box-sizing: border-box;
+
+    hr {
+        margin: 0.5rem 0;
+        padding: 0;
+
+        width: 100%;
+        height: 1px;
+
+        background-color: $white;
+        border: none;
+    }
+
+    br {
+        margin: 0.5rem 0;
+        padding: 0;
+    }
+}
+.aside-container {
+    margin: 0;
+    padding: 1rem;
+
+    position: sticky;
+    top: 0;
+
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.aside-item {
+    margin: 0;
+    padding: 0.75rem;
+
+    width: 100%;
+    height: auto;
+
+    background-color: transparent;
+    color: $white;
+
+    text-decoration: none;
+
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    border: 1px solid transparent;
+    border-radius: 3px;
+
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+
+    i {
+        opacity: 0;
+        transform: translateX(1rem);
+        transition: all 0.2s ease-in-out;
+        filter: blur(0.1rem);
+
+        pointer-events: none;
+    }
+
+    &:hover i {
+        opacity: 1;
+        transform: translateX(0);
+        filter: blur(0);
+    }
+}
+.aside-red {
+    @include aside-item($red);
+}
+.aside-yellow {
+    @include aside-item($yellow);
+}
+.aside-green {
+    @include aside-item($green);
+}
+.aside-blue {
+    @include aside-item($blue);
+}
+.aside-purple {
+    @include aside-item($purple);
+}
+
+@media screen and (max-width: 768px) {
+    .aside {
+        display: block;
+
+        position: fixed;
+        top: 3rem;
+        left: -100vw;
+
+        width: calc(100vw - 1rem);
+        height: calc(100vh - 3rem);
+
+        z-index: 68;
+        overflow-y: auto;
+
+        box-shadow: 0 0 0.5rem 5px rgba($black, 0.5);
+
+        transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    }
+
+    .aside-active {
+        opacity: 1;
+        left: 0;
+    }
+}

static/css/_footer.scss

@@ -0,0 +1,25 @@
+.footer {
+    margin: 0;
+    padding: 0;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: $black;
+    color: $white;
+
+    p {
+        margin: 0;
+        padding: 0;
+
+        font-size: 0.8rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .footer {
+        background-color: $white;
+        color: $black;
+    }
+}

static/css/_nav.scss

@@ -0,0 +1,56 @@
+.nav {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+    color: $white;
+
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+
+    position: relative;
+
+    z-index: 69;
+
+    p {
+        margin: 0 1rem;
+        padding: 0;
+
+        font-size: 1rem;
+    }
+}
+.nav-toggle {
+    margin: 0;
+    padding: 0.5rem 1rem;
+
+    display: none;
+
+    background-color: transparent;
+    color: $white;
+
+    border: none;
+
+    i {
+        font-size: 1.5rem;
+
+        display: inline-block;
+
+        // display the hamburger icon vertically centered
+        line-height: 1.5rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .nav {
+        justify-content: space-between;
+
+        background-color: #121212;
+    }
+    .nav-toggle {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+}

static/css/_wrapper.scss

@@ -0,0 +1,37 @@
+.wrapper {
+    margin: 0;
+    padding: 0;
+
+    background-color: $white;
+    color: $black;
+
+    border-radius: 6px 0 0 0;
+
+    overflow: hidden;
+}
+
+.content {
+    margin: 0;
+    padding: 0.5rem;
+
+    height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+
+    position: relative;
+
+    p, .btn {
+        margin: 0;
+        padding: 0;
+
+        font-size: 1rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .wrapper {
+        border-radius: 0;
+    }
+}

static/css/scss/_grid.scss

@@ -0,0 +1,35 @@
+body {
+    min-height: 100vh;
+
+    display: grid;
+    grid-template-areas: 'aside nav'
+                        'aside wrapper'
+                        'footer wrapper';
+
+    grid-template-rows: 3rem auto 3rem;
+    grid-template-columns: 20rem 1fr;
+}
+
+.nav {
+    grid-area: nav;
+}
+.wrapper {
+    grid-area: wrapper;
+}
+.aside {
+    grid-area: aside;
+}
+.footer {
+    grid-area: footer;
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        grid-template-areas: 'nav'
+                            'wrapper'
+                            'footer';
+
+        grid-template-rows: 3rem 1fr 3rem;
+        grid-template-columns: 1fr;
+    }
+}

static/css/scss/_normalize.scss

@@ -0,0 +1,32 @@
+* {
+    box-sizing: border-box;
+
+    font-family: $font-header;
+    font-weight: 400;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+    color: $white;
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    min-height: 100vh;
+
+    background-color: $black;
+
+    scroll-behavior: smooth;
+}

static/css/scss/_variables.scss

@@ -0,0 +1,44 @@
+$black: #151515;
+$white: #e8e3e3;
+
+$red: #B66467;
+$yellow: #D9BC8C;
+$green: #8C977D;
+$blue: #8DA3B9;
+//$dblue: #222c45;
+$purple: #A988B0;
+
+$primary: $green;
+
+@font-face {
+    font-family: 'Mona-Sans';
+    src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+@font-face {
+    font-family: 'Hubot-Sans';
+    src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
+$font-header: "Mona-Sans", sans-serif;
+$font-body: "Hubot-Sans", sans-serif;
+
+@function hexToRGB($hex) {
+    @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+    --red: #{hexToRGB($red)};
+    --yellow: #{hexToRGB($yellow)};
+    --green: #{hexToRGB($green)};
+    --blue: #{hexToRGB($blue)};
+    --purple: #{hexToRGB($purple)};
+}
+
+// I want to use this somewhere
+//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%);

static/css/style.css

@@ -0,0 +1,350 @@
+@font-face {
+  font-family: "Mona-Sans";
+  src: url("../fonts/Mona-Sans.woff2") format("woff2 supports variations"), url("../fonts/Mona-Sans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+@font-face {
+  font-family: "Hubot-Sans";
+  src: url("../fonts/Hubot-Sans.woff2") format("woff2 supports variations"), url("../fonts/Hubot-Sans.woff2") format("woff2-variations");
+  font-weight: 200 900;
+  font-stretch: 75% 125%;
+}
+:root {
+  --red: 182, 100, 103;
+  --yellow: 217, 188, 140;
+  --green: 140, 151, 125;
+  --blue: 141, 163, 185;
+  --purple: 169, 136, 176;
+}
+
+body {
+  min-height: 100vh;
+  display: grid;
+  grid-template-areas: "aside nav" "aside wrapper" "footer wrapper";
+  grid-template-rows: 3rem auto 3rem;
+  grid-template-columns: 20rem 1fr;
+}
+
+.nav {
+  grid-area: nav;
+}
+
+.wrapper {
+  grid-area: wrapper;
+}
+
+.aside {
+  grid-area: aside;
+}
+
+.footer {
+  grid-area: footer;
+}
+
+@media screen and (max-width: 768px) {
+  body {
+    grid-template-areas: "nav" "wrapper" "footer";
+    grid-template-rows: 3rem 1fr 3rem;
+    grid-template-columns: 1fr;
+  }
+}
+* {
+  box-sizing: border-box;
+  font-family: "Mona-Sans", sans-serif;
+  font-weight: 400;
+}
+
+html {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  color: #e8e3e3;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+html ::-webkit-scrollbar {
+  display: none;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+  background-color: #151515;
+  scroll-behavior: smooth;
+}
+
+.nav {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  color: #e8e3e3;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  position: relative;
+  z-index: 69;
+}
+.nav p {
+  margin: 0 1rem;
+  padding: 0;
+  font-size: 1rem;
+}
+
+.nav-toggle {
+  margin: 0;
+  padding: 0.5rem 1rem;
+  display: none;
+  background-color: transparent;
+  color: #e8e3e3;
+  border: none;
+}
+.nav-toggle i {
+  font-size: 1.5rem;
+  display: inline-block;
+  line-height: 1.5rem;
+}
+
+@media screen and (max-width: 768px) {
+  .nav {
+    justify-content: space-between;
+    background-color: #121212;
+  }
+  .nav-toggle {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+.aside {
+  margin: 0;
+  padding: 0;
+  background-color: #151515;
+  box-sizing: border-box;
+}
+.aside hr {
+  margin: 0.5rem 0;
+  padding: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #e8e3e3;
+  border: none;
+}
+.aside br {
+  margin: 0.5rem 0;
+  padding: 0;
+}
+
+.aside-container {
+  margin: 0;
+  padding: 1rem;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.aside-item {
+  margin: 0;
+  padding: 0.75rem;
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  color: #e8e3e3;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.aside-item i {
+  opacity: 0;
+  transform: translateX(1rem);
+  transition: all 0.2s ease-in-out;
+  filter: blur(0.1rem);
+  pointer-events: none;
+}
+.aside-item:hover i {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+.aside-red {
+  background-color: rgba(182, 100, 103, 0.1);
+  border: 1px solid rgba(182, 100, 103, 0.5);
+  color: #B66467;
+}
+
+.aside-yellow {
+  background-color: rgba(217, 188, 140, 0.1);
+  border: 1px solid rgba(217, 188, 140, 0.5);
+  color: #D9BC8C;
+}
+
+.aside-green {
+  background-color: rgba(140, 151, 125, 0.1);
+  border: 1px solid rgba(140, 151, 125, 0.5);
+  color: #8C977D;
+}
+
+.aside-blue {
+  background-color: rgba(141, 163, 185, 0.1);
+  border: 1px solid rgba(141, 163, 185, 0.5);
+  color: #8DA3B9;
+}
+
+.aside-purple {
+  background-color: rgba(169, 136, 176, 0.1);
+  border: 1px solid rgba(169, 136, 176, 0.5);
+  color: #A988B0;
+}
+
+@media screen and (max-width: 768px) {
+  .aside {
+    display: block;
+    position: fixed;
+    top: 3rem;
+    left: -100vw;
+    width: calc(100vw - 1rem);
+    height: calc(100vh - 3rem);
+    z-index: 68;
+    overflow-y: auto;
+    box-shadow: 0 0 0.5rem 5px rgba(21, 21, 21, 0.5);
+    transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
+  }
+  .aside-active {
+    opacity: 1;
+    left: 0;
+  }
+}
+.wrapper {
+  margin: 0;
+  padding: 0;
+  background-color: #e8e3e3;
+  color: #151515;
+  border-radius: 6px 0 0 0;
+  overflow: hidden;
+}
+
+.content {
+  margin: 0;
+  padding: 0.5rem;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+}
+.content p, .content .btn {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 768px) {
+  .wrapper {
+    border-radius: 0;
+  }
+}
+.footer {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #151515;
+  color: #e8e3e3;
+}
+.footer p {
+  margin: 0;
+  padding: 0;
+  font-size: 0.8rem;
+}
+
+@media screen and (max-width: 768px) {
+  .footer {
+    background-color: #e8e3e3;
+    color: #151515;
+  }
+}
+h1 {
+  margin: 0;
+  padding: 0;
+  font-size: 2rem;
+  text-align: center;
+  font-weight: 600;
+}
+
+h2 {
+  margin: 0;
+  padding: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
+h3 {
+  margin: 0;
+  padding: 0;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.title {
+  margin: 0;
+  padding: 2rem 0;
+  position: relative;
+}
+.title img {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  filter: grayscale(100%);
+  transition: all 0.2s ease-in-out;
+}
+.title img:hover {
+  filter: grayscale(0%);
+}
+
+.btn {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: auto;
+  background-color: transparent;
+  color: #e8e3e3;
+  text-decoration: none;
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 0.5rem;
+  border: none;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+}
+.btn i {
+  opacity: 0;
+  transform: translateX(1rem);
+  transition: all 0.2s ease-in-out;
+  filter: blur(0.1rem);
+}
+.btn:hover i {
+  opacity: 1;
+  transform: translateX(0);
+  filter: blur(0);
+}
+
+#funny {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}/*# sourceMappingURL=style.css.map */

static/css/style.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["scss/_variables.scss","style.css","scss/_grid.scss","scss/_normalize.scss","_nav.scss","_aside.scss","_wrapper.scss","_footer.scss","style.scss"],"names":[],"mappings":"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","file":"style.css"}

static/css/style.scss

@@ -0,0 +1,102 @@
+@import 'scss/variables';
+@import 'scss/grid';
+
+@import 'scss/normalize';
+
+@import 'nav';
+@import 'aside';
+@import 'wrapper';
+@import 'footer';
+
+h1 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 2rem;
+    text-align: center;
+    font-weight: 600;
+}
+
+h2 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+h3 {
+    margin: 0;
+    padding: 0;
+
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.title {
+    margin: 0;
+    padding: 2rem 0;
+
+    position: relative;
+
+    img {
+        width: 100%;
+        height: 100%;
+
+        object-fit: cover;
+
+        filter: grayscale(100%);
+
+        transition: all 0.2s ease-in-out;
+
+        &:hover {
+            filter: grayscale(0%);
+        }
+    }
+}
+
+.btn {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: auto;
+
+    background-color: transparent;
+    color: $white;
+
+    text-decoration: none;
+
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    gap: 0.5rem;
+
+    border: none;
+
+    transition: all 0.2s ease-in-out;
+    cursor: pointer;
+
+    i {
+        opacity: 0;
+        transform: translateX(1rem);
+        transition: all 0.2s ease-in-out;
+        filter: blur(0.1rem);
+    }
+
+    &:hover {
+        i {
+            opacity: 1;
+            transform: translateX(0);
+            filter: blur(0);
+        }
+    }
+}
+
+#funny {
+    margin: 0;
+    padding: 0;
+
+    width: 100%;
+    height: 100%;
+}