minearm-website 0.0.3-beta.2

package/src/styles/blog/blog.scss

@@ -0,0 +1,124 @@
+.post-header {
+  user-select: none;
+
+  font-family: var(--heading-font-family-zh);
+
+  .post-info {
+    .post-title {
+      text-align: center;
+
+      transition: 0.3s ease;
+
+      color: var(--font-white-black);
+
+      font-size: 50px;
+    }
+
+    .post-metas {
+      display: flex;
+
+      align-items: center;
+
+      flex-direction: column;
+
+      .post-meta {
+        display: flex;
+
+        margin: 0.3rem 0;
+
+        .meta-icon {
+          margin: 0 0.3rem;
+
+          transition: 0.3s ease;
+
+          color: var(--font-white-black);
+
+          font-size: 18px;
+        }
+      }
+    }
+  }
+}
+
+.post-container {
+  display: flex;
+
+  flex-grow: 1;
+
+  justify-content: center;
+
+  width: 100%;
+
+  margin-top: 2rem;
+
+  .post-main {
+    order: 2;
+
+    max-width: 1100px;
+
+    width: 100%;
+
+    margin: 1rem 1rem;
+
+    padding: 1rem 2rem;
+
+    border-radius: 15px;
+
+    background: var(--card-background);
+
+    @include card-style();
+  }
+
+  .post-aside {
+    order: 1;
+  }
+}
+
+.post-comment {
+  margin-top: 1rem;
+  .comment-head {
+    display: flex;
+
+    align-items: center;
+
+    font-family: var(--heading-font-family-zh);
+
+    font-size: 30px;
+
+    .comment-icon {
+      margin-top: 4px;
+
+      margin-right: 5px;
+    }
+  }
+
+  .comment-wrap {
+    margin-top: 1rem;
+  }
+}
+
+[data-theme="dark"] {
+  .post-header {
+    animation: darken 0.3s linear;
+
+    filter: brightness(0.8);
+  }
+}
+
+@media screen and (width <= 1400px) {
+  .post-container {
+    .post-main {
+      margin: 0.5rem;
+    }
+    .post-aside {
+      margin: 0.5rem;
+    }
+  }
+}
+@media screen and (width <= 900px) {
+  .post-container {
+    .post-aside {
+      display: none;
+    }
+  }
+}

package/src/styles/blog/code.scss

