minearm-website 0.0.3-beta.2

package/src/styles/blog/post.scss

@@ -0,0 +1,474 @@
+@import "./directives.scss";
+.post-main {
+  display: flex;
+
+  flex-direction: column;
+
+  color: var(--font-black-white);
+
+  font-size: var(--font-post-size);
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    cursor: default;
+
+    user-select: none;
+
+    transition: 0.3s ease;
+
+    font-family: var(--heading-font-family);
+
+    &:before {
+      content: "#";
+    }
+
+    &:hover {
+      margin-left: 10px;
+
+      color: var(--theme-color);
+    }
+  }
+
+  hr {
+    margin: 1rem 0;
+
+    border: 1px solid var(--border-light-grey);
+  }
+
+  p {
+    display: inline-table;
+  }
+  .image {
+    display: flex;
+
+    align-items: center;
+
+    flex-direction: column;
+
+    margin-top: 2rem;
+
+    .img-wrap {
+      display: flex;
+
+      overflow: hidden;
+
+      max-width: 80%;
+
+      border-radius: 15px;
+
+      @include card-style();
+
+      img {
+        width: 100%;
+
+        cursor: pointer;
+
+        transition: 0.3s;
+
+        &:hover {
+          transform: scale(1.03);
+
+          filter: brightness(0.8);
+        }
+      }
+    }
+
+    .img-comment {
+      margin-top: 5px;
+
+      color: var(--font-dark-grey);
+    }
+  }
+
+  code {
+    margin: 0 3px;
+
+    padding: 0px 5px 2px 5px;
+
+    color: var(--font-code-color);
+
+    border-radius: 4px;
+
+    background: var(--font-code-background);
+
+    font-family: var(--code-font-family);
+
+    font-size: 16px;
+  }
+
+  blockquote {
+    display: flex;
+
+    justify-content: center;
+
+    margin: 0;
+
+    margin: 0.5rem 0;
+
+    padding: 0.5rem 2rem;
+
+    i {
+      margin: 0 1rem;
+
+      color: var(--font-light-grey);
+
+      font-size: 24px;
+    }
+
+    i.fa-quote-right {
+      align-self: end;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul {
+    padding-left: 20px;
+
+    list-style-type: disc;
+  }
+
+  ol {
+    padding-left: 20px;
+  }
+
+  .table-wrap {
+    overflow: hidden;
+
+    margin: 1rem auto;
+
+    user-select: none;
+
+    border-radius: 10px;
+
+    @include card-style();
+  }
+
+  table {
+    display: table;
+
+    empty-cells: show;
+
+    border-spacing: 0px;
+
+    border-collapse: collapse;
+
+    thead {
+      background: #eee;
+    }
+
+    th,
+    td {
+      padding: 0.3rem 0.6rem;
+
+      vertical-align: middle;
+
+      border: 1px solid #e3e8f7;
+    }
+  }
+
+  mark {
+    position: relative;
+
+    background: none;
+
+    &:before {
+      position: absolute;
+
+      top: calc((var(--font-post-size) / 2));
+
+      left: 0;
+
+      width: 100%;
+
+      height: calc((var(--font-post-size) / 2));
+
+      content: "";
+
+      opacity: 0.4;
+
+      background: var(--mark-background);
+    }
+  }
+
+  strong {
+    margin: 0 3px;
+  }
+
+  a {
+    text-decoration: none;
+
+    color: var(--link-color);
+  }
+
+  .link {
+    margin-right: 2px;
+
+    margin-left: 2px;
+    i {
+      height: 100%;
+
+      margin-left: 4px;
+
+      font-size: 16px;
+    }
+  }
+
+  .contains-task-list {
+    padding: 0;
+
+    list-style-type: none;
+  }
+}
+
+.post-aside {
+  width: 280px;
+
+  margin-top: 1rem;
+
+  .card-toc {
+    padding: 0.5rem 1rem;
+
+    font-size: 16px;
+
+    .card-toc-header {
+      margin: 10px 0;
+
+      font-size: 18px;
+
+      font-weight: 600;
+    }
+
+    .toc {
+      margin: 0;
+
+      margin-left: 5px;
+
+      padding: 0;
+
+      padding-left: 10px;
+
+      list-style-type: none;
+
+      border-left: 1px solid var(--border-light-grey);
+
+      .toc-item {
+        transition: 0.2s;
+
+        .toc-link {
+          display: block;
+
+          max-width: 90%;
+
+          transition: 0.3s;
+
+          text-decoration: none;
+
+          color: var(--font-black-white);
+
+          .toc-text {
+            display: inline-block;
+
+            overflow: hidden;
+
+            width: 100%;
+
+            transition: 0.2s;
+
+            white-space: nowrap;
+
+            text-overflow: ellipsis;
+
+            color: var(--font-light-grey);
+          }
+
+          .toc-text:before {
+            display: inline;
+
+            content: "#";
+          }
+        }
+
+        &:hover {
+          .toc-link {
+            .toc-text {
+              padding-left: 10px;
+
+              color: var(--theme-color);
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.code-block {
+  position: relative;
+
+  overflow: hidden;
+
+  margin: 1rem 3rem;
+
+  user-select: none;
+
+  border-radius: 10px;
+
+  @include card-style();
+
+  .code-lang {
+    height: var(--code-lang-height);
+
+    padding: calc((var(--code-lang-height) - 22px) / 2) 1rem;
+
+    color: var(--font-dark-grey);
+
+    background: var(--codeblock-background-grey);
+
+    font-size: 18px;
+
+    font-weight: 600;
+  }
+
+  .code-wrap {
+    padding: 0 0 0 2.4rem;
+
+    transition: 0.3s ease;
+
+    background: var(--astro-code-color-background);
+
+    font-size: var(--font-code-size);
+
+    .astro-code {
+      margin: 0;
+
+      padding: 1rem;
+
+      transition: 0.3s ease;
+
+      code {
+        background: transparent;
+      }
+    }
+  }
+
+  .code-wrap {
+    font-size: 18px;
+    .line {
+      display: inline-block;
+
+      height: 24px;
+
+      font-family: var(--code-font-family);
+    }
+    &::after {
+      position: absolute;
+
+      z-index: 2;
+
+      top: 0;
+
+      left: 0;
+
+      width: 2.4rem;
+
+      height: calc(100% - var(--code-lang-height));
+
+      margin-top: var(--code-lang-height);
+
+      content: "";
+
+      border-right: 1px solid var(--font-light-grey);
+
+      border-radius: 6px 0 0 6px;
+    }
+    .line-numbers {
+      position: absolute;
+
+      top: 0;
+
+      left: 0;
+
+      width: 2.4rem;
+
+      padding: 1rem 0;
+
+      counter-reset: line-number;
+
+      transform: translateY(var(--code-lang-height));
+
+      text-align: center;
+
+      color: var(--font-light-grey);
+
+      line-height: 24px;
+
+      .line-number {
+        position: relative;
+
+        z-index: 4;
+
+        height: 24px;
+
+        -webkit-user-select: none;
+
+        -moz-user-select: none;
+
+        user-select: none;
+
+        &::before {
+          content: counter(line-number);
+
+          counter-increment: line-number;
+
+          font-size: 0.85em;
+        }
+      }
+    }
+  }
+
+  .code-copy {
+    position: absolute;
+
+    top: 45px;
+
+    right: 5px;
+
+    width: 24px;
+
+    height: 24px;
+
+    cursor: pointer;
+
+    transition: 0.3s;
+
+    opacity: 0;
+
+    color: var(--codeblock-copybutton-grey);
+
+    i {
+      font-size: 24px;
+    }
+  }
+  &:hover .code-copy {
+    opacity: 1;
+  }
+}
+
+.target-to {
+  animation: 0.5s blink 3;
+}
+
+[data-theme="dark"] {
+  .post-main {
+    img {
+      filter: brightness(0.7);
+    }
+  }
+}

package/src/styles/components/aside.scss

@@ -0,0 +1,178 @@
+@import "../mixin.scss";
+.aside-content {
+  user-select: none;
+
+  color: var(--font-black-white);
+
+  font-family: var(--heading-font-family-zh);
+
+  .sticky-container {
+    position: sticky;
+
+    top: calc(var(--header-nav-height) + 1rem);
+  }
+
+  .aside-card {
+    width: 100%;
+
+    height: fit-content;
+
+    margin-bottom: 1rem;
+
+    border-radius: 15px;
+
+    background: var(--card-background);
+
+    @include card-style();
+
+    .aside-card-link {
+      color: var(--aside-link-color);
+      text-decoration: none;
+      margin-left: 2px;
+      margin-right: 2px;
+    }
+  }
+}
+
+.author-info-card {
+  padding: 1rem 0.5rem;
+
+  .author-info {
+    display: flex;
+
+    align-items: center;
+
+    flex-direction: column;
+
+    margin: 0 auto 1rem;
+
+    .author-avatar {
+      width: 128px;
+
+      height: 128px;
+
+      margin-bottom: 1rem;
+
+      border-radius: 50%;
+    }
+
+    .author-name {
+      margin: 0 auto 1rem;
+
+      font-size: 22px;
+    }
+
+    .author-desc {
+      width: 100%;
+
+      text-align: center;
+
+      font-size: 16px;
+    }
+  }
+
+  .blog-counts {
+    display: flex;
+
+    align-items: center;
+
+    width: 85%;
+
+    margin: 0 auto 1rem;
+
+    .blog-count {
+      display: block;
+
+      flex: 1;
+
+      cursor: pointer;
+
+      text-decoration: none;
+
+      color: var(--font-black-white);
+
+      .count {
+        text-align: center;
+      }
+
+      .tag {
+        text-align: center;
+      }
+    }
+  }
+
+  .social-medias {
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    height: 36px;
+
+    .social-media {
+      margin: 0 0.3rem;
+
+      .social-link {
+        .social-icon {
+          width: 34px;
+
+          height: 34px;
+
+          padding: 4px;
+
+          transition: 0.3s;
+
+          color: var(--button-background-black);
+
+          border-radius: 5px;
+        }
+
+        &:hover .social-icon {
+          animation: var(--shak-hard-animation);
+        }
+      }
+    }
+  }
+}
+
+.aside-card {
+  padding: 0.5rem 1rem;
+
+  .aside-card-headline {
+    display: flex;
+
+    margin-bottom: 0.2rem;
+
+    font-size: var(--header-button-icon-size);
+
+    .aside-card-title {
+      margin-left: 5px;
+
+      font-weight: 600;
+    }
+
+    .aside-card-icon {
+      width: var(--header-button-icon-size);
+
+      height: var(--header-button-icon-size);
+    }
+  }
+  .aside-card-content {
+    margin-top: 5px;
+  }
+}
+
+.announcement-headline {
+  &:hover .announcement-icon {
+    animation: var(--shak-hard-animation);
+  }
+}
+
+.siteinfo-card {
+  .siteinfo-item {
+    display: flex;
+
+    justify-content: space-between;
+  }
+}

package/src/styles/components/footer.scss

@@ -0,0 +1,74 @@
+#site-footer {
+  z-index: 210;
+  position: relative;
+
+  bottom: 0;
+
+  display: flex;
+
+  align-items: center;
+
+  justify-content: center;
+
+  width: 100%;
+
+  margin-top: 1rem;
+
+  padding: 15px 25px;
+
+  user-select: none;
+
+  background: var(--background-white);
+
+  .footer-container {
+    display: flex;
+
+    flex-basis: auto;
+
+    justify-content: space-between;
+
+    width: 100%;
+
+    max-width: 1400px;
+
+    padding: 0 2rem;
+
+    color: var(--font-black-white);
+
+    justify-items: center;
+
+    .footer-link {
+      text-decoration: none;
+
+      color: var(--font-black-white);
+
+      font-weight: 600;
+
+      transition: 0.3s ease;
+
+      &:hover {
+        color: var(--theme-color);
+      }
+    }
+  }
+}
+
+@media screen and (width <= 1100px) {
+  #site-footer {
+    .footer-container {
+      flex-direction: column;
+      align-items: center;
+      & > * {
+        margin: 0.2rem auto;
+      }
+    }
+  }
+}
+@media screen and (width <= 700px) {
+  #site-footer {
+    padding: 15px 0;
+    .footer-container {
+      padding: 0;
+    }
+  }
+}