Add new consulting page with consulting services and calendly link
This commit is contained in:
@@ -1,81 +0,0 @@
|
||||
.archive {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 500px) {
|
||||
.archive {
|
||||
margin: 10%;
|
||||
}
|
||||
.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.article-preview-top-title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.article-preview-top-date {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
margin-top: 20%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, auto);
|
||||
gap: 10%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1920px) {
|
||||
.archive {
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 170px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tag-cloud {
|
||||
margin-top: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(8, auto);
|
||||
gap: 10%;
|
||||
}
|
||||
}
|
||||
6
css/ball-atom.min.css
vendored
6
css/ball-atom.min.css
vendored
@@ -1,6 +0,0 @@
|
||||
/*!
|
||||
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
|
||||
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
|
||||
* Licensed under MIT
|
||||
*/
|
||||
.la-ball-atom,.la-ball-atom>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-atom{display:block;font-size:0;color:#fff}.la-ball-atom.la-dark{color:#333}.la-ball-atom>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-atom{width:32px;height:32px}.la-ball-atom>div:nth-child(1){position:absolute;top:50%;left:50%;z-index:1;width:60%;height:60%;background:#aaa;border-radius:100%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-o-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-animation:ball-atom-shrink 4.5s infinite linear;-moz-animation:ball-atom-shrink 4.5s infinite linear;-o-animation:ball-atom-shrink 4.5s infinite linear;animation:ball-atom-shrink 4.5s infinite linear}.la-ball-atom>div:not(:nth-child(1)){position:absolute;left:0;z-index:0;width:100%;height:100%;background:none;-webkit-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);-moz-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);-o-animation:ball-atom-zindex 1.5s 0s infinite steps(2, end);animation:ball-atom-zindex 1.5s 0s infinite steps(2, end)}.la-ball-atom>div:not(:nth-child(1)):before{position:absolute;top:0;left:0;width:10px;height:10px;margin-top:-5px;margin-left:-5px;content:"";background:currentColor;border-radius:50%;opacity:.75;-webkit-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;-moz-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;-o-animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease;animation:ball-atom-position 1.5s 0s infinite ease,ball-atom-size 1.5s 0s infinite ease}.la-ball-atom>div:nth-child(2){-webkit-animation-delay:.75s;-moz-animation-delay:.75s;-o-animation-delay:.75s;animation-delay:.75s}.la-ball-atom>div:nth-child(2):before{-webkit-animation-delay:0s,-1.125s;-moz-animation-delay:0s,-1.125s;-o-animation-delay:0s,-1.125s;animation-delay:0s,-1.125s}.la-ball-atom>div:nth-child(3){-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);-ms-transform:rotate(120deg);-o-transform:rotate(120deg);transform:rotate(120deg);-webkit-animation-delay:-.25s;-moz-animation-delay:-.25s;-o-animation-delay:-.25s;animation-delay:-.25s}.la-ball-atom>div:nth-child(3):before{-webkit-animation-delay:-1s,-0.75s;-moz-animation-delay:-1s,-0.75s;-o-animation-delay:-1s,-0.75s;animation-delay:-1s,-0.75s}.la-ball-atom>div:nth-child(4){-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg);-ms-transform:rotate(240deg);-o-transform:rotate(240deg);transform:rotate(240deg);-webkit-animation-delay:.25s;-moz-animation-delay:.25s;-o-animation-delay:.25s;animation-delay:.25s}.la-ball-atom>div:nth-child(4):before{-webkit-animation-delay:-0.5s,-0.125s;-moz-animation-delay:-0.5s,-0.125s;-o-animation-delay:-0.5s,-0.125s;animation-delay:-0.5s,-0.125s}.la-ball-atom.la-sm{width:16px;height:16px}.la-ball-atom.la-sm>div:not(:nth-child(1)):before{width:4px;height:4px;margin-top:-2px;margin-left:-2px}.la-ball-atom.la-2x{width:64px;height:64px}.la-ball-atom.la-2x>div:not(:nth-child(1)):before{width:20px;height:20px;margin-top:-10px;margin-left:-10px}.la-ball-atom.la-3x{width:96px;height:96px}.la-ball-atom.la-3x>div:not(:nth-child(1)):before{width:30px;height:30px;margin-top:-15px;margin-left:-15px}@-webkit-keyframes ball-atom-position{50%{top:100%;left:100%}}@-moz-keyframes ball-atom-position{50%{top:100%;left:100%}}@-o-keyframes ball-atom-position{50%{top:100%;left:100%}}@keyframes ball-atom-position{50%{top:100%;left:100%}}@-webkit-keyframes ball-atom-size{50%{-webkit-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-moz-keyframes ball-atom-size{50%{-moz-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-o-keyframes ball-atom-size{50%{-o-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@keyframes ball-atom-size{50%{-webkit-transform:scale(0.5, 0.5);-moz-transform:scale(0.5, 0.5);-o-transform:scale(0.5, 0.5);transform:scale(0.5, 0.5)}}@-webkit-keyframes ball-atom-zindex{50%{z-index:10}}@-moz-keyframes ball-atom-zindex{50%{z-index:10}}@-o-keyframes ball-atom-zindex{50%{z-index:10}}@keyframes ball-atom-zindex{50%{z-index:10}}@-webkit-keyframes ball-atom-shrink{50%{-webkit-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@-moz-keyframes ball-atom-shrink{50%{-moz-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@-o-keyframes ball-atom-shrink{50%{-o-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}@keyframes ball-atom-shrink{50%{-webkit-transform:translate(-50%, -50%) scale(0.8, 0.8);-moz-transform:translate(-50%, -50%) scale(0.8, 0.8);-o-transform:translate(-50%, -50%) scale(0.8, 0.8);transform:translate(-50%, -50%) scale(0.8, 0.8)}}
|
||||
@@ -1,64 +0,0 @@
|
||||
pre code .language-mark {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-weight: 900;
|
||||
color: var(--secondary);
|
||||
z-index: 5;
|
||||
text-transform: uppercase;
|
||||
font-family: Rubik, Lato, lucida grande, lucida sans unicode, Tahoma, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
font-size: 0.6rem;
|
||||
background: rgba(16,14,23,0.36);
|
||||
border-radius: 8px;
|
||||
padding: 0 0.8em;
|
||||
}
|
||||
pre code .language-mark b {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
.language-mark[ref="css"] {
|
||||
color: #ff8a00;
|
||||
}
|
||||
.language-mark[ref="scss"] {
|
||||
color: #ff8a00;
|
||||
}
|
||||
.language-mark[ref="html"] {
|
||||
color: #4caf50;
|
||||
}
|
||||
.language-mark[ref=JSX] {
|
||||
color: #03a9f4;
|
||||
}
|
||||
.language-mark[ref=JavaScript] {
|
||||
color: #03a9f4;
|
||||
color: #ff79c6;
|
||||
}
|
||||
.language-mark[ref=jQuery] {
|
||||
color: #03a9f4;
|
||||
color: #ff79c6;
|
||||
}
|
||||
.language-mark[ref=php] {
|
||||
color: #ff79c6;
|
||||
}
|
||||
/* CodeMirror Dracula theme */
|
||||
.CodeMirror {
|
||||
height: auto !important;
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.CodeMirror .CodeMirror-gutters,
|
||||
.CodeMirror .CodeMirror-linenumber {
|
||||
background: #201c29 !important;
|
||||
padding: 0 3px 0 15px;
|
||||
}
|
||||
.CodeMirror .CodeMirror-scroll {
|
||||
padding: 55px 30px 60px 10px !important;
|
||||
}
|
||||
.CodeMirror.cm-s-dracula {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.CodeMirror .CodeMirror-lines {
|
||||
font-size: 0.8rem;
|
||||
font-family: Rubik, Lato, lucida grande, lucida sans unicode, Tahoma, 'Microsoft Yahei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
body {
|
||||
font-family: 'JetBrains Mono', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html, img, .hljs {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
a:link {
|
||||
text-decoration: underline;
|
||||
color: black;
|
||||
}
|
||||
a:visited {
|
||||
color: black;
|
||||
text-decoration:none;
|
||||
}
|
||||
a:hover {
|
||||
color: black;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:active {
|
||||
color: black;
|
||||
text-decoration:underline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 500px) {
|
||||
.footer {
|
||||
width: 70%;
|
||||
position: static;
|
||||
bottom: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
.footer {
|
||||
position: static;
|
||||
bottom: 0;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
125
css/const.css
125
css/const.css
@@ -1,125 +0,0 @@
|
||||
.bg-color0 {
|
||||
background: #495057;
|
||||
}
|
||||
.bg-color1 {
|
||||
background: #f03e3e;
|
||||
}
|
||||
.bg-color2 {
|
||||
background: #ae3ec9;
|
||||
}
|
||||
.bg-color3 {
|
||||
background: #7048e8;
|
||||
}
|
||||
.bg-color4 {
|
||||
background: #4263eb;
|
||||
}
|
||||
.bg-color5 {
|
||||
background: #1098ad;
|
||||
}
|
||||
.bg-color6 {
|
||||
background: #0ca678;
|
||||
}
|
||||
.bg-color7 {
|
||||
background: #37b24d;
|
||||
}
|
||||
.bg-color8 {
|
||||
background: #f59f00;
|
||||
}
|
||||
.bg-color9 {
|
||||
background: #f76707;
|
||||
}
|
||||
.bg-color10 {
|
||||
background: #6f42c1;
|
||||
}
|
||||
@-moz-keyframes rotate3ding {
|
||||
0% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(4);
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
bottom: 40px;
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rotate3ding {
|
||||
0% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(4);
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
bottom: 40px;
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes rotate3ding {
|
||||
0% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(4);
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
bottom: 40px;
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes rotate3ding {
|
||||
0% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
20% {
|
||||
transform: scale(4);
|
||||
}
|
||||
50% {
|
||||
left: 100%;
|
||||
bottom: 40px;
|
||||
transform: scale(1);
|
||||
}
|
||||
70% {
|
||||
transform: scale(0.3);
|
||||
}
|
||||
100% {
|
||||
left: 0;
|
||||
bottom: -12px;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
10299
css/fan.css
10299
css/fan.css
File diff suppressed because it is too large
Load Diff
@@ -1,90 +0,0 @@
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: .5em;
|
||||
color: #DFDFE0;
|
||||
background: rgb(51, 51, 51);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #A5B0BD; /* comment - gray */
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-formula {
|
||||
color: #EF81B0; /* keyword - pink */
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-deletion,
|
||||
.hljs-subst {
|
||||
color: #DFDFE0; /* other - white */
|
||||
}
|
||||
|
||||
.hljs-literal {
|
||||
color: #EF81B0; /* keyword - pink */
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-regexp,
|
||||
.hljs-addition,
|
||||
.hljs-attribute,
|
||||
.hljs-meta-string {
|
||||
color: #F08875; /* string - peach */
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title {
|
||||
color: #DFDFE0; /* other - white */
|
||||
}
|
||||
|
||||
.hljs-number {
|
||||
color: #D5CA86; /* number - yellow */
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #BBF0E4; /* objectA - light cyan */
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-link,
|
||||
.hljs-meta,
|
||||
.hljs-selector-id,
|
||||
.hljs-title {
|
||||
color: #DFDFE0; /* other - white */
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
pre code.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.hljs {
|
||||
padding: 3px 5px
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: rgb(245, 245, 245);
|
||||
color: #000;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.xml .hljs-meta {
|
||||
color: silver
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #007400
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-name,
|
||||
.hljs-selector-tag,
|
||||
.hljs-tag {
|
||||
color: #aa0d91
|
||||
}
|
||||
|
||||
.hljs-template-variable,
|
||||
.hljs-variable {
|
||||
color: #3f6e74
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-meta .hljs-string,
|
||||
.hljs-string {
|
||||
color: #c41a16
|
||||
}
|
||||
|
||||
.hljs-link,
|
||||
.hljs-regexp {
|
||||
color: #0e0eff
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-number,
|
||||
.hljs-symbol,
|
||||
.hljs-title {
|
||||
color: #1c00cf
|
||||
}
|
||||
|
||||
.hljs-meta,
|
||||
.hljs-section {
|
||||
color: #643820
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-params,
|
||||
.hljs-title.class_,
|
||||
.hljs-type {
|
||||
color: #5c2699
|
||||
}
|
||||
|
||||
.hljs-attr {
|
||||
color: #836c28
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
color: #000
|
||||
}
|
||||
|
||||
.hljs-formula {
|
||||
background-color: #eee;
|
||||
font-style: italic
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #baeeba
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #ffc8bd
|
||||
}
|
||||
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
color: #9b703f
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-strong {
|
||||
font-weight: 700
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic
|
||||
}
|
||||
@@ -1,509 +0,0 @@
|
||||
#post figure.highlight.js table::before {
|
||||
content: "js";
|
||||
}
|
||||
#post figure.highlight.javascript table::before {
|
||||
content: "javascript";
|
||||
}
|
||||
#post figure.highlight.python table::before {
|
||||
content: "python";
|
||||
}
|
||||
#post figure.highlight.ipython table::before {
|
||||
content: "ipython";
|
||||
}
|
||||
#post figure.highlight.ruby table::before {
|
||||
content: "ruby";
|
||||
}
|
||||
#post figure.highlight.xml table::before {
|
||||
content: "xml";
|
||||
}
|
||||
#post figure.highlight.html table::before {
|
||||
content: "html";
|
||||
}
|
||||
#post figure.highlight.css table::before {
|
||||
content: "css";
|
||||
}
|
||||
#post figure.highlight.perl table::before {
|
||||
content: "perl";
|
||||
}
|
||||
#post figure.highlight.sql table::before {
|
||||
content: "sql";
|
||||
}
|
||||
#post figure.highlight.coffeescript table::before {
|
||||
content: "coffeescript";
|
||||
}
|
||||
#post figure.highlight.java table::before {
|
||||
content: "java";
|
||||
}
|
||||
#post figure.highlight.scala table::before {
|
||||
content: "scala";
|
||||
}
|
||||
#post figure.highlight.kotlin table::before {
|
||||
content: "kotlin";
|
||||
}
|
||||
#post figure.highlight.c table::before {
|
||||
content: "c";
|
||||
}
|
||||
#post figure.highlight.c\+\+ table::before {
|
||||
content: "c\+\+";
|
||||
}
|
||||
#post figure.highlight.cpp table::before {
|
||||
content: "cpp";
|
||||
}
|
||||
#post figure.highlight.go table::before {
|
||||
content: "go";
|
||||
}
|
||||
#post figure.highlight.less table::before {
|
||||
content: "less";
|
||||
}
|
||||
#post figure.highlight.sass table::before {
|
||||
content: "sass";
|
||||
}
|
||||
#post figure.highlight.scss table::before {
|
||||
content: "scss";
|
||||
}
|
||||
#post figure.highlight.stylus table::before {
|
||||
content: "stylus";
|
||||
}
|
||||
#post figure.highlight.styl table::before {
|
||||
content: "styl";
|
||||
}
|
||||
#post figure.highlight.typescript table::before {
|
||||
content: "typescript";
|
||||
}
|
||||
#post figure.highlight.ts table::before {
|
||||
content: "ts";
|
||||
}
|
||||
#post figure.highlight.bash table::before {
|
||||
content: "bash";
|
||||
}
|
||||
#post figure.highlight.nginx table::before {
|
||||
content: "nginx";
|
||||
}
|
||||
#post figure.highlight.lua table::before {
|
||||
content: "lua";
|
||||
}
|
||||
#post figure.highlight.markdown table::before {
|
||||
content: "markdown";
|
||||
}
|
||||
#post pre,
|
||||
.post-content pre,
|
||||
#post .highlight,
|
||||
.post-content .highlight {
|
||||
overflow: auto;
|
||||
margin: 12px 0;
|
||||
padding: 0;
|
||||
padding-top: 32px;
|
||||
background: #292d3e;
|
||||
color: #a6accd;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
figure.highlight {
|
||||
position: relative;
|
||||
}
|
||||
figure.highlight table th,
|
||||
figure.highlight table td {
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 8px;
|
||||
border-left: 2px solid $color-sub-theme;
|
||||
color: #6a737d;
|
||||
}
|
||||
#post pre,
|
||||
.post-content pre,
|
||||
#post code,
|
||||
.post-content code {
|
||||
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number !important;
|
||||
}
|
||||
#post code,
|
||||
.post-content code {
|
||||
margin: 0 2px;
|
||||
padding: 1px 4px;
|
||||
background: $rgba-color;
|
||||
color: $color-font;
|
||||
word-wrap: break-word;
|
||||
font-size: 14px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
#post pre code,
|
||||
.post-content pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: #a6accd;
|
||||
text-shadow: none;
|
||||
}
|
||||
#post .highlight,
|
||||
.post-content .highlight {
|
||||
position: relative;
|
||||
border-radius: 4px;
|
||||
}
|
||||
#post .highlight::after,
|
||||
.post-content .highlight::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
min-width: 100%;
|
||||
height: 32px;
|
||||
background: #1f222f;
|
||||
content: "";
|
||||
}
|
||||
#post .highlight pre,
|
||||
.post-content .highlight pre {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight .line::selection,
|
||||
.post-content .highlight .line::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post .highlight table,
|
||||
.post-content .highlight table {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight table::before,
|
||||
.post-content .highlight table::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
margin-top: -40px;
|
||||
padding: 0 8px;
|
||||
width: 50px;
|
||||
color: #a6accd;
|
||||
content: "Code";
|
||||
font-weight: bold;
|
||||
font-size: 8px;
|
||||
line-height: 32px;
|
||||
}
|
||||
#post .highlight table::after,
|
||||
.post-content .highlight table::after {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
background: #1f222f;
|
||||
content: "";
|
||||
}
|
||||
#post .highlight td,
|
||||
.post-content .highlight td {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight figcaption,
|
||||
.post-content .highlight figcaption {
|
||||
margin-bottom: 12px;
|
||||
color: #a6accd;
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
}
|
||||
#post .highlight figcaption a,
|
||||
.post-content .highlight figcaption a {
|
||||
float: right;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post .highlight figcaption a:hover,
|
||||
.post-content .highlight figcaption a:hover {
|
||||
border-bottom-color: #a6accd;
|
||||
}
|
||||
#post .highlight .gutter pre,
|
||||
.post-content .highlight .gutter pre {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
background-color: #292d3e;
|
||||
color: #3a3f58;
|
||||
text-align: right;
|
||||
}
|
||||
#post .highlight .code pre,
|
||||
.post-content .highlight .code pre {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
width: 100%;
|
||||
background-color: #292d3e;
|
||||
}
|
||||
#post .highlight .line,
|
||||
.post-content .highlight .line {
|
||||
height: 12px;
|
||||
}
|
||||
#post .highlight .fa-clipboard,
|
||||
.post-content .highlight .fa-clipboard {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 10px;
|
||||
z-index: 1;
|
||||
color: $color-font;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .highlight .fa-clipboard:hover,
|
||||
.post-content .highlight .fa-clipboard:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .highlight .copy-notice,
|
||||
.post-content .highlight .copy-notice {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
color: $color-theme;
|
||||
opacity: 0;
|
||||
}
|
||||
#post .gutter,
|
||||
.post-content .gutter {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
#post .gist table,
|
||||
.post-content .gist table {
|
||||
width: auto;
|
||||
}
|
||||
#post .gist table td,
|
||||
.post-content .gist table td {
|
||||
border: none;
|
||||
}
|
||||
#post pre .deletion,
|
||||
.post-content pre .deletion {
|
||||
background: #008000;
|
||||
}
|
||||
#post pre .addition,
|
||||
.post-content pre .addition {
|
||||
background: #800000;
|
||||
}
|
||||
#post pre .meta,
|
||||
.post-content pre .meta {
|
||||
color: #c792ea;
|
||||
}
|
||||
#post pre .comment,
|
||||
.post-content pre .comment {
|
||||
color: #676e95;
|
||||
}
|
||||
#post pre .comment::selection,
|
||||
.post-content pre .comment::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .variable,
|
||||
.post-content pre .variable,
|
||||
#post pre .attribute,
|
||||
.post-content pre .attribute,
|
||||
#post pre .regexp,
|
||||
.post-content pre .regexp,
|
||||
#post pre .ruby .constant,
|
||||
.post-content pre .ruby .constant,
|
||||
#post pre .xml .tag .title,
|
||||
.post-content pre .xml .tag .title,
|
||||
#post pre .xml .pi,
|
||||
.post-content pre .xml .pi,
|
||||
#post pre .xml .doctype,
|
||||
.post-content pre .xml .doctype,
|
||||
#post pre .html .doctype,
|
||||
.post-content pre .html .doctype,
|
||||
#post pre .css .id,
|
||||
.post-content pre .css .id,
|
||||
#post pre .tag .name,
|
||||
.post-content pre .tag .name,
|
||||
#post pre .css .class,
|
||||
.post-content pre .css .class,
|
||||
#post pre .css .pseudo,
|
||||
.post-content pre .css .pseudo {
|
||||
color: #ff5370;
|
||||
}
|
||||
#post pre .variable::selection,
|
||||
.post-content pre .variable::selection,
|
||||
#post pre .attribute::selection,
|
||||
.post-content pre .attribute::selection,
|
||||
#post pre .regexp::selection,
|
||||
.post-content pre .regexp::selection,
|
||||
#post pre .ruby .constant::selection,
|
||||
.post-content pre .ruby .constant::selection,
|
||||
#post pre .xml .tag .title::selection,
|
||||
.post-content pre .xml .tag .title::selection,
|
||||
#post pre .xml .pi::selection,
|
||||
.post-content pre .xml .pi::selection,
|
||||
#post pre .xml .doctype::selection,
|
||||
.post-content pre .xml .doctype::selection,
|
||||
#post pre .html .doctype::selection,
|
||||
.post-content pre .html .doctype::selection,
|
||||
#post pre .css .id::selection,
|
||||
.post-content pre .css .id::selection,
|
||||
#post pre .tag .name::selection,
|
||||
.post-content pre .tag .name::selection,
|
||||
#post pre .css .class::selection,
|
||||
.post-content pre .css .class::selection,
|
||||
#post pre .css .pseudo::selection,
|
||||
.post-content pre .css .pseudo::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .tag,
|
||||
.post-content pre .tag {
|
||||
color: #89ddff;
|
||||
}
|
||||
#post pre .tag::selection,
|
||||
.post-content pre .tag::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .number,
|
||||
.post-content pre .number,
|
||||
#post pre .preprocessor,
|
||||
.post-content pre .preprocessor,
|
||||
#post pre .literal,
|
||||
.post-content pre .literal,
|
||||
#post pre .params,
|
||||
.post-content pre .params,
|
||||
#post pre .constant,
|
||||
.post-content pre .constant,
|
||||
#post pre .command,
|
||||
.post-content pre .command {
|
||||
color: #f78c6c;
|
||||
}
|
||||
#post pre .number::selection,
|
||||
.post-content pre .number::selection,
|
||||
#post pre .preprocessor::selection,
|
||||
.post-content pre .preprocessor::selection,
|
||||
#post pre .literal::selection,
|
||||
.post-content pre .literal::selection,
|
||||
#post pre .params::selection,
|
||||
.post-content pre .params::selection,
|
||||
#post pre .constant::selection,
|
||||
.post-content pre .constant::selection,
|
||||
#post pre .command::selection,
|
||||
.post-content pre .command::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .built_in,
|
||||
.post-content pre .built_in {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
#post pre .built_in::selection,
|
||||
.post-content pre .built_in::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .ruby .class .title,
|
||||
.post-content pre .ruby .class .title,
|
||||
#post pre .css .rules .attribute,
|
||||
.post-content pre .css .rules .attribute,
|
||||
#post pre .string,
|
||||
.post-content pre .string,
|
||||
#post pre .value,
|
||||
.post-content pre .value,
|
||||
#post pre .inheritance,
|
||||
.post-content pre .inheritance,
|
||||
#post pre .header,
|
||||
.post-content pre .header,
|
||||
#post pre .ruby .symbol,
|
||||
.post-content pre .ruby .symbol,
|
||||
#post pre .xml .cdata,
|
||||
.post-content pre .xml .cdata,
|
||||
#post pre .special,
|
||||
.post-content pre .special,
|
||||
#post pre .number,
|
||||
.post-content pre .number,
|
||||
#post pre .formula,
|
||||
.post-content pre .formula {
|
||||
color: #c3e88d;
|
||||
}
|
||||
#post pre .ruby .class .title::selection,
|
||||
.post-content pre .ruby .class .title::selection,
|
||||
#post pre .css .rules .attribute::selection,
|
||||
.post-content pre .css .rules .attribute::selection,
|
||||
#post pre .string::selection,
|
||||
.post-content pre .string::selection,
|
||||
#post pre .value::selection,
|
||||
.post-content pre .value::selection,
|
||||
#post pre .inheritance::selection,
|
||||
.post-content pre .inheritance::selection,
|
||||
#post pre .header::selection,
|
||||
.post-content pre .header::selection,
|
||||
#post pre .ruby .symbol::selection,
|
||||
.post-content pre .ruby .symbol::selection,
|
||||
#post pre .xml .cdata::selection,
|
||||
.post-content pre .xml .cdata::selection,
|
||||
#post pre .special::selection,
|
||||
.post-content pre .special::selection,
|
||||
#post pre .number::selection,
|
||||
.post-content pre .number::selection,
|
||||
#post pre .formula::selection,
|
||||
.post-content pre .formula::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .keyword,
|
||||
.post-content pre .keyword,
|
||||
#post pre .title,
|
||||
.post-content pre .title,
|
||||
#post pre .css .hexcolor,
|
||||
.post-content pre .css .hexcolor {
|
||||
color: #89ddff;
|
||||
}
|
||||
#post pre .keyword::selection,
|
||||
.post-content pre .keyword::selection,
|
||||
#post pre .title::selection,
|
||||
.post-content pre .title::selection,
|
||||
#post pre .css .hexcolor::selection,
|
||||
.post-content pre .css .hexcolor::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .function,
|
||||
.post-content pre .function,
|
||||
#post pre .python .decorator,
|
||||
.post-content pre .python .decorator,
|
||||
#post pre .python .title,
|
||||
.post-content pre .python .title,
|
||||
#post pre .ruby .function .title,
|
||||
.post-content pre .ruby .function .title,
|
||||
#post pre .ruby .title .keyword,
|
||||
.post-content pre .ruby .title .keyword,
|
||||
#post pre .perl .sub,
|
||||
.post-content pre .perl .sub,
|
||||
#post pre .javascript .title,
|
||||
.post-content pre .javascript .title,
|
||||
#post pre .coffeescript .title,
|
||||
.post-content pre .coffeescript .title {
|
||||
color: #82aaff;
|
||||
}
|
||||
#post pre .function::selection,
|
||||
.post-content pre .function::selection,
|
||||
#post pre .python .decorator::selection,
|
||||
.post-content pre .python .decorator::selection,
|
||||
#post pre .python .title::selection,
|
||||
.post-content pre .python .title::selection,
|
||||
#post pre .ruby .function .title::selection,
|
||||
.post-content pre .ruby .function .title::selection,
|
||||
#post pre .ruby .title .keyword::selection,
|
||||
.post-content pre .ruby .title .keyword::selection,
|
||||
#post pre .perl .sub::selection,
|
||||
.post-content pre .perl .sub::selection,
|
||||
#post pre .javascript .title::selection,
|
||||
.post-content pre .javascript .title::selection,
|
||||
#post pre .coffeescript .title::selection,
|
||||
.post-content pre .coffeescript .title::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .tag .attr,
|
||||
.post-content pre .tag .attr,
|
||||
#post pre .javascript .function,
|
||||
.post-content pre .javascript .function {
|
||||
color: #c792ea;
|
||||
}
|
||||
#post pre .tag .attr::selection,
|
||||
.post-content pre .tag .attr::selection,
|
||||
#post pre .javascript .function::selection,
|
||||
.post-content pre .javascript .function::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
.home {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 500px) {
|
||||
.home {
|
||||
margin: 10%;
|
||||
}
|
||||
.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.article-preview-top-title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.article-preview-top-date {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1920px) {
|
||||
.home {
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 25%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
padding-top: 5%;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.article-preview-top {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.article-preview-top-date {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.article-preview-top-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page-switcher {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,494 +0,0 @@
|
||||
#post figure.highlight.js table::before {
|
||||
content: "js";
|
||||
}
|
||||
#post figure.highlight.javascript table::before {
|
||||
content: "javascript";
|
||||
}
|
||||
#post figure.highlight.python table::before {
|
||||
content: "python";
|
||||
}
|
||||
#post figure.highlight.ruby table::before {
|
||||
content: "ruby";
|
||||
}
|
||||
#post figure.highlight.xml table::before {
|
||||
content: "xml";
|
||||
}
|
||||
#post figure.highlight.html table::before {
|
||||
content: "html";
|
||||
}
|
||||
#post figure.highlight.css table::before {
|
||||
content: "css";
|
||||
}
|
||||
#post figure.highlight.perl table::before {
|
||||
content: "perl";
|
||||
}
|
||||
#post figure.highlight.sql table::before {
|
||||
content: "sql";
|
||||
}
|
||||
#post figure.highlight.coffeescript table::before {
|
||||
content: "coffeescript";
|
||||
}
|
||||
#post figure.highlight.java table::before {
|
||||
content: "java";
|
||||
}
|
||||
#post figure.highlight.scala table::before {
|
||||
content: "scala";
|
||||
}
|
||||
#post figure.highlight.kotlin table::before {
|
||||
content: "kotlin";
|
||||
}
|
||||
#post figure.highlight.c table::before {
|
||||
content: "c";
|
||||
}
|
||||
#post figure.highlight.c\+\+ table::before {
|
||||
content: "c\+\+";
|
||||
}
|
||||
#post figure.highlight.go table::before {
|
||||
content: "go";
|
||||
}
|
||||
#post figure.highlight.less table::before {
|
||||
content: "less";
|
||||
}
|
||||
#post figure.highlight.sass table::before {
|
||||
content: "sass";
|
||||
}
|
||||
#post figure.highlight.scss table::before {
|
||||
content: "scss";
|
||||
}
|
||||
#post figure.highlight.stylus table::before {
|
||||
content: "stylus";
|
||||
}
|
||||
#post figure.highlight.styl table::before {
|
||||
content: "styl";
|
||||
}
|
||||
#post figure.highlight.typescript table::before {
|
||||
content: "typescript";
|
||||
}
|
||||
#post figure.highlight.ts table::before {
|
||||
content: "ts";
|
||||
}
|
||||
#post figure.highlight.bash table::before {
|
||||
content: "bash";
|
||||
}
|
||||
#post pre,
|
||||
.post-content pre,
|
||||
#post .highlight,
|
||||
.post-content .highlight {
|
||||
overflow: auto;
|
||||
margin: 0.12rem 0;
|
||||
padding: 0;
|
||||
padding-top: 0.32rem;
|
||||
background: #292d3e;
|
||||
color: #a6accd;
|
||||
font-size: 0.14rem;
|
||||
line-height: 0.2rem;
|
||||
}
|
||||
figure.highlight {
|
||||
position: relative;
|
||||
}
|
||||
figure.highlight table th,
|
||||
figure.highlight table td {
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
blockquote {
|
||||
margin: 0;
|
||||
padding: 0 0.08rem;
|
||||
border-left: 0.02rem solid $color-sub-theme;
|
||||
color: #6a737d;
|
||||
}
|
||||
#post pre,
|
||||
.post-content pre,
|
||||
#post code,
|
||||
.post-content code {
|
||||
font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace, Helvetica Neue For Number !important;
|
||||
}
|
||||
#post code,
|
||||
.post-content code {
|
||||
margin: 0 0.02rem;
|
||||
padding: 0.01rem 0.04rem;
|
||||
background: $rgba-color;
|
||||
color: $color-font;
|
||||
word-wrap: break-word;
|
||||
font-size: 0.14rem;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
#post pre code,
|
||||
.post-content pre code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
color: #a6accd;
|
||||
text-shadow: none;
|
||||
}
|
||||
#post .highlight,
|
||||
.post-content .highlight {
|
||||
position: relative;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
#post .highlight::after,
|
||||
.post-content .highlight::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 0;
|
||||
min-width: 100%;
|
||||
height: 0.32rem;
|
||||
background: #1f222f;
|
||||
content: "";
|
||||
}
|
||||
#post .highlight pre,
|
||||
.post-content .highlight pre {
|
||||
margin: 0;
|
||||
padding: 0.08rem 0;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight .line::selection,
|
||||
.post-content .highlight .line::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post .highlight table,
|
||||
.post-content .highlight table {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
width: auto;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight table::before,
|
||||
.post-content .highlight table::before {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: inline-block;
|
||||
margin-top: -0.4rem;
|
||||
padding: 0 0.08rem;
|
||||
width: 0.5rem;
|
||||
color: #a6accd;
|
||||
content: "Code";
|
||||
font-weight: bold;
|
||||
font-size: 0.08rem;
|
||||
line-height: 0.32rem;
|
||||
}
|
||||
#post .highlight table::after,
|
||||
.post-content .highlight table::after {
|
||||
position: absolute;
|
||||
top: -0.4rem;
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
height: 0.32rem;
|
||||
background: #1f222f;
|
||||
content: "";
|
||||
}
|
||||
#post .highlight td,
|
||||
.post-content .highlight td {
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
#post .highlight figcaption,
|
||||
.post-content .highlight figcaption {
|
||||
margin-bottom: 0.12rem;
|
||||
color: #a6accd;
|
||||
font-size: 0.12rem;
|
||||
line-height: 0.12rem;
|
||||
}
|
||||
#post .highlight figcaption a,
|
||||
.post-content .highlight figcaption a {
|
||||
float: right;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post .highlight figcaption a:hover,
|
||||
.post-content .highlight figcaption a:hover {
|
||||
border-bottom-color: #a6accd;
|
||||
}
|
||||
#post .highlight .gutter pre,
|
||||
.post-content .highlight .gutter pre {
|
||||
padding-right: 0.08rem;
|
||||
padding-left: 0.08rem;
|
||||
background-color: #292d3e;
|
||||
color: #3a3f58;
|
||||
text-align: right;
|
||||
}
|
||||
#post .highlight .code pre,
|
||||
.post-content .highlight .code pre {
|
||||
padding-right: 0.08rem;
|
||||
padding-left: 0.08rem;
|
||||
width: 100%;
|
||||
background-color: #292d3e;
|
||||
}
|
||||
#post .highlight .line,
|
||||
.post-content .highlight .line {
|
||||
height: 0.12rem;
|
||||
}
|
||||
#post .highlight .fa-clipboard,
|
||||
.post-content .highlight .fa-clipboard {
|
||||
position: absolute;
|
||||
top: 0.08rem;
|
||||
right: 0.1rem;
|
||||
z-index: 1;
|
||||
color: $color-font;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .highlight .fa-clipboard:hover,
|
||||
.post-content .highlight .fa-clipboard:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .highlight .copy-notice,
|
||||
.post-content .highlight .copy-notice {
|
||||
position: absolute;
|
||||
top: 0.06rem;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
color: $color-theme;
|
||||
opacity: 0;
|
||||
}
|
||||
#post .gutter,
|
||||
.post-content .gutter {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
#post .gist table,
|
||||
.post-content .gist table {
|
||||
width: auto;
|
||||
}
|
||||
#post .gist table td,
|
||||
.post-content .gist table td {
|
||||
border: none;
|
||||
}
|
||||
#post pre .deletion,
|
||||
.post-content pre .deletion {
|
||||
background: #008000;
|
||||
}
|
||||
#post pre .addition,
|
||||
.post-content pre .addition {
|
||||
background: #800000;
|
||||
}
|
||||
#post pre .meta,
|
||||
.post-content pre .meta {
|
||||
color: #c792ea;
|
||||
}
|
||||
#post pre .comment,
|
||||
.post-content pre .comment {
|
||||
color: #676e95;
|
||||
}
|
||||
#post pre .comment::selection,
|
||||
.post-content pre .comment::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .variable,
|
||||
.post-content pre .variable,
|
||||
#post pre .attribute,
|
||||
.post-content pre .attribute,
|
||||
#post pre .regexp,
|
||||
.post-content pre .regexp,
|
||||
#post pre .ruby .constant,
|
||||
.post-content pre .ruby .constant,
|
||||
#post pre .xml .tag .title,
|
||||
.post-content pre .xml .tag .title,
|
||||
#post pre .xml .pi,
|
||||
.post-content pre .xml .pi,
|
||||
#post pre .xml .doctype,
|
||||
.post-content pre .xml .doctype,
|
||||
#post pre .html .doctype,
|
||||
.post-content pre .html .doctype,
|
||||
#post pre .css .id,
|
||||
.post-content pre .css .id,
|
||||
#post pre .tag .name,
|
||||
.post-content pre .tag .name,
|
||||
#post pre .css .class,
|
||||
.post-content pre .css .class,
|
||||
#post pre .css .pseudo,
|
||||
.post-content pre .css .pseudo {
|
||||
color: #ff5370;
|
||||
}
|
||||
#post pre .variable::selection,
|
||||
.post-content pre .variable::selection,
|
||||
#post pre .attribute::selection,
|
||||
.post-content pre .attribute::selection,
|
||||
#post pre .regexp::selection,
|
||||
.post-content pre .regexp::selection,
|
||||
#post pre .ruby .constant::selection,
|
||||
.post-content pre .ruby .constant::selection,
|
||||
#post pre .xml .tag .title::selection,
|
||||
.post-content pre .xml .tag .title::selection,
|
||||
#post pre .xml .pi::selection,
|
||||
.post-content pre .xml .pi::selection,
|
||||
#post pre .xml .doctype::selection,
|
||||
.post-content pre .xml .doctype::selection,
|
||||
#post pre .html .doctype::selection,
|
||||
.post-content pre .html .doctype::selection,
|
||||
#post pre .css .id::selection,
|
||||
.post-content pre .css .id::selection,
|
||||
#post pre .tag .name::selection,
|
||||
.post-content pre .tag .name::selection,
|
||||
#post pre .css .class::selection,
|
||||
.post-content pre .css .class::selection,
|
||||
#post pre .css .pseudo::selection,
|
||||
.post-content pre .css .pseudo::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .tag,
|
||||
.post-content pre .tag {
|
||||
color: #89ddff;
|
||||
}
|
||||
#post pre .tag::selection,
|
||||
.post-content pre .tag::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .number,
|
||||
.post-content pre .number,
|
||||
#post pre .preprocessor,
|
||||
.post-content pre .preprocessor,
|
||||
#post pre .literal,
|
||||
.post-content pre .literal,
|
||||
#post pre .params,
|
||||
.post-content pre .params,
|
||||
#post pre .constant,
|
||||
.post-content pre .constant,
|
||||
#post pre .command,
|
||||
.post-content pre .command {
|
||||
color: #f78c6c;
|
||||
}
|
||||
#post pre .number::selection,
|
||||
.post-content pre .number::selection,
|
||||
#post pre .preprocessor::selection,
|
||||
.post-content pre .preprocessor::selection,
|
||||
#post pre .literal::selection,
|
||||
.post-content pre .literal::selection,
|
||||
#post pre .params::selection,
|
||||
.post-content pre .params::selection,
|
||||
#post pre .constant::selection,
|
||||
.post-content pre .constant::selection,
|
||||
#post pre .command::selection,
|
||||
.post-content pre .command::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .built_in,
|
||||
.post-content pre .built_in {
|
||||
color: #ffcb6b;
|
||||
}
|
||||
#post pre .built_in::selection,
|
||||
.post-content pre .built_in::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .ruby .class .title,
|
||||
.post-content pre .ruby .class .title,
|
||||
#post pre .css .rules .attribute,
|
||||
.post-content pre .css .rules .attribute,
|
||||
#post pre .string,
|
||||
.post-content pre .string,
|
||||
#post pre .value,
|
||||
.post-content pre .value,
|
||||
#post pre .inheritance,
|
||||
.post-content pre .inheritance,
|
||||
#post pre .header,
|
||||
.post-content pre .header,
|
||||
#post pre .ruby .symbol,
|
||||
.post-content pre .ruby .symbol,
|
||||
#post pre .xml .cdata,
|
||||
.post-content pre .xml .cdata,
|
||||
#post pre .special,
|
||||
.post-content pre .special,
|
||||
#post pre .number,
|
||||
.post-content pre .number,
|
||||
#post pre .formula,
|
||||
.post-content pre .formula {
|
||||
color: #c3e88d;
|
||||
}
|
||||
#post pre .ruby .class .title::selection,
|
||||
.post-content pre .ruby .class .title::selection,
|
||||
#post pre .css .rules .attribute::selection,
|
||||
.post-content pre .css .rules .attribute::selection,
|
||||
#post pre .string::selection,
|
||||
.post-content pre .string::selection,
|
||||
#post pre .value::selection,
|
||||
.post-content pre .value::selection,
|
||||
#post pre .inheritance::selection,
|
||||
.post-content pre .inheritance::selection,
|
||||
#post pre .header::selection,
|
||||
.post-content pre .header::selection,
|
||||
#post pre .ruby .symbol::selection,
|
||||
.post-content pre .ruby .symbol::selection,
|
||||
#post pre .xml .cdata::selection,
|
||||
.post-content pre .xml .cdata::selection,
|
||||
#post pre .special::selection,
|
||||
.post-content pre .special::selection,
|
||||
#post pre .number::selection,
|
||||
.post-content pre .number::selection,
|
||||
#post pre .formula::selection,
|
||||
.post-content pre .formula::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .keyword,
|
||||
.post-content pre .keyword,
|
||||
#post pre .title,
|
||||
.post-content pre .title,
|
||||
#post pre .css .hexcolor,
|
||||
.post-content pre .css .hexcolor {
|
||||
color: #89ddff;
|
||||
}
|
||||
#post pre .keyword::selection,
|
||||
.post-content pre .keyword::selection,
|
||||
#post pre .title::selection,
|
||||
.post-content pre .title::selection,
|
||||
#post pre .css .hexcolor::selection,
|
||||
.post-content pre .css .hexcolor::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .function,
|
||||
.post-content pre .function,
|
||||
#post pre .python .decorator,
|
||||
.post-content pre .python .decorator,
|
||||
#post pre .python .title,
|
||||
.post-content pre .python .title,
|
||||
#post pre .ruby .function .title,
|
||||
.post-content pre .ruby .function .title,
|
||||
#post pre .ruby .title .keyword,
|
||||
.post-content pre .ruby .title .keyword,
|
||||
#post pre .perl .sub,
|
||||
.post-content pre .perl .sub,
|
||||
#post pre .javascript .title,
|
||||
.post-content pre .javascript .title,
|
||||
#post pre .coffeescript .title,
|
||||
.post-content pre .coffeescript .title {
|
||||
color: #82aaff;
|
||||
}
|
||||
#post pre .function::selection,
|
||||
.post-content pre .function::selection,
|
||||
#post pre .python .decorator::selection,
|
||||
.post-content pre .python .decorator::selection,
|
||||
#post pre .python .title::selection,
|
||||
.post-content pre .python .title::selection,
|
||||
#post pre .ruby .function .title::selection,
|
||||
.post-content pre .ruby .function .title::selection,
|
||||
#post pre .ruby .title .keyword::selection,
|
||||
.post-content pre .ruby .title .keyword::selection,
|
||||
#post pre .perl .sub::selection,
|
||||
.post-content pre .perl .sub::selection,
|
||||
#post pre .javascript .title::selection,
|
||||
.post-content pre .javascript .title::selection,
|
||||
#post pre .coffeescript .title::selection,
|
||||
.post-content pre .coffeescript .title::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
#post pre .tag .attr,
|
||||
.post-content pre .tag .attr,
|
||||
#post pre .javascript .function,
|
||||
.post-content pre .javascript .function {
|
||||
color: #c792ea;
|
||||
}
|
||||
#post pre .tag .attr::selection,
|
||||
.post-content pre .tag .attr::selection,
|
||||
#post pre .javascript .function::selection,
|
||||
.post-content pre .javascript .function::selection {
|
||||
background: #717cb4;
|
||||
color: #a6accd;
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
#footer {
|
||||
padding: 0 0.16rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 0.32rem);
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
border-top: 1px solid rgba(173,181,189,0.4);
|
||||
font-size: 0.12rem;
|
||||
color: $color-font;
|
||||
}
|
||||
#footer #side-button {
|
||||
margin-top: 0.04rem;
|
||||
width: 0.32rem;
|
||||
height: 0.32rem;
|
||||
cursor: pointer;
|
||||
line-height: 0.32rem;
|
||||
text-align: center;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#footer #side-button.close {
|
||||
transition: $transition-delay;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
#footer .right-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
#footer .right-content .busuanzi {
|
||||
margin-right: 0.16rem;
|
||||
}
|
||||
#footer .right-content .busuanzi #busuanzi_container_site_uv,
|
||||
#footer .right-content .busuanzi #busuanzi_container_site_pv {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#footer .right-content .busuanzi .footer-separator {
|
||||
margin: 0 0.08rem;
|
||||
}
|
||||
#footer .right-content .copyright {
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
#menu-outer {
|
||||
padding: 0 0.16rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: calc(100% - 0.32rem);
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
border-bottom: 1px solid rgba(173,181,189,0.4);
|
||||
}
|
||||
#menu-outer .menu-list-icon {
|
||||
display: inline-block;
|
||||
line-height: 0.56rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner {
|
||||
position: absolute;
|
||||
top: 0.56rem;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow-y: auto;
|
||||
background: rgba(0,0,0,0.6);
|
||||
transition: $transition-delay;
|
||||
z-index: 99;
|
||||
opacity: 0;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner .menu-item {
|
||||
display: block;
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
position: relative;
|
||||
padding: 0 0.16rem;
|
||||
font-size: 0.16rem;
|
||||
font-weight: bolder;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner .menu-item:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0.02rem;
|
||||
background: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner .menu-item:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner .menu-item:hover:after {
|
||||
width: 100%;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer #menu-inner.min-menu-inner.show-min-menu-inner {
|
||||
display: block;
|
||||
height: calc(100vh - 0.56rem);
|
||||
transition: $transition-delay;
|
||||
opacity: 1;
|
||||
}
|
||||
#menu-outer .right-info .search {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
font-weight: bolder;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .search:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0.02rem;
|
||||
background: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .search:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .search:hover:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .search .fas {
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
#menu-outer .right-info .title-name {
|
||||
margin-left: 0.16rem;
|
||||
position: relative;
|
||||
font-weight: bolder;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .title-name:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 0.02rem;
|
||||
background: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .title-name:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info .title-name:hover:after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#menu-outer .right-info #now-time {
|
||||
display: inline-block;
|
||||
margin-left: 0.16rem;
|
||||
text-align: right;
|
||||
}
|
||||
@@ -1,232 +0,0 @@
|
||||
#page .tag-cloud {
|
||||
padding-top: 0.32rem;
|
||||
text-align: center;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-title {
|
||||
display: inline-block;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-line {
|
||||
margin: 0 0.16rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-amount {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-tags {
|
||||
margin: 0.32rem 0 0 0;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-tags a {
|
||||
display: inline-block;
|
||||
margin: 0.16rem 0.16rem;
|
||||
}
|
||||
#page .tag-cloud .tag-cloud-tags a:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#page .category-lists {
|
||||
padding-top: 0.32rem;
|
||||
text-align: center;
|
||||
}
|
||||
#page .category-lists .category-title {
|
||||
display: inline-block;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .category-lists .category-line {
|
||||
margin: 0 0.16rem;
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .category-lists .category-amount {
|
||||
font-size: 0.3rem;
|
||||
}
|
||||
#page .category-lists .category-list {
|
||||
margin-top: 0.4rem;
|
||||
padding: 0 0 0.08rem;
|
||||
list-style: none;
|
||||
counter-reset: li;
|
||||
text-align: left;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item {
|
||||
position: relative;
|
||||
margin: 0.2rem 0;
|
||||
padding: 0.1rem 0.5rem 0.1rem 0.32rem;
|
||||
font-size: 0.14rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.08rem;
|
||||
left: 0;
|
||||
width: 0.08rem;
|
||||
height: 0.08rem;
|
||||
border: 0.04rem solid $color-sub-theme;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
line-height: 0.3rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item:hover::before {
|
||||
border: 0.04rem solid $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item:hover .category-list-link,
|
||||
#page .category-lists .category-list .category-list-item:hover .category-list-count {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item .category-list-link {
|
||||
color: $color-font;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item .category-list-count {
|
||||
margin-left: 0.16rem;
|
||||
color: $color-font;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item .category-list-count::before {
|
||||
content: '(';
|
||||
}
|
||||
#page .category-lists .category-list .category-list-item .category-list-count::after {
|
||||
content: ')';
|
||||
}
|
||||
#page .about {
|
||||
margin-bottom: 0.16rem;
|
||||
padding: 0.16rem;
|
||||
background: $rgba-color;
|
||||
border-radius: 0.04rem;
|
||||
line-height: 0.28rem;
|
||||
}
|
||||
#page .about img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#page .about a {
|
||||
color: $color-sub-theme;
|
||||
}
|
||||
#page .about a:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#page .about table {
|
||||
margin: 0.08rem 0 0.16rem 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
#page .about table thead tr th {
|
||||
padding: 0.08rem 0.16rem;
|
||||
border: 1px solid $color-font;
|
||||
background: $rgba-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#page .about table tbody tr td {
|
||||
padding: 0.08rem 0.16rem;
|
||||
border: 1px solid $color-font;
|
||||
}
|
||||
#page .about h1,
|
||||
#page .about h2,
|
||||
#page .about h3,
|
||||
#page .about h4,
|
||||
#page .about h5,
|
||||
#page .about h6 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
padding-left: 0.16rem;
|
||||
color: #fff3cd;
|
||||
}
|
||||
#page .about h1:before,
|
||||
#page .about h2:before,
|
||||
#page .about h3:before,
|
||||
#page .about h4:before,
|
||||
#page .about h5:before,
|
||||
#page .about h6:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
color: $color-sub-theme;
|
||||
content: "\f0c1";
|
||||
font: normal normal normal 0.12rem/1 FontAwesome;
|
||||
font-size: 0.12rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .about h1:hover,
|
||||
#page .about h2:hover,
|
||||
#page .about h3:hover,
|
||||
#page .about h4:hover,
|
||||
#page .about h5:hover,
|
||||
#page .about h6:hover {
|
||||
padding-left: 0.24rem;
|
||||
}
|
||||
#page .about h1:hover:before,
|
||||
#page .about h2:hover:before,
|
||||
#page .about h3:hover:before,
|
||||
#page .about h4:hover:before,
|
||||
#page .about h5:hover:before,
|
||||
#page .about h6:hover:before {
|
||||
color: $color-theme;
|
||||
}
|
||||
#page .about ol,
|
||||
#page .about ul {
|
||||
margin-top: 0.08rem;
|
||||
padding: 0 0 0 0.16rem;
|
||||
list-style: none;
|
||||
counter-reset: li;
|
||||
}
|
||||
#page .about ol p,
|
||||
#page .about ul p {
|
||||
margin: 0;
|
||||
}
|
||||
#page .about ol ol,
|
||||
#page .about ul ol,
|
||||
#page .about ol ul,
|
||||
#page .about ul ul {
|
||||
padding-left: 0.08rem;
|
||||
}
|
||||
#page .about ol li,
|
||||
#page .about ul li {
|
||||
position: relative;
|
||||
margin: 0.04rem 0;
|
||||
padding: 0.02rem 0.1rem 0.02rem 0.3rem;
|
||||
}
|
||||
#page .about ol li:hover:before,
|
||||
#page .about ul li:hover:before {
|
||||
transform: rotate(360deg);
|
||||
color: $color-theme;
|
||||
}
|
||||
#page .about ol li:before,
|
||||
#page .about ul li:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $rgba-color;
|
||||
color: $color-sub-theme;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#page .about ol li:before {
|
||||
margin-top: 0.04rem;
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
border-radius: 0.12rem;
|
||||
content: counter(li);
|
||||
counter-increment: li;
|
||||
text-align: center;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.24rem;
|
||||
}
|
||||
#page .about ul li:hover:before {
|
||||
border-color: $color-theme;
|
||||
}
|
||||
#page .about ul li:before {
|
||||
top: 0.11rem;
|
||||
margin-left: 0.04rem;
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
border: 0.018rem solid $color-sub-theme;
|
||||
background: transparent;
|
||||
content: "";
|
||||
line-height: 0.06rem;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
#pagination {
|
||||
padding: 0 0.16rem;
|
||||
height: 0.4rem;
|
||||
}
|
||||
#pagination .pagination {
|
||||
height: 0.4rem;
|
||||
text-align: center;
|
||||
}
|
||||
#pagination .pagination .prev,
|
||||
#pagination .pagination .page-number,
|
||||
#pagination .pagination .next {
|
||||
margin: 0 0.04rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border-radius: 0.04rem;
|
||||
color: $color-font;
|
||||
transition: $transition-delay;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#pagination .pagination .prev:after,
|
||||
#pagination .pagination .page-number:after,
|
||||
#pagination .pagination .next:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: $rgba-color;
|
||||
filter: blur(0.05rem);
|
||||
margin: -0.2rem;
|
||||
z-index: -1;
|
||||
}
|
||||
#pagination .pagination .prev:before,
|
||||
#pagination .pagination .page-number:before,
|
||||
#pagination .pagination .next:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.2rem;
|
||||
width: 0.3rem;
|
||||
height: 0.8rem;
|
||||
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
#pagination .pagination .prev:hover,
|
||||
#pagination .pagination .page-number:hover,
|
||||
#pagination .pagination .next:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#pagination .pagination .prev:hover:before,
|
||||
#pagination .pagination .page-number:hover:before,
|
||||
#pagination .pagination .next:hover:before {
|
||||
left: 0.4rem;
|
||||
top: -0.2rem;
|
||||
transform: rotateZ(0deg);
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#pagination .pagination .prev {
|
||||
margin-left: 0;
|
||||
}
|
||||
#pagination .pagination .page-number.current {
|
||||
color: $color-theme;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
#pagination .pagination .next {
|
||||
margin-right: 0;
|
||||
}
|
||||
#pagination .pagination .space {
|
||||
display: inline-block;
|
||||
height: 0.4rem;
|
||||
line-height: 0.3rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
#pagination .pull-left,
|
||||
#pagination .pull-right {
|
||||
padding: 0 0.16rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 0.4rem;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
color: $color-font;
|
||||
transition: $transition-delay;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#pagination .pull-left .line,
|
||||
#pagination .pull-right .line {
|
||||
position: absolute;
|
||||
transition: $transition-delay;
|
||||
background: $color-theme;
|
||||
}
|
||||
#pagination .pull-left .line.line-top,
|
||||
#pagination .pull-right .line.line-top {
|
||||
width: 0;
|
||||
height: 0.01rem;
|
||||
left: -110%;
|
||||
top: -0.01rem;
|
||||
}
|
||||
#pagination .pull-left .line.line-right,
|
||||
#pagination .pull-right .line.line-right {
|
||||
width: 0.01rem;
|
||||
height: 0;
|
||||
right: -0.01rem;
|
||||
top: -110%;
|
||||
}
|
||||
#pagination .pull-left .line.line-bottom,
|
||||
#pagination .pull-right .line.line-bottom {
|
||||
width: 0.01rem;
|
||||
height: 0;
|
||||
left: -0.01rem;
|
||||
bottom: -110%;
|
||||
}
|
||||
#pagination .pull-left .line.line-left,
|
||||
#pagination .pull-right .line.line-left {
|
||||
width: 0;
|
||||
height: 0.01rem;
|
||||
bottom: -0.01rem;
|
||||
right: -110%;
|
||||
}
|
||||
#pagination .pull-left:hover,
|
||||
#pagination .pull-right:hover {
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#pagination .pull-left:hover .line-top,
|
||||
#pagination .pull-right:hover .line-top {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
}
|
||||
#pagination .pull-left:hover .line-right,
|
||||
#pagination .pull-right:hover .line-right {
|
||||
height: 100%;
|
||||
top: 0;
|
||||
}
|
||||
#pagination .pull-left:hover .line-bottom,
|
||||
#pagination .pull-right:hover .line-bottom {
|
||||
height: 100%;
|
||||
bottom: 0;
|
||||
}
|
||||
#pagination .pull-left:hover .line-left,
|
||||
#pagination .pull-right:hover .line-left {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
}
|
||||
#pagination .pull-left:hover a,
|
||||
#pagination .pull-right:hover a {
|
||||
transition: $transition-delay;
|
||||
color: $color-theme;
|
||||
}
|
||||
#pagination .pull-left a,
|
||||
#pagination .pull-right a {
|
||||
transition: $transition-delay;
|
||||
color: $color-font;
|
||||
text-decoration: none;
|
||||
}
|
||||
#pagination .pull-left {
|
||||
float: left;
|
||||
}
|
||||
#pagination .pull-right {
|
||||
float: right;
|
||||
}
|
||||
@@ -1,301 +0,0 @@
|
||||
#post,
|
||||
.post-content {
|
||||
margin-bottom: 0.16rem;
|
||||
padding: 0.16rem;
|
||||
background: $rgba-color;
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
#post .post-header .title,
|
||||
.post-content .post-header .title {
|
||||
font-size: 0.26rem;
|
||||
color: $color-white;
|
||||
position: relative;
|
||||
margin: 0 0 0.16rem 0;
|
||||
padding: 0.08rem 0;
|
||||
display: block;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-header .title:after,
|
||||
.post-content .post-header .title:after {
|
||||
content: url("../../images/ufo.svg");
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.12rem;
|
||||
width: 0.12rem;
|
||||
height: 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#post .post-header .title:hover,
|
||||
.post-content .post-header .title:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-header .title:hover:after,
|
||||
.post-content .post-header .title:hover:after {
|
||||
animation: rotate3ding 5s infinite;
|
||||
}
|
||||
#post .post-header .container,
|
||||
.post-content .post-header .container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 0.16rem 0;
|
||||
}
|
||||
#post .post-header .container .article-icon,
|
||||
.post-content .post-header .container .article-icon {
|
||||
margin: 0 0.08rem 0 0;
|
||||
}
|
||||
#post .post-header .container .link-a,
|
||||
.post-content .post-header .container .link-a {
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-header .container .link-a:hover,
|
||||
.post-content .post-header .container .link-a:hover {
|
||||
transition: $transition-delay;
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .post-header .container .post-date,
|
||||
.post-content .post-header .container .post-date,
|
||||
#post .post-header .container .categories,
|
||||
.post-content .post-header .container .categories,
|
||||
#post .post-header .container .tags,
|
||||
.post-content .post-header .container .tags {
|
||||
display: block;
|
||||
margin-top: 0.08rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#post .post-header .container .post-date,
|
||||
.post-content .post-header .container .post-date {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#post .post-header .container .categories,
|
||||
.post-content .post-header .container .categories {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#post .post-header .container .tags,
|
||||
.post-content .post-header .container .tags {
|
||||
margin-right: 0;
|
||||
}
|
||||
#post .main-content,
|
||||
.post-content .main-content {
|
||||
line-height: 0.28rem;
|
||||
}
|
||||
#post .main-content img,
|
||||
.post-content .main-content img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#post .main-content a,
|
||||
.post-content .main-content a {
|
||||
color: $color-sub-theme;
|
||||
}
|
||||
#post .main-content a:hover,
|
||||
.post-content .main-content a:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .main-content table,
|
||||
.post-content .main-content table {
|
||||
margin: 0.08rem 0 0.16rem 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
#post .main-content table thead tr th,
|
||||
.post-content .main-content table thead tr th {
|
||||
padding: 0.08rem 0.16rem;
|
||||
border: 1px solid $color-font;
|
||||
background: $rgba-color;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#post .main-content table tbody tr td,
|
||||
.post-content .main-content table tbody tr td {
|
||||
padding: 0.08rem 0.16rem;
|
||||
border: 1px solid $color-font;
|
||||
}
|
||||
#post .main-content h1,
|
||||
.post-content .main-content h1,
|
||||
#post .main-content h2,
|
||||
.post-content .main-content h2,
|
||||
#post .main-content h3,
|
||||
.post-content .main-content h3,
|
||||
#post .main-content h4,
|
||||
.post-content .main-content h4,
|
||||
#post .main-content h5,
|
||||
.post-content .main-content h5,
|
||||
#post .main-content h6,
|
||||
.post-content .main-content h6 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
padding-left: 0.16rem;
|
||||
color: #fff3cd;
|
||||
}
|
||||
#post .main-content h1:before,
|
||||
.post-content .main-content h1:before,
|
||||
#post .main-content h2:before,
|
||||
.post-content .main-content h2:before,
|
||||
#post .main-content h3:before,
|
||||
.post-content .main-content h3:before,
|
||||
#post .main-content h4:before,
|
||||
.post-content .main-content h4:before,
|
||||
#post .main-content h5:before,
|
||||
.post-content .main-content h5:before,
|
||||
#post .main-content h6:before,
|
||||
.post-content .main-content h6:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
color: $color-sub-theme;
|
||||
content: "\f0c1";
|
||||
font: normal normal normal 0.12rem/1 FontAwesome;
|
||||
font-size: 0.12rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .main-content h1:hover,
|
||||
.post-content .main-content h1:hover,
|
||||
#post .main-content h2:hover,
|
||||
.post-content .main-content h2:hover,
|
||||
#post .main-content h3:hover,
|
||||
.post-content .main-content h3:hover,
|
||||
#post .main-content h4:hover,
|
||||
.post-content .main-content h4:hover,
|
||||
#post .main-content h5:hover,
|
||||
.post-content .main-content h5:hover,
|
||||
#post .main-content h6:hover,
|
||||
.post-content .main-content h6:hover {
|
||||
padding-left: 0.24rem;
|
||||
}
|
||||
#post .main-content h1:hover:before,
|
||||
.post-content .main-content h1:hover:before,
|
||||
#post .main-content h2:hover:before,
|
||||
.post-content .main-content h2:hover:before,
|
||||
#post .main-content h3:hover:before,
|
||||
.post-content .main-content h3:hover:before,
|
||||
#post .main-content h4:hover:before,
|
||||
.post-content .main-content h4:hover:before,
|
||||
#post .main-content h5:hover:before,
|
||||
.post-content .main-content h5:hover:before,
|
||||
#post .main-content h6:hover:before,
|
||||
.post-content .main-content h6:hover:before {
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .main-content ol,
|
||||
.post-content .main-content ol,
|
||||
#post .main-content ul,
|
||||
.post-content .main-content ul {
|
||||
margin-top: 0.08rem;
|
||||
padding: 0 0 0 0.16rem;
|
||||
list-style: none;
|
||||
counter-reset: li;
|
||||
}
|
||||
#post .main-content ol p,
|
||||
.post-content .main-content ol p,
|
||||
#post .main-content ul p,
|
||||
.post-content .main-content ul p {
|
||||
margin: 0;
|
||||
}
|
||||
#post .main-content ol ol,
|
||||
.post-content .main-content ol ol,
|
||||
#post .main-content ul ol,
|
||||
.post-content .main-content ul ol,
|
||||
#post .main-content ol ul,
|
||||
.post-content .main-content ol ul,
|
||||
#post .main-content ul ul,
|
||||
.post-content .main-content ul ul {
|
||||
padding-left: 0.08rem;
|
||||
}
|
||||
#post .main-content ol li,
|
||||
.post-content .main-content ol li,
|
||||
#post .main-content ul li,
|
||||
.post-content .main-content ul li {
|
||||
position: relative;
|
||||
margin: 0.04rem 0;
|
||||
padding: 0.02rem 0.1rem 0.02rem 0.3rem;
|
||||
}
|
||||
#post .main-content ol li:hover:before,
|
||||
.post-content .main-content ol li:hover:before,
|
||||
#post .main-content ul li:hover:before,
|
||||
.post-content .main-content ul li:hover:before {
|
||||
transform: rotate(360deg);
|
||||
color: $color-theme;
|
||||
}
|
||||
#post .main-content ol li:before,
|
||||
.post-content .main-content ol li:before,
|
||||
#post .main-content ul li:before,
|
||||
.post-content .main-content ul li:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: $rgba-color;
|
||||
color: $color-sub-theme;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .main-content ol li:before,
|
||||
.post-content .main-content ol li:before {
|
||||
margin-top: 0.04rem;
|
||||
width: 0.24rem;
|
||||
height: 0.24rem;
|
||||
border-radius: 0.12rem;
|
||||
content: counter(li);
|
||||
counter-increment: li;
|
||||
text-align: center;
|
||||
font-size: 0.12rem;
|
||||
font-weight: 600;
|
||||
line-height: 0.24rem;
|
||||
}
|
||||
#post .main-content ul li:hover:before,
|
||||
.post-content .main-content ul li:hover:before {
|
||||
border-color: $color-theme;
|
||||
}
|
||||
#post .main-content ul li:before,
|
||||
.post-content .main-content ul li:before {
|
||||
top: 0.11rem;
|
||||
margin-left: 0.04rem;
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
border: 0.018rem solid $color-sub-theme;
|
||||
background: transparent;
|
||||
content: "";
|
||||
line-height: 0.06rem;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
#post .post-copyright,
|
||||
.post-content .post-copyright {
|
||||
position: relative;
|
||||
margin: 0.4rem 0 0.2rem 0;
|
||||
padding: 0.1rem 0.16rem;
|
||||
background: $rgba-color;
|
||||
border-radius: 0.04rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-copyright:hover,
|
||||
.post-content .post-copyright:hover {
|
||||
box-shadow: 0 0 0.24rem $box-shadow-color;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-copyright-author,
|
||||
.post-content .post-copyright-author,
|
||||
#post .post-copyright-type,
|
||||
.post-content .post-copyright-type,
|
||||
#post .post-copyright-notice,
|
||||
.post-content .post-copyright-notice {
|
||||
margin: 0.12rem 0;
|
||||
}
|
||||
#post .post-copyright-meta,
|
||||
.post-content .post-copyright-meta {
|
||||
color: $color-theme;
|
||||
font-weight: bold;
|
||||
}
|
||||
#post .post-copyright-info a,
|
||||
.post-content .post-copyright-info a {
|
||||
color: $color-sub-theme;
|
||||
word-break: break-word;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#post .post-copyright-info a:hover,
|
||||
.post-content .post-copyright-info a:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
#recent-posts .recent-post-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 0.32rem 0;
|
||||
padding: 0.16rem;
|
||||
background: $rgba-color;
|
||||
border-radius: 0.04rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#recent-posts .recent-post-item:hover {
|
||||
box-shadow: 0 0 0.24rem $box-shadow-color;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#recent-posts .recent-post-item .post-title {
|
||||
position: relative;
|
||||
margin: 0 0 0.16rem 0;
|
||||
padding: 0.08rem 0;
|
||||
display: block;
|
||||
font-size: 0.24rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#recent-posts .recent-post-item .post-title:after {
|
||||
content: url("../../images/ufo.svg");
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -0.12rem;
|
||||
width: 0.12rem;
|
||||
height: 0.12rem;
|
||||
font-size: 0.12rem;
|
||||
font-weight: bolder;
|
||||
}
|
||||
#recent-posts .recent-post-item .post-title:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#recent-posts .recent-post-item .post-title:hover:after {
|
||||
animation: rotate3ding 5s infinite;
|
||||
}
|
||||
#recent-posts .recent-post-item .container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: left;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.16rem;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .article-icon {
|
||||
margin: 0 0.08rem 0 0;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .link-a {
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .link-a:hover {
|
||||
transition: $transition-delay;
|
||||
color: $color-theme;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .post-date,
|
||||
#recent-posts .recent-post-item .container .categories,
|
||||
#recent-posts .recent-post-item .container .tags {
|
||||
display: block;
|
||||
margin-top: 0.08rem;
|
||||
padding: 0.08rem 0.16rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .post-date {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .categories {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#recent-posts .recent-post-item .container .tags {
|
||||
margin-right: 0;
|
||||
}
|
||||
#recent-posts .recent-post-item .post-content {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
#recent-posts .recent-post-item .content {
|
||||
margin-top: 0.32rem;
|
||||
display: block;
|
||||
line-height: 0.28rem;
|
||||
}
|
||||
#recent-posts .recent-post-item .more {
|
||||
margin: 0.32rem 0 0.16rem 0;
|
||||
padding: 0.08rem 0;
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
text-align: center;
|
||||
font-size: 0.12rem;
|
||||
}
|
||||
@@ -1,217 +0,0 @@
|
||||
#sidebar {
|
||||
display: none;
|
||||
position: fixed;
|
||||
left: -3rem;
|
||||
width: 3rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: $rgba-color;
|
||||
}
|
||||
#sidebar .toggle-sidebar-info {
|
||||
margin: 0.16rem auto 0;
|
||||
width: 1rem;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
font-size: 0.14rem;
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar .toggle-sidebar-info span {
|
||||
display: block;
|
||||
width: 1rem;
|
||||
height: 0.32rem;
|
||||
}
|
||||
#sidebar .sidebar-toc {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.48rem;
|
||||
padding: 0 0.16rem;
|
||||
width: 2.68rem;
|
||||
height: calc(100% - 0.48rem);
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-title {
|
||||
margin-top: 0.24rem;
|
||||
font-size: 0.2rem;
|
||||
text-align: center;
|
||||
color: $color-white;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-progress {
|
||||
margin-top: 0.24rem;
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-progress .progress-notice {
|
||||
margin-right: 0.08rem;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-progress .progress-num {
|
||||
margin-right: 0.08rem;
|
||||
font-weight: 600;
|
||||
color: $color-theme;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-progress .progress-percentage {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-progress .sidebar-toc-progress-bar {
|
||||
margin-top: 0.08rem;
|
||||
height: 0.01rem;
|
||||
width: 0;
|
||||
background: $color-theme;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content {
|
||||
margin-top: 0.24rem;
|
||||
height: calc(100% - 1.4rem);
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc .toc-item {
|
||||
line-height: 0.28rem;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc .toc-item .toc-link {
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc .toc-item .toc-link:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc .toc-item .toc-link.active {
|
||||
color: $color-theme;
|
||||
}
|
||||
#sidebar .sidebar-toc .sidebar-toc-content .toc .toc-child {
|
||||
padding-left: 0.12rem;
|
||||
display: none;
|
||||
}
|
||||
#sidebar .author-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 3rem;
|
||||
}
|
||||
#sidebar .author-info.hide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
left: 0.8rem;
|
||||
top: 0.48rem;
|
||||
}
|
||||
#sidebar .author-info .author-info-avatar {
|
||||
margin-top: 0.16rem;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
#sidebar .author-info .author-info-avatar .author-info-avatar-img {
|
||||
padding: 0.02rem;
|
||||
width: 1.2rem;
|
||||
height: 1.2rem;
|
||||
border-radius: 50%;
|
||||
border: 0.02rem solid $rgba-color;
|
||||
}
|
||||
#sidebar .author-info .author-info-avatar .author-info-avatar-img:hover {
|
||||
animation: avatar 5s linear infinite;
|
||||
}
|
||||
#sidebar .author-info .author-info-name {
|
||||
margin-top: 0.16rem;
|
||||
color: $color-white;
|
||||
}
|
||||
#sidebar .author-info .author-info-description {
|
||||
margin-top: 0.24rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#sidebar .author-info .links-buttons {
|
||||
margin-top: 0.24rem;
|
||||
padding: 0 0.16rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
#sidebar .author-info .links-buttons .links-button {
|
||||
position: relative;
|
||||
margin-top: 0.12rem;
|
||||
margin-right: 0.12rem;
|
||||
padding: 0.08rem 0.16rem 0.08rem 0.22rem;
|
||||
font-size: 0.14rem;
|
||||
background: $rgba-color;
|
||||
}
|
||||
#sidebar .author-info .links-buttons .links-button .icon-dot {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.1rem;
|
||||
top: 0.12rem;
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#sidebar .author-info-articles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 0.32rem;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 0.72rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta .pull-top {
|
||||
margin-top: 0.08rem;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta .pull-bottom {
|
||||
margin: 0.08rem 0;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-archives,
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-tags {
|
||||
position: relative;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-archives:after,
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-tags:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
display: block;
|
||||
width: 0.01rem;
|
||||
height: 0.32rem;
|
||||
background: $rgba-color;
|
||||
}
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-tags,
|
||||
#sidebar .author-info-articles .article-meta.author-info-articles-categories {
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
@-moz-keyframes avatar {
|
||||
25% {
|
||||
transform: rotateZ(30deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes avatar {
|
||||
25% {
|
||||
transform: rotateZ(30deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
}
|
||||
@-o-keyframes avatar {
|
||||
25% {
|
||||
transform: rotateZ(30deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
}
|
||||
@keyframes avatar {
|
||||
25% {
|
||||
transform: rotateZ(30deg);
|
||||
}
|
||||
75% {
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.article-sort-item {
|
||||
margin: 0.16rem 0;
|
||||
position: relative;
|
||||
padding: 0 0.4rem;
|
||||
height: 0.32rem;
|
||||
line-height: 0.32rem;
|
||||
font-size: 0.16rem;
|
||||
color: $color-white;
|
||||
}
|
||||
.article-sort-item .article-time {
|
||||
margin-right: 0.24rem;
|
||||
color: #99a9bf;
|
||||
}
|
||||
.article-sort-item .article-link {
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.article-sort-item .article-link:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.article-sort-item::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.06rem;
|
||||
top: 0.09rem;
|
||||
width: 0.06rem;
|
||||
height: 0.06rem;
|
||||
border-radius: 50%;
|
||||
border: 0.04rem solid $color-sub-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.article-sort-item::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.12rem;
|
||||
top: 0.22rem;
|
||||
width: 0.02rem;
|
||||
height: 0.36rem;
|
||||
background: $color-font;
|
||||
}
|
||||
.article-sort-item:last-child::after {
|
||||
display: none;
|
||||
}
|
||||
.article-sort-item:hover::before {
|
||||
border-color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.article-sort-item.title {
|
||||
height: 0.56rem;
|
||||
line-height: 0.56rem;
|
||||
font-size: 0.24rem;
|
||||
color: $color-white;
|
||||
}
|
||||
.article-sort-item.title::before {
|
||||
top: 0.15rem;
|
||||
left: 0;
|
||||
width: 0.1rem;
|
||||
height: 0.1rem;
|
||||
border-width: 0.08rem;
|
||||
}
|
||||
.article-sort-item.title::after {
|
||||
top: 0.4rem;
|
||||
left: 0.12rem;
|
||||
height: 0.42rem;
|
||||
}
|
||||
.article-sort-item.year {
|
||||
margin: 0.16rem 0;
|
||||
height: 0.4rem;
|
||||
line-height: 0.4rem;
|
||||
font-size: 0.2rem;
|
||||
font-weight: 600;
|
||||
color: $color-white;
|
||||
}
|
||||
.article-sort-item.year::before {
|
||||
top: 0.1rem;
|
||||
left: 0.03rem;
|
||||
width: 0.08rem;
|
||||
height: 0.08rem;
|
||||
border-width: 0.06rem;
|
||||
}
|
||||
.article-sort-item.year::after {
|
||||
top: 0.3rem;
|
||||
left: 0.12rem;
|
||||
height: 0.36rem;
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
#search-box > div {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 32px;
|
||||
}
|
||||
#search-box input {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 32px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
border: 2px solid $color-theme;
|
||||
}
|
||||
.algolia-hit-item {
|
||||
position: relative;
|
||||
padding-left: 0.48rem;
|
||||
height: 0.28rem;
|
||||
line-height: 0.28rem;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.algolia-hit-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0.06rem;
|
||||
display: block;
|
||||
width: 0.16rem;
|
||||
height: 0.16rem;
|
||||
border: 0.04rem solid $color-sub-theme;
|
||||
border-radius: 50%;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.algolia-hit-item:hover::before {
|
||||
border: 0.04rem solid $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.algolia-hit-item .algolia-hit-item-link {
|
||||
display: block;
|
||||
color: $color-font;
|
||||
text-decoration: none;
|
||||
font-size: 0.14rem;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.algolia-hit-item .algolia-hit-item-link:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.algolia-hit-item .algolia-hit-item-link em {
|
||||
color: $color-theme;
|
||||
font-weight: 700;
|
||||
}
|
||||
#algolia-hits-empty {
|
||||
display: block;
|
||||
height: 0.28rem;
|
||||
line-height: 0.28rem;
|
||||
color: $color-font;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#algolia-pagination {
|
||||
display: block;
|
||||
margin: 0.24rem 0 0.08rem 0;
|
||||
padding: 0 0.16rem;
|
||||
height: 0.4rem;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
}
|
||||
#algolia-pagination .pagination {
|
||||
height: 0.4rem;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next {
|
||||
margin: 0 0.04rem;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 0.4rem;
|
||||
height: 0.4rem;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border-radius: 0.04rem;
|
||||
color: $color-font;
|
||||
transition: $transition-delay;
|
||||
font-size: 0.14rem;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous:after,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page:after,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: 0.8rem;
|
||||
height: 0.8rem;
|
||||
background: $rgba-color;
|
||||
filter: blur(0.05rem);
|
||||
margin: -0.2rem;
|
||||
z-index: -1;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous:before,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page:before,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -0.5rem;
|
||||
top: -0.2rem;
|
||||
width: 0.3rem;
|
||||
height: 0.8rem;
|
||||
background: linear-gradient(to left, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(255,255,255,0));
|
||||
transform: rotateZ(-30deg);
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous:hover,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page:hover,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous:hover:before,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page:hover:before,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next:hover:before {
|
||||
left: 0.4rem;
|
||||
top: -0.2rem;
|
||||
transform: rotateZ(0deg);
|
||||
transition: $transition-delay;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous a:hover,
|
||||
#algolia-pagination .pagination .ais-pagination--item__page a:hover,
|
||||
#algolia-pagination .pagination .ais-pagination--item__next a:hover {
|
||||
color: $color-theme;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__previous {
|
||||
margin-left: 0;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__page.current {
|
||||
color: $color-theme;
|
||||
font-size: 0.16rem;
|
||||
background: none;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__page.current a {
|
||||
color: $color-theme;
|
||||
}
|
||||
#algolia-pagination .pagination .ais-pagination--item__next {
|
||||
margin-right: 0;
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
.search-dialog {
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
z-index: 1001;
|
||||
display: none;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 0.2rem;
|
||||
width: 6rem;
|
||||
background: rgba(0,0,0,0.9);
|
||||
box-shadow: 0 0 0.32rem rgba(255,255,255,0.2);
|
||||
border-radius: 0.04rem;
|
||||
}
|
||||
.search-dialog #algolia-search-title {
|
||||
padding: 0 0 0.14rem 0;
|
||||
color: $color-theme;
|
||||
font-size: 0.2rem;
|
||||
}
|
||||
.search-dialog .search-close-button {
|
||||
position: absolute;
|
||||
top: 0.1rem;
|
||||
right: 0.1rem;
|
||||
color: $color-white;
|
||||
cursor: pointer;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.search-dialog .search-close-button:hover {
|
||||
color: $color-theme;
|
||||
transition: $transition-delay;
|
||||
}
|
||||
.search-dialog hr {
|
||||
display: block;
|
||||
height: 0;
|
||||
border: 0;
|
||||
}
|
||||
.search-mask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
3609
css/obsidian.css
3609
css/obsidian.css
File diff suppressed because it is too large
Load Diff
79
css/page.css
79
css/page.css
@@ -1,79 +0,0 @@
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.profile-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 500px) {
|
||||
.page {
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page-meta {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1920px) {
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.page-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 55%;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
width: 700px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#gitalk-container {
|
||||
width: 700px;
|
||||
}
|
||||
}
|
||||
102
css/post.css
102
css/post.css
@@ -1,102 +0,0 @@
|
||||
.post {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: black;
|
||||
margin-top: 5%;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 500px) {
|
||||
.post {
|
||||
margin: 10%;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 5%;
|
||||
margin-left: 5%;
|
||||
}
|
||||
|
||||
.post-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 10%;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.toc {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.license {
|
||||
display: contents;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: small;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1920px) {
|
||||
.breadcrumb {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.post-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 800px;
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
.post-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toc {
|
||||
max-width: 15%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin-left: 1%;
|
||||
margin-top: 10%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.license {
|
||||
display: contents;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: small;
|
||||
}
|
||||
|
||||
#gitalk-container {
|
||||
width: 800px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
418
css/style.css
418
css/style.css
@@ -1,418 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Lora;
|
||||
src: url("../font/Lora-Regular.ttf"), url("../font/Lora-Regular.eot");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lora-Bold;
|
||||
src: url("../font/Lora-Bold.ttf"), url("../font/Lora-Bold.eot");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato;
|
||||
src: url("../font/Lato-Regular.ttf"), url("../font/Lato-Regular.eot");
|
||||
}
|
||||
@font-face {
|
||||
font-family: Lato-Bold;
|
||||
src: url("../font/Lato-Bold.ttf"), url("../font/Lato-Bold.eot");
|
||||
}
|
||||
pre {
|
||||
border: 1px dashed #ddd;
|
||||
}
|
||||
code {
|
||||
padding: 2px 4px;
|
||||
font-size: 90%;
|
||||
color: #c7254e;
|
||||
background-color: #f9f2f4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
}
|
||||
.header h1,
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.header .title a {
|
||||
color: #f78769;
|
||||
text-decoration: none;
|
||||
font: 700 3rem Lora-Bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.header .title a:hover {
|
||||
color: #bbb;
|
||||
}
|
||||
.header .desc {
|
||||
margin: 0.5em 0 0.25em;
|
||||
font: 18px Lora;
|
||||
color: #bbb;
|
||||
}
|
||||
.header .links {
|
||||
height: 40px;
|
||||
margin: 2.25em auto 4.5em;
|
||||
border-top: 1px dashed #ddd;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
font: 700 13px Lato-Bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.header .links ul {
|
||||
text-decoration: none;
|
||||
padding: 0;
|
||||
}
|
||||
.header .links ul li {
|
||||
display: inline-block;
|
||||
}
|
||||
.header .links ul li:first-child::after {
|
||||
content: "\00B7";
|
||||
margin: 0 0.75em;
|
||||
}
|
||||
.header .links ul li:last-child::after {
|
||||
content: '';
|
||||
}
|
||||
.header .links ul li a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.header .links ul li a:hover {
|
||||
color: #f78769;
|
||||
}
|
||||
.header .ipad-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 4em;
|
||||
left: -1px;
|
||||
}
|
||||
.header .mobile-menu {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: calc(100% - 3em);
|
||||
padding: 0 1.5em;
|
||||
height: 3em;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 1px 5px #ddd;
|
||||
}
|
||||
.header .mobile-menu h3 a {
|
||||
color: #f78769;
|
||||
text-decoration: none;
|
||||
font: 700 1.6rem Lora-Bold;
|
||||
text-shadow: 1px 1px #fff, 2px 2px #f78769;
|
||||
}
|
||||
.header .mobile-menu h3 a:hover {
|
||||
color: #bbb;
|
||||
}
|
||||
.header .menu {
|
||||
padding: 0.5em 1em;
|
||||
border: 1px dashed #fff;
|
||||
outline: 5px solid #bbb;
|
||||
background: #bbb;
|
||||
font: 700 14px Lato-Bold;
|
||||
color: #fff;
|
||||
text-transform: upperCase;
|
||||
}
|
||||
.header .menu::before {
|
||||
content: '';
|
||||
background: url("https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/menu.svg");
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 3px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
.header .menu:focus,
|
||||
.header .menu:active {
|
||||
background: #f78769;
|
||||
outline: 3px solid #f78769;
|
||||
}
|
||||
@media screen and (max-width: 1015px) {
|
||||
.header .ipad-menu {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.header .title a {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.header .ipad-menu {
|
||||
display: none;
|
||||
}
|
||||
.header .mobile-menu {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.header .mobile-menu .menu {
|
||||
padding: 0.2em 0.5em;
|
||||
font: 700 12px Lato-Bold;
|
||||
outline: 3px solid #bbb;
|
||||
}
|
||||
}
|
||||
.post {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-bottom: 1px dashed #ddd;
|
||||
margin: 0 0 4.5em;
|
||||
padding: 0 0 3em;
|
||||
}
|
||||
.post::after {
|
||||
content: '';
|
||||
display: block;
|
||||
background: url("https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/button.svg") no-repeat -46px top/132px 35px;
|
||||
width: 88px;
|
||||
height: 35px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
transform: translate(-50%, -18px);
|
||||
}
|
||||
.post .post-cat {
|
||||
display: inline-block;
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.post .post-cat:first-of-type::after {
|
||||
content: "\00B7";
|
||||
margin: 0 0.75em;
|
||||
color: #f78769;
|
||||
}
|
||||
.post .post-cat:last-of-type::after {
|
||||
content: '';
|
||||
}
|
||||
.post .post-cat a {
|
||||
font: 700 13px Lato-Bold;
|
||||
color: #f78769;
|
||||
text-decoration: none;
|
||||
transition: 0.3s;
|
||||
text-transform: upperCase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.post .post-cat a:hover {
|
||||
color: #777;
|
||||
}
|
||||
.post .post-title {
|
||||
margin: 0 0 0.5em;
|
||||
font: 1.953em Lora;
|
||||
color: #777;
|
||||
}
|
||||
.post .post-title::after {
|
||||
content: "";
|
||||
display: block;
|
||||
margin: 0.5em auto;
|
||||
width: 20%;
|
||||
height: 2px;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
.post .post-title a {
|
||||
color: #777;
|
||||
text-decoration: none;
|
||||
}
|
||||
.post .post-date {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
color: #bbb;
|
||||
font: 14px/1.6 Lato;
|
||||
}
|
||||
.post .post-date li {
|
||||
display: inline-block;
|
||||
}
|
||||
.post .post-date li:first-child::after {
|
||||
content: "\00B7";
|
||||
margin: 0 0.75em;
|
||||
}
|
||||
.post .post-cover {
|
||||
position: relative;
|
||||
user-select: none;
|
||||
}
|
||||
.post .post-cover:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 82%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
box-shadow: 0 0 40px 10px #fff inset;
|
||||
}
|
||||
.post .post-cover img {
|
||||
max-width: 80%;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.post .post-content {
|
||||
position: relative;
|
||||
color: #777;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5em;
|
||||
text-align: left;
|
||||
}
|
||||
.post .post-content a.more-link {
|
||||
box-shadow: inset 0 -80px 80px -5px rgba(255,255,255,0.75);
|
||||
color: #f78769;
|
||||
font-family: Lora-Bold;
|
||||
font-weight: 700;
|
||||
display: block;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -32px;
|
||||
padding-top: 100px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.post .post-content a.more-link:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
.post .post-content img {
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.aside {
|
||||
overflow: hidden;
|
||||
width: 25%;
|
||||
float: right;
|
||||
}
|
||||
.close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 1.5em;
|
||||
top: 1em;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.close:before,
|
||||
.close:after {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
content: ' ';
|
||||
height: 24px;
|
||||
width: 2px;
|
||||
background-color: #333;
|
||||
}
|
||||
.close:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.close:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.aside-section {
|
||||
margin: 0 0 3em;
|
||||
}
|
||||
.aside-section h1 {
|
||||
font: 1.25em/1.2 Lora;
|
||||
margin: 0.67em 0;
|
||||
color: #777;
|
||||
}
|
||||
.aside-section h1:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
margin-right: 0.45em;
|
||||
float: left;
|
||||
background: url("https://cdn.jsdelivr.net/gh/frontendsophie/hexo-theme-autumn@1.0.0/source/img/button.svg") no-repeat 0 0/84px 22px;
|
||||
width: 22px;
|
||||
height: 32px;
|
||||
}
|
||||
.aside-section ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.aside-section ul li {
|
||||
border-top: 1px dashed #ddd;
|
||||
margin-top: 0.6em;
|
||||
padding-top: 0.6em;
|
||||
}
|
||||
.aside-section ul li a {
|
||||
color: #f78769;
|
||||
text-decoration: none;
|
||||
font: 14px Lato;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.aside-section ul li a:hover {
|
||||
color: #ddd;
|
||||
}
|
||||
.aside-section.tag li {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
.aside-section.tag li a {
|
||||
border: 1px dashed #ddd;
|
||||
padding: 4px;
|
||||
}
|
||||
@media screen and (max-width: 1015px) {
|
||||
.aside {
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 28%;
|
||||
height: 100vh;
|
||||
padding: 3em 20px 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 1px 1px 3px #ddd;
|
||||
}
|
||||
.aside .close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.aside {
|
||||
width: calc(100% - 40px);
|
||||
box-shadow: none;
|
||||
}
|
||||
.aside .close {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
.aside .close:before,
|
||||
.aside .close:after {
|
||||
left: 15px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
.container {
|
||||
max-width: 1142px;
|
||||
width: 80%;
|
||||
box-sizing: border-box;
|
||||
padding: 3em 5%;
|
||||
background: #fff;
|
||||
margin: 3em auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
.container .main {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
.invisibile {
|
||||
visibility: hidden;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 1015px) {
|
||||
.container .main {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.container {
|
||||
margin: 3em 0 0;
|
||||
width: 100%;
|
||||
padding: 1.75em;
|
||||
}
|
||||
}
|
||||
93
css/tag.css
93
css/tag.css
@@ -1,93 +0,0 @@
|
||||
.tag {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 10px) and (max-width: 500px) {
|
||||
.tag {
|
||||
margin: 10%;
|
||||
}
|
||||
.avatar {
|
||||
width: 40%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, auto);
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
.article-preview-top-title {
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.article-preview-top-date {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 501px) and (max-width: 1920px) {
|
||||
.tag {
|
||||
margin: 5%;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 25%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.nav-bar-item-title {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article-preview {
|
||||
padding-top: 5%;
|
||||
width: 700px;
|
||||
}
|
||||
|
||||
.article-preview-top {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.article-preview-top-date {
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.article-preview-top-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.page-switcher {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
:root {
|
||||
--font-color: #000;
|
||||
--night-font-color: #ddd;
|
||||
--primary: #b2fefa;
|
||||
--secondary: #0ed2f7;
|
||||
--dark: #0052d4;
|
||||
--gradient-light: #5d9eea;
|
||||
--gradient-middle: #0f27b5;
|
||||
--gradient-dark: #100e17;
|
||||
--code-gradient-light: #cff0ff;
|
||||
--code-gradient-dark: #afcafd;
|
||||
--maxwidth: 1284px;
|
||||
}
|
||||
/* roboto-mono-regular */
|
||||
@font-face {
|
||||
font-family: 'Roboto Mono';
|
||||
font-style: normal;
|
||||
font-weight: regular;
|
||||
src: url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local('Roboto Mono'), local('RobotoMono-Normal'), url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.eot?#iefix") format('embedded-opentype'), url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.woff2") format('woff2'), url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.woff") format('woff'), url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.ttf") format('truetype'), url("//lib.baomitu.com/fonts/roboto-mono/roboto-mono-regular.svg#RobotoMono") format('svg'); /* Legacy iOS */
|
||||
}
|
||||
/* rubik-regular */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-style: normal;
|
||||
font-weight: regular;
|
||||
src: url("//lib.baomitu.com/fonts/rubik/rubik-regular.eot"); /* IE9 Compat Modes */
|
||||
src: local('Rubik'), local('Rubik-Normal'), url("//lib.baomitu.com/fonts/rubik/rubik-regular.eot?#iefix") format('embedded-opentype'), url("//lib.baomitu.com/fonts/rubik/rubik-regular.woff2") format('woff2'), url("//lib.baomitu.com/fonts/rubik/rubik-regular.woff") format('woff'), url("//lib.baomitu.com/fonts/rubik/rubik-regular.ttf") format('truetype'), url("//lib.baomitu.com/fonts/rubik/rubik-regular.svg#Rubik") format('svg'); /* Legacy iOS */
|
||||
}
|
||||
.gradient-text {
|
||||
background: var(--primary) !important;
|
||||
background: -webkit-linear-gradient(to right, var(--primary), var(--secondary), var(--dark)) !important;
|
||||
background: linear-gradient(to right, var(--primary), var(--secondary), var(--dark)) !important;
|
||||
-webkit-background-clip: text !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
-webkit-box-decoration-break: clone !important;
|
||||
box-decoration-break: clone !important;
|
||||
}
|
||||
.gradient-bg {
|
||||
background: var(--primary) !important;
|
||||
background: -webkit-linear-gradient(to right, var(--primary), var(--secondary), var(--dark)) !important;
|
||||
background: linear-gradient(to right, var(--primary), var(--secondary), var(--dark)) !important;
|
||||
}
|
||||
.gradient-bg-rev {
|
||||
background: var(--primary) !important;
|
||||
background: -webkit-linear-gradient(to right, var(--dark), var(--secondary), var(--primary)) !important;
|
||||
background: linear-gradient(to right, var(--dark), var(--secondary), var(--primary)) !important;
|
||||
}
|
||||
BIN
css/thirdparty/fa-solid-900.woff
vendored
BIN
css/thirdparty/fa-solid-900.woff
vendored
Binary file not shown.
3823
css/thirdparty/fontawesome.css
vendored
3823
css/thirdparty/fontawesome.css
vendored
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
57
css/thirdparty/reset.css
vendored
57
css/thirdparty/reset.css
vendored
@@ -1,57 +0,0 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
html,
|
||||
body,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
/* HTML5 hidden-attribute fix for newer browsers */
|
||||
*[hidden] {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
blockquote:after,
|
||||
q:before,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user