@@ -0,0 +1,111 @@
+[data-theme="dark"]:root {
+  --astro-code-color-background: #1f2430;
+
+  --astro-code-color-text: #cccac2;
+
+  --astro-code-token-constant: #dfbfff;
+
+  --astro-code-token-string: #d5ff80;
+
+  --astro-code-token-comment: #b8cfe6;
+
+  --astro-code-token-keyword: #ffad66;
+
+  --astro-code-token-parameter: #695380;
+
+  --astro-code-token-function: #ffcb6f;
+
+  --astro-code-token-string-expression: #5ccfe6;
+
+  --astro-code-token-punctuation: #cccac2;
+
+  --astro-code-token-link: #87d96c;
+
+  --astro-code-color-ansi-black: #000000;
+
+  --astro-code-color-ansi-black-dim: #00000080;
+
+  --astro-code-color-ansi-red: #bb0000;
+
+  --astro-code-color-ansi-red-dim: #bb000080;
+
+  --astro-code-color-ansi-green: #00bb00;
+
+  --astro-code-color-ansi-green-dim: #00bb0080;
+
+  --astro-code-color-ansi-yellow: #bbbb00;
+
+  --astro-code-color-ansi-yellow-dim: #bbbb0080;
+
+  --astro-code-color-ansi-blue: #0000bb;
+
+  --astro-code-color-ansi-blue-dim: #0000bb80;
+
+  --astro-code-color-ansi-magenta: #ff00ff;
+
+  --astro-code-color-ansi-magenta-dim: #ff00ff80;
+
+  --astro-code-color-ansi-cyan: #00bbbb;
+
+  --astro-code-color-ansi-cyan-dim: #00bbbb80;
+
+  --astro-code-color-ansi-white: #eeeeee;
+
+  --astro-code-color-ansi-white-dim: #eeeeee80;
+
+  --astro-code-color-ansi-bright-black: #555555;
+
+  --astro-code-color-ansi-bright-black-dim: #55555580;
+
+  --astro-code-color-ansi-bright-red: #ff5555;
+
+  --astro-code-color-ansi-bright-red-dim: #ff555580;
+
+  --astro-code-color-ansi-bright-green: #00ff00;
+
+  --astro-code-color-ansi-bright-green-dim: #00ff0080;
+
+  --astro-code-color-ansi-bright-yellow: #ffff55;
+
+  --astro-code-color-ansi-bright-yellow-dim: #ffff5580;
+
+  --astro-code-color-ansi-bright-blue: #5555ff;
+
+  --astro-code-color-ansi-bright-blue-dim: #5555ff80;
+
+  --astro-code-color-ansi-bright-magenta: #ff55ff;
+
+  --astro-code-color-ansi-bright-magenta-dim: #ff55ff80;
+
+  --astro-code-color-ansi-bright-cyan: #55ffff;
+
+  --astro-code-color-ansi-bright-cyan-dim: #55ffff80;
+
+  --astro-code-color-ansi-bright-white: #ffffff;
+
+  --astro-code-color-ansi-bright-white-dim: #ffffff80;
+}
+
+[data-theme="light"]:root {
+  --astro-code-color-background: #fdfdfd;
+
+  --astro-code-color-text: #8a9199;
+
+  --astro-code-token-constant: #a37acc;
+
+  --astro-code-token-string: #86b300;
+
+  --astro-code-token-comment: #787b8099;
+
+  --astro-code-token-keyword: #fa8d3e;
+
+  --astro-code-token-parameter: #9f40ffcc;
+
+  --astro-code-token-function: #f2ae49;
+
+  --astro-code-token-string-expression: #55b4d4;
+
+  --astro-code-token-punctuation: #5c6166;
+
+  --astro-code-token-link: #6cbf43;
+}

package/src/styles/blog/directives.scss

