redesign 2023

themes/FixIt/assets/css/_page/_404.scss

@@ -0,0 +1,6 @@
+#content-404 {
+  font-size: 1.8rem;
+  line-height: 3rem;
+  @include transform(translateY(30vh));
+  text-align: center;
+}

themes/FixIt/assets/css/_page/_archive.scss

@@ -0,0 +1,27 @@
+.archive {
+  .single-title {
+    padding: 1rem 0 0.5rem;
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: bold;
+    line-height: 140%;
+    text-align: right;
+  }
+
+  .single-subtitle {
+    margin: 0.5rem 0;
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 100%;
+    text-align: right;
+  }
+
+  .group-title {
+    font-size: 1.2rem;
+    margin-top: 1.5rem;
+    margin-bottom: 1rem;
+  }
+
+  @import '../_partials/_archive/terms';
+  @import '../_partials/_archive/tags';
+}

themes/FixIt/assets/css/_page/_friends.scss

@@ -0,0 +1,63 @@
+/**
+ * @Description: Style of layout named 'friends'.
+ * @Author: Lruihao <https://lruihao.cn>
+ * @Updated:  2022/3/11 21:36
+ */
+
+.friend-links {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+@media (max-width: 576px) {
+  .friend-links {
+    justify-content: space-around;
+  }
+}
+.friend-link {
+  width: 150px;
+  height: 200px;
+  font-size: 1rem;
+  text-align: center;
+  background: rgba(255, 255, 255, 0.3);
+  box-sizing: border-box;
+  box-shadow: 3px 3px 5px #aaa;
+  @include border-radius($global-border-radius);
+  border: none;
+  transition-duration: 0.3s;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.friend-link:hover {
+  background: #fff;
+  @include transform(scale(1.03));
+  box-shadow: 0 0 3px #aaa;
+}
+.friend-avatar {
+  object-fit: cover;
+  object-position: center;
+  width: 100% !important;
+  height: 150px !important;
+  @include border-radius($global-border-radius);
+  margin: 0;
+  padding: 0;
+}
+.friend-nickname {
+  display: block;
+  position: relative;
+  color: #2bbc8a;
+  font-weight: bold;
+  max-width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  line-height: 18px;
+  margin-bottom: 1rem;
+}
+.friend-nickname:hover {
+  color: #d480aa;
+}

themes/FixIt/assets/css/_page/_home.scss

@@ -0,0 +1,189 @@
+.home {
+  .home-profile {
+    text-align: center;
+
+    .home-avatar {
+      padding: 0.5rem;
+
+      img {
+        display: inline-block;
+        width: 8rem;
+        height: auto;
+        margin: 0 auto;
+        @include border-radius(100%);
+        @include box-shadow(0 0 0 0.3618em rgba(0, 0, 0, 0.05));
+        @include transition(all 0.4s ease);
+
+        [data-theme='dark'] & {
+          @include box-shadow(0 0 0 0.3618em rgba(255, 255, 255, 0.05));
+        }
+
+        &:hover {
+          position: relative;
+          @include transform(translateY(-0.75rem));
+        }
+      }
+    }
+
+    .home-title {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin: 0;
+      padding: 0.5rem;
+    }
+
+    .home-subtitle {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      padding: 0.5rem;
+    }
+
+    .links {
+      padding: 0.5rem;
+      font-size: 1.5rem;
+
+      a * {
+        vertical-align: text-bottom;
+      }
+
+      img {
+        height: 1.5rem;
+        padding: 0 0.25rem;
+      }
+    }
+
+    .home-disclaimer {
+      font-size: 1rem;
+      line-height: 1.5rem;
+      font-weight: normal;
+      margin: 0;
+      padding: 0.5rem;
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+    }
+  }
+}
+
+.home.posts {
+  .home-profile {
+    padding: 2rem 0;
+  }
+
+  .home-avatar img {
+    width: 6rem;
+  }
+
+  .summary {
+    padding-top: 1rem;
+    padding-bottom: 0.8rem;
+    color: $global-font-color;
+    border-bottom: 1px dashed $global-border-color;
+
+    &:first-of-type {
+      padding-top: 0;
+    }
+
+    [data-theme='dark'] & {
+      color: $global-font-color-dark;
+      border-bottom: 1px dashed $global-border-color-dark;
+    }
+
+    .featured-image-preview {
+      width: 100%;
+      padding: 30% 0 0;
+      position: relative;
+      margin: 0.6rem auto;
+      @include transition(transform 0.4s ease);
+
+      img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        @include object-fit(cover);
+      }
+
+      &:hover {
+        @include transform(scale(1.01));
+      }
+    }
+
+    .single-title {
+      font-size: 1.25rem;
+      line-height: 140%;
+      margin: 0.4rem 0;
+    }
+
+    .content {
+      @include box(vertical);
+      -webkit-line-clamp: 3;
+      margin-top: 0.3rem;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @include overflow-wrap(break-word);
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      h2,
+      h3,
+      h4,
+      h5,
+      h6,
+      p {
+        font-size: 1rem;
+        line-height: 1.5;
+        display: inline;
+
+        &::after {
+          content: '\A';
+          white-space: pre;
+        }
+      }
+
+      h2 {
+        font-size: 1.125rem;
+      }
+
+      @include link(false, true);
+
+      b,
+      strong {
+        color: $global-font-secondary-color;
+
+        [data-theme='dark'] & {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+    }
+
+    .post-footer {
+      margin-top: 0.4rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 0.875rem;
+
+      @include link(false, false);
+
+      .post-tags {
+        padding: 0;
+
+        @include link(true, true);
+        
+        .post-tag:not(:last-child)::after {
+          content: ',';
+          margin-right: 0.25rem;
+        }
+      }
+    }
+  }
+}

themes/FixIt/assets/css/_page/_index.scss

@@ -0,0 +1,20 @@
+.page {
+  position: relative;
+  @extend %page-style;
+
+  .content {
+    [id] {
+      scroll-margin-top: var(--#{$prefix}scroll-mt);
+    }
+  }
+
+  @include blur;
+}
+
+@import '_single';
+@import '_special';
+@import '_archive';
+@import '_home';
+@import '_404';
+@import '_offline';
+@import '_friends';

themes/FixIt/assets/css/_page/_offline.scss

@@ -0,0 +1,19 @@
+#content-offline {
+  @include transform(translateY(30vh));
+  text-align: center;
+
+  .offline-title {
+    font-size: 3.6rem;
+  }
+  .offline-subtitle {
+    margin: 0.4rem 0;
+    font-size: 1rem;
+    font-weight: normal;
+    font-style: italic;
+    line-height: 100%;
+    color: #57606a;
+  }
+  .error-text {
+    font-size: 1.2rem;
+  }
+}

themes/FixIt/assets/css/_page/_single.scss

@@ -0,0 +1,393 @@
+@import '../_partials/_single/toc';
+@import '../_partials/_single/fixit-decryptor';
+
+.single {
+  .single-title {
+    padding: 1rem 0 0.5rem;
+    margin: 0;
+    font-size: 1.6rem;
+    font-weight: bold;
+    line-height: 140%;
+  
+    .icon-repost {
+      color: var(--#{$prefix}success);
+      display: inline-block;
+      width: max-content;
+      margin-right: 0.25rem;
+
+      [data-theme='dark'] & {
+        color: var(--#{$prefix}success-dark);
+      }
+    }
+  }
+
+  .single-subtitle {
+    margin: 0.5rem 0;
+    font-size: 1.2rem;
+    font-weight: normal;
+    line-height: 100%;
+  }
+
+  .post-meta {
+    font-size: 0.875rem;
+    color: $global-font-secondary-color;
+
+    .comment-visitors,
+    .comment-count {
+      @extend .print-d-none;
+    }
+
+    span {
+      display: inline-block;
+    }
+
+    [data-theme='dark'] & {
+      color: $global-font-secondary-color-dark;
+    }
+
+    @include link(false, true);
+
+    .author {
+      font-size: 1.05rem;
+      
+      img.avatar {
+        width: 1.3rem;
+        height: 1.3rem;
+        border-radius: 50%;
+        vertical-align: text-bottom;
+        border: 0.25px solid $global-border-color;
+        box-sizing: border-box;
+        object-position: center;
+        @include object-fit(cover);
+
+        [data-theme='dark'] & {
+          border-color: $global-border-color-dark;
+        }
+      }
+    }
+  }
+
+  .featured-image {
+    margin: 0.5rem 0 1rem 0;
+
+    img {
+      display: block;
+      width: 100%;
+      max-width: 100%;
+      height: auto;
+      margin: 0 auto;
+      overflow: hidden;
+    }
+  }
+
+  #content[data-end-flag]:not([data-password])::after {
+    content: attr(data-end-flag);
+    display: block;
+    text-align: center;
+    color: $global-font-secondary-color;
+    font-size: 15px;
+    padding: 5px;
+  }
+
+  .content {
+    > h1,
+    > h2 {
+      font-size: 1.5rem;
+
+      & code {
+        font-size: 1.25rem;
+      }
+    }
+
+    > h3 {
+      font-size: 1.375rem;
+
+      & code {
+        font-size: 1.125rem;
+      }
+    }
+
+    > h4 {
+      font-size: 1.25rem;
+
+      & code {
+        font-size: 1rem;
+      }
+    }
+
+    > h5 {
+      font-size: 1.125rem;
+    }
+
+    > h6 {
+      font-size: 1rem;
+    }
+
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: bold;
+      margin: 1.2rem 0;
+
+      [data-theme='dark'] & {
+        font-weight: bolder;
+      }
+    }
+
+    > h2,
+    > h3,
+    > h4,
+    > h5,
+    > h6 {
+      > .header-mark::before {
+        content: '|';
+        margin-right: 0.3125rem;
+        color: $single-link-color;
+
+        [data-theme='dark'] & {
+          color: $single-link-color-dark;
+        }
+      }
+    }
+
+    > h2 > .header-mark::before {
+      content: '#';
+    }
+
+    p {
+      margin: 0.5rem 0;
+    }
+
+    b,
+    strong {
+      font-weight: bold;
+
+      [data-theme='dark'] & {
+        color: #ddd;
+      }
+    }
+
+    @include link(false, false);
+
+    a {
+      white-space: normal;
+      @include overflow-wrap(break-word);
+
+      [data-theme='dark'] & b,
+      [data-theme='dark'] & strong {
+        color: $single-link-color-dark;
+      }
+    }
+
+    [data-theme='dark'] a:hover b,
+    [data-theme='dark'] a:hover strong {
+      color: $single-link-hover-color-dark;
+    }
+
+    ul,
+    ol {
+      margin: 0.5rem 0;
+      padding-left: 2.5rem;
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ruby {
+      background: $code-background-color;
+
+      rt {
+        color: $global-font-secondary-color;
+      }
+
+      [data-theme='dark'] & {
+        background: $code-background-color-dark;
+
+        rt {
+          color: $global-font-secondary-color-dark;
+        }
+      }
+    }
+
+    .table-wrapper {
+      overflow-x: auto;
+
+      &::-webkit-scrollbar {
+        background-color: $table-background-color;
+
+        [data-theme='dark'] & {
+          background-color: $table-background-color-dark;
+        }
+      }
+
+      > table {
+        width: 100%;
+        max-width: 100%;
+        margin: 0.625rem 0;
+        border-spacing: 0;
+        background: $table-background-color;
+        border-collapse: collapse;
+
+        [data-theme='dark'] & {
+          background: $table-background-color-dark;
+        }
+
+        thead {
+          background: $table-thead-color;
+
+          [data-theme='dark'] & {
+            background-color: $table-thead-color-dark;
+          }
+        }
+
+        &:not([class]) tbody {
+          & tr:nth-child(odd) {
+            background: darken($table-background-color, 2.25%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 2.75%);
+            }
+          }
+          
+          & tr:hover {
+            background: darken($table-background-color, 4.5%);
+
+            [data-theme='dark'] & {
+              background-color: lighten($table-background-color-dark, 5.5%);
+            }
+          }
+        }
+
+        th,
+        td {
+          padding: 0.3rem 1rem;
+          border: 1px solid darken($table-thead-color, 2%);
+
+          [data-theme='dark'] & {
+            border-color: darken($table-thead-color-dark, 2%);
+          }
+        }
+      }
+    }
+
+    img {
+      max-width: 100%;
+      min-height: 1em;
+
+      &:not([data-h]) {
+        height: auto;
+      }
+
+      &.version {
+        height: 1.25em;
+        vertical-align: text-bottom;
+      }
+    }
+    svg {
+      max-width: 100%;
+    }
+
+    figure {
+      margin: 0.5rem;
+      text-align: center;
+
+      .image-caption:not(:empty) {
+        min-width: 20%;
+        max-width: 80%;
+        display: inline-block;
+        padding: 0.5rem;
+        margin: 0 auto;
+        font-size: 0.875rem;
+        color: #969696;
+      }
+
+      img {
+        display: block;
+        margin: 0 auto;
+        overflow: hidden;
+
+        &:not([width]) {
+          width: 100%;
+        }
+      }
+    }
+
+    blockquote {
+      display: block;
+      border-left: 0.25em solid $global-border-color;
+      color: $blockquote-color;
+      padding: 0 1em;
+      margin: 1rem 0;
+
+      ul,
+      ol {
+        padding-left: 1.5em;
+      }
+
+      [data-theme='dark'] & {
+        color: $blockquote-color-dark;
+        border-left-color: $global-border-color-dark;
+      }
+
+      @include link(false, true);
+    }
+
+    .footnotes {
+      color: $global-font-secondary-color;
+
+      [data-theme='dark'] & {
+        color: $global-font-secondary-color-dark;
+      }
+
+      p {
+        margin: 0.25rem 0;
+      }
+    }
+
+    @import '../_partials/_single/code';
+    @import '../_shortcodes';
+
+    hr {
+      margin: 1rem 0;
+      position: relative;
+      border-top: 1px dashed $global-border-color;
+      border-bottom: none;
+
+      [data-theme='dark'] & {
+        border-top: 1px dashed $global-border-color-dark;
+      }
+    }
+
+    kbd {
+      display: inline-block;
+      padding: 0 0.25rem;
+      background-color: $global-background-color;
+      border: 1px solid $global-border-color;
+      border-bottom-color: $global-border-color;
+      font-size: 0.8rem;
+      font-family: $code-font-family;
+      color: $code-color;
+      @include border-radius($global-border-radius);
+      @include box-shadow(inset 0 -1px 0 $global-border-color);
+
+      [data-theme='dark'] & {
+        background-color: $global-background-color-dark;
+        border: 1px solid $global-border-color-dark;
+        border-bottom-color: $global-border-color-dark;
+        color: $code-color-dark;
+        @include box-shadow(inset 0 -1px 0 $global-border-color-dark);
+      }
+    }
+  }
+
+  @import '../_partials/_single/reward';
+  @import '../_partials/_single/footer';
+  @import '../_partials/_single/comment';
+}
+
+.lg-toolbar .lg-icon::after {
+  color: #999;
+}

themes/FixIt/assets/css/_page/_special.scss

@@ -0,0 +1,6 @@
+.special {
+  .single-title,
+  .single-subtitle {
+    text-align: right;
+  }
+}