From 4334596d4bebc9a76f5ca8400813847eef5b3bb7 Mon Sep 17 00:00:00 2001
From: Freya Murphy <freya@freyacat.org>
Date: Fri, 20 Dec 2024 04:15:58 -0500
Subject: rework styles with scss

---
 src/scss/common.scss | 600 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 600 insertions(+)
 create mode 100644 src/scss/common.scss

(limited to 'src/scss/common.scss')

diff --git a/src/scss/common.scss b/src/scss/common.scss
new file mode 100644
index 0000000..5a570f9
--- /dev/null
+++ b/src/scss/common.scss
@@ -0,0 +1,600 @@
+@import "./variables";
+@import "./mixins";
+
+@include font-face("Helvetica Neue");
+@include font-face("Material Icons");
+@include font-face("Facebook");
+@include font-face("SF Pro");
+
+* {
+  box-sizing: border-box;
+}
+
+hr {
+  color: $surface2;
+  background: $surface2;
+  width: 100%;
+  height: 1px;
+  border: none;
+}
+
+a,
+input,
+button {
+  background: none;
+  border: none;
+  color: inherit;
+}
+
+a,
+button {
+  cursor: pointer;
+}
+
+html {
+  color: $text;
+  font-family: $font;
+  font-size: $font-size;
+  background: $surface0;
+
+  .subtext {
+    color: $subtext;
+  }
+}
+
+html,
+body {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+header#header {
+  height: $header-height;
+  background: $surface0;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 $inner-gap;
+  border-bottom: 1px solid $surface1;
+  z-index: $header-z-index;
+
+  .left,
+  .center,
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+  }
+
+  .left {
+    .logo {
+      font-family: $header-font;
+      color: $blue;
+      font-size: 2.25em;
+      height: 100%;
+      line-height: 2rem;
+      margin-top: $inner-gap;
+    }
+  }
+
+  .center {
+    position: absolute;
+    height: 100%;
+    left: 50%;
+    top: 0;
+    transform: translateX(-50%);
+    justify-content: center;
+  }
+
+  .right {
+    justify-content: flex-end;
+
+    > .pfp {
+      padding: 0;
+    }
+
+    #user-menu {
+      position: fixed;
+      right: $inner-gap;
+      top: $header-height + $inner-gap;
+      min-width: fit-content;
+      width: 20em;
+      animation: fadeIn .1s, slideIn .1s linear;
+
+      .user-menu-header {
+        align-items: center;
+
+        .pfp {
+          margin-right: $inner-gap;
+        }
+      }
+
+      .btn {
+        justify-content: flex-start;
+      }
+    }
+  }
+
+}
+
+@media (min-width: 800px) {
+  header#header {
+    .center {
+      .btn {
+        padding: 0 3rem;
+        height: 100%;
+
+        > span {
+          display: none;
+        }
+      }
+    }
+
+    .right {
+      #action-hamburger {
+        display: none;
+      }
+    }
+  }
+}
+
+@media (max-width: 800px) {
+  header#header {
+    .center {
+      display: none;
+      position: absolute;
+      flex-direction: column;
+      top: 100%;
+      height: fit-content;
+      background-color: $surface0;
+      width: 100%;
+      left: 0;
+      transform: translateX(0%);
+      justify-content: flex-start;
+
+      &.visible {
+        display: inherit !important;
+      }
+
+      .btn {
+        width: 100%;
+        padding: $inner-gap 0;
+        padding-left: 3rem;
+        justify-content: flex-start;
+
+        > span {
+          margin-left: $inner-gap;
+        }
+
+        &.btn-border {
+          ::before {
+            background: inherit;
+          }
+        }
+      }
+    }
+  }
+}
+
+main#main {
+  background: $base;
+  padding-top: $inner-gap;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+footer#footer {
+  text-align: center;
+  padding: $inner-gap;
+  color: $subtext;
+  font-size: $font-size-small;
+}
+
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  text-align: center;
+  border-radius: $inner-radius;
+  font-weight: bold;
+  text-decoration: none;
+  padding: $inner-gap * 0.5;
+
+  &:hover {
+    background: $surface1;
+  }
+
+  &.btn-alt {
+    background: $surface1;
+
+    &:hover {
+      background: $surface2;
+    }
+  }
+
+  &.btn-primary {
+    color: $blue-alt;
+
+    &.btn-alt {
+      background: $blue;
+      color: $white;
+
+      &:hover {
+        background: $blue-alt;
+      }
+    }
+  }
+
+  &.btn-success,
+  &.btn-submit {
+    color: $green-alt;
+
+    &.btn-alt {
+      background: $green;
+      color: $white;
+
+      &:hover {
+        background: $green-alt;
+      }
+    }
+  }
+
+  &.btn-blend {
+    font-weight: inherit;
+
+    &:hover {
+      background: inherit !important;
+      text-decoration: underline;
+    }
+  }
+
+  &.btn-border {
+    ::before {
+      position: absolute;
+      content: "";
+      display: block;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: $blue-alt;
+    }
+  }
+}
+
+.image {
+  display: block;
+
+  .inner {
+    width: 100%;
+    height: 100%;
+    display: inherit;
+    border-radius: inherit;
+  }
+
+  &.pfp {
+    height: 2.5em;
+    aspect-ratio: 1;
+    border-radius: 100%;
+  }
+}
+
+/* fix banner on profile pages */
+object.inner {
+  pointer-events: none;
+}
+
+/* loading animation*/
+.loading {
+  background: linear-gradient(-45deg, $surface0) 0%, var(--base) 25%, var(--surface0) 50%;
+  background-size: 500%;
+  background-position-x: 150%;
+}
+
+/* loaded bg to fix transparent images */
+.loaded {
+  background-color: $base;
+}
+
+.card {
+  background-color: $surface0;
+  border-radius: $outer-radius;
+  padding: $inner-gap;
+  max-width: $content-width;
+  margin-bottom: $outer-gap;
+
+  p {
+    margin-bottom: 0;
+  }
+
+  form {
+    flex-grow: 1;
+  }
+
+  .sub-card {
+    background-color: $surface1;
+    border-radius: $inner-radius;
+    padding: $inner-inner-gap;
+  }
+}
+
+.row {
+  @include row;
+}
+
+.col {
+  @include column;
+}
+
+.grow {
+  width: auto;
+  flex: 1;
+  flex-grow: 1;
+}
+
+.ml-sm {
+  margin-left: .5rem;
+}
+
+.ml {
+  margin-left: 1rem;
+}
+
+.mr-sm {
+  margin-right: .5rem;
+}
+
+.mr {
+  margin-right: 1rem;
+}
+
+.mt {
+  margin-top: 1rem;
+}
+
+.mb {
+  margin-bottom: .75rem;
+}
+
+.pb {
+  padding-bottom: 1rem;
+}
+
+.modal-container {
+  z-index: $modal-z-index;
+  position: fixed;
+  background: #fff2;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+
+  .modal {
+    background-color: $surface0;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    min-width: $content-width;
+    min-height: $content-width * 0.6;
+    border-radius: $outer-radius;
+    @include column;
+    animation: fadeIn .1s, slideInModal .1s linear;
+
+    .modal-header {
+      display: block;
+      position: relative;
+      border-bottom: 1px solid $surface1;
+      cursor: grab;
+      padding: $inner-gap;
+      text-align: center;
+
+      .modal-title {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        font-weight: bold;
+      }
+
+      .modal-close {
+        float: right;
+      }
+    }
+
+    .modal-content {
+      flex-grow: 1;
+      padding: 1rem;
+    }
+
+    .modal-footer {
+      margin-top: auto;
+      padding: 0 1rem;
+      padding-bottom: 1rem;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+    }
+
+
+    > form {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+    }
+  }
+}
+
+@media (max-width: $content-width) {
+  .modal-container {
+    .modal {
+      min-width: 100%;
+      width: 100%;
+    }
+  }
+}
+
+@keyframes slideInModal {
+  0% {
+    animation-timing-function: ease-in;
+    transform: translate(-50%, -60%);
+  }
+}
+
+@keyframes slideIn {
+  0% {
+    animation-timing-function: ease-in;
+    transform: translate(0, -20%);
+  }
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.float-right {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  transform: translate(-125%, -50%);
+}
+
+.mi {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-size: 1.5rem;
+}
+
+.mi-sm {
+  font-size: 1rem;
+}
+
+.mi-lg {
+  font-size: 2rem;
+}
+
+#toast-container {
+  position: fixed;
+  top: 4rem;
+  left: 100%;
+  transform: translateX(-110%);
+  margin-top: 1rem;
+  z-index: 10000;
+}
+
+.toast {
+  color: $white;
+  padding: .75rem;
+  margin: .5rem;
+  border-radius: .5rem;
+  min-width: 15rem;
+  animation: fadeIn .1s, slideIn .25s linear;
+  display: flex;
+  justify-content: space-between;
+}
+
+.toast.error {
+  background-color: $red;
+}
+
+.toast.success {
+  background-color: $green;
+}
+
+form input:not(.btn) {
+  display: block;
+  font-size: 1.1rem;
+  outline: 2px solid $surface2;
+  border-radius: .25rem;
+  padding: .75rem;
+}
+
+form input:not(.btn):focus {
+  outline-color: $blue;
+}
+
+form .rel label:not(.static) {
+  position: absolute;
+  top: 50%;
+  transform: translate(.5rem, -40%);
+  color: $subtext;
+  transition: all 0.2s ease-out;
+  pointer-events: none;
+  width: fit-content;
+  font-size: 1.1rem;
+}
+
+input:focus + label:not(.static),
+input:not(:placeholder-shown) + label:not(.static) {
+  color: $text;
+  top: 0;
+  padding: .5rem;
+  padding-top: 0;
+  font-size: .75rem;
+  transform: translate(.5rem, -25%);
+  background-color: $surface0;
+}
+
+.rel {
+  position: relative;
+}
+
+.rel input {
+  width: 100%;
+  flex-grow: 1;
+}
+
+input[type=radio] {
+  padding: 3rem !important;
+  width: 1rem !important;
+  outline: none !important;
+}
+
+.radio {
+  display: flex;
+  flex-direction: row;
+  width: auto;
+  flex-grow: 1;
+}
+
+.radio label {
+  border: 1px solid $surface2;
+  height: fit-content;
+  width: 100%;
+  padding: .75rem;
+  border-radius: .25rem;
+  cursor: pointer;
+}
+
+.radio input {
+  position: absolute;
+  top: 50%;
+  left: 100%;
+  transform: translate(-250%, -70%);
+  width: fit-content;
+  outline: none !important;
+}
+
+.container {
+  padding: 1rem;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.hidden {
+  display: none;
+}
-- 
cgit v1.2.3-freya