move jekyll to separate directory
This commit is contained in:
parent
ab81be9d19
commit
17897a3dfe
61 changed files with 0 additions and 0 deletions
368
jekyll/_sass/klise/_base.scss
Normal file
368
jekyll/_sass/klise/_base.scss
Normal file
|
|
@ -0,0 +1,368 @@
|
|||
// Reset some basic elements
|
||||
* {
|
||||
-webkit-transition: background-color 75ms ease-in, border-color 75ms ease-in;
|
||||
-moz-transition: background-color 75ms ease-in, border-color 75ms ease-in;
|
||||
-ms-transition: background-color 75ms ease-in, border-color 75ms ease-in;
|
||||
-o-transition: background-color 75ms ease-in, border-color 75ms ease-in;
|
||||
transition: background-color 75ms ease-in, border-color 75ms ease-in;
|
||||
}
|
||||
|
||||
.notransition {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-ms-transition: none;
|
||||
-o-transition: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
html {
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
hr,
|
||||
dl,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
figure {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Basic styling
|
||||
body {
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
color: $text-base-color;
|
||||
background-color: $white;
|
||||
font: $normal-weight #{$base-font-size}/#{$base-line-height} $sans-family;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-font-feature-settings: "kern" 1;
|
||||
-moz-font-feature-settings: "kern" 1;
|
||||
-o-font-feature-settings: "kern" 1;
|
||||
font-feature-settings: "kern" 1;
|
||||
font-kerning: normal;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Set `margin-bottom` to maintain vertical rhythm
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
figure,
|
||||
%vertical-rhythm {
|
||||
margin-top: $spacing-full - 20;
|
||||
margin-bottom: $spacing-full - 20;
|
||||
}
|
||||
|
||||
// strong | bold
|
||||
strong,
|
||||
b {
|
||||
font-weight: $bold-weight;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// horizontal rule
|
||||
hr {
|
||||
border-bottom: 0;
|
||||
border-style: solid;
|
||||
border-color: $light;
|
||||
}
|
||||
|
||||
// kbd tag
|
||||
kbd {
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border: 1px solid $light;
|
||||
border-radius: 2px;
|
||||
color: $black;
|
||||
display: inline-block;
|
||||
font-size: $small-font-size;
|
||||
line-height: 1.4;
|
||||
font-family: $mono-family;
|
||||
margin: 0 0.1em;
|
||||
font-weight: $bold-weight;
|
||||
padding: 0.01em 0.4em;
|
||||
text-shadow: 0 1px 0 $white;
|
||||
}
|
||||
|
||||
// Image
|
||||
img {
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
-webkit-user-drag: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Figure
|
||||
figure {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Image inside Figure tag
|
||||
figure > img {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Image caption
|
||||
figcaption {
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// List
|
||||
ul {
|
||||
list-style: none;
|
||||
li {
|
||||
display: list-item;
|
||||
text-align: -webkit-match-parent;
|
||||
}
|
||||
li::before {
|
||||
content: "\FE63";
|
||||
display: inline-block;
|
||||
top: -1px;
|
||||
width: 1.2em;
|
||||
position: relative;
|
||||
margin-left: -1.3em;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: none;
|
||||
counter-reset: li;
|
||||
li {
|
||||
position: relative;
|
||||
counter-increment: li;
|
||||
&::before {
|
||||
content: counter(li);
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-right: 0.5em;
|
||||
margin-left: -1.6em;
|
||||
text-align: right;
|
||||
direction: rtl;
|
||||
font-weight: $bold-weight;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-top: 0;
|
||||
margin-left: $spacing-full;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 1px;
|
||||
padding-top: 1px;
|
||||
|
||||
&:before {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
> ul,
|
||||
> ol {
|
||||
margin-bottom: 2px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $black;
|
||||
font-weight: $bold-weight;
|
||||
& + ul,
|
||||
& + ol {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
scroll-margin-top: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
// Headings with link
|
||||
h1 > a,
|
||||
h2 > a,
|
||||
h3 > a,
|
||||
h4 > a,
|
||||
h5 > a,
|
||||
h6 > a {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration-color: $smoke;
|
||||
|
||||
&:hover {
|
||||
color: $text-link-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 3px solid rgba(0, 54, 199, 0.6);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Del
|
||||
del {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Em
|
||||
em {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// Blockquotes
|
||||
blockquote {
|
||||
color: $gray;
|
||||
font-style: italic;
|
||||
text-align: center;
|
||||
opacity: 0.9;
|
||||
border-top: 1px solid $light;
|
||||
border-bottom: 1px solid $light;
|
||||
padding: 10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 1em;
|
||||
|
||||
> :last-child {
|
||||
margin-bottom: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper
|
||||
.wrapper {
|
||||
max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full} * 2));
|
||||
max-width: calc(#{$narrow-size} - (#{$spacing-full} * 2));
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-right: $spacing-full;
|
||||
padding-left: $spacing-full;
|
||||
@extend %clearfix;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
max-width: -webkit-calc(#{$narrow-size} - (#{$spacing-full}));
|
||||
max-width: calc(#{$narrow-size} - (#{$spacing-full}));
|
||||
padding-right: $spacing-full - 10;
|
||||
padding-left: $spacing-full - 10;
|
||||
|
||||
&.blurry {
|
||||
animation: 0.2s ease-in forwards blur;
|
||||
-webkit-animation: 0.2s ease-in forwards blur;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Underline
|
||||
u {
|
||||
text-decoration-color: #d2c7c7;
|
||||
}
|
||||
|
||||
// Small
|
||||
small {
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
|
||||
// Superscript
|
||||
sup {
|
||||
border-radius: 10%;
|
||||
top: -3px;
|
||||
left: 2px;
|
||||
font-size: small;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
// Table
|
||||
.overflow-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
margin-top: $spacing-half;
|
||||
border-collapse: collapse;
|
||||
font-size: $small-font-size;
|
||||
|
||||
thead {
|
||||
font-weight: $bold-weight;
|
||||
color: $black;
|
||||
border-bottom: 1px solid $light;
|
||||
}
|
||||
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
border: 1px solid $light;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
}
|
||||
|
||||
// Clearfix
|
||||
%clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
// When mouse block a text set this color
|
||||
mark,
|
||||
::selection {
|
||||
background: #fffba0;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// Github Gist clear border
|
||||
.gist {
|
||||
table {
|
||||
border: 0;
|
||||
|
||||
tr,
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
247
jekyll/_sass/klise/_dark.scss
Normal file
247
jekyll/_sass/klise/_dark.scss
Normal file
|
|
@ -0,0 +1,247 @@
|
|||
body[data-theme="dark"] {
|
||||
color: $dark-text-base-color;
|
||||
background-color: $dark-black;
|
||||
|
||||
// Heading
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $dark-white;
|
||||
}
|
||||
|
||||
// Table
|
||||
table {
|
||||
thead {
|
||||
color: $dark-white;
|
||||
border-color: $dark-light;
|
||||
}
|
||||
|
||||
th,
|
||||
td,
|
||||
tr {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Post
|
||||
.page-content {
|
||||
a {
|
||||
color: $dark-text-link-blue;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $dark-text-link-blue-active;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
.anchor-head {
|
||||
color: $dark-text-link-blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Syntax
|
||||
code {
|
||||
&.highlighter-rouge {
|
||||
background-color: $dark-light;
|
||||
}
|
||||
}
|
||||
|
||||
// kbd tag
|
||||
kbd {
|
||||
border-color: $dark-light;
|
||||
color: $dark-white;
|
||||
text-shadow: 0 1px 0 $dark-black;
|
||||
}
|
||||
|
||||
// horizontal rule
|
||||
hr {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
|
||||
// Post Meta
|
||||
.post-meta {
|
||||
color: $dark-gray;
|
||||
|
||||
time {
|
||||
&::after {
|
||||
background-color: $dark-light;
|
||||
}
|
||||
}
|
||||
|
||||
span[itemprop="author"] {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
}
|
||||
|
||||
// Link
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration-color: $dark-smoke;
|
||||
|
||||
&:hover {
|
||||
color: $dark-text-link-blue;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: rgba(255, 82, 119, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
// List
|
||||
li {
|
||||
&:before {
|
||||
color: $dark-white;
|
||||
}
|
||||
}
|
||||
|
||||
// Blockquote
|
||||
blockquote {
|
||||
color: $dark-gray;
|
||||
border-color: $dark-light;
|
||||
}
|
||||
|
||||
// Strong, Bold
|
||||
strong,
|
||||
b {
|
||||
color: $dark-white;
|
||||
}
|
||||
|
||||
// Navbar
|
||||
.navbar {
|
||||
border-color: $dark-light;
|
||||
.menu {
|
||||
a#mode {
|
||||
.mode-sunny {
|
||||
display: block;
|
||||
}
|
||||
.mode-moon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $dark-white;
|
||||
}
|
||||
@include media-query($on-mobile) {
|
||||
background-color: $dark-black;
|
||||
border-color: $dark-light;
|
||||
|
||||
.menu-icon {
|
||||
> svg {
|
||||
fill: $dark-white;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked ~ .trigger {
|
||||
background: $dark-black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Item
|
||||
.post-item {
|
||||
&:not(:first-child) {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
|
||||
.post-item-date {
|
||||
color: $dark-white;
|
||||
}
|
||||
.post-item-title {
|
||||
a {
|
||||
color: $dark-text-base-color;
|
||||
|
||||
&:hover,
|
||||
&focus {
|
||||
color: $dark-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post Navigation
|
||||
.post-nav {
|
||||
border-color: $dark-light;
|
||||
|
||||
.post-nav-item {
|
||||
font-weight: $bold-weight;
|
||||
|
||||
.post-title {
|
||||
color: $dark-white;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.post-title {
|
||||
color: $dark-text-link-blue-active;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
color: $dark-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
.post-nav-item:nth-child(even) {
|
||||
border-color: $dark-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
span.footer_item {
|
||||
color: $dark-white;
|
||||
}
|
||||
a.footer_item:not(:last-child) {
|
||||
color: $dark-white;
|
||||
}
|
||||
.footer_copyright {
|
||||
color: $dark-gray;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 404 Page
|
||||
.not-found {
|
||||
.title {
|
||||
color: $dark-white;
|
||||
text-shadow: 1px 0px 0px $dark-text-link-blue;
|
||||
}
|
||||
.phrase {
|
||||
color: $dark-text-base-color;
|
||||
}
|
||||
.solution {
|
||||
color: $dark-text-link-blue;
|
||||
}
|
||||
.solution:hover {
|
||||
color: $dark-text-link-blue-active;
|
||||
}
|
||||
}
|
||||
|
||||
.search-article {
|
||||
input[type="search"] {
|
||||
color: $dark-text-base-color;
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgba(128,128,128,0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1
jekyll/_sass/klise/_fonts.scss
Normal file
1
jekyll/_sass/klise/_fonts.scss
Normal file
|
|
@ -0,0 +1 @@
|
|||
@charset "utf-8";
|
||||
380
jekyll/_sass/klise/_layout.scss
Normal file
380
jekyll/_sass/klise/_layout.scss
Normal file
|
|
@ -0,0 +1,380 @@
|
|||
// Navbar
|
||||
.navbar {
|
||||
height: auto;
|
||||
max-width: calc(#{$wide-size} - (#{$spacing-full} * 2));
|
||||
max-width: -webkit-calc(#{$wide-size} - (#{$spacing-full} * 2));
|
||||
position: relative;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
border-bottom: 1px solid $light;
|
||||
padding: $spacing-full - 15px $spacing-full;
|
||||
@extend %clearfix;
|
||||
}
|
||||
|
||||
// Navigation
|
||||
.menu {
|
||||
user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
|
||||
a#mode {
|
||||
float: left;
|
||||
left: 8px;
|
||||
top: 6px;
|
||||
position: relative;
|
||||
clear: both;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
}
|
||||
&:active {
|
||||
-webkit-transform: scale(0.9, 0.9);
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
.mode-moon {
|
||||
display: block;
|
||||
line {
|
||||
stroke: $black;
|
||||
fill: none;
|
||||
}
|
||||
|
||||
circle {
|
||||
fill: $black;
|
||||
stroke: $black;
|
||||
}
|
||||
}
|
||||
.mode-sunny {
|
||||
display: none;
|
||||
line {
|
||||
stroke: $dark-white;
|
||||
fill: none;
|
||||
}
|
||||
circle {
|
||||
fill: none;
|
||||
stroke: $dark-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.trigger {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.menu-trigger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
color: $black;
|
||||
line-height: $base-line-height + 0.4;
|
||||
text-decoration: none;
|
||||
padding: 5px 8px;
|
||||
opacity: 0.7;
|
||||
letter-spacing: 0.3px;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&.rss {
|
||||
position: relative;
|
||||
bottom: -3px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-link.active {
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
text-align: center;
|
||||
height: 50px;
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $light;
|
||||
|
||||
a#mode {
|
||||
left: 10px;
|
||||
top: 12px;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 50px;
|
||||
height: 23px;
|
||||
line-height: 0;
|
||||
padding-top: 13px;
|
||||
padding-bottom: 15px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
> svg {
|
||||
fill: $black;
|
||||
opacity: 0.7;
|
||||
}
|
||||
&:hover {
|
||||
> svg {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&:active {
|
||||
-webkit-transform: scale(0.9, 0.9);
|
||||
transform: scale(0.9, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"]:not(:checked) ~ .trigger {
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked ~ .trigger {
|
||||
position: fixed;
|
||||
animation: 0.2s ease-in forwards fadein;
|
||||
-webkit-animation: 0.2s ease-in forwards fadein;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: $white;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
font-size: 1.1em;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin: 0;
|
||||
padding: 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Author
|
||||
.author {
|
||||
margin-top: 6.3rem;
|
||||
margin-bottom: 7.2rem;
|
||||
text-align: center;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
margin-bottom: 3em;
|
||||
}
|
||||
|
||||
.author-avatar {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
border-radius: 100%;
|
||||
user-select: none;
|
||||
background-color: $black;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-webkit-animation: 0.5s ease-in forwards fadein;
|
||||
animation: 0.5s ease-in forwards fadein;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.author-name {
|
||||
font-size: 1.7em;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.author-bio {
|
||||
margin: 0 auto;
|
||||
opacity: 0.9;
|
||||
max-width: 393px;
|
||||
line-height: 1.688;
|
||||
}
|
||||
}
|
||||
|
||||
// Content
|
||||
.posts-item-note {
|
||||
font-size: $base-font-size;
|
||||
font-weight: 700;
|
||||
margin-bottom: 5px;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
// List of posts
|
||||
.post-item {
|
||||
display: flex;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 6px;
|
||||
@extend %clearfix;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
|
||||
.post-item-date {
|
||||
min-width: 96px;
|
||||
color: $black;
|
||||
font-weight: 700;
|
||||
padding-right: 10px;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.post-item-title {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
font-size: $base-font-size;
|
||||
font-weight: normal;
|
||||
letter-spacing: 0.1px;
|
||||
|
||||
a {
|
||||
color: $text-base-color;
|
||||
|
||||
&:hover,
|
||||
&focus {
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.footer {
|
||||
margin-top: 8em;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
margin-top: 3em;
|
||||
}
|
||||
span.footer_item {
|
||||
color: $black;
|
||||
opacity: 0.8;
|
||||
font-weight: $bold-weight;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
a.footer_item {
|
||||
color: $black;
|
||||
opacity: 0.8;
|
||||
text-decoration: none;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer_copyright {
|
||||
font-size: $small-font-size - 1;
|
||||
margin-top: 3px;
|
||||
display: block;
|
||||
color: $gray;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.not-found {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 75vh;
|
||||
.title {
|
||||
font-size: 5em;
|
||||
font-weight: $bold-weight;
|
||||
line-height: 1.1;
|
||||
color: $black;
|
||||
text-shadow: 1px 0px 0px $text-link-blue;
|
||||
}
|
||||
.phrase {
|
||||
color: $text-base-color;
|
||||
}
|
||||
.solution {
|
||||
color: $text-link-blue;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.solution:hover {
|
||||
color: $text-link-blue-active;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.search-article {
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
|
||||
label[for="search-input"] {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
left: 11px;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border: 0;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
outline: none;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
padding: 10px 10px 10px 35px;
|
||||
color: $text-base-color;
|
||||
-webkit-appearance: none;
|
||||
font-size: $base-font-size;
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
&::-webkit-input-placeholder {
|
||||
color: #808080;
|
||||
}
|
||||
&::-webkit-search-decoration,
|
||||
&::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#search-results {
|
||||
text-align: center;
|
||||
li {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.archive-tags {
|
||||
height: auto;
|
||||
.tag-item {
|
||||
padding: 1px 3px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(128, 128, 128, 0.1);
|
||||
background-color: rgba(128, 128, 128, 0.1);
|
||||
}
|
||||
}
|
||||
41
jekyll/_sass/klise/_miscellaneous.scss
Normal file
41
jekyll/_sass/klise/_miscellaneous.scss
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
// Animation fade-in
|
||||
@keyframes fadein {
|
||||
0% {
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
// Animation blur
|
||||
@keyframes blur {
|
||||
0% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
|
||||
100% {
|
||||
filter: blur(4px);
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive embed video
|
||||
.embed-responsive {
|
||||
height: 0;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
margin-top: 20px;
|
||||
|
||||
iframe,
|
||||
object,
|
||||
embed {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
261
jekyll/_sass/klise/_post.scss
Normal file
261
jekyll/_sass/klise/_post.scss
Normal file
|
|
@ -0,0 +1,261 @@
|
|||
// Post wrapper
|
||||
.wrapper.post {
|
||||
@include media-query($on-mobile) {
|
||||
padding-left: $spacing-half;
|
||||
padding-right: $spacing-half;
|
||||
}
|
||||
}
|
||||
|
||||
// Post title
|
||||
.header {
|
||||
margin-top: 7.8em;
|
||||
margin-bottom: 3em;
|
||||
|
||||
.tags {
|
||||
margin-left: 3px;
|
||||
letter-spacing: 0.5px;
|
||||
|
||||
.tag {
|
||||
font-weight: $bold-weight;
|
||||
font-size: $small-font-size - 2;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 2em;
|
||||
line-height: 1.2;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
font-size: 1.9em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Post meta
|
||||
.post-meta {
|
||||
padding-top: 3px;
|
||||
line-height: 1.3;
|
||||
color: $gray;
|
||||
|
||||
time {
|
||||
position: relative;
|
||||
margin-right: 1.5em;
|
||||
|
||||
&::after {
|
||||
background: $light;
|
||||
bottom: 1px;
|
||||
content: " ";
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
width: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
span[itemprop="author"] {
|
||||
border-bottom: 1px dotted $light;
|
||||
}
|
||||
}
|
||||
|
||||
// Post content
|
||||
.page-content {
|
||||
padding-top: 8px;
|
||||
|
||||
iframe {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure {
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
margin-top: 5px;
|
||||
font-style: italic;
|
||||
font-size: $small-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-link-blue;
|
||||
text-decoration: none;
|
||||
&[target="_blank"]::after {
|
||||
content: " \2197";
|
||||
font-size: $small-font-size;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
bottom: 5px;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $text-link-blue-active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
color: $text-link-blue;
|
||||
}
|
||||
}
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
padding-top: $spacing-full - 15;
|
||||
padding-bottom: $spacing-full - 15;
|
||||
}
|
||||
|
||||
ul.task-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
||||
li::before {
|
||||
content: "";
|
||||
}
|
||||
|
||||
li input[type="checkbox"] {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
dl dt {
|
||||
font-weight: $bold-weight;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: $black;
|
||||
font-weight: $bold-weight;
|
||||
margin-top: $spacing-full;
|
||||
margin-bottom: 0;
|
||||
|
||||
&:hover {
|
||||
.anchor-head {
|
||||
color: $text-link-blue;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.anchor-head {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
outline: none;
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
width: 1em;
|
||||
font-weight: $bold-weight;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
@include relative-font-size(1.5);
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include relative-font-size(1.375);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include relative-font-size(1.25);
|
||||
border-bottom: 1px solid $light;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include relative-font-size(1.25);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include relative-font-size(1);
|
||||
}
|
||||
|
||||
h6 {
|
||||
@include relative-font-size(0.875);
|
||||
}
|
||||
}
|
||||
|
||||
.post-nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin-top: 5em;
|
||||
border-top: 1px solid $light;
|
||||
line-height: 1.4;
|
||||
|
||||
.post-nav-item {
|
||||
border-bottom: 0;
|
||||
font-weight: $bold-weight;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.post-title {
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
.post-title {
|
||||
color: $text-link-blue-active;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-arrow {
|
||||
font-weight: $normal-weight;
|
||||
font-size: $small-font-size;
|
||||
color: $gray;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
width: 50%;
|
||||
padding-top: 10px;
|
||||
text-decoration: none;
|
||||
box-sizing: border-box;
|
||||
|
||||
&:nth-child(odd) {
|
||||
padding-left: 0;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
text-align: right;
|
||||
padding-right: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-query($on-mobile) {
|
||||
display: block;
|
||||
font-size: $small-font-size;
|
||||
|
||||
.post-nav-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.post-nav-item:nth-child(even) {
|
||||
border-left: 0;
|
||||
padding-left: 0;
|
||||
border-top: 1px solid $light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.post-updated-at {
|
||||
font-family: "Ubuntu mono", "monospace";
|
||||
}
|
||||
185
jekyll/_sass/klise/_syntax.scss
Normal file
185
jekyll/_sass/klise/_syntax.scss
Normal file
|
|
@ -0,0 +1,185 @@
|
|||
// Code
|
||||
code {
|
||||
font-family: $mono-family;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings: "calt" 1;
|
||||
font-variant-ligatures: normal;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
font-size: inherit;
|
||||
|
||||
&.highlighter-rouge {
|
||||
padding: 1px 3px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(128,128,128,0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Codeblock Theme
|
||||
pre.highlight, pre {
|
||||
margin: 0 -27px;
|
||||
@include media-query($on-mobile) {
|
||||
margin: 0 calc(51% - 51vw);
|
||||
padding-left: 20px;
|
||||
}
|
||||
border: 1px solid rgba(128,128,128,0.1);
|
||||
background-color: #1a1b21;
|
||||
border-radius: 2px;
|
||||
padding: 10px;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
|
||||
> code {
|
||||
width: 100%;
|
||||
max-width: 50rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.highlight table td {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.highlight table pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.highlight,
|
||||
.highlight .w {
|
||||
color: #fbf1c7;
|
||||
// background-color: #1a1b21;
|
||||
}
|
||||
|
||||
.highlight .err {
|
||||
color: #fb4934;
|
||||
// background-color: #1a1b21;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .c,
|
||||
.highlight .cd,
|
||||
.highlight .cm,
|
||||
.highlight .c1,
|
||||
.highlight .cs {
|
||||
color: #928374;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .cp {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .nt {
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
.highlight .o,
|
||||
.highlight .ow {
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
.highlight .p,
|
||||
.highlight .pi {
|
||||
color: #fbf1c7;
|
||||
}
|
||||
|
||||
.highlight .gi {
|
||||
color: #b8bb26;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .gd {
|
||||
color: #fb4934;
|
||||
background-color: #282828;
|
||||
}
|
||||
|
||||
.highlight .gh {
|
||||
color: #b8bb26;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.highlight .k,
|
||||
.highlight .kn,
|
||||
.highlight .kp,
|
||||
.highlight .kr,
|
||||
.highlight .kv {
|
||||
color: #fb4934;
|
||||
}
|
||||
|
||||
.highlight .kc {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .kt {
|
||||
color: #fabd2f;
|
||||
}
|
||||
|
||||
.highlight .kd {
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
.highlight .s,
|
||||
.highlight .sb,
|
||||
.highlight .sc,
|
||||
.highlight .sd,
|
||||
.highlight .s2,
|
||||
.highlight .sh,
|
||||
.highlight .sx,
|
||||
.highlight .s1 {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .si {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .sr {
|
||||
color: #b8bb26;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.highlight .se {
|
||||
color: #fe8019;
|
||||
}
|
||||
|
||||
.highlight .nn {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .nc {
|
||||
color: #8ec07c;
|
||||
}
|
||||
|
||||
.highlight .no {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .na {
|
||||
color: #b8bb26;
|
||||
}
|
||||
|
||||
.highlight .m,
|
||||
.highlight .mf,
|
||||
.highlight .mh,
|
||||
.highlight .mi,
|
||||
.highlight .il,
|
||||
.highlight .mo,
|
||||
.highlight .mb,
|
||||
.highlight .mx {
|
||||
color: #d3869b;
|
||||
}
|
||||
|
||||
.highlight .ss {
|
||||
color: #83a598;
|
||||
}
|
||||
Reference in a new issue