@@ -0,0 +1,356 @@
+@import "../mixin.scss";
+.post-main {
+  .dir-link {
+    display: inline-flex;
+
+    align-items: center;
+
+    width: 360px;
+
+    height: 90px;
+
+    margin: 1rem auto;
+
+    padding: 5px;
+
+    border-radius: 10px;
+
+    @include card-style();
+
+    &:hover {
+      filter: brightness(0.8);
+    }
+    .dir-link-logo-wrap {
+      display: flex;
+
+      align-items: center;
+
+      justify-content: center;
+
+      width: 90px;
+
+      height: 90px;
+
+      .dir-link-logo {
+        width: 60px;
+
+        height: 60px;
+
+        border-radius: 50%;
+      }
+    }
+    .dir-link-content {
+      display: flex;
+
+      flex-direction: column;
+
+      justify-content: space-between;
+
+      width: 245px;
+
+      color: var(--font-black-white);
+
+      .dir-link-header {
+        padding-bottom: 5px;
+
+        border-bottom: 1px solid var(--border-light-grey);
+
+        font-size: 22px;
+
+        font-weight: bold;
+      }
+      .dir-link-desc {
+        overflow: hidden;
+
+        padding-top: 5px;
+
+        white-space: nowrap;
+
+        text-overflow: ellipsis;
+
+        font-size: 16px;
+      }
+    }
+  }
+
+  .dir-links {
+    display: flex;
+
+    flex-wrap: wrap;
+
+    max-width: 100%;
+
+    padding-top: 30px;
+
+    transform: translateZ(0);
+
+    .dir-links-title {
+      position: absolute;
+
+      top: 5px;
+
+      left: 0;
+
+      font-size: 20px;
+
+      font-weight: bold;
+    }
+    .dir-links-links {
+      display: flex;
+
+      flex-wrap: wrap;
+
+      margin: 1rem auto;
+
+      .dir-link {
+        width: 300px;
+
+        height: 90px;
+
+        .dir-link-logo-wrap {
+          width: 80px;
+
+          height: 80px;
+
+          .dir-link-logo {
+            width: 60px;
+
+            height: 60px;
+          }
+        }
+        .dir-link-content {
+          width: 190px;
+        }
+      }
+    }
+  }
+}
+
+.dir-note-wrap {
+  display: flex;
+
+  align-items: center;
+
+  margin: 1rem 0;
+
+  padding: 1rem;
+
+  border-left: 3px solid;
+
+  border-radius: 10px;
+
+  .dir-note-icon {
+    margin-right: 15px;
+
+    font-family: "Font Awesome 6 Free";
+
+    font-size: 24px;
+  }
+  .dir-note {
+    margin-bottom: 2px;
+
+    font-size: 20px;
+
+    font-weight: bold;
+  }
+  &.info {
+    color: #0c5460;
+
+    border-left-color: #0c5460;
+
+    background: #d1ecf1;
+
+    .dir-note-icon {
+      font-weight: 900;
+
+      font-style: normal;
+
+      &::before {
+        content: "\f05a";
+      }
+    }
+  }
+  &.warning {
+    color: #856404;
+
+    border-left-color: #856404;
+
+    background: #fff3cd;
+
+    .dir-note-icon {
+      font-weight: 900;
+
+      font-style: normal;
+
+      &::before {
+        content: "\f06a";
+      }
+    }
+  }
+  &.error {
+    color: #721c24;
+
+    border-left-color: #721c24;
+
+    background: #f8d7da;
+
+    .dir-note-icon {
+      font-weight: 900;
+
+      font-style: normal;
+
+      &::before {
+        content: "\f057";
+      }
+    }
+  }
+  &.success {
+    color: #155724;
+
+    border-left-color: #155724;
+
+    background: #d4edda;
+
+    .dir-note-icon {
+      font-weight: 900;
+
+      font-style: normal;
+
+      &::before {
+        content: "\f058";
+      }
+    }
+  }
+  &.default {
+    color: #888;
+
+    border-left-color: #888;
+
+    background: #e2e3e5;
+
+    .dir-note-icon {
+      font-weight: 900;
+
+      font-style: normal;
+
+      &::before {
+        content: "\f075";
+      }
+    }
+  }
+}
+
+.dir-timeline {
+  display: flex;
+
+  flex-direction: column;
+  .dir-timeline-title {
+    width: 30%;
+
+    text-align: center;
+
+    margin-bottom: 0.5rem;
+
+    font-size: 20px;
+
+    font-weight: bold;
+  }
+  .dir-timeline-time {
+    display: flex;
+
+    flex-direction: column;
+
+    list-style: none;
+
+    transform: translateZ(0);
+
+    .dir-timeline-line {
+      position: absolute;
+
+      top: 0;
+
+      bottom: -10px;
+
+      left: 15%;
+
+      border: 1px solid #ddd;
+    }
+    .dir-time-wrap {
+      display: flex;
+
+      align-items: center;
+
+      flex-grow: 1;
+
+      width: 100%;
+
+      margin: 0.5rem 0;
+      .dir-time {
+        width: 15%;
+
+        padding-right: 0.8rem;
+
+        text-align: right;
+
+        color: var(--font-light-grey);
+
+        font-weight: bold;
+      }
+      .dir-time-content {
+        display: flex;
+
+        flex-direction: column;
+
+        width: 85%;
+
+        margin-left: 1rem;
+
+        padding: 0 1rem;
+
+        color: #155724;
+
+        border-radius: 10px;
+
+        background: #d4edda;
+        p {
+          margin: 10px 0;
+        }
+      }
+      .dir-time-circle {
+        position: absolute;
+
+        left: calc(15% - 6px);
+
+        width: 14px;
+
+        height: 14px;
+
+        border: 4px solid #d4edda;
+
+        border-radius: 50%;
+
+        background-color: var(--card-background);
+      }
+    }
+  }
+}
+
+.dir-color {
+  padding: 0 5px;
+  border-radius: 5px;
+}
+
+.only-hover:not(:hover) {
+  animation: none;
+  * {
+    animation: none;
+  }
+}
+
+[data-theme="dark"] {
+  .dir-link {
+    &:hover {
+      filter: brightness(1.5);
+    }
+  }
+}

package/src/styles/blog/index.scss

@@ -0,0 +1,4 @@
+@import "../mixin.scss";
+@import "./blog.scss";
+@import "./code.scss";
+@import "./post.scss";