init

assets/css/home-layout.scss

@@ -0,0 +1,150 @@
+.home-layout-container {
+  display: flex;
+  height: 100%;
+  .content.home {
+    flex: 0 0 100%;
+    margin: auto 0;
+    .about-container {
+      background: linear-gradient(
+        135deg,
+        $bg-accent-color-light 0%,
+        $bg-accent-color-dark 100%
+      );
+      padding: $base-margin-y $base-margin-x;
+    }
+    .bottom-container {
+      margin: $base-margin-y $base-margin-x;
+      .bottom-block {
+        max-width: $base-width;
+        margin: 0 auto;
+        text-align: center;
+      }
+    }
+  }
+}
+
+.home-layout-container .content.home .about-block {
+  max-width: $base-width;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  align-items: center;
+  justify-content: center;
+  gap: $base-margin-y $base-margin-x;
+  .info-container {
+    flex: 1;
+    h1 {
+      text-align: center;
+      margin-top: 0;
+    }
+    .pgp {
+      margin: 1em 0;
+      display: flex;
+      align-items: center;
+      column-gap: 0.8rem;
+      .icon {
+        height: 1.5rem;
+        width: 1.5rem;
+        color: $fg-color-semitransp;
+        &:hover {
+          color: $fg-accent-color;
+        }
+      }
+      .text {
+        color: $fg-color-dark;
+      }
+    }
+    .links {
+      display: flex;
+      justify-content: center;
+      column-gap: 1rem;
+      .icon {
+        height: 2rem;
+        width: 2rem;
+        color: $fg-color-semitransp;
+        &:hover {
+          color: $fg-accent-color;
+        }
+      }
+    }
+  }
+  .image-container {
+    flex: 0 1 30%;
+    img {
+      display: block;
+      width: 100%;
+      background: rgba(#000, 0.2);
+      border-radius: 0.5rem;
+    }
+  }
+}
+
+.home-layout-container .content.home .section-list {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  .section-item {
+    white-space: nowrap;
+    text-decoration: none;
+    &:hover {
+      color: $fg-color;
+      border: 1px solid $fg-accent-color;
+    }
+    display: block;
+    flex: 1 0 30%;
+    border: 1px solid $fg-color-semitransp;
+    border-radius: 1rem;
+    text-align: center;
+    padding: 1rem;
+    .icon {
+      height: 2.5rem;
+      width: 2.5rem;
+      vertical-align: middle;
+      color: $fg-color-semitransp;
+    }
+    .label {
+      font-size: 1.3rem;
+      vertical-align: middle;
+      margin: 0 0 0 0.5rem;
+    }
+  }
+}
+
+.home-layout-container .content.home .notice {
+  margin: $base-margin-y 0 0 0;
+  color: $fg-color-semitransp;
+}
+
+@mixin media--home-content-about_vert_top {
+  .home-layout-container .content.home .about-block {
+    .image-container {
+      flex-basis: 10rem;
+    }
+    .info-container {
+      flex-basis: 100%;
+    }
+  }
+}
+@mixin media--home-content-about_vert_middle {
+  .home-layout-container {
+    .content.home {
+      .about-container {
+        padding: $base-margin-y * 2 $base-margin-x;
+      }
+    }
+  }
+  .home-layout-container .content.home .section-list {
+    .section-item .label {
+      font-size: 1.6rem;
+    }
+  }
+}
+@mixin media--home-content-about_vert_middle_wide {
+  .home-layout-container .content.home .section-list {
+    .section-item .label {
+      font-size: 1.8rem;
+    }
+  }
+}