mirror of
https://github.com/bspeice/speice.io
synced 2025-07-05 07:44:54 -04:00
New theme
This commit is contained in:
@ -1,174 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Reset
|
||||
========================================================================== */
|
||||
|
||||
/* Reset Modified from Normalize.css */
|
||||
|
||||
/* Base Reset */
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
*, *:before, *:after { box-sizing: inherit; }
|
||||
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
font-size: 62.5%; // Make it easy to calculate rems to px
|
||||
}
|
||||
|
||||
body {
|
||||
@include ff--sans-serif(400);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 400;
|
||||
color: $c-base__02;
|
||||
}
|
||||
|
||||
|
||||
/* Media */
|
||||
audio, canvas, progress, video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
|
||||
[hidden], template { display: none; }
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
font-style: italic;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
svg:not(:root) { overflow: hidden; }
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
|
||||
a {
|
||||
color: $c-accent__blue;
|
||||
background-color: transparent;
|
||||
text-decoration: none;
|
||||
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 1px 1px;
|
||||
transition: color ease 0.3s;
|
||||
|
||||
/* Hover animation effect for all buttons */
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
height: 0%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-color: $c-accent__blue;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: white;
|
||||
border-bottom-style: solid;
|
||||
&::after {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Override hover animation with no-hov class */
|
||||
a.no-hov {
|
||||
&:after {
|
||||
content: none
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $c-accent__darkblue
|
||||
}
|
||||
}
|
||||
|
||||
a.nav {
|
||||
padding: 10px 35px;
|
||||
overflow:hidden;
|
||||
}
|
||||
a.nav:before {
|
||||
font-family: FontAwesome;
|
||||
content:"\f07a";
|
||||
position: absolute;
|
||||
top: 11px;
|
||||
left: -30px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
abbr[title] { border-bottom: 1px dotted; }
|
||||
b, strong { font-weight: bold; }
|
||||
i, em { font-weight: italic; }
|
||||
|
||||
/* Content */
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
hr {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #EFF1F3;
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
|
||||
pre { overflow: auto; }
|
||||
|
||||
small {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Archives
|
||||
========================================================================== */
|
||||
|
||||
.c-archives {
|
||||
margin-bottom: 10rem;
|
||||
}
|
||||
|
||||
.c-archives__year {
|
||||
margin-bottom: 2.5rem;
|
||||
@include fs--heading-1;
|
||||
}
|
||||
|
||||
.c-archives__list {
|
||||
margin-bottom: 2.5rem;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.c-archives__item {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
border-top: 1px solid #EFF1F3;
|
||||
@media screen and (min-width: $bp__sm) {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fs--body;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fs--body;
|
||||
color: #515862;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,163 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Article
|
||||
========================================================================== */
|
||||
|
||||
.c-article {
|
||||
margin-bottom: 10rem; // 100px
|
||||
}
|
||||
|
||||
.c-article__header {
|
||||
margin-bottom: 2rem; // 50px
|
||||
@media screen and (min-width: $bp__sm) {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: baseline;
|
||||
-webkit-align-items: baseline;
|
||||
-ms-flex-align: baseline;
|
||||
align-items: baseline;
|
||||
}
|
||||
}
|
||||
|
||||
.c-article__title {
|
||||
@include fs--heading-1;
|
||||
color: $c-base__02;
|
||||
}
|
||||
|
||||
.c-article__description {
|
||||
@include fs--heading-2;
|
||||
color: $c-base__01;
|
||||
}
|
||||
|
||||
.c-article__time {
|
||||
@include fs--body;
|
||||
color: $c-base__01;
|
||||
}
|
||||
|
||||
.c-article__main {
|
||||
margin-bottom: 5rem; // 50px
|
||||
@include fs--body;
|
||||
color: $c-base__01;
|
||||
|
||||
> * {
|
||||
margin-bottom: 1.8rem; // 18px
|
||||
}
|
||||
|
||||
h2 {
|
||||
@include fs--heading-2;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@include fs--heading-3;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@include fs--heading-4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@include fs--body;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $c-base__02;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding-left: 1.8rem; // 18px
|
||||
border-left: 5px solid #ccc;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 2.1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.web-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 62.5%;
|
||||
border: 1px solid #cacaca;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.web-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom-color: $c-accent__blue;
|
||||
border-bottom-style: dotted;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-style: hidden;
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding-left: .1em;
|
||||
padding-right: 2em;
|
||||
border-style: solid;
|
||||
border-width: .1em;
|
||||
}
|
||||
}
|
||||
|
||||
.c-article__footer {
|
||||
}
|
||||
|
||||
.pagenav {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border: 1px solid LightGrey;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
font-size: 18px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8rem;
|
||||
}
|
||||
|
||||
.pagenav div {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
padding: 10px;
|
||||
border: 1px solid LightGrey;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#left {
|
||||
float: left;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#right {
|
||||
float: right;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Page
|
||||
========================================================================== */
|
||||
|
||||
.c-page {
|
||||
}
|
||||
|
||||
.c-page__header {
|
||||
margin-bottom: 10rem; // 100px
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2.5rem; // 25px
|
||||
@include fs--heading-2;
|
||||
color: $c-base__02;
|
||||
}
|
||||
|
||||
p {
|
||||
@include fs--meta;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.c-page__footer {
|
||||
margin-bottom: 10rem;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
-webkit-box-pack: justify;
|
||||
-webkit-justify-content: space-between;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
p {
|
||||
@include fs--body;
|
||||
color: $c-base__01;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,72 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Tip
|
||||
========================================================================== */
|
||||
|
||||
.c-tags {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.c-tags li {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.c-tag {
|
||||
background: #eee;
|
||||
border-radius: 3px 0 0 3px;
|
||||
color: #999;
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
line-height: 26px;
|
||||
padding: 0 20px 0 23px;
|
||||
position: relative;
|
||||
margin: 0 10px 50px 0;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color 0.2s;
|
||||
}
|
||||
|
||||
.c-tag::before {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: inset 0 1px rgba(0, 0, 0, 0.25);
|
||||
content: '';
|
||||
height: 6px;
|
||||
left: 10px;
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.c-tag::after {
|
||||
background: #fff;
|
||||
border-bottom: 13px solid transparent;
|
||||
border-left: 10px solid #eee;
|
||||
border-top: 13px solid transparent;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.c-tag:hover {
|
||||
background-color: $c-accent__blue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.c-tag:hover::after {
|
||||
border-left-color: $c-accent__blue;
|
||||
}
|
||||
|
||||
.c-c-tag {
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
@include fs--body;
|
||||
&:before {
|
||||
color: $c-base__0;
|
||||
content: '#\2009';
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,84 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Mixins
|
||||
========================================================================== */
|
||||
|
||||
// Clearfix
|
||||
@mixin clearfix {
|
||||
&:before,
|
||||
&:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
&:after {
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// Font families
|
||||
@mixin ff--sans-serif($font-weight: normal) {
|
||||
font-family: 'Lato', sans-serif;
|
||||
font-weight: $font-weight;
|
||||
}
|
||||
|
||||
@mixin ff--code {
|
||||
font-family: 'Hasklig', monospace;
|
||||
}
|
||||
|
||||
// Font sizing
|
||||
@mixin fs--title {
|
||||
line-height: 1.5;
|
||||
font-size: 4.8rem; // 48px
|
||||
}
|
||||
|
||||
@mixin fs--heading-1 {
|
||||
line-height: 1.5;
|
||||
font-size: 3.2rem; // 32px
|
||||
}
|
||||
|
||||
@mixin fs--heading-2 {
|
||||
line-height: 1.5;
|
||||
font-size: 2.4rem; // 24px
|
||||
}
|
||||
|
||||
@mixin fs--heading-3 {
|
||||
line-height: 1.5;
|
||||
font-size: 2rem; // 20px
|
||||
}
|
||||
|
||||
@mixin fs--heading-4 {
|
||||
line-height: 1.6;
|
||||
font-size: 1.8rem; // 18px
|
||||
}
|
||||
|
||||
@mixin fs--body {
|
||||
line-height: 1.5;
|
||||
font-size: 1.8rem; // 18px
|
||||
}
|
||||
|
||||
@mixin fs--meta {
|
||||
line-height: 1;
|
||||
font-size: 1.8rem; // 18px
|
||||
}
|
||||
|
||||
@mixin fs--caption {
|
||||
line-height: 1;
|
||||
font-size: 1.6rem; // 16px
|
||||
}
|
||||
|
||||
@mixin fs--code {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Visually hide content
|
||||
@mixin visually-hidden {
|
||||
position: absolute;
|
||||
margin: -1px;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
}
|
||||
|
||||
@ -1,22 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Variabeles
|
||||
========================================================================== */
|
||||
|
||||
$c-base__03: #0D2B35;
|
||||
$c-base__02: #163541;
|
||||
$c-base__01: #5C6E74;
|
||||
$c-base__00: #697B82;
|
||||
$c-base__0: #869395;
|
||||
$c-base__1: #96A0A0;
|
||||
$c-base__2: #EDE7D6;
|
||||
$c-base__3: #FCF5E4;
|
||||
|
||||
$c-accent__blue: #0067FB;
|
||||
$c-accent__darkblue: #0029F9;
|
||||
$c-accent__green: #8BE367;
|
||||
|
||||
// Breakpoints
|
||||
$bp__sm: 45rem; // 450px
|
||||
|
||||
// Misc
|
||||
$m-border: 1px solid $c-base__2;
|
||||
@ -1,13 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Layout
|
||||
========================================================================== */
|
||||
|
||||
.u-container {
|
||||
max-width: 72rem; // 620px
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
padding-top: 10rem; // 100px
|
||||
padding-right: 1rem; // 10px
|
||||
padding-left: 1rem; // 10px
|
||||
}
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
/* ==========================================================================
|
||||
Separator
|
||||
========================================================================== */
|
||||
|
||||
.u-separate {
|
||||
margin-right: .45rem;
|
||||
margin-left: .25rem;
|
||||
color: $c-base__01;
|
||||
&:after {
|
||||
content: '\00a0/';
|
||||
}
|
||||
}
|
||||
|
||||
85
_sass/vendor/_highlight.scss
vendored
85
_sass/vendor/_highlight.scss
vendored
@ -1,85 +0,0 @@
|
||||
/* Solarized Dark
|
||||
|
||||
For use with Jekyll and Pygments
|
||||
|
||||
http://ethanschoonover.com/solarized
|
||||
|
||||
SOLARIZED HEX ROLE
|
||||
--------- -------- ------------------------------------------
|
||||
base03 #002b36 background
|
||||
base01 #586e75 comments / secondary content
|
||||
base1 #93a1a1 body text / default code / primary content
|
||||
orange #cb4b16 constants
|
||||
red #dc322f regex, special keywords
|
||||
blue #268bd2 reserved keywords
|
||||
cyan #2aa198 strings, numbers
|
||||
green #859900 operators, other keywords
|
||||
*/
|
||||
|
||||
pre, code {
|
||||
@include ff--code;
|
||||
@include fs--code;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-left: -999em;
|
||||
margin-right: -999em;
|
||||
padding: 1.5em 999em 1.5em 999em;
|
||||
}
|
||||
|
||||
// Controls inline backtick blocks
|
||||
code.highlighter-rouge {
|
||||
white-space: nowrap;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
border: 1px solid #E8E8EB;
|
||||
|
||||
.gutter {
|
||||
padding: 1.2rem;
|
||||
border-right: 1px solid #E8E8EB;
|
||||
}
|
||||
|
||||
.code {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
}
|
||||
span.lineno {
|
||||
padding: 1rem;
|
||||
border-right: 1px solid #E8E8EB;
|
||||
}
|
||||
.highlight .hll { background-color: #ffffcc }
|
||||
.highlight { background: #fcfcfc; }
|
||||
.highlight .c { color: #008000 } /* Comment */
|
||||
//.highlight .err { border: 1px solid #FF0000 } /* Error */
|
||||
.highlight .k { color: #0000ff } /* Keyword */
|
||||
.highlight .cm { color: #008000 } /* Comment.Multiline */
|
||||
.highlight .cp { color: #0000ff } /* Comment.Preproc */
|
||||
.highlight .c1 { color: #008000 } /* Comment.Single */
|
||||
.highlight .cs { color: #008000 } /* Comment.Special */
|
||||
.highlight .ge { font-style: italic } /* Generic.Emph */
|
||||
.highlight .gh { font-weight: bold } /* Generic.Heading */
|
||||
.highlight .gp { font-weight: bold } /* Generic.Prompt */
|
||||
.highlight .gs { font-weight: bold } /* Generic.Strong */
|
||||
.highlight .gu { font-weight: bold } /* Generic.Subheading */
|
||||
.highlight .kc { color: #0000ff } /* Keyword.Constant */
|
||||
.highlight .kd { color: #0000ff } /* Keyword.Declaration */
|
||||
.highlight .kn { color: #0000ff } /* Keyword.Namespace */
|
||||
.highlight .kp { color: #0000ff } /* Keyword.Pseudo */
|
||||
.highlight .kr { color: #0000ff } /* Keyword.Reserved */
|
||||
.highlight .kt { color: #2b91af } /* Keyword.Type */
|
||||
.highlight .s { color: #a31515 } /* Literal.String */
|
||||
.highlight .nc { color: #2b91af } /* Name.Class */
|
||||
.highlight .ow { color: #0000ff } /* Operator.Word */
|
||||
.highlight .sb { color: #a31515 } /* Literal.String.Backtick */
|
||||
.highlight .sc { color: #a31515 } /* Literal.String.Char */
|
||||
.highlight .sd { color: #a31515 } /* Literal.String.Doc */
|
||||
.highlight .s2 { color: #a31515 } /* Literal.String.Double */
|
||||
.highlight .se { color: #a31515 } /* Literal.String.Escape */
|
||||
.highlight .sh { color: #a31515 } /* Literal.String.Heredoc */
|
||||
.highlight .si { color: #a31515 } /* Literal.String.Interpol */
|
||||
.highlight .sx { color: #a31515 } /* Literal.String.Other */
|
||||
.highlight .sr { color: #a31515 } /* Literal.String.Regex */
|
||||
.highlight .s1 { color: #a31515 } /* Literal.String.Single */
|
||||
.highlight .ss { color: #a31515 } /* Literal.String.Symbol */
|
||||
Reference in New Issue
Block a user