refactor(directory): rewrite stylesheet with scss

2023-03-14 21:35:19 -04:00
parent 0da4337454
commit cf933d6a56
37 changed files with 526 additions and 800 deletions
--- a/directory/src/scss/_page_base.scss
+++ b/directory/src/scss/_page_base.scss
@@ -0,0 +1,151 @@
+%outline-share {
+  content: "";
+  display: block;
+  position: absolute;
+  left: -3px;
+  height: 3px;
+  width: 100%;
+  border-left: var(--text-color) solid 3px;
+  border-right: var(--text-color) solid 3px;
+}
+
+.group {
+  padding: 1rem;
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+  user-select: none;
+
+  .date {
+    margin: 1.5rem;
+    font-family: "Bender";
+    font-weight: bold;
+    text-align: right;
+    color: var(--date-color);
+    font-size: 1.5rem;
+    letter-spacing: 0.1rem;
+    flex: auto;
+    user-select: none;
+  }
+
+  .item {
+    position: relative;
+    cursor: pointer;
+    width: 180px;
+    margin: 1.25rem;
+    background-image: repeating-linear-gradient(
+      90deg,
+      var(--home-item-background-linear-gradient-color) 0,
+      var(--home-item-background-linear-gradient-color) 1px,
+      transparent 1px,
+      transparent 5px
+    );
+    .background-filler {
+      border-right: 1px solid var(--home-item-background-linear-gradient-color);
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: -1px;
+      bottom: 0;
+    }
+    .outline {
+      display: block;
+      position: absolute;
+      opacity: 0;
+      visibility: hidden;
+      transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+      width: 100%;
+      height: 100%;
+      left: -6px;
+      top: -6px;
+      border: var(--home-item-outline-color) 1px dashed;
+      padding: 6px;
+
+      &:before {
+        @extend %outline-share;
+        top: -3px;
+      }
+
+      &:after {
+        @extend %outline-share;
+        bottom: -3px;
+      }
+    }
+
+    .img {
+      height: 360px;
+      width: 100%;
+      transition: background-color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+    }
+
+    .info {
+      white-space: nowrap;
+      position: relative;
+      padding: 0.8rem 0.4rem;
+      line-height: 1.2em;
+      height: 36px;
+
+      .container {
+        color: var(--text-color-full);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 1.25rem;
+        font-weight: bold;
+        .title {
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          line-height: 1.3em;
+          height: auto;
+        }
+        .type {
+          display: flex;
+          flex-direction: row;
+          align-items: baseline;
+          text-align: center;
+          width: 1.5rem;
+          fill: var(--text-color);
+        }
+      }
+
+      .wrapper {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        color: var(--secondary-text-color);
+        .text {
+          font-size: 0.75rem;
+          font-family: "Geometos";
+          margin-top: 1rem;
+        }
+      }
+
+      .background {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        visibility: hidden;
+        transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+        background-image: linear-gradient(
+          70deg,
+          transparent 40%,
+          currentColor 150%
+        );
+      }
+    }
+
+    &:hover {
+      .img {
+        background-color: var(--home-item-hover-background-color);
+      }
+      .outline,
+      .info .background {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+}