yoyoyo 0.0.9 → 0.0.11

data/_sass/header.scss

@@ -1,22 +1,33 @@
 .yoyoyo-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #fff;
-  padding: 0;
-  margin: 0 -1vw;
-  position: relative;
+  .header-description {
+    font-size: 11px;
+    line-height: 1.4;
+    position: fixed;
+    z-index: 2;
+    top: 55px;
+    left: 33px;
+    max-width: 400px;
+    height: 100px;
+    cursor: default;
+    transform: rotate(-90deg) translate(-100%, 0%);
+    transform-origin: 0 0;
+    text-align: right;
+    letter-spacing: 2.5px;
+    text-transform: uppercase;
+    color: v(h1-color);
+  }
 
   nav,
   .header-contact {
-    display: flex;
+    // display: flex;
+    display: none;
     align-items: center;
 
     a {
-      padding: 1vw;
-      font-size: 14px;
-      line-height: 24px;
-      color: #131313;
+      padding: 0 8px;
+      font-size: 16px;
+      line-height: 32px;
+      color: #3a3a3a;
       opacity: 0.4;
       transition: all ease-in-out 380ms;
 
@@ -32,23 +43,41 @@
   }
 
   a.yoyoyo-header-logo {
-    padding: 1vw;
     position: absolute;
-    background-color: #fff;
-    left: 50%;
-    top: 0;
-    transform: translateX(-50%);
+    z-index: 9999;
+    width: 50px;
+    height: 50px;
+    left: 80px;
+    top: 55px;
+    padding: 0;
     flex-shrink: 0;
     display: block;
-    color: #131313;
-    font-size: 22px;
-    line-height: 1em;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
+    transition: all ease-in-out 380ms;
+    background-image: url(/assets/icon/logo.svg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+  }
+}
 
-    &:hover {
-      text-decoration: none;
-    }
+@media (prefers-color-scheme: dark), (max-width: 992px) {
+  .yoyoyo-header a.yoyoyo-header-logo {
+    background-image: url(/assets/icon/logo-dark.svg);
+  }
+
+  .yoyoyo-header .header-description {
+    opacity: 0.8;
+  }
+}
+
+@media (max-width: 768px) {
+  a.yoyoyo-header-logo {
+    left: 30px !important;
+    top: 33px !important;
+  }
+
+  .header-description {
+    top: 33px !important;
+    left: 2px !important;
   }
 }

data/_sass/highlight.scss

@@ -0,0 +1,159 @@
+.highlighter-rouge {
+  padding: 1rem 1rem 1px;
+  margin: 1rem 0 1.5rem;
+  border-radius: 5px;
+  box-shadow: 0 0 1px 0 rgba(8, 11, 14, 0.06),
+    0 6px 6px -1px rgba(8, 11, 14, 0.1);
+  position: relative;
+  z-index: 1;
+  background-color: v(code-background-color);
+
+  &.language-plaintext {
+    padding: 0.25rem 0.5rem;
+    margin: auto 0.25rem;
+    transition: all ease-in-out 280ms;
+
+    &:hover {
+      background-color: #121212;
+      color: #fff;
+    }
+  }
+}
+
+// 别人的
+.highlight {
+  color: v(code-default-color);
+  
+  .c,
+  .cm,
+  .c1,
+  .cs {
+    color: #408080;
+  }
+  .k,
+  .kc,
+  .kd,
+  .kn,
+  .kp,
+  .kr,
+  .sx,
+  .bp,
+  .nt,
+  .nb {
+    color: #008000;
+  }
+  .o,
+  .m,
+  .mf,
+  .mh,
+  .mi,
+  .mo,
+  .il {
+    color: #666666;
+  }
+  .cp {
+    color: #bc7a00;
+  }
+  .gd {
+    color: #a00000;
+  }
+  .gr {
+    color: #ff0000;
+  }
+  .gh,
+  .gp {
+    color: #000080;
+  }
+  .gi {
+    color: #00a000;
+  }
+  .go {
+    color: #808080;
+  }
+  .gu {
+    color: #800080;
+  }
+  .gt {
+    color: #0040d0;
+  }
+  .kt {
+    color: #b00040;
+  }
+  .na {
+    color: #7d9029;
+  }
+  .no {
+    color: #880000;
+  }
+  .nd,
+  .ow {
+    color: #aa22ff;
+  }
+  .ni {
+    color: #999999;
+  }
+  .ne {
+    color: #d2413a;
+  }
+  .nc,
+  .nf,
+  .nn {
+    color: #0000ff;
+  }
+  .nl {
+    color: #a0a000;
+  }
+  .w {
+    color: #bbbbbb;
+  }
+  .s,
+  .sb,
+  .sc,
+  .sd,
+  .s2,
+  .sh,
+  .s1 {
+    color: #ba2121;
+  }
+  .se {
+    color: #bb6622;
+  }
+  .si,
+  .sr {
+    color: #bb6688;
+  }
+  .ss,
+  .vs,
+  .vg,
+  .vi,
+  .nv {
+    color: #19177c;
+  }
+  .c,
+  .cm,
+  .c1,
+  .cs,
+  .ge,
+  .sd {
+    font-style: italic;
+  }
+  .k,
+  .kc,
+  .kd,
+  .kn,
+  .kr,
+  .gh,
+  .gp,
+  .gs,
+  .gu,
+  .nc,
+  .ni,
+  .ne,
+  .nn,
+  .nt,
+  .ow,
+  .se,
+  .si {
+    font-weight: bold;
+  }
+}

data/_sass/main.scss

@@ -1,6 +1,46 @@
-@import "body";
-@import "header";
-@import "post";
+@import 'header';
+@import 'post';
+@import 'footer';
+@import 'highlight';
+
+$cyan: #17a2b8 !default;
+
+:root {
+  --body-background-color: #ffffff;
+  --card-background-color: #f9f9f9;
+  --h1-color: #000000;
+  --footer-text-color: #3a3a3a;
+  --code-background-color: #ffffff;
+  --code-default-color: #000000;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --body-background-color: #121212;
+    --card-background-color: #222222;
+    --h1-color: #ffffff;
+    --footer-text-color: #ffffff;
+    --code-background-color: #222222;
+    --code-default-color: #dadee0;
+  }
+}
+
+.post-main {
+  padding: 80px;
+  color: v(h1-color);
+  line-height: 1.6;
+}
+
+.post-header {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+  margin-bottom: 0 !important;
+  height: auto !important;
+}
+
+.post-utteranc {
+  padding: 20px 80px;
+}
 
 .current {
   color: $cyan;
@@ -18,6 +58,243 @@
   display: block;
 }
 
