feat: new style and faster

This commit is contained in:
Dillon
2019-08-12 01:36:19 +08:00
parent a8bb44da3a
commit 9433736ede
75 changed files with 2330 additions and 4364 deletions

View File

@@ -1,129 +0,0 @@
/** Font **/
/* Lato */
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
/* Montserrat */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
/* Roboto */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
html {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
height: 40px;
background-color: #eee;
border-radius: 16px;
&:hover {
background-color: #ddd;
}
}
}
::selection {
background: rgba(0, 149, 255, 0.1);
}
html {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
}
body {
font-size: 11pt;
font-weight: 400;
line-height: 2em;
background-color: $light-background-color;
color: $light-font-color;
&:before {
content: "";
background-repeat: no-repeat;
background-position: center;
opacity: 0.05;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
&.dark-theme {
background-color: $dark-background-color;
color: $dark-font-color;
}
}
a {
color: $light-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $light-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.dark-theme & {
color: $dark-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover{
color: $dark-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
}
}
blockquote {
font-size: 1rem;
display: block;
border-width: 1px 0;
border-style: solid;
border-color: $light-border-color;
padding: 1.5em 1.2em 0.5em 1.2em;
margin: 0 0 2em 0;
position: relative;
&:before {
content: '\201C';
position: absolute;
top: 0em;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 2rem;
font: 6em/1.08em 'PT Sans', sans-serif;
color: $light-post-link-color;
text-align: center;
.dark-theme &{
color: $dark-post-link-color;
}
}
&:after {
content: "#blockquote" attr(cite);
display: block;
text-align: right;
font-size: 0.875em;
color: $light-post-link-color;
.dark-theme &{
color: $dark-post-link-color;
}
}
.dark-theme & {
border-color: $dark-border-color;
}
}

View File

@@ -1,45 +0,0 @@
/** Layout **/
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.navbar {
height: 4rem;
line-height: 4rem;
width: 100%;
.container {
width: auto;
max-width: 1200px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
}
.main {
flex: 1 0 auto;
}
.container{
padding-left: 1em;
padding-right: 1em;
}
.footer {
height: 4rem;
width: 100%;
text-align: center;
line-height: 4rem;
padding-top: 2em;
}
.notfound {
font-size: 2em;
transform: translateY(35vh);
text-align: center;
}

View File

@@ -1,158 +0,0 @@
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.navbar {
display: none;
}
.navbar-mobile {
display: block !important;
position: fixed;
width: 100%;
z-index: 100;
transition: all 0.6s ease 0s;
.container {
padding: 0;
margin: 0;
height: 5em;
line-height: 5.5em;
background: $light-background-color;
.navbar-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-right: 1em;
padding-left: 1em;
box-sizing: border-box;
.menu-toggle {
cursor: pointer;
line-height: 5.5em;
span {
display: block;
background: #000;
width: 36px;
height: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: .25s margin .25s, .25s transform;
-moz-transition: .25s margin .25s, .25s transform;
transition: .25s margin .25s, .25s transform;
.dark-theme & {
background: $dark-font-color;
}
}
span:nth-child(1) {
margin-bottom: 8px;
}
span:nth-child(3) {
margin-top: 8px;
}
&.active {
span {
-webkit-transition: .25s margin, .25s transform .25s;
-moz-transition: .25s margin, .25s transform .25s;
transition: .25s margin, .25s transform .25s;
}
span:nth-child(1) {
-moz-transform: rotate(45deg) translate(4px, 6px);
-ms-transform: rotate(45deg) translate(4px, 6px);
-webkit-transform: rotate(45deg) translate(4px, 6px);
transform: rotate(45deg) translate(4px, 6px);
}
span:nth-child(2) {
opacity: 0
}
span:nth-child(3) {
-moz-transform: rotate(-45deg) translate(8px, -10px);
-ms-transform: rotate(-45deg) translate(8px, -10px);
-webkit-transform: rotate(-45deg) translate(8px, -10px);
transform: rotate(-45deg) translate(8px, -10px);
}
}
}
}
.menu {
text-align: center;
background: #ffffff;
border-top: 2px solid #000000;
padding-top: 1em;
padding-bottom: 1em;
display: none;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
a {
display: block;
line-height: 2.5em;
}
&.active {
display: block;
}
.dark-theme & {
background: $dark-background-color;
border-top: 2px solid $dark-font-secondary-color;
}
}
.dark-theme & {
background: $dark-background-color !important;
}
}
}
#dynamic-to-top {
display: none !important;
}
.footer {
height: 3rem;
width: 100%;
text-align: center;
line-height: 1.5rem;
padding-top: 2em;
}
.post-warp {
padding-top: 6em;
.archive-item-date {
display: none;
}
.categories-card {
.card-item {
width: 95%;
}
}
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
.navbar-mobile {
display: none;
}
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
/* Styles */
}

View File

@@ -1,356 +0,0 @@
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
@charset "UTF-8";
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
html,
body,
main,
div,
span,
a,
li,
ul,
hr,
h1,
h2,
h3,
h4 {
padding: 0;
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

View File

@@ -1,54 +0,0 @@
/** Home **/
.intro {
transform: translateY(25vh);
text-align: center;
.avatar {
padding: 10px;
img {
width: 128px;
height: auto;
display: inline-block;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
margin: 0 auto;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
cursor: pointer;
&:hover {
position: relative;
-webkit-transform: translateY(-0.75em);
-moz-transform: translateY(-0.75em);
-ms-transform: translateY(-0.75em);
-o-transform: translateY(-0.75em);
transform: translateY(-0.75em);
cursor: pointer;
}
}
}
}
h2.description {
font-size: 1em;
font-weight: normal;
padding: 5px;
}
.social-links {
a {
padding: 0 5px;
&:hover {
background-color: transparent;
}
}
.iconfont {
font-size: 2em;
}
}

View File

@@ -1,60 +0,0 @@
.post-warp {
.intro {
transform: translateY(0);
margin: 2em 0 5em 0;
.avatar {
img {
width: 96px;
}
}
}
.post {
margin-bottom: 4em;
border-bottom: 1px dashed #ddd;
.post-content {
padding-top: .5em;
}
.post-footer {
display: flex;
justify-content: space-between;
align-items: center;
.post-meta {
a {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
&:hover {
color: $light-font-secondary-color !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
}
}
}
.post-tags {
span {
a {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
&:hover {
color: $light-font-secondary-color !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
}
}
}
}
}
}
}

View File

@@ -1,363 +0,0 @@
/** Post **/
.post-warp {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
padding-top: 2rem;
.post-header h1 {
margin: 0 !important;
}
.post-title {
font-size: 2em;
line-height: 1.5em;
}
.post-meta {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
a {
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
&:hover {
color: $light-post-link-hover-color;
.dark-theme & {
color: $dark-post-link-hover-color;
}
}
}
}
.post-content {
padding-top: 1rem;
h2,
h3,
h4,
h5,
h6 {
padding-top: .8em;
padding-bottom: .3em;
}
h2::before {
content: "#";
margin-right: 5px;
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
h3::before {
content: "|";
margin-right: 5px;
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
a {
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
a:hover {
color: $light-post-link-hover-color;
.dark-theme &:hover {
color: $dark-post-link-hover-color;
font-weight: bold;
text-decoration: underline;
}
}
code,
pre {
padding: 7px;
font-size: 13px;
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
word-break: break-all;
word-wrap: break-word;
}
code:not([class]) {
padding: 5px 5px;
background: #fff;
border: 1px solid #ddd;
box-shadow: 1px 1px 0 #fff, 2px 2px 0 #ddd;
margin-left: 3px;
margin-right: 3px;
.dark-theme &:not([class]) {
background: transparent;
box-shadow: 1px 1px 0 $dark-font-secondary-color, 2px 2px 0 $dark-font-secondary-color;
}
}
ul {
padding-left: 2em;
}
table {
max-width: 100%;
margin: 10px 0;
border-spacing: 0;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
th,
td {
padding: 5px 15px;
border: 1px double #ebe9f5;
}
}
figure {
text-align: center;
img:hover{
cursor: zoom-in;
}
}
.image-caption:not(:empty) {
min-width: 20%;
max-width: 80%;
display: inline-block;
padding: 10px;
margin: 0 auto;
border-bottom: 1px solid #d9d9d9;
font-size: 14px;
color: #969696;
line-height: 1.7;
}
img {
display: block;
max-width: 80%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
img[data-action="zoom"] {
cursor: zoom-in;
}
.featured_image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
div.typeit-code {
padding: 6px;
font-size: 14px;
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
font-weight:bold;
word-break: break-all;
.k {
color: #D371E3;
}
.kt {
color: #D371E3;
}
.kc {
color: #D371E3;
}
.o {
color: #D371E3;
}
.n {
color: #ECBF6F;
}
.nf {
color: #F16473;
}
.na {
color: #41B1F5;
}
.s {
color: #8BC56F;
}
.n {
color: #DB975C;
}
.c1 {
color: #7E848F;
white-space: pre-wrap;
}
.space {
white-space: pre;
}
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.float-right {
float: right;
}
}
p {
font-size: 1em;
margin: .5em 0 .5em 0;
}
.post-copyright {
margin-top: 5rem;
border-top: 1px solid $light-border-color;
border-bottom: 1px solid $light-border-color;
.copyright-item {
margin: 5px 0;
}
.dark-theme & {
border-top: 1px solid $dark-border-color;
border-bottom: 1px solid $dark-border-color;
}
}
.post-tags {
padding: 1rem 0 1rem;
display: flex;
justify-content: space-between;
}
.post-nav {
&:before,
&:after {
content: " ";
display: table;
}
& a.prev,
& a.next {
font-weight: 600;
font-size: 16px;
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.3s;
}
& a.prev {
float: left;
}
& a.prev:hover {
transform: translateX(-4px);
}
& a.next {
float: right;
}
& a.next:hover {
transform: translateX(4px);
}
}
.tag:not(:last-child) a::after {
content: " / ";
}
.post-comment {
padding: 3em 0;
}
}
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
/* Keyword */ .chroma .k { color: #ff79c6 }
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
/* KeywordType */ .chroma .kt { color: #8be9fd }
/* NameAttribute */ .chroma .na { color: #50fa7b }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
/* NameClass */ .chroma .nc { color: #50fa7b }
/* NameFunction */ .chroma .nf { color: #50fa7b }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
/* NameTag */ .chroma .nt { color: #ff79c6 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
/* LiteralString */ .chroma .s { color: #f1fa8c }
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #ff79c6 }
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
/* Comment */ .chroma .c { color: #6272a4 }
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
/* GenericDeleted */ .chroma .gd { color: #8b080b }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }

View File

@@ -1,32 +0,0 @@
.tag-cloud-tags {
margin: 10px 0;
a {
display: inline-block;
position: relative;
margin: 5px 10px;
word-wrap: break-word;
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;
&:active,
&:focus,
&:hover {
color: $light-global-link-hover-color;
transform: scale(1.1);
.dark-theme &{
color: $dark-global-link-hover-color;
}
}
small {
color: $light-font-secondary-color;
.dark-theme &{
color: $dark-global-link-hover-color;
}
}
}
}

View File

@@ -1,82 +0,0 @@
.post-warp {
.archive-item {
margin-left: 2rem;
}
.categories-card {
margin: 0 auto;
margin-top: 3em;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
padding: 0 2.5em;
line-height: 1.6em;
.card-item {
font-size: 14px;
text-align: left;
width: 45%;
display: flex;
align-items: flex-start;
margin-top:2em;
min-height: 16em;
padding: 0 2%;
position: relative;
.categories{
overflow: hidden;
}
}
}
.archive-item-link {
display: inline-block;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 95%;
&:hover {
color: $light-global-link-hover-color;
background-color: transparent;
}
.dark-theme & {
color: $dark-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $dark-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
}
}
.archive-item-date {
float: right;
text-align: right;
color: $light-font-secondary-color;
.dark-theme & {
color: $dark-font-secondary-color;
}
}
.more-post {
text-align: right;
}
}
.categories {
h3 {
display: inline-block;
}
span {
float: right;
padding-right: 1em;
}
}

View File

@@ -1,118 +0,0 @@
/*
* Derived from einaros's Sons of Obsidian theme at
* http://studiostyl.es/schemes/son-of-obsidian by
* Alex Ford of CodeTunnel:
* http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
*/
.str
{
color: #EC7600;
}
.kwd
{
color: #93C763;
}
.com
{
color: #66747B;
}
.typ
{
color: #678CB1;
}
.lit
{
color: #FACD22;
}
.pun
{
color: #F1F2F3;
}
.pln
{
color: #F1F2F3;
}
.tag
{
color: #8AC763;
}
.atn
{
color: #E0E2E4;
}
.atv
{
color: #EC7600;
}
.dec
{
color: purple;
}
pre.prettyprint
{
border: 0px solid #888;
}
ol.linenums
{
margin-top: 0;
margin-bottom: 0;
}
.prettyprint {
background: #000;
}
li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
{
color: #555;
list-style-type: decimal;
}
li.L1, li.L3, li.L5, li.L7, li.L9 {
background: #111;
}
@media print
{
.str
{
color: #060;
}
.kwd
{
color: #006;
font-weight: bold;
}
.com
{
color: #600;
font-style: italic;
}
.typ
{
color: #404;
font-weight: bold;
}
.lit
{
color: #044;
}
.pun
{
color: #440;
}
.pln
{
color: #000;
}
.tag
{
color: #006;
font-weight: bold;
}
.atn
{
color: #404;
}
.atv
{
color: #060;
}
}

View File

@@ -1,49 +0,0 @@
/**Footer**/
.copyright {
font-size: 14px;
}
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 2em;
right: 2em;
top: auto;
left: auto;
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #333;
font-weight: bold;
padding: 17px 16px;
border: 1px solid $light-border-color;
background: #222;
&:hover {
background: #000;
cursor: pointer;
}
&:active {
background: #000;
outline: none;
}
outline: none;
&:focus, &:hover {
outline: none;
}
span {
display: block;
overflow: hidden;
width: 14px;
height: 12px;
background: url('data:image/png;base64,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') no-repeat center center;
}
.dark-theme &{
border: 1px solid $dark-border-color;
}
}

View File

@@ -1,30 +0,0 @@
.header-logo a{
padding: 0 ;
i{
line-height: 2em;
}
}
.navbar .menu a {
padding: 0 8px;
}
.navbar .menu .active{
font-weight: 900;
color: $light-navbar-active-color;
.dark-theme &{
color: $dark-navbar-active-color;
}
}
.navbar-header a:hover, .navbar .menu a:hover {
background-color: transparent;
}

View File

@@ -1,83 +0,0 @@
/** pagination **/
.pagination {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
white-space: nowrap;
width: 100%;
padding-top: 2em;
a {
-webkit-font-smoothing: antialiased;
font-size: 12px;
color: #bfbfbf;
letter-spacing: 0.1em;
font-weight: 700;
padding: 5px 5px;
text-decoration: none;
transition: 0.3s;
}
li {
padding-bottom: 3px;
margin: 0 20px;
box-sizing: border-box;
position: relative;
display: inline;
&.disabled {
display: none;
}
&:hover a {
color: $light-pagination-link-active-color;
}
.dark-theme &:hover a {
color: $dark-pagination-link-active-color;
}
&:before,
&:after {
position: absolute;
content: "";
width: 0;
height: 3px;
background: $light-pagination-link-active-color;
transition: 0.3s;
bottom: 0px;
}
.dark-theme &:before,
.dark-theme &:after{
background: $dark-pagination-link-active-color;
}
&:before .active,
&:after .active {
width: 100%;
}
&:before {
left: 50%;
}
&:after {
right: 50%;
}
&:hover {
&:before,
&:after {
width: 50%;
}
}
&.active {
a {
color: $light-pagination-link-active-color;
}
.dark-theme & a {
color: $dark-pagination-link-active-color;
}
&:before,
&:after {
width: 60%;
}
}
}
}

129
assets/css/_core/base.scss Normal file
View File

@@ -0,0 +1,129 @@
/** Font **/
/* Lato */
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
/* Montserrat */
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);
/* Roboto */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,900);
html {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-thumb {
height: 40px;
background-color: #eee;
border-radius: 16px;
&:hover {
background-color: #ddd;
}
}
}
::selection {
background: rgba(0, 149, 255, 0.1);
}
html {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft Yahei", "WenQuanYi Micro Hei", Arial, Verdana, sans-serif;
}
body {
font-size: 11pt;
font-weight: 400;
line-height: 2em;
background-color: $light-background-color;
color: $light-font-color;
&:before {
content: "";
background-repeat: no-repeat;
background-position: center;
opacity: 0.05;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
}
&.dark-theme {
background-color: $dark-background-color;
color: $dark-font-color;
}
}
a {
color: $light-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $light-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.dark-theme & {
color: $dark-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $dark-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
}
}
blockquote {
font-size: 1rem;
display: block;
border-width: 1px 0;
border-style: solid;
border-color: $light-border-color;
padding: 1.5em 1.2em 0.5em 1.2em;
margin: 0 0 2em 0;
position: relative;
&:before {
content: '\201C';
position: absolute;
top: 0em;
left: 50%;
transform: translate(-50%, -50%);
width: 3rem;
height: 2rem;
font: 6em/1.08em 'PT Sans', sans-serif;
color: $light-post-link-color;
text-align: center;
.dark-theme & {
color: $dark-post-link-color;
}
}
&:after {
content: "#blockquote" attr(cite);
display: block;
text-align: right;
font-size: 0.875em;
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
.dark-theme & {
border-color: $dark-border-color;
}
}

View File

@@ -0,0 +1,44 @@
/** Layout **/
.wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100%;
}
.navbar {
height: 4rem;
line-height: 4rem;
width: 100%;
.container {
width: auto;
max-width: 1200px;
text-align: center;
margin: 0 auto;
display: flex;
justify-content: space-between;
}
}
.main {
flex: 1 0 auto;
}
.container{
padding-left: 1em;
padding-right: 1em;
}
.footer {
height: 4rem;
width: 100%;
text-align: center;
line-height: 4rem;
padding-top: 2em;
}
.notfound {
font-size: 2em;
transform: translateY(35vh);
text-align: center;
}

159
assets/css/_core/media.scss Normal file
View File

@@ -0,0 +1,159 @@
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
.navbar {
display: none;
}
.navbar-mobile {
display: block !important;
position: fixed;
width: 100%;
z-index: 100;
transition: all 0.6s ease 0s;
.container {
padding: 0;
margin: 0;
height: 5em;
line-height: 5.5em;
background: $light-background-color;
.navbar-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding-right: 1em;
padding-left: 1em;
box-sizing: border-box;
.menu-toggle {
cursor: pointer;
line-height: 5.5em;
span {
display: block;
background: #000;
width: 36px;
height: 2px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: .25s margin .25s, .25s transform;
-moz-transition: .25s margin .25s, .25s transform;
transition: .25s margin .25s, .25s transform;
.dark-theme & {
background: $dark-font-color;
}
}
span:nth-child(1) {
margin-bottom: 8px;
}
span:nth-child(3) {
margin-top: 8px;
}
&.active {
span {
-webkit-transition: .25s margin, .25s transform .25s;
-moz-transition: .25s margin, .25s transform .25s;
transition: .25s margin, .25s transform .25s;
}
span:nth-child(1) {
-moz-transform: rotate(45deg) translate(4px, 6px);
-ms-transform: rotate(45deg) translate(4px, 6px);
-webkit-transform: rotate(45deg) translate(4px, 6px);
transform: rotate(45deg) translate(4px, 6px);
}
span:nth-child(2) {
opacity: 0
}
span:nth-child(3) {
-moz-transform: rotate(-45deg) translate(8px, -10px);
-ms-transform: rotate(-45deg) translate(8px, -10px);
-webkit-transform: rotate(-45deg) translate(8px, -10px);
transform: rotate(-45deg) translate(8px, -10px);
}
}
}
}
.menu {
text-align: center;
background: #ffffff;
border-top: 2px solid #000000;
padding-top: 1em;
padding-bottom: 1em;
display: none;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.1);
a {
display: block;
line-height: 2.5em;
}
&.active {
display: block;
}
.dark-theme & {
background: $dark-background-color;
border-top: 2px solid $dark-font-secondary-color;
}
}
.dark-theme & {
background: $dark-background-color !important;
}
}
}
#dynamic-to-top {
display: none !important;
}
.footer {
height: 3rem;
width: 100%;
text-align: center;
line-height: 1.5rem;
padding-top: 2em;
}
.post-warp {
padding-top: 6em;
.archive-item-date {
display: none;
}
.categories-card {
.card-item {
width: 95%;
}
}
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
.navbar-mobile {
display: none;
}
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
/* Styles */
}

355
assets/css/_core/normalize.scss vendored Normal file
View File

@@ -0,0 +1,355 @@
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
@charset "UTF-8";
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
html,
body,
main,
div,
span,
a,
li,
ul,
hr,
h1,
h2,
h3,
h4 {
padding: 0;
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

261
assets/css/_iconfont.scss Normal file
View File

@@ -0,0 +1,261 @@
@font-face {font-family: "iconfont";
src: url('../fonts/iconfont/iconfont.eot'); /* IE9 */
src: url('../fonts/iconfont/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/iconfont/iconfont.woff2') format('woff2'),
url('../fonts/iconfont/iconfont.woff') format('woff'),
url('../fonts/iconfont/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../fonts/iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-weibo:before {
content: "\e6c4";
}
.icon-codepen:before {
content: "\ea79";
}
.icon-spotify:before {
content: "\ebf4";
}
.icon-reddit:before {
content: "\e761";
}
.icon-dajiantou:before {
content: "\e642";
}
.icon-xiaojiantou:before {
content: "\e666";
}
.icon-deviantart:before {
content: "\e6c6";
}
.icon-dribbble:before {
content: "\e6d8";
}
.icon-zhihu:before {
content: "\e6ba";
}
.icon-wordpress:before {
content: "\e848";
}
.icon-twitter:before {
content: "\eb2a";
}
.icon-whatsapp:before {
content: "\eb92";
}
.icon-facebook:before {
content: "\e638";
}
.icon-gitlab:before {
content: "\e719";
}
.icon-medium:before {
content: "\e783";
}
.icon-steam:before {
content: "\e811";
}
.icon-jsfiddle:before {
content: "\e752";
}
.icon-soundcloud:before {
content: "\e81d";
}
.icon-ycombinator:before {
content: "\eb32";
}
.icon-linkedin:before {
content: "\e696";
}
.icon-pinterest:before {
content: "\e697";
}
.icon-500px:before {
content: "\e607";
}
.icon-bitbucket:before {
content: "\e645";
}
.icon-instagram:before {
content: "\e6b6";
}
.icon-slideshare:before {
content: "\e6fd";
}
.icon-twitch:before {
content: "\e72a";
}
.icon-vine:before {
content: "\e735";
}
.icon-xing:before {
content: "\e741";
}
.icon-snapchat:before {
content: "\e8b2";
}
.icon-douban:before {
content: "\e688";
}
.icon-github:before {
content: "\e691";
}
.icon-t:before {
content: "\e601";
}
.icon-mail:before {
content: "\e622";
}
.icon-behance:before {
content: "\e621";
}
.icon-POP_lastfm:before {
content: "\e681";
}
.icon-odnoklassniki:before {
content: "\e624";
}
.icon-strava:before {
content: "\e627";
}
.icon-goodreads:before {
content: "\e62a";
}
.icon-kickstarter:before {
content: "\e644";
}
.icon-bandcamp:before {
content: "\e64b";
}
.icon-flickr:before {
content: "\e660";
}
.icon-keybase:before {
content: "\e665";
}
.icon-paypal:before {
content: "\e667";
}
.icon-mastodon:before {
content: "\e94a";
}
.icon-folder:before {
content: "\e7d1";
}
.icon-skype:before {
content: "\e87d";
}
.icon-icon-tag:before {
content: "\e632";
}
.icon-sun:before {
content: "\e684";
}
.icon-timer:before {
content: "\e664";
}
.icon-researchgate:before {
content: "\e693";
}
.icon-angellist:before {
content: "\f163";
}
.icon-mix:before {
content: "\f1f5";
}
.icon-patreon:before {
content: "\f209";
}
.icon-quora:before {
content: "\f218";
}
.icon-stack-overflow:before {
content: "\f239";
}
.icon-telegram-plane:before {
content: "\f246";
}
.icon-tumblr:before {
content: "\f24a";
}
.icon-vk:before {
content: "\f25e";
}
.icon-youtube:before {
content: "\e765";
}
.icon-Googlescholar:before {
content: "\e736";
}
.icon-foursquare:before {
content: "\e8ed";
}

View File

@@ -0,0 +1,58 @@
/** Home **/
.intro {
transform: translateY(25vh);
text-align: center;
.avatar {
padding: 10px;
img {
width: 128px;
height: auto;
display: inline-block;
-webkit-border-radius: 100%;
border-radius: 100%;
-webkit-box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
box-shadow: 0 0 0 0.3618em rgba(0, 0, 0, 0.05);
margin: 0 auto;
-webkit-transition: all ease 0.4s;
-moz-transition: all ease 0.4s;
-o-transition: all ease 0.4s;
transition: all ease 0.4s;
cursor: pointer;
&:hover {
position: relative;
-webkit-transform: translateY(-0.75em);
-moz-transform: translateY(-0.75em);
-ms-transform: translateY(-0.75em);
-o-transform: translateY(-0.75em);
transform: translateY(-0.75em);
cursor: pointer;
}
}
}
}
h2.description {
font-size: 1em;
font-weight: normal;
padding: 5px;
}
.social-links {
a {
padding: 0 5px;
&:hover {
background-color: transparent;
}
}
.iconfont {
font-size: 2em;
}
}

View File

@@ -0,0 +1,65 @@
.post-warp {
.intro {
transform: translateY(0);
margin: 2em 0 5em 0;
.avatar {
img {
width: 96px;
}
}
}
.post {
margin-bottom: 4em;
border-bottom: 1px dashed #ddd;
.post-content {
padding-top: .5em;
}
.post-footer {
display: flex;
justify-content: space-between;
align-items: center;
.post-meta {
a {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
&:hover {
color: $light-font-secondary-color !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
}
}
}
.post-tags {
span {
a {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
&:hover {
color: $light-font-secondary-color !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
}
}
}
}
}
}
}

283
assets/css/_page/post.scss Normal file
View File

@@ -0,0 +1,283 @@
/** Post **/
.post-warp {
position: relative;
width: 100%;
max-width: 780px;
margin: 0 auto;
padding-top: 2rem;
.post-header h1 {
margin: 0 !important;
}
.post-title {
font-size: 2em;
line-height: 1.5em;
}
.post-meta {
color: rgba(85, 85, 85, 0.52941) !important;
.dark-theme & {
color: $dark-font-secondary-color !important;
}
a {
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
&:hover {
color: $light-post-link-hover-color;
.dark-theme & {
color: $dark-post-link-hover-color;
}
}
}
}
.post-content {
padding-top: 1rem;
h2,
h3,
h4,
h5,
h6 {
padding-top: .8em;
padding-bottom: .3em;
}
h2::before {
content: "#";
margin-right: 5px;
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
h3::before {
content: "|";
margin-right: 5px;
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
a {
color: $light-post-link-color;
.dark-theme & {
color: $dark-post-link-color;
}
}
a:hover {
color: $light-post-link-hover-color;
.dark-theme &:hover {
color: $dark-post-link-hover-color;
font-weight: bold;
text-decoration: underline;
}
}
ul {
padding-left: 2em;
}
table {
max-width: 100%;
margin: 10px 0;
border-spacing: 0;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.125);
th,
td {
padding: 5px 15px;
border: 1px double #ebe9f5;
}
}
figure {
text-align: center;
img:hover {
cursor: zoom-in;
}
}
.image-caption:not(:empty) {
min-width: 20%;
max-width: 80%;
display: inline-block;
padding: 10px;
margin: 0 auto;
border-bottom: 1px solid #d9d9d9;
font-size: 14px;
color: #969696;
line-height: 1.7;
}
img {
display: block;
max-width: 80%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
img[data-action="zoom"] {
cursor: zoom-in;
}
.featured_image {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
}
@import "../_partial/post/code.scss";
.typeit {
.code {
padding: 6px;
font-size: 14px;
font-family: Consolas, Monaco, Menlo, Consolas, monospace;
font-weight: bold;
word-break: break-all;
.k {
color: #D371E3;
}
.kt {
color: #D371E3;
}
.kc {
color: #D371E3;
}
.o {
color: #D371E3;
}
.nf {
color: #F16473;
}
.na {
color: #41B1F5;
}
.s {
color: #8BC56F;
}
.n {
color: #DB975C;
}
.c1 {
color: #7E848F;
}
}
}
.align-center {
text-align: center;
}
.align-right {
text-align: right;
}
.align-left {
text-align: left;
}
.float-right {
float: right;
}
}
p {
font-size: 1em;
margin: .5em 0 .5em 0;
}
.post-copyright {
margin-top: 5rem;
border-top: 1px solid $light-border-color;
border-bottom: 1px solid $light-border-color;
.copyright-item {
margin: 5px 0;
}
.dark-theme & {
border-top: 1px solid $dark-border-color;
border-bottom: 1px solid $dark-border-color;
}
}
.post-tags {
padding: 1rem 0 1rem;
display: flex;
justify-content: space-between;
}
.post-nav {
&:before,
&:after {
content: " ";
display: table;
}
& a.prev,
& a.next {
font-weight: 600;
font-size: 16px;
transition-property: transform;
transition-timing-function: ease-out;
transition-duration: 0.3s;
}
& a.prev {
float: left;
}
& a.prev:hover {
transform: translateX(-4px);
}
& a.next {
float: right;
}
& a.next:hover {
transform: translateX(4px);
}
}
.tag:not(:last-child) a::after {
content: " / ";
}
.post-comment {
padding: 3em 0;
}
}

View File

@@ -0,0 +1,32 @@
.tag-cloud-tags {
margin: 10px 0;
a {
display: inline-block;
position: relative;
margin: 5px 10px;
word-wrap: break-word;
transition-duration: .3s;
transition-property: transform;
transition-timing-function: ease-out;
&:active,
&:focus,
&:hover {
color: $light-global-link-hover-color;
transform: scale(1.1);
.dark-theme & {
color: $dark-global-link-hover-color;
}
}
small {
color: $light-font-secondary-color;
.dark-theme & {
color: $dark-global-link-hover-color;
}
}
}
}

View File

@@ -0,0 +1,85 @@
.post-warp {
.archive-item {
margin-left: 2rem;
}
.categories-card {
margin: 0 auto;
margin-top: 3em;
display: flex;
align-items: center;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
padding: 0 2.5em;
line-height: 1.6em;
.card-item {
font-size: 14px;
text-align: left;
width: 45%;
display: flex;
align-items: flex-start;
margin-top: 2em;
min-height: 16em;
padding: 0 2%;
position: relative;
.categories {
overflow: hidden;
}
}
}
.archive-item-link {
display: inline-block;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 95%;
&:hover {
color: $light-global-link-hover-color;
background-color: transparent;
}
.dark-theme & {
color: $dark-global-link-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
&:hover {
color: $dark-global-link-hover-color;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
}
}
.archive-item-date {
float: right;
text-align: right;
color: $light-font-secondary-color;
.dark-theme & {
color: $dark-font-secondary-color;
}
}
.more-post {
text-align: right;
}
}
.categories {
h3 {
display: inline-block;
}
span {
float: right;
padding-right: 1em;
}
}

View File

@@ -0,0 +1,49 @@
/**Footer**/
.copyright {
font-size: 14px;
}
#dynamic-to-top {
display: none;
overflow: hidden;
width: auto;
z-index: 90;
position: fixed;
bottom: 2em;
right: 2em;
top: auto;
left: auto;
font-family: sans-serif;
font-size: 1em;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #333;
font-weight: bold;
padding: 17px 16px;
border: 1px solid $light-border-color;
background: #222;
&:hover {
background: #000;
cursor: pointer;
}
&:active {
background: #000;
outline: none;
}
outline: none;
&:focus, &:hover {
outline: none;
}
span {
display: block;
overflow: hidden;
width: 14px;
height: 12px;
background: url('data:image/png;base64,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') no-repeat center center;
}
.dark-theme &{
border: 1px solid $dark-border-color;
}
}

View File

@@ -0,0 +1,28 @@
.header-logo a {
padding: 0;
i {
line-height: 2em;
}
}
.navbar .menu a {
padding: 0 8px;
}
.navbar .menu .active {
font-weight: 900;
color: $light-navbar-active-color;
.dark-theme & {
color: $dark-navbar-active-color;
}
}
.navbar-header a:hover,
.navbar .menu a:hover {
background-color: transparent;
}

View File

@@ -0,0 +1,94 @@
/** pagination **/
.pagination {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
white-space: nowrap;
width: 100%;
padding-top: 2em;
a {
-webkit-font-smoothing: antialiased;
font-size: 12px;
color: #bfbfbf;
letter-spacing: 0.1em;
font-weight: 700;
padding: 5px 5px;
text-decoration: none;
transition: 0.3s;
}
li {
padding-bottom: 3px;
margin: 0 20px;
box-sizing: border-box;
position: relative;
display: inline;
&.disabled {
display: none;
}
&:hover a {
color: $light-pagination-link-active-color;
}
.dark-theme &:hover a {
color: $dark-pagination-link-active-color;
}
&:before,
&:after {
position: absolute;
content: "";
width: 0;
height: 3px;
background: $light-pagination-link-active-color;
transition: 0.3s;
bottom: 0px;
}
.dark-theme &:before,
.dark-theme &:after {
background: $dark-pagination-link-active-color;
}
&:before .active,
&:after .active {
width: 100%;
}
&:before {
left: 50%;
}
&:after {
right: 50%;
}
&:hover {
&:before,
&:after {
width: 50%;
}
}
&.active {
a {
color: $light-pagination-link-active-color;
}
.dark-theme & a {
color: $dark-pagination-link-active-color;
}
&:before,
&:after {
width: 60%;
}
}
}
}

View File

@@ -0,0 +1,244 @@
code,
pre {
padding: 7px;
font-size: $code-font-size;
font-family: $code-font-family;
background: $l-code-background;
.dark-theme & {
background: $d-code-background;
}
}
code {
padding: 3px 5px;
border-radius: 4px;
color: $l-code-color;
background: $l-code-background;
.dark-theme & {
color: $d-code-color;
background: $d-code-background;
}
}
p > code {
background: darken($l-code-background, 3%);
.dark-theme & {
color: $d-code-color;
background: darken($d-code-background, 3%);
}
}
// chroma
.highlight > .chroma {
margin: 1em 0;
border-radius: 5px;
overflow-x: auto;
box-shadow: 1px 1px 2px rgba(0,0,0,0.125);
position: relative;
background: $l-code-background;
code {
padding: 0;
}
table {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
left: 0;
padding: 2px 7px;
font-size: $code-font-size;
font-weight: bold;
color: darken($gray, 10%);
background: darken($l-code-background, 3%);
content: 'Code';
.dark-theme & {
background: darken($d-code-background, 3%);
}
}
}
@each $sign, $text in $code-type-list {
&.#{$sign} > table::after {
content: $text;
}
}
.lntd {
// Fix code block null line height and
// Synchronous gutter and code line highly.
line-height: round($code-font-size * 1.5);
&:first-child {
width: 10px;
pre {
margin: 0;
padding: 40px 7px 10px;
}
}
&:last-child {
vertical-align: top;
pre {
margin: 0;
padding: 40px 10px 10px;
}
}
}
table, tr, td {
margin: 0;
padding: 0;
width: 100%;
border-collapse: collapse;
border-color: $l-code-background;
.dark-theme & {
border-color: $d-code-background;
}
}
/* LineNumbersTable */ .lnt { color: $gray; }
/* LineHighlight */ .hl { display: block; width: 100%; background-color: #ffffcc }
/* P */ .chroma .p { color: #A9A9B3 }
/* Keyword */ .k { color: #859900 }
/* KeywordConstant */ .kc { color: #859900; font-weight: bold }
/* KeywordDeclaration */ .kd { color: #859900 }
/* KeywordNamespace */ .kn { color: #dc322f; font-weight: bold }
/* KeywordPseudo */ .kp { color: #859900 }
/* KeywordReserved */ .kr { color: #859900 }
/* KeywordType */ .kt { color: #859900; font-weight: bold }
/* Name */ .n { color: #268bd2 }
/* NameAttribute */ .na { color: #268bd2 }
/* NameBuiltin */ .nb { color: #cb4b16 }
/* NameBuiltinPseudo */ .bp { color: #268bd2 }
/* NameClass */ .nc { color: #cb4b16 }
/* NameConstant */ .no { color: #268bd2 }
/* NameDecorator */ .nd { color: #268bd2 }
/* NameEntity */ .ni { color: #268bd2 }
/* NameException */ .ne { color: #268bd2 }
/* NameFunction */ .nf { color: #268bd2 }
/* NameFunctionMagic */ .fm { color: #268bd2 }
/* NameLabel */ .nl { color: #268bd2 }
/* NameNamespace */ .nn { color: #268bd2 }
/* NameOther */ .nx { color: #268bd2 }
/* NameProperty */ .py { color: #268bd2 }
/* NameTag */ .nt { color: #268bd2; font-weight: bold }
/* NameVariable */ .nv { color: #268bd2 }
/* NameVariableClass */ .vc { color: #268bd2 }
/* NameVariableGlobal */ .vg { color: #268bd2 }
/* NameVariableInstance */ .vi { color: #268bd2 }
/* NameVariableMagic */ .vm { color: #268bd2 }
/* Literal */ .l { color: #2aa198 }
/* LiteralDate */ .ld { color: #2aa198 }
/* LiteralString */ .s { color: #2aa198 }
/* LiteralStringAffix */ .sa { color: #2aa198 }
/* LiteralStringBacktick */ .sb { color: #2aa198 }
/* LiteralStringChar */ .sc { color: #2aa198 }
/* LiteralStringDelimiter */ .dl { color: #2aa198 }
/* LiteralStringDoc */ .sd { color: #2aa198 }
/* LiteralStringDouble */ .s2 { color: #2aa198 }
/* LiteralStringEscape */ .se { color: #2aa198 }
/* LiteralStringHeredoc */ .sh { color: #2aa198 }
/* LiteralStringInterpol */ .si { color: #2aa198 }
/* LiteralStringOther */ .sx { color: #2aa198 }
/* LiteralStringRegex */ .sr { color: #2aa198 }
/* LiteralStringSingle */ .s1 { color: #2aa198 }
/* LiteralStringSymbol */ .ss { color: #2aa198 }
/* LiteralNumber */ .m { color: #2aa198; font-weight: bold }
/* LiteralNumberBin */ .mb { color: #2aa198; font-weight: bold }
/* LiteralNumberFloat */ .mf { color: #2aa198; font-weight: bold }
/* LiteralNumberHex */ .mh { color: #2aa198; font-weight: bold }
/* LiteralNumberInteger */ .mi { color: #2aa198; font-weight: bold }
/* LiteralNumberIntegerLong */ .il { color: #2aa198; font-weight: bold }
/* LiteralNumberOct */ .mo { color: #2aa198; font-weight: bold }
/* OperatorWord */ .ow { color: #859900 }
/* Comment */ .c { color: #93a1a1; font-style: italic }
/* CommentHashbang */ .ch { color: #93a1a1; font-style: italic }
/* CommentMultiline */ .cm { color: #93a1a1; font-style: italic }
/* CommentSingle */ .c1 { color: #93a1a1; font-style: italic }
/* CommentSpecial */ .cs { color: #93a1a1; font-style: italic }
/* CommentPreproc */ .cp { color: #93a1a1; font-style: italic }
/* CommentPreprocFile */ .cpf { color: #93a1a1; font-style: italic }
/* Generic */ .g { color: #d33682 }
/* GenericDeleted */ .gd { color: #b58900 }
/* GenericEmph */ .ge { color: #d33682 }
/* GenericError */ .gr { color: #d33682 }
/* GenericHeading */ .gh { color: #d33682 }
/* GenericInserted */ .gi { color: #859900 }
/* GenericOutput */ .go { color: #d33682 }
/* GenericPrompt */ .gp { color: #d33682 }
/* GenericStrong */ .gs { color: #d33682 }
/* GenericSubheading */ .gu { color: #d33682 }
/* GenericTraceback */ .gt { color: #d33682 }
.dark-theme & {
background: $d-code-background;
/* Keyword */ .chroma .k { color: #D371E3 }
/* KeywordConstant */ .chroma .kc { color: #D371E3 }
/* KeywordDeclaration */ .chroma .kd { color: #D371E3 }
/* KeywordNamespace */ .chroma .kn { color: #D371E3 }
/* KeywordPseudo */ .chroma .kp { color: #D371E3 }
/* KeywordReserved */ .chroma .kr { color: #D371E3 }
/* KeywordType */ .chroma .kt { color: #8be9fd }
/* NameAttribute */ .chroma .na { color: #41B1F5 }
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
/* NameClass */ .chroma .nc { color: #E5BF78 }
/* NameFunction */ .chroma .nf { color: #19B8C0 }
/* NameX */ .chroma .nx { color: #F16473 }
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
/* NameTag */ .chroma .nt { color: #D371E3 }
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
/* LiteralString */ .chroma .s { color: #8BC56F }
/* LiteralStringAffix */ .chroma .sa { color: #8BC56F }
/* LiteralStringBacktick */ .chroma .sb { color: #8BC56F }
/* LiteralStringChar */ .chroma .sc { color: #8BC56F }
/* LiteralStringDelimiter */ .chroma .dl { color: #8BC56F }
/* LiteralStringDoc */ .chroma .sd { color: #8BC56F }
/* LiteralStringDouble */ .chroma .s2 { color: #8BC56F }
/* LiteralStringEscape */ .chroma .se { color: #8BC56F }
/* LiteralStringHeredoc */ .chroma .sh { color: #8BC56F }
/* LiteralStringInterpol */ .chroma .si { color: #8BC56F }
/* LiteralStringOther */ .chroma .sx { color: #8BC56F }
/* LiteralStringRegex */ .chroma .sr { color: #8BC56F }
/* LiteralStringSingle */ .chroma .s1 { color: #8BC56F }
/* LiteralStringSymbol */ .chroma .ss { color: #8BC56F }
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
/* Operator */ .chroma .o { color: #D371E3 }
/* OperatorWord */ .chroma .ow { color: #D371E3 }
/* Comment */ .chroma .c { color: #7E848F }
/* CommentHashbang */ .chroma .ch { color: #7E848F }
/* CommentMultiline */ .chroma .cm { color: #7E848F }
/* CommentSingle */ .chroma .c1 { color: #7E848F }
/* CommentSpecial */ .chroma .cs { color: #7E848F }
/* CommentPreproc */ .chroma .cp { color: #D371E3 }
/* CommentPreprocFile */ .chroma .cpf { color: #D371E3 }
/* GenericDeleted */ .chroma .gd { color: #8b080b }
/* GenericEmph */ .chroma .ge { text-decoration: underline }
/* GenericHeading */ .chroma .gh { font-weight: bold }
/* GenericInserted */ .chroma .gi { font-weight: bold }
/* GenericOutput */ .chroma .go { color: #44475a }
/* GenericSubheading */ .chroma .gu { font-weight: bold }
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
}
}

122
assets/css/_variables.scss Normal file
View File

@@ -0,0 +1,122 @@
/** light theme **/
$light-background-color: #fff;
$light-font-color: #161209;
$light-font-secondary-color: #a9a9b3;
$light-navbar-active-color: #161209;
$light-global-link-color: #161209;
$light-global-link-hover-color:#2d96bd;
$light-post-link-color: #2d96bd;
$light-post-link-hover-color:#ef3982;
$light-pagination-link-color : #2d96bd;
$light-pagination-link-active-color: #000;
$light-border-color: #dcdcdc;
/** dark theme **/
$dark-background-color: #292a2d;
$dark-font-color: #a9a9b3;
$dark-font-secondary-color: #87878d;
$dark-navbar-active-color: #fff;
$dark-global-link-color: #a9a9b3;
$dark-global-link-hover-color:#fff;
$dark-post-link-color: #eee;
$dark-post-link-hover-color:#fff;
$dark-pagination-link-color : #a9a9b3;
$dark-pagination-link-active-color: #fff;
$dark-border-color: #4a4b50;
// ========== Color ========== //
$black: #0a0a0a !default;
$white: #fefefe !default;
$light-gray: #e6e6e6 !default;
$gray: #cacaca !default;
$dark-gray: #8a8a8a !default;
// ========== Code ========== //
// Color of the code.
$l-code-color: #E74C3C !default;
$d-code-color: #E5BF78 !default;
// Font size of code.
$code-font-size: 13px !default;
// Font family of the code.
$code-font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono",
"Bitstream Vera Sans Mono", "Courier New", monospace !default;
// Color of code highlight, solarized.
$code-highlight-color: (
comment: #93a1a1,
keyword: #859900,
number: #2aa198,
title: #268bd2,
attribute: #b58900,
symbol: #cb4b16,
built_in: #dc322f,
formula: #eee8d5
) !default;
// Code type list.
$code-type-list: (
// Custom code type
language-bash: "Bash",
language-c: "C",
language-cs: "C#",
language-cpp: "C++",
language-css: "CSS",
language-coffeescript: "CoffeeScript",
language-html: "HTML",
language-xml: "XML",
language-http: "HTTP",
language-json: "JSON",
language-java: "Java",
language-js: "JavaScript",
language-javascript: "JavaScript",
language-makefile: "Makefile",
language-markdown: "Markdown",
language-objectivec: "Objective-C",
language-php: "PHP",
language-perl: "Perl",
language-python: "Python",
language-ruby: "Ruby",
language-sql: "SQL",
language-shell: "Shell",
language-erlang: "Erlang",
language-go: "Go",
language-go-html-template: "Go HTML Template",
language-groovy: "Groovy",
language-haskell: "Haskell",
language-kotlin: "Kotlin",
language-clojure: "Clojure",
language-less: "Less",
language-lisp: "Lisp",
language-lua: "Lua",
language-matlab: "Matlab",
language-rust: "Rust",
language-scss: "Scss",
language-scala: "Scala",
language-swift: "Swift",
language-typescript: "TypeScript",
language-yml: "YAML",
language-yaml: "YAML",
language-toml: "TOML",
language-diff: "Diff"
) !default;
// Color of the code background.
$l-code-background: #F8F5EC !default;
$d-code-background: #272C34 !default;

View File

@@ -1,41 +0,0 @@
/** light theme **/
$light-background-color: #fff;
$light-font-color: #161209;
$light-font-secondary-color: #a9a9b3;
$light-navbar-active-color: #161209;
$light-global-link-color: #161209;
$light-global-link-hover-color:#2d96bd;
$light-post-link-color: #2d96bd;
$light-post-link-hover-color:#ef3982;
$light-pagination-link-color : #2d96bd;
$light-pagination-link-active-color: #000;
$light-border-color: #dcdcdc;
/** dark theme **/
$dark-background-color: #292a2d;
$dark-font-color: #a9a9b3;
$dark-font-secondary-color: #87878d;
$dark-navbar-active-color: #fff;
$dark-global-link-color: #a9a9b3;
$dark-global-link-hover-color:#fff;
$dark-post-link-color: #eee;
$dark-post-link-hover-color:#fff;
$dark-pagination-link-color : #a9a9b3;
$dark-pagination-link-active-color: #fff;
$dark-border-color: #4a4b50;

View File

@@ -1,23 +0,0 @@
@import "_variables/default.scss";
@import "_common/_core/normalize.scss";
@import "_common/_core/base.scss";
@import "_common/_core/layout.scss";
@import "_common/_page/home.scss";
@import "_common/_page/terms.scss";
@import "_common/_page/post.scss";
@import "_common/_page/tags.scss";
@import "_common/_page/home_post.scss";
@import "_common/_section/navbar.scss";
@import "_common/_section/footer.scss";
@import "_common/_section/pagination.scss";
@import "_common/_prettyprint/default.scss";
@import "_common/_core/media.scss";
@import "custom"

20
assets/css/style.scss Normal file
View File

@@ -0,0 +1,20 @@
@import "_variables";
@import "_iconfont";
@import "_core/normalize";
@import "_core/base";
@import "_core/layout";
@import "_page/home";
@import "_page/home_post";
@import "_page/post";
@import "_page/tags";
@import "_page/terms";
@import "_partial/navbar";
@import "_partial/footer";
@import "_partial/pagination";
@import "_core/media";
@import "_custom";