mirror of
https://github.com/kaka111222333/kaka111222333.github.io.git
synced 2025-12-16 23:09:53 +08:00
742 lines
11 KiB
SCSS
742 lines
11 KiB
SCSS
---
|
|
---
|
|
|
|
//
|
|
// IMPORTS
|
|
//
|
|
|
|
@import "reset";
|
|
@import "open-color";
|
|
@import "variables";
|
|
|
|
// Syntax highlighting @import is at the bottom of this file
|
|
|
|
/**************/
|
|
/* BASE RULES */
|
|
/**************/
|
|
|
|
html {
|
|
font-size: $base-font-size;
|
|
}
|
|
|
|
body {
|
|
font-family: $base-font;
|
|
color: $base-color;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 1000px;
|
|
padding: 0 20px;
|
|
width: 100%;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 2em;
|
|
margin: 1em 0 16px;
|
|
padding: 0;
|
|
|
|
@include mobile {
|
|
line-height: 1.6em;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3, h5 {
|
|
font-weight: bold;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 30px;
|
|
a {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
h2 {
|
|
font-size: 24px;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 20px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 20px;
|
|
color: $base-lighten-color;
|
|
}
|
|
|
|
h6 {
|
|
color: $base-lighten-color;
|
|
}
|
|
|
|
p {
|
|
color: $text-color;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
a {
|
|
color: $link-color;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
-webkit-transition: all 0.5s;
|
|
-moz-transition: all 0.5s;
|
|
-ms-transition: all 0.5s;
|
|
-o-transition: all 0.5s;
|
|
transition: all 0.5s;
|
|
|
|
&:hover, &:active {
|
|
color: $link-lighten-color;
|
|
}
|
|
}
|
|
|
|
em, i {
|
|
font-style: italic;
|
|
}
|
|
|
|
strong, b {
|
|
font-weight: bold;
|
|
}
|
|
|
|
sub {
|
|
vertical-align: sub;
|
|
font-size: smaller;
|
|
}
|
|
|
|
sup {
|
|
vertical-align: super;
|
|
font-size: smaller;
|
|
}
|
|
|
|
hr {
|
|
border: 0;
|
|
border-top: 1px solid $divider-color;
|
|
margin: 1.5em auto;
|
|
}
|
|
|
|
// Yeun's list style
|
|
// https://gist.github.com/yeun/d824fc7b04b756508f4b0143535cec30
|
|
|
|
ol, ul {
|
|
> li {
|
|
&:before {
|
|
position: absolute;
|
|
width: $li-bullets-width;
|
|
margin-left: -$li-bullets-width;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul {
|
|
> li:before {
|
|
content: "\2022";
|
|
padding-right: $ul-bullets-right-space;
|
|
font-family: $ul-bullets-font;
|
|
font-size: $ul-bullets-font-size;
|
|
line-height: $ul-bullets-font-line-height;
|
|
}
|
|
}
|
|
|
|
ol {
|
|
counter-reset: section;
|
|
|
|
> li:before {
|
|
counter-increment: section;
|
|
content: counter(section) ".";
|
|
padding-right: $ol-bullets-right-space;
|
|
font-family: $ol-bullets-font;
|
|
font-size: $ol-bullets-font-size;
|
|
line-height: $ol-bullets-font-line-height;
|
|
}
|
|
}
|
|
|
|
ol, ul {
|
|
> li {
|
|
margin: 0 auto $li-bottom-space $li-bullets-width;
|
|
line-height: $li-line-height;
|
|
|
|
> ol,
|
|
> ul {
|
|
margin-top: $li-bottom-space;
|
|
}
|
|
}
|
|
}
|
|
|
|
li {
|
|
> ol,
|
|
> ul {
|
|
> li {
|
|
font-size: ($li-child-size-ratio * 1em);
|
|
margin: 0 auto ($li-bottom-space * $li-child-size-ratio) ($li-bullets-width * $li-child-size-ratio);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Definition list
|
|
dt {
|
|
float: left;
|
|
width: $dt-width;
|
|
overflow: auto;
|
|
clear: left;
|
|
text-align: right;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
margin-bottom: $li-bottom-space;
|
|
|
|
@include mobile {
|
|
width: 120px;
|
|
}
|
|
}
|
|
|
|
dd {
|
|
margin-left: $dd-position;
|
|
margin-bottom: $li-bottom-space;
|
|
|
|
@include mobile {
|
|
margin-left: 140px;
|
|
}
|
|
}
|
|
|
|
// Table
|
|
table {
|
|
margin-bottom: 1rem;
|
|
width: 100%;
|
|
border: 1px solid $table-border-color;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
td, th {
|
|
padding: .25rem .5rem;
|
|
border: 1px solid $table-border-color;
|
|
}
|
|
|
|
tbody tr:nth-child(odd) td,
|
|
tbody tr:nth-child(odd) th {
|
|
background-color: $table-background-color;
|
|
}
|
|
|
|
// Blockquote
|
|
blockquote {
|
|
font-weight: 300;
|
|
padding: 0 0 0 1.4rem;
|
|
margin: 0 2rem 1rem 0;
|
|
border-left: .2em solid $blockquote-border-color;
|
|
|
|
p {
|
|
color: $blockquote-color;
|
|
}
|
|
|
|
p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
// Footnote
|
|
a.footnote {
|
|
&,
|
|
.post p &,
|
|
.post ol &,
|
|
.post ul & {
|
|
margin: 0 3px;
|
|
padding: 0 2px;
|
|
font-size: $small-font-size;
|
|
text-align: center;
|
|
border: 1px solid $footnote-link-border-color;
|
|
border-radius: 2px;
|
|
-webkit-text-stroke: 0.25px;
|
|
-webkit-transition: 0.2s ease-out all;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
background: $footnote-link-background-over-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
.footnotes {
|
|
border-top: 1px solid $divider-color;
|
|
font-size: $small-font-size;
|
|
}
|
|
|
|
// Image
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
margin: 0 0 1em;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
// Fixes images in popup boxes from Google Translate
|
|
.gmnoprint img {
|
|
max-width: none;
|
|
}
|
|
|
|
// Specify the color of the selection
|
|
::-moz-selection {
|
|
// color: $selection-color;
|
|
background: $selection-background-color;
|
|
}
|
|
::selection {
|
|
// color: $selection-color;
|
|
background: $selection-background-color;
|
|
}
|
|
|
|
// Nicolas Gallagher's micro clearfix hack
|
|
// http://nicolasgallagher.com/micro-clearfix-hack/
|
|
.clearfix:before,
|
|
.clearfix:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both;
|
|
}
|
|
|
|
// Alignment
|
|
.center {
|
|
text-align: center;
|
|
|
|
&-image {
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
text-align: right
|
|
}
|
|
|
|
/*********************/
|
|
/* LAYOUT / SECTIONS */
|
|
/*********************/
|
|
|
|
//
|
|
// .sidebar
|
|
//
|
|
|
|
.wrapper-sidebar {
|
|
width: 30%;
|
|
-webkit-background-size: cover;
|
|
background-size: cover;
|
|
background-color: $background-color;
|
|
height: 100%;
|
|
top: 0;
|
|
left:0;
|
|
position: fixed;
|
|
z-index: 4;
|
|
border-right: 1px solid $divider-color;
|
|
|
|
@include mobile {
|
|
width: 100%;
|
|
height: auto;
|
|
padding-bottom: 24px;
|
|
position: relative;
|
|
border-bottom: 1px solid $divider-color;
|
|
border-right: 0;
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
padding: 20px 0;
|
|
|
|
@include mobile {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.site-info {
|
|
text-align:center;
|
|
margin: 100px auto 0;
|
|
|
|
@include mobile {
|
|
float: none;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-avatar {
|
|
margin:0 auto;
|
|
display: block;
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
|
|
@include mobile {
|
|
max-width: 120px;
|
|
max-height: 120px;
|
|
}
|
|
|
|
img {
|
|
display: inline-block;
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.site-name {
|
|
margin: 0 auto;
|
|
color: $base-color;
|
|
cursor: pointer;
|
|
font-family: $base-font;
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.site-description {
|
|
margin: 15px auto;
|
|
color: $base-lighten-color;
|
|
font-size: 16px;
|
|
|
|
@include mobile {
|
|
margin: 10px auto;
|
|
}
|
|
}
|
|
|
|
.navlist{
|
|
text-align:center;
|
|
}
|
|
|
|
nav {
|
|
display: block;
|
|
margin-top: 23px; // @TODO: Vertically middle align
|
|
font-family: $base-font;
|
|
font-weight: 500;
|
|
font-size: 18px;
|
|
|
|
@include mobile {
|
|
margin-top: 9px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
a {
|
|
margin: 0 10px;
|
|
text-align: right;
|
|
font-weight: 300;
|
|
letter-spacing: 1px;
|
|
|
|
@include mobile {
|
|
margin: 0 10px;
|
|
color: $link-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
// content
|
|
|
|
.wrapper-content {
|
|
float: right;
|
|
width: 70%;
|
|
|
|
@include mobile {
|
|
float: none;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// Posts
|
|
|
|
.posts{
|
|
|
|
.tag {
|
|
display: inline;
|
|
font-weight: 300;
|
|
font-size: $small-font-size;
|
|
|
|
li:before {
|
|
content: '';
|
|
}
|
|
|
|
li {
|
|
display: inline;
|
|
margin: 0;
|
|
|
|
> a {
|
|
margin: 3px 3px 3px 0;
|
|
padding: .5px 4px;
|
|
color: $base-color;
|
|
background-color: $tag-index-label-background-color;
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
color: $link-color;
|
|
background-color:$link-bghv-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.posts > .post {
|
|
padding-bottom: 2em;
|
|
border-bottom: 1px solid $divider-color;
|
|
}
|
|
|
|
.posts > .post:last-child {
|
|
padding-bottom: 1em;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.date {
|
|
font-weight: 300;
|
|
font-size: $small-font-size;
|
|
color: $base-lighten-color;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
|
|
.post {
|
|
|
|
h1 {
|
|
margin-bottom: .1em;
|
|
}
|
|
|
|
|
|
.comments {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.read-more {
|
|
font-size: 15px;
|
|
}
|
|
}
|
|
|
|
.page {
|
|
// margin: 40px;
|
|
|
|
@include mobile {
|
|
// margin: 24px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// TOC
|
|
|
|
.toc {
|
|
width: 240px;
|
|
height: 100%;
|
|
left: 30%;
|
|
position: fixed;
|
|
z-index: 4;
|
|
padding: 60px 20px 0 20px;
|
|
|
|
&:before{
|
|
content:"目录";
|
|
margin: 0 0 1em 1em;
|
|
font-weight: 700;
|
|
font-size: 1.2em;
|
|
display: block;
|
|
padding-bottom: 0.6em;
|
|
border-bottom: 3px double $divider-color;
|
|
}
|
|
|
|
li:before{
|
|
content:"";
|
|
}
|
|
|
|
@include mobile{
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width:2200px) and (min-width:1200px){
|
|
.withtoc{
|
|
padding-left: 260px;
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
border-top: 1px solid $divider-color;
|
|
font-weight: 300;
|
|
padding: 40px 0;
|
|
width: 100%;
|
|
display: inline-block;
|
|
|
|
@include mobile {
|
|
font-size: $small-font-size;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
> .prev {
|
|
float: left;
|
|
width: 50%;
|
|
a {
|
|
color: $base-lighten-color;
|
|
border: 1px solid $divider-color;
|
|
padding: 10px 20px;
|
|
background: $background-color;
|
|
|
|
&:hover, &:focus {
|
|
color: $link-lighten-color;
|
|
border: 1px solid $link-lighten-color;
|
|
background-color: $link-bghv-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
> .next {
|
|
float: right;
|
|
text-align: right;
|
|
width: 50%;
|
|
a {
|
|
color: $base-lighten-color;
|
|
border: 1px solid $divider-color;
|
|
padding: 10px 20px;
|
|
background: $background-color;
|
|
|
|
&:hover, &:focus {
|
|
color: $link-lighten-color;
|
|
border: 1px solid $link-lighten-color;
|
|
background-color: $link-bghv-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Archive
|
|
.archive {
|
|
a {
|
|
color: $base-color;
|
|
}
|
|
time {
|
|
color: $base-lighten-color;
|
|
font-size: $small-font-size;
|
|
font-weight: 300;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
// Tags
|
|
.tags > .label {
|
|
> li:before {
|
|
content: "";
|
|
}
|
|
|
|
> li {
|
|
margin: 0;
|
|
font-size: $small-font-size;
|
|
font-weight: 300;
|
|
display: inline;
|
|
|
|
> a {
|
|
display: inline-block;
|
|
margin: 1px;
|
|
color: $base-color;
|
|
background-color: $tag-index-label-background-color;
|
|
border-radius: 3px;
|
|
|
|
&:hover {
|
|
background-color: $link-bghv-color;
|
|
}
|
|
|
|
span {
|
|
float: left;
|
|
padding: .5px 5px;
|
|
|
|
&.count {
|
|
background-color: $tag-index-count-background-color;
|
|
border-radius: 0 3px 3px 0;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tags > .tag {
|
|
a {
|
|
color: $base-color;
|
|
}
|
|
time {
|
|
color: $base-lighten-color;
|
|
font-size: $small-font-size;
|
|
font-weight: 300;
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// Footer
|
|
.wrapper-footer-desktop {
|
|
margin-top: 50px;
|
|
border-top: 1px solid $footer-border-color;
|
|
background-color: $footer-background-color;
|
|
position: absolute;
|
|
clear:both;
|
|
width:100%;
|
|
bottom:0;
|
|
|
|
@include mobile {
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
.wrapper-footer-mobile {
|
|
display: none;
|
|
|
|
@include mobile {
|
|
display: block;
|
|
width: 100%;
|
|
border-top: 1px solid $footer-border-color;
|
|
background-color: $footer-background-color;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
padding: 20px 0;
|
|
text-align: center;
|
|
|
|
p {
|
|
font-size: $small-font-size;
|
|
color: $base-lighten-color;
|
|
}
|
|
|
|
.svg-icon {
|
|
display: block;
|
|
font-size: 0;
|
|
list-style: none;
|
|
margin: 0;
|
|
text-align: center;
|
|
|
|
li {
|
|
display: inline-block;
|
|
margin: 10px;
|
|
}
|
|
|
|
svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
fill: $base-lighten-color;
|
|
|
|
&:hover {
|
|
fill: $link-lighten-color;
|
|
}
|
|
}
|
|
|
|
em {
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
margin-top: -.75em;
|
|
position: absolute;
|
|
text-align: center;
|
|
top: 50%;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Settled on moving the import of syntax highlighting to the bottom of the CSS
|
|
// ... Otherwise it really bloats up the top of the CSS file and makes it difficult to find the start
|
|
@import "highlights";
|
|
@import "gitalk";
|
|
|
|
|