Cleanup SCSS, modularize
This commit is contained in:
timvisee
parent
66fca45398
commit
3de3a34258
|
|
@ -0,0 +1,74 @@
|
|||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 1150px;
|
||||
margin: 0 auto;
|
||||
font-family: $font-base;
|
||||
|
||||
background-color: #212931;
|
||||
background-image: url("/images/background.jpg");
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $color-link;
|
||||
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
color: $color-link-hover;
|
||||
}
|
||||
&:focus {
|
||||
background-color: rgba($color-link, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($color-link-hover, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
#{headings(1,6)} {
|
||||
font-family: $font-main;
|
||||
color: $color-header;
|
||||
|
||||
a {
|
||||
color: $color-header;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($color-header, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($color-header, 0.2);
|
||||
}
|
||||
&:focus:hover {
|
||||
background-color: rgba($color-link-hover, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
/**
|
||||
* Logo banner.
|
||||
*/
|
||||
header#banner .logo {
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
padding: 1rem 1.75rem;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
transition: border-color 0.2s ease-in-out,
|
||||
color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
color: $logo-color;
|
||||
border: $logo-color solid 5px;
|
||||
font-family: $font-logo;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
}
|
||||
&:active {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
background-color: rgba($logo-color-hover, 0.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* HTML elements in pages.
|
||||
*/
|
||||
|
||||
content {
|
||||
pre, img {
|
||||
box-sizing: border-box;
|
||||
background-color: $color-main-bg-alt;
|
||||
border: 1px solid $color-main-border;
|
||||
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 0.5em;
|
||||
overflow: auto;
|
||||
font-family: $font-mono;
|
||||
}
|
||||
|
||||
img {
|
||||
padding: 0.25em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0 0.2em;
|
||||
display: inline-block;
|
||||
font-family: $font-mono;
|
||||
background-color: $color-main-bg-alt;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Text style modifiers.
|
||||
*/
|
||||
|
||||
.muted {
|
||||
color: $color-text-muted;
|
||||
}
|
||||
|
||||
.meta {
|
||||
font-family: $font-main;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tags
|
||||
*/
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border: 1px solid $color-main-border;
|
||||
border-radius: 3px;
|
||||
font-family: $font-main;
|
||||
padding: 0.2em 0.4em;
|
||||
line-height: 1;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
transition: box-shadow 0.2s ease,
|
||||
background-color 0.2s ease;
|
||||
}
|
||||
|
||||
a.tag {
|
||||
&:hover, &:active, &:focus {
|
||||
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.3);
|
||||
}
|
||||
&:focus {
|
||||
background-color: rgba($color-link, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($color-link-hover, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
content .tag {
|
||||
background-color: $color-main-bg-alt;
|
||||
}
|
||||
|
||||
sidebar .tag {
|
||||
background-color: $color-main-bg;
|
||||
}
|
||||
|
||||
/**
|
||||
* Title anchors
|
||||
*/
|
||||
|
||||
.anchor {
|
||||
transition: opacity 0.2s ease;
|
||||
opacity: 0;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
margin: 0.5rem 0 0 -1.5rem;
|
||||
}
|
||||
|
||||
*:hover > .anchor,
|
||||
.anchor:active,
|
||||
.anchor:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
// Responsive sizes
|
||||
$responsive-medium: 900px;
|
||||
$responsive-small: 550px;
|
||||
|
||||
// Colors
|
||||
$color-text: #a6a28c;
|
||||
$color-text-muted: darken($color-text, 25%);
|
||||
$color-main-bg: #20201d;
|
||||
$color-main-bg-alt: darken($color-main-bg, 4%);
|
||||
$color-main-border: darken($color-main-bg, 8%);
|
||||
$color-header: #ff6f33;
|
||||
$color-link: #ae9513;
|
||||
$color-link-hover: lighten($color-link, 15%);
|
||||
|
||||
// Top logo
|
||||
$logo-color: #fff;
|
||||
$logo-color-hover: $color-link-hover;
|
||||
|
||||
// Fonts
|
||||
$font-base: "Source Sans Pro", Ubuntu, sans-serif;
|
||||
$font-main: "Zilla Slab", "Open Sans", sans-serif;
|
||||
$font-read: "Merriweather", serif;
|
||||
$font-mono: "Fira Mono", monospace;
|
||||
// $font-logo: "Source Sans Pro", Helvetica, sans-serif;
|
||||
$font-logo: $font-main;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Setup the function in your functions or helpers files, wherever you keep these bits.
|
||||
@function headings($from:1, $to:6, $prefix:"") {
|
||||
@if $from == $to {
|
||||
@return $prefix + ' h#{$from}';
|
||||
} @else {
|
||||
@return $prefix + 'h#{$from},' + headings($from+1, $to, $prefix);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
header#banner {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 1em 1em 1em;
|
||||
display: flex;
|
||||
color: $color-text;
|
||||
border: 1px solid $color-main-border;
|
||||
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
content {
|
||||
font-family: $font-read;
|
||||
padding: 2.5em 3em;
|
||||
background: $color-main-bg;
|
||||
flex: 1;
|
||||
|
||||
#{headings(1,6,"header >")} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
content > header {
|
||||
margin: 0;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px dashed $color-main-border;
|
||||
|
||||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
content ul {
|
||||
list-style-type: disclosure-closed;
|
||||
padding-left: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2em 0;
|
||||
text-align: justify;
|
||||
border-bottom: 1px dashed $color-main-border;
|
||||
|
||||
// Hack to fix <pre> overflow
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
article.single {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
sidebar {
|
||||
font-family: $font-main;
|
||||
width: 20em;
|
||||
padding: 0.5em 1.5em 1.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
background: $color-main-bg-alt;
|
||||
box-shadow: 0 0 10px 5px rgba($color-main-border, 0.4);
|
||||
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
sidebar > section {
|
||||
padding: 1rem 0;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 1.5rem;
|
||||
font-family: $font-main;
|
||||
|
||||
&.active {
|
||||
background-color: rgba($color-link, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($color-link-hover, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.sub > a {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
sidebar > section > ul {
|
||||
margin: 0 -1.5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family: $font-main;
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
@media (max-width: $responsive-medium) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
sidebar {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-small) {
|
||||
header#banner {
|
||||
margin: 0.5em 0;
|
||||
min-height: auto;
|
||||
background: none
|
||||
}
|
||||
|
||||
header#banner .logo {
|
||||
padding: 0.7rem 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
content {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/**
|
||||
* Title anchor: continue reading
|
||||
*
|
||||
* Move anchor slightly up, prevent conflicts with page content.
|
||||
*/
|
||||
p#zola-continue-reading > a {
|
||||
position: absolute;
|
||||
margin-top: -3rem;
|
||||
}
|
||||
|
|
@ -1,361 +1,8 @@
|
|||
$responsive-medium: 900px;
|
||||
$responsive-small: 550px;
|
||||
$light-text: #202020;
|
||||
$dark-text: #a6a28c;
|
||||
$background: #20201d;
|
||||
$background-darker: darken($background, 4%);
|
||||
$background-border: darken($background, 8%);
|
||||
$header-color: #ff6f33;
|
||||
$link-color: #ae9513;
|
||||
$link-color-hover: lighten($link-color, 15%);
|
||||
$logo-color: #fff;
|
||||
$logo-color-hover: $link-color-hover;
|
||||
$font-base: "Source Sans Pro", Ubuntu, sans-serif;
|
||||
$font-title: "Zilla Slab", "Open Sans", sans-serif;
|
||||
$font-article: "Merriweather", serif;
|
||||
$font-monospace: "Fira Mono", monospace;
|
||||
// $font-logo: "Source Sans Pro", Helvetica, sans-serif;
|
||||
$font-logo: $font-title;
|
||||
@import "_zola";
|
||||
@import "_config";
|
||||
@import "_functions";
|
||||
|
||||
// Setup the function in your functions or helpers files, wherever you keep these bits.
|
||||
@function headings($from:1, $to:6, $prefix:"") {
|
||||
@if $from == $to {
|
||||
@return $prefix + ' h#{$from}';
|
||||
} @else {
|
||||
@return $prefix + 'h#{$from},' + headings($from+1, $to, $prefix);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
max-width: 1150px;
|
||||
margin: 0 auto;
|
||||
color: $light-text;
|
||||
font-family: $font-base;
|
||||
background-color: #212931;
|
||||
background-image: url("/images/background.jpg");
|
||||
background-size: 100% auto;
|
||||
background-position: top center;
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
#{headings(1,6)} {
|
||||
font-family: $font-title;
|
||||
color: $header-color;
|
||||
|
||||
a {
|
||||
color: $header-color;
|
||||
|
||||
&:focus {
|
||||
background-color: rgba($header-color, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($header-color, 0.2);
|
||||
}
|
||||
&:focus:hover {
|
||||
background-color: rgba($link-color-hover, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size:2rem
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size:1.75em
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size:1.5em
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size:1.25em
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: $link-color;
|
||||
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
&:focus {
|
||||
background-color: rgba($link-color, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($link-color-hover, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
body > header#banner {
|
||||
text-align: center;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
body > header#banner .logo {
|
||||
display: inline-block;
|
||||
margin: 0.5em 0;
|
||||
overflow: visible;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
// TODO: update these!
|
||||
transition: border-color 0.2s ease-in-out, color 0.2s ease-in-out, background-color 0.2s ease-in-out, opacity 0.5s ease, transform 0.5s ease, visibility 0.5s;
|
||||
color: $logo-color;
|
||||
border-style: solid;
|
||||
border-color: $logo-color;
|
||||
border-width: 5px;
|
||||
font-family: $font-logo;
|
||||
font-size: 2rem;
|
||||
font-weight: 900;
|
||||
letter-spacing: 0.075em;
|
||||
line-height: 1;
|
||||
padding: 1rem 1.75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
body > header#banner .logo:hover {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
}
|
||||
body > header#banner .logo:active {
|
||||
border-color: $logo-color-hover !important;
|
||||
color: $logo-color-hover !important;
|
||||
background-color: rgba($logo-color-hover, 0.2) !important;
|
||||
}
|
||||
@media (max-width: $responsive-small) {
|
||||
body > header#banner {
|
||||
margin: 0.5em 0;
|
||||
min-height: auto;
|
||||
background: none
|
||||
}
|
||||
body > header#banner .logo {
|
||||
padding: 0.7rem 1.25rem;
|
||||
font-size: 1.5rem;
|
||||
border-width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 0 1em 1em 1em;
|
||||
display: flex;
|
||||
color: $dark-text;
|
||||
border: 1px solid $background-border;
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.4);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
main .muted {
|
||||
color: darken($dark-text, 25%);
|
||||
}
|
||||
|
||||
main .meta {
|
||||
font-family: $font-title;
|
||||
}
|
||||
|
||||
content {
|
||||
// TODO: makes font-family in article obsolete?
|
||||
font-family: $font-article;
|
||||
|
||||
padding: 2.5em 3em;
|
||||
background: $background;
|
||||
flex: 1;
|
||||
}
|
||||
@media (max-width: $responsive-small) {
|
||||
content {
|
||||
padding: 1.5em 1em;
|
||||
}
|
||||
}
|
||||
|
||||
content > header {
|
||||
margin: 0;
|
||||
padding-bottom: 1em;
|
||||
border-bottom: 1px dashed $background-border;
|
||||
}
|
||||
|
||||
#{headings(1,6,"content header >")} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
content pre,
|
||||
content img {
|
||||
box-sizing: border-box;
|
||||
background-color: $background-darker;
|
||||
border: 1px solid $background-border;
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.4);
|
||||
border-radius: 4px;
|
||||
}
|
||||
content pre {
|
||||
padding: 0.5em;
|
||||
overflow: auto;
|
||||
font-family: $font-monospace;
|
||||
}
|
||||
content img {
|
||||
padding: 0.25em;
|
||||
max-width: 100%;
|
||||
}
|
||||
content code {
|
||||
padding: 0 0.2em;
|
||||
display: inline-block;
|
||||
font-family: $font-monospace;
|
||||
background-color: $background-darker;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
sidebar {
|
||||
font-family: $font-title;
|
||||
width: 20em;
|
||||
padding: 0.5em 1.5em 1.5em 1.5em;
|
||||
box-sizing: border-box;
|
||||
background: $background-darker;
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.4);
|
||||
}
|
||||
|
||||
@media (max-width: $responsive-medium) {
|
||||
main {
|
||||
flex-direction: column;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
margin: 0;
|
||||
}
|
||||
sidebar {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
sidebar {
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
padding-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
sidebar > section {
|
||||
padding: 1rem 0;
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
list-style-position: inside;
|
||||
|
||||
li {
|
||||
line-height: 2;
|
||||
width: 100%;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 1.5rem;
|
||||
font-family: $font-title;
|
||||
|
||||
&.active {
|
||||
background-color: rgba($link-color, 0.1);
|
||||
}
|
||||
&:active {
|
||||
background-color: rgba($link-color-hover, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.sub > a {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
sidebar > section > ul {
|
||||
margin: 0 -1.5rem;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: 2em 0;
|
||||
font-family: $font-article;
|
||||
text-align: justify;
|
||||
border-bottom: 1px dashed $background-border;
|
||||
|
||||
// Hack to fix <pre> overflow
|
||||
width: 100%;
|
||||
display: table;
|
||||
table-layout: fixed;
|
||||
}
|
||||
|
||||
article.single {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
article > header {
|
||||
#{headings(1,6)} {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
border: 1px solid $background-border;
|
||||
border-radius: 3px;
|
||||
font-family: $font-title;
|
||||
padding: 0.2em 0.4em;
|
||||
line-height: 1;
|
||||
margin: 0 0.2em 0.2em 0;
|
||||
transition: box-shadow 0.2s ease;
|
||||
}
|
||||
a.tag:hover {
|
||||
box-shadow: 0 0 10px 5px rgba($background-border, 0.3);
|
||||
}
|
||||
|
||||
content .tag {
|
||||
background-color: $background-darker;
|
||||
}
|
||||
sidebar .tag {
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
}
|
||||
p#zola-continue-reading {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
footer {
|
||||
font-family: $font-title;
|
||||
}
|
||||
|
||||
.anchor {
|
||||
transition: opacity 0.5s ease;
|
||||
opacity: 0;
|
||||
font-size: 1rem;
|
||||
position: absolute;
|
||||
margin: 0.5rem 0 0 -1.5rem;
|
||||
}
|
||||
*:hover > .anchor,
|
||||
.anchor:active,
|
||||
.anchor:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
content ul {
|
||||
list-style-type: disclosure-closed;
|
||||
// list-style-position: inside;
|
||||
padding-left: 1em;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@import "_base";
|
||||
@import "_layout";
|
||||
@import "_components";
|
||||
@import "_responsive";
|
||||
|
|
|
|||
Loading…
Reference in New Issue