-.posts-link {
-  padding: 6vw;
+.home-list {
+  padding: 0 80px;
+}
+
+.home-pagination {
+  padding: 0;
+}
+
+.post-item {
+  position: relative;
+  min-height: 600px;
+  margin-bottom: 20px;
+
+  .post-item-body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: inherit;
+    height: inherit;
+    border-radius: 12px;
+    overflow: hidden;
+    background-color: v(card-background-color);
+    box-shadow: 0 0 1px 0 rgba(8, 11, 14, 0.06),
+      0 6px 6px -1px rgba(8, 11, 14, 0.1);
+
+    .posts-image,
+    .posts-content {
+      flex: 1;
+      min-height: inherit;
+      height: inherit;
+    }
+
+    .posts-image {
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+
+    .posts-content {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .posts-body {
+        padding: 0 40px;
+      }
+
+      .posts-title {
+        font-size: 60px;
+        line-height: 1.1;
+        color: v(h1-color);
+        transition: background-size ease-in-out 580ms;
+        background: linear-gradient(v(h1-color), v(h1-color)) no-repeat left 87%/0
+          30%;
+      }
+
+      .posts-description {
+        font-size: 16px;
+        line-height: 1.5;
+        color: v(h1-color);
+        margin: 20px 0 15px;
+      }
+
+      .posts-author {
+        font-size: 15px;
+        line-height: 1.5;
+        color: v(h1-color);
+        font-weight: 600;
+        opacity: 0.8;
+      }
+    }
+
+    &:hover {
+      text-decoration: none;
+
+      .posts-title {
+        text-decoration: underline;
+        // background-size: 97% 30%;
+      }
+    }
+  }
+
+  &:nth-child(odd) {
+    .post-item-body {
+      flex-direction: row-reverse;
+
+      .posts-content {
+        .posts-body {
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  &:first-child {
+    margin-left: -80px;
+    margin-right: -80px;
+    height: 100vh;
+
+    .posts-content {
+      .posts-body {
+        text-align: left !important;
+        padding: 0 80px !important;
+      }
+    }
+
+    .post-item-body {
+      border-radius: 0;
+      box-shadow: none;
+    }
+  }
+}
+
+.list-pagination {
+  display: flex;
+  align-items: center;
+
+  .pagination-arrow {
+    flex: 1;
+    padding: 80px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    line-height: 1.5;
+    color: v(h1-color);
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .arrow-left::before {
+    content: '';
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url(/assets/icon/arrow_left.svg);
+  }
+
+  .arrow-right::after {
+    content: '';
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-image: url(/assets/icon/arrow_right.svg);
+  }
+}
+
+@media (max-width: 992px) {
+  .post-item {
+    .post-item-body {
+      flex-direction: column !important;
+
+      .posts-image,
+      .posts-content {
+        width: 100%;
+        min-height: initial !important;
+        height: initial !important;
+      }
+
+      .posts-image {
+        flex: 1 !important;
+      }
+
+      .posts-content {
+        flex: initial !important;
+        padding: 40px 0;
+      }
+
+      .posts-content .posts-body > * {
+        text-align: center !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .post-item {
+    &:first-child {
+      margin-left: -20px;
+      margin-right: -20px;
+    }
+
+    .post-item-body {
+      .posts-content {
+        padding: 40px 0;
+
+        .posts-body {
+          padding: 0 20px !important;
+        }
+
+        .posts-title {
+          font-size: 26px;
+        }
+      }
+    }
+  }
+
+  .home-list {
+    padding: 0 20px;
+  }
+
+  .pagination-arrow {
+    padding: 40px 20px !important;
+  }
+
+  .post-main {
+    padding: 30px 20px;
+  }
+
+  .post-utteranc {
+    padding: 20px 16px;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .post-item .post-item-body {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .list-pagination {
+    .arrow-left::before {
+      background-image: url(/assets/icon/arrow_left_dark.svg);
+    }
+
+    .arrow-right::after {
+      background-image: url(/assets/icon/arrow_right_dark.svg);
+    }
+  }
 }

data/assets/css/styles.scss

@@ -1,5 +1,4 @@
 ---
 ---
 
-@import "bootstrap";
-@import "main";
+@import "main";

data/assets/icon/arrow_left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1591367844519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3709" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#000000" p-id="3710"></path></svg>

data/assets/icon/arrow_left_dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1591367844519" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3709" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M589.088 790.624L310.464 512l278.624-278.624 45.248 45.248L400.96 512l233.376 233.376z" fill="#ffffff" p-id="3710"></path></svg>

data/assets/icon/arrow_right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1591367967827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#000000" p-id="3937"></path></svg>

data/assets/icon/arrow_right_dark.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1591367967827" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3936" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M434.944 790.624l-45.248-45.248L623.04 512l-233.376-233.376 45.248-45.248L713.568 512z" fill="#ffffff" p-id="3937"></path></svg>

data/assets/icon/logo-dark.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="178px" viewBox="0 0 158 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Y</title>
+    <g id="js-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-49.000000, -52.000000)" fill="#FFFFFF" fill-rule="nonzero">
+            <polygon id="Y" transform="translate(128.000023, 141.153819) rotate(-360.000000) translate(-128.000023, -141.153819) " points="149.025671 230 149.025671 163.333313 206.974406 52.3076384 162.743624 52.3076384 128.769254 128.846123 95.0512954 52.3076384 49.0256404 52.3076384 106.974376 163.589723 106.974376 230"></polygon>
+        </g>
+    </g>
+</svg>

data/assets/icon/logo.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="178px" viewBox="0 0 158 178" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Y</title>
+    <g id="js-icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="画板" transform="translate(-49.000000, -52.000000)" fill="#000000" fill-rule="nonzero">
+            <polygon id="Y" transform="translate(128.000023, 141.153819) rotate(-360.000000) translate(-128.000023, -141.153819) " points="149.025671 230 149.025671 163.333313 206.974406 52.3076384 162.743624 52.3076384 128.769254 128.846123 95.0512954 52.3076384 49.0256404 52.3076384 106.974376 163.589723 106.974376 230"></polygon>
+        </g>
+    </g>
+</svg>