init
This commit is contained in:
rzen
81
_sass/_config.scss
Normal file
81
_sass/_config.scss
Normal file
@ -0,0 +1,81 @@
|
||||
// config
|
||||
|
||||
// 0° red
|
||||
// 60° yellow
|
||||
// 120° green
|
||||
// 180° cyan
|
||||
// 240° blue
|
||||
|
||||
// Isabelline
|
||||
// https://html-color.codes/hex/f4f0ec
|
||||
// hsl(30, 26.67%, 94.12%)
|
||||
|
||||
// base hue
|
||||
$hue: 30;
|
||||
|
||||
// TODO
|
||||
$drop-caps: false;
|
||||
|
||||
// layout
|
||||
$mobile-breakpoint-max-width: 500px;
|
||||
$tablet-breakpoint-max-width: 800px;
|
||||
$desktop-breakpoint-min-width: 801px;
|
||||
|
||||
// color theming
|
||||
$link-color: hsl($hue,50,30);
|
||||
$link-active-color: lighten($link-color,10%);
|
||||
$link-hover-color: lighten($link-color,10%);
|
||||
$link-visited-color: darken($link-color,10%);
|
||||
|
||||
$selection-color: hsl($hue,75,90);
|
||||
$selection-background-color: hsl($hue,100,30);
|
||||
|
||||
$body-color: black;
|
||||
$body-background-color: hsl($hue,3,96); // hsl($hue,25,95);
|
||||
|
||||
// see the bottom of _layouts/base.html
|
||||
// @import url('https://fonts.googleapis.com/css?family=Bree+Serif');
|
||||
|
||||
$sans-serif: Helvetica, Arial, sans-serif;
|
||||
$serif: xGeorgia, Times, serif;
|
||||
|
||||
$header-serif: "Bree Serif",$serif;
|
||||
$body-serif: "Bree Serif",$serif;
|
||||
$header-color: darken($body-background-color,80%);
|
||||
$header-link-color: darken($body-background-color,70%);
|
||||
|
||||
$main-link-color: darken($body-background-color,80%);
|
||||
$main-heading-color: hsl($hue,50,30);
|
||||
$main-aside-color: hsl($hue,70,30);
|
||||
$main-blockquote-color: hsl($hue,70,30);
|
||||
$main-blockquote-before-color: hsl($hue,50,80);
|
||||
$main-index-color: hsl($hue,20,50);
|
||||
$main-dropcaps-color: hsl($hue,90,50);
|
||||
$main-dropcaps-font-size: 3em;
|
||||
$main-table-header-bg-color: darken($body-background-color,10%);
|
||||
|
||||
|
||||
$footer-color: hsl($hue,10,50);
|
||||
$footer-link-color: lighten($footer-color,10%);
|
||||
$footer-serif: $serif;
|
||||
|
||||
|
||||
//
|
||||
$local-google-fonts: true; // TODO
|
||||
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Bree Serif';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(../fonts/BreeSerif-Regular-Pw.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Bree Serif';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Bree Serif Regular'), local('BreeSerif-Regular'), url(../fonts/BreeSerif-Regular.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
9
_sass/_mixins.scss
Normal file
9
_sass/_mixins.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@function complement($color,$offset: 180) {
|
||||
@return ($color+$offset)%360
|
||||
}
|
||||
|
||||
@mixin border-radius($radius: 0.5em) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
border-radius: $radius;
|
||||
}
|
||||
341
_sass/_normalize.scss
Normal file
341
_sass/_normalize.scss
Normal file
@ -0,0 +1,341 @@
|
||||
/*! 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.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers.
|
||||
*/
|
||||
|
||||
body {
|
||||
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;
|
||||
}
|
||||
451
_sass/_opine.scss
Normal file
451
_sass/_opine.scss
Normal file
@ -0,0 +1,451 @@
|
||||
// print media exceptions
|
||||
@media print {
|
||||
.mode, header nav, footer a.edit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
main article aside {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// placeholder for responsive mode indication
|
||||
footer nav .mode {
|
||||
font-size: 70%;
|
||||
text-transform: uppercase;
|
||||
color: lighten($footer-color, 50%);
|
||||
&:before { content: '~'; }
|
||||
}
|
||||
|
||||
// desktop
|
||||
@media all and (min-width: 801px) {
|
||||
.mode:before {
|
||||
content: 'Desktop' !important;
|
||||
}
|
||||
}
|
||||
|
||||
// tablet & mobile
|
||||
@media all and (max-width: 800px) {
|
||||
body {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
main, header, footer {
|
||||
width: 90% !important;
|
||||
min-width: 300px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main article blockquote {
|
||||
&:before {
|
||||
content: '' !important;
|
||||
}
|
||||
}
|
||||
|
||||
main ul.index li.year {
|
||||
float: none !important;
|
||||
text-align: left !important;
|
||||
margin: .5em 0 0 0 !important;
|
||||
}
|
||||
|
||||
main article aside {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
// for tablet & mobile move year to top of ul of posts
|
||||
main {
|
||||
h2.year {
|
||||
// clear: both;
|
||||
float: none !important;
|
||||
// width: 4.5em;
|
||||
margin: 0 !important;
|
||||
text-align: left !important;
|
||||
font-size: 1.5em !important;
|
||||
color: $main-heading-color !important;
|
||||
}
|
||||
|
||||
ul.index {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mode:before {
|
||||
content: 'Tablet' !important;
|
||||
}
|
||||
}
|
||||
|
||||
// mobile
|
||||
@media all and (max-width: 500px) {
|
||||
body {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
main, header, footer {
|
||||
// font-size: 200%;
|
||||
width: 95% !important;
|
||||
min-width: 100px !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mode:before {
|
||||
content: 'Mobile' !important;
|
||||
}
|
||||
|
||||
main article aside {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
footer nav p span.copy {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: $selection-color;
|
||||
background-color: $selection-background-color;
|
||||
}
|
||||
|
||||
// size the width for comfortable reading
|
||||
main, header, footer {
|
||||
width: 70%;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $serif;
|
||||
font-size: 1.3em;
|
||||
color: $body-color;
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
||||
header {
|
||||
nav {
|
||||
color: $header-color;
|
||||
font-family: $header-serif;
|
||||
margin: .5em 0;
|
||||
float: right;
|
||||
|
||||
// site menu shows posts in "global" category
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
li {
|
||||
color: $header-link-color;
|
||||
list-style: none;
|
||||
padding-left: .5rem;
|
||||
display: inline-block;
|
||||
|
||||
&:before { content: '\2022'; padding-right: .5rem; }
|
||||
&:first-child:before { content: ''; padding-right: 0; }
|
||||
|
||||
a {
|
||||
&, &:hover, &:active, &:visited {
|
||||
text-decoration: none;
|
||||
color: darken($header-link-color,20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// div.column {
|
||||
// width: 30%;
|
||||
// float: left;
|
||||
// padding: .5rem;
|
||||
// margin: .5rem;
|
||||
// border: 1px solid #ccc;
|
||||
// }
|
||||
|
||||
// link styling
|
||||
a {
|
||||
color: darken($link-color,15%);
|
||||
&:hover, &:active, &:visited {
|
||||
color: $link-color;
|
||||
}
|
||||
}
|
||||
|
||||
// main area of the page
|
||||
main {
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.2em;
|
||||
|
||||
code {
|
||||
// TODO: need better styling
|
||||
font-size: .9em;
|
||||
background-color: white;
|
||||
border: solid 1px #ccc;
|
||||
border-radius: 3px;
|
||||
padding: 0 .2em;
|
||||
}
|
||||
}
|
||||
|
||||
// figure is a composition of the image and caption
|
||||
figure {
|
||||
margin: 1em 0;
|
||||
figcaption {
|
||||
font-size: .8em;
|
||||
text-align: center;
|
||||
padding: .5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// for slideshows show the first figure, hide rest
|
||||
div.slideshow figure {
|
||||
display: none;
|
||||
&:first-child {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// drop caps
|
||||
// TODO: this needs work
|
||||
@if $drop-caps {
|
||||
h1, h2, h3, h4, h5 {
|
||||
+ p:first-letter {
|
||||
color: $main-dropcaps-color;
|
||||
float: left;
|
||||
font-family: $header-serif;
|
||||
font-size: $main-dropcaps-font-size;
|
||||
line-height: 60px;
|
||||
padding-top: 4px;
|
||||
padding-right: 8px;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h1,h2,h3,h4,h5 {
|
||||
margin: 1em 0 .5em 0;
|
||||
color: $main-heading-color;
|
||||
font-family: $header-serif;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// h4 should sit right on top of the paragraph
|
||||
h4 {
|
||||
margin-bottom: 0;
|
||||
color: $body-color;
|
||||
}
|
||||
h4 + p { margin-top: .2em } // .2em to match line height spacing
|
||||
|
||||
// ul.posts {
|
||||
// padding-left: 0;
|
||||
// li {
|
||||
// list-style: none;
|
||||
// padding-left: 0;
|
||||
// margin-left: 0;
|
||||
// margin-top: .5rem;
|
||||
// margin-bottom: .5rem;
|
||||
// }
|
||||
// }
|
||||
|
||||
// styling for the main article
|
||||
article {
|
||||
|
||||
// styling for in-article unordered lists
|
||||
ul {
|
||||
padding-left: 0;
|
||||
li {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
padding-bottom: .2em;
|
||||
margin-left: 0;
|
||||
|
||||
// mdash for unordered list items
|
||||
&::before {
|
||||
content: "\2014";
|
||||
margin-left: -1em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
|
||||
// custom checkboxes for task list items
|
||||
&.task-list-item {
|
||||
padding-left: 1em;
|
||||
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
& input::before {
|
||||
content: "\2610";
|
||||
padding-right: .3em;
|
||||
}
|
||||
& input[checked]::before {
|
||||
content: "\2611";
|
||||
}
|
||||
& input {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
margin-left: -1.2em;
|
||||
height: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: probably needs work
|
||||
blockquote {
|
||||
clear: both;
|
||||
margin: .5rem 0;
|
||||
padding: 0;
|
||||
margin-left: 2em;
|
||||
position: relative;
|
||||
font-size: 1.2em;
|
||||
font-style: italic;
|
||||
|
||||
color: $main-blockquote-color;
|
||||
|
||||
&:before {
|
||||
content: '\201c';
|
||||
position: absolute;
|
||||
top: -.15em;
|
||||
left: -.7em;
|
||||
font-size: 4em;
|
||||
color: $main-blockquote-before-color;
|
||||
}
|
||||
|
||||
:first-child { margin-top: 0; }
|
||||
:last-child { margin-bottom: 0; }
|
||||
}
|
||||
|
||||
// inset side note
|
||||
aside {
|
||||
clear: both;
|
||||
float: right;
|
||||
margin: 0 -20% 0 1rem;
|
||||
padding: 0.5em 1rem;
|
||||
position: relative;
|
||||
font-size: .9em;
|
||||
text-align: left;
|
||||
width: 40%;
|
||||
color: $main-aside-color;
|
||||
border-left: 1px solid $main-aside-color;
|
||||
}
|
||||
|
||||
> table {
|
||||
width: 100%;
|
||||
&, th, td {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid $main-table-header-bg-color;
|
||||
}
|
||||
thead {
|
||||
th {
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background-color: $main-table-header-bg-color;
|
||||
font-family: $sans-serif;
|
||||
color: $body-color;
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
th, td { padding: 7px; }
|
||||
}
|
||||
|
||||
dt { font-weight: bold; }
|
||||
dd { margin: 0 0 .5em 0; }
|
||||
|
||||
// styling for the QED brick
|
||||
.qed { color: #ccc; }
|
||||
}
|
||||
|
||||
// styling for years in the index timeline of posts
|
||||
// TODO: hoist color to _config.sass
|
||||
// TODO: shold better scope selector
|
||||
h2.year {
|
||||
clear: both;
|
||||
color: hsl($hue,10,80);
|
||||
float: left;
|
||||
width: 4.5em;
|
||||
margin: -.2em 0 0 -5em;
|
||||
padding: 5px 0 0 0;
|
||||
font-family: $header-serif;
|
||||
font-size: 2em;
|
||||
font-weight: normal;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// styling for index of posts
|
||||
ul.index {
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
padding: .5em 0 .3em 0;
|
||||
list-style-type: none;
|
||||
color: $main-index-color;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// space posted date off post title
|
||||
span.posted {
|
||||
font-size: .8em;
|
||||
margin-left: 1.2em;
|
||||
&:before {
|
||||
content: "\2014";
|
||||
margin-left: -1em;
|
||||
margin-right: .2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span.badge {
|
||||
border-radius: 1em;
|
||||
display: inline-block;
|
||||
padding: 2px .5em;
|
||||
margin-left: 1em;
|
||||
font-size: 50%;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-family: $sans-serif;
|
||||
|
||||
&.draft { background: linear-gradient(hsl(0,90,60), hsl(0,90,40)); }
|
||||
&.collection { background: linear-gradient(hsl(210,60,60), hsl(210,60,40)); }
|
||||
&.private { background: linear-gradient(hsl(20,10,40), hsl(20,10,20)); }
|
||||
&.blog { background: linear-gradient(hsl(280,90,60), hsl(280,90,40)); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
// site footer
|
||||
footer {
|
||||
color: $footer-color;
|
||||
font-size: 80%;
|
||||
margin-top: 2em;
|
||||
font-family: $footer-serif;
|
||||
&, a, a:active, a:hover, a:visited { color: $footer-link-color }
|
||||
|
||||
// dont underline links in the footer
|
||||
nav a {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
// hang copyright symbol
|
||||
span.copy {
|
||||
position: absolute;
|
||||
margin-left: -1.2rem;
|
||||
}
|
||||
|
||||
}
|
||||
45
_sass/_snackbar.scss
Normal file
45
_sass/_snackbar.scss
Normal file
@ -0,0 +1,45 @@
|
||||
// from https://www.w3schools.com/howto/howto_js_snackbar.asp
|
||||
#snackbar {
|
||||
visibility: hidden;
|
||||
min-width: 250px;
|
||||
margin-left: -125px; /* Divide value of min-width by 2 */
|
||||
background: linear-gradient(hsl($hue,60,30), hsl($hue,60,20));
|
||||
// background: linear-gradient(#930, #620);
|
||||
// background: linear-gradient(#555, #333);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
left: 50%;
|
||||
bottom: 30px;
|
||||
font-family: $sans-serif;
|
||||
}
|
||||
|
||||
#snackbar.show {
|
||||
visibility: visible;
|
||||
-moz-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {bottom: 0; opacity: 0;}
|
||||
to {bottom: 30px; opacity: 1;}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
|
||||
@keyframes fadeout {
|
||||
from {bottom: 30px; opacity: 1;}
|
||||
to {bottom: 0; opacity: 0;}
|
||||
}
|
||||
73
_sass/_syntax.scss
Executable file
73
_sass/_syntax.scss
Executable file
@ -0,0 +1,73 @@
|
||||
/***************
|
||||
Darkly Pygments Theme
|
||||
(c) 2014 Sourcey
|
||||
http://sourcey.com
|
||||
***************/
|
||||
|
||||
.rouge-gutter {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
word-wrap: normal; /* horizontal scrolling */
|
||||
-moz-border-radius: 6px;
|
||||
-webkit-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
padding: .5rem .5rem;
|
||||
background: #343642;
|
||||
color: #C1C2C3;
|
||||
|
||||
// &::-webkit-scrollbar {
|
||||
// background: transparent; /* optional: just make scrollbar invisible */
|
||||
// width: 0px; /* remove scrollbar space */
|
||||
// height: 0px;
|
||||
// }
|
||||
/* optional: show position indicator in red */
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// //background: #FF0000;
|
||||
// }
|
||||
|
||||
|
||||
margin: 2rem 0;
|
||||
|
||||
tab-size: 2rem;
|
||||
|
||||
font-size: 1rem;
|
||||
|
||||
.lineno {
|
||||
text-align: right;
|
||||
color: #777;
|
||||
padding-right: .5rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
tab-size: 4;
|
||||
}
|
||||
}
|
||||
.highlight .hll { background-color: #ffc; }
|
||||
.highlight .gd { color: #2e3436; background-color: #0e1416; }
|
||||
.highlight .gr { color: #eeeeec; background-color: #c00; }
|
||||
.highlight .gi { color: #babdb6; background-color: #1f2b2d; }
|
||||
.highlight .go { color: #2c3032; background-color: #2c3032; }
|
||||
.highlight .kt { color: #e3e7df; }
|
||||
.highlight .ni { color: #888a85; }
|
||||
.highlight .c,.highlight .cm,.highlight .c1,.highlight .cs { color: #8D9684; }
|
||||
.highlight .err,.highlight .g,.highlight .l,.highlight .n,.highlight .x,.highlight .p,.highlight .ge,
|
||||
.highlight .gp,.highlight .gs,.highlight .gt,.highlight .ld,.highlight .s,.highlight .nc,.highlight .nd,
|
||||
.highlight .ne,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py,.highlight .ow,.highlight .w,.highlight .sb,
|
||||
.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,
|
||||
.highlight .s1,.highlight .ss,.highlight .bp { color: #C1C2C3; }
|
||||
.highlight .k,.highlight .kc,.highlight .kd,.highlight .kn,.highlight .kp,.highlight .kr,
|
||||
.highlight .nt { color: #729fcf; }
|
||||
.highlight .cp,.highlight .gh,.highlight .gu,.highlight .na,.highlight .nf { color: #E9A94B ; }
|
||||
.highlight .m,.highlight .nb,.highlight .no,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo,
|
||||
.highlight .il { color: #8ae234; }
|
||||
.highlight .o { color: #989DAA; }
|
||||
.highlight .nv,.highlight .vc,.highlight .vg,.highlight .vi { color: #fff; }
|
||||
Reference in New Issue
Block a user