Merge pull request #1052 from rstacruz/fix/old-styles
Fix styles for older pages
This commit is contained in:
Rico Sta. Cruz
GitHub
commit
fc41560d71
32
Makefile
32
Makefile
|
|
@ -2,6 +2,12 @@ npmbin := ./node_modules/.bin
|
||||||
PORT ?= 3000
|
PORT ?= 3000
|
||||||
HOST ?= 127.0.0.1
|
HOST ?= 127.0.0.1
|
||||||
|
|
||||||
|
help:
|
||||||
|
@echo
|
||||||
|
@echo Makefile targets
|
||||||
|
@grep -E '^[a-zA-Z_-]+:.*?## .*$$' Makefile | sort | awk 'BEGIN {FS = ":.*?## "}; {printf "\033[36m%-30s\033[0m %s\n", $$1, $$2}'
|
||||||
|
@echo
|
||||||
|
|
||||||
# Builds intermediate files. Needs a _site built first though
|
# Builds intermediate files. Needs a _site built first though
|
||||||
update: _site critical
|
update: _site critical
|
||||||
|
|
||||||
|
|
@ -9,27 +15,39 @@ update: _site critical
|
||||||
_site:
|
_site:
|
||||||
bundle exec jekyll build --incremental
|
bundle exec jekyll build --incremental
|
||||||
|
|
||||||
# Builds critical path CSS/JS
|
critical: _site ## Builds critical path CSS/JS
|
||||||
critical: _site
|
|
||||||
node _support/critical.js
|
node _support/critical.js
|
||||||
|
|
||||||
# Starts development server
|
# Ensure that bins are available.
|
||||||
dev:
|
ensure-bin:
|
||||||
|
@if [ ! -d $(npmbin) ]; then \
|
||||||
|
echo "---"; \
|
||||||
|
echo "Error: $(npmbin) not found, you may need to run '[docker-compose run --rm web] yarn install'."; \
|
||||||
|
echo "---"; \
|
||||||
|
exit 1; \
|
||||||
|
fi
|
||||||
|
@if ! which jekyll &>/dev/null; then \
|
||||||
|
echo "---"; \
|
||||||
|
echo "Warning: Jekyll not found, you may need to run '[docker-compose run --rm web] bundle install'."; \
|
||||||
|
echo "---"; \
|
||||||
|
fi
|
||||||
|
|
||||||
|
dev: ensure-bin ## Starts development server
|
||||||
$(npmbin)/concurrently -k -p command -c "blue,green" \
|
$(npmbin)/concurrently -k -p command -c "blue,green" \
|
||||||
"make dev-webpack" \
|
"make dev-webpack" \
|
||||||
"make dev-jekyll"
|
"make dev-jekyll"
|
||||||
|
|
||||||
dev-webpack:
|
dev-webpack: ensure-bin
|
||||||
$(npmbin)/webpack --watch --colors -p
|
$(npmbin)/webpack --watch --colors -p
|
||||||
|
|
||||||
dev-jekyll:
|
dev-jekyll: ensure-bin
|
||||||
if [ -f _site ]; then \
|
if [ -f _site ]; then \
|
||||||
bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
|
bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
|
||||||
else \
|
else \
|
||||||
bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
|
bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
|
||||||
fi
|
fi
|
||||||
|
|
||||||
test: _site
|
test: _site ## Runs rudimentary tests
|
||||||
@test -f _site/vim.html
|
@test -f _site/vim.html
|
||||||
@test -f _site/react.html
|
@test -f _site/react.html
|
||||||
@test -f _site/index.html
|
@test -f _site/index.html
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
{% include meta.html %}
|
{% include meta.html %}
|
||||||
{% include polyfills.html %}
|
{% include polyfills.html %}
|
||||||
<style>html{opacity:0}</style>
|
<style>html{opacity:0}</style>
|
||||||
<link href="https://ricostacruz.com/til/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
|
<link rel="stylesheet" href="{{base}}/assets/2015/style.css?t={{ timestamp }}">
|
||||||
<link href="{{base}}/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
|
<link href="{{base}}/assets/style.css?t={{ timestamp }}" rel="stylesheet" />
|
||||||
<link href="{{base}}/assets/print.css?t={{ timestamp }}" rel="stylesheet" media="print" />
|
<link href="{{base}}/assets/print.css?t={{ timestamp }}" rel="stylesheet" media="print" />
|
||||||
</head>
|
</head>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,427 @@
|
||||||
|
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set default font family to sans-serif.
|
||||||
|
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||||
|
* user zoom.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: sans-serif; /* 1 */
|
||||||
|
-ms-text-size-adjust: 100%; /* 2 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default margin.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* HTML5 display definitions
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||||
|
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||||
|
* and Firefox.
|
||||||
|
* Correct `block` display not defined for `main` in IE 11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
article,
|
||||||
|
aside,
|
||||||
|
details,
|
||||||
|
figcaption,
|
||||||
|
figure,
|
||||||
|
footer,
|
||||||
|
header,
|
||||||
|
hgroup,
|
||||||
|
main,
|
||||||
|
menu,
|
||||||
|
nav,
|
||||||
|
section,
|
||||||
|
summary {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||||
|
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio,
|
||||||
|
canvas,
|
||||||
|
progress,
|
||||||
|
video {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: baseline; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent modern browsers from displaying `audio` without controls.
|
||||||
|
* Remove excess height in iOS 5 devices.
|
||||||
|
*/
|
||||||
|
|
||||||
|
audio:not([controls]) {
|
||||||
|
display: none;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||||
|
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden],
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Links
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background color from active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Improve readability when focused and also mouse hovered in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a:active,
|
||||||
|
a:hover {
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: 1px dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in Safari and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
dfn {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address variable `h1` font-size and margin within `section` and `article`
|
||||||
|
* contexts in Firefox 4+, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address styling not present in IE 8/9.
|
||||||
|
*/
|
||||||
|
|
||||||
|
mark {
|
||||||
|
background: #ff0;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent and variable font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove border when inside `a` element in IE 8/9/10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct overflow not hidden in IE 9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
svg:not(:root) {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address margin not present in IE 8/9 and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 1em 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address differences between Firefox and other browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Contain overflow in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address odd `em`-unit font size rendering in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||||
|
* styling of `select`, unless a `border` property is set.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct color not being inherited.
|
||||||
|
* Known issue: affects color of disabled elements.
|
||||||
|
* 2. Correct font properties not being inherited.
|
||||||
|
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
color: inherit; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
margin: 0; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||||
|
* All other form control elements do not inherit `text-transform` values.
|
||||||
|
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||||
|
* Correct `select` style inheritance in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||||
|
* and `video` controls.
|
||||||
|
* 2. Correct inability to style clickable `input` types in iOS.
|
||||||
|
* 3. Improve usability and consistency of cursor style between image-type
|
||||||
|
* `input` and others.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
html input[type="button"], /* 1 */
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
-webkit-appearance: button; /* 2 */
|
||||||
|
cursor: pointer; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Re-set default cursor for disabled elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button[disabled],
|
||||||
|
html input[disabled] {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and border in Firefox 4+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
input::-moz-focus-inner {
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||||
|
* the UA stylesheet.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input {
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* It's recommended that you don't attempt to style these elements.
|
||||||
|
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||||
|
*
|
||||||
|
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||||
|
* 2. Remove excess padding in IE 8/9/10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="checkbox"],
|
||||||
|
input[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||||
|
* `font-size` values of the `input`, it causes the cursor style of the
|
||||||
|
* decrement button to change from `default` to `text`.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="number"]::-webkit-inner-spin-button,
|
||||||
|
input[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||||
|
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||||
|
* (include `-moz` to future-proof).
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
-moz-box-sizing: content-box;
|
||||||
|
-webkit-box-sizing: content-box; /* 2 */
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||||
|
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||||
|
* padding (and `textfield` appearance).
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="search"]::-webkit-search-cancel-button,
|
||||||
|
input[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Define consistent border, margin, and padding.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: 1px solid #c0c0c0;
|
||||||
|
margin: 0 2px;
|
||||||
|
padding: 0.35em 0.625em 0.75em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||||
|
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
border: 0; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Don't inherit the `font-weight` (applied by a rule above).
|
||||||
|
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||||
|
*/
|
||||||
|
|
||||||
|
optgroup {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tables
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove most spacing between table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
td,
|
||||||
|
th {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
@import url('//brick.a.ssl.fastly.net/Roboto:400,400i,700')
|
||||||
|
@import url('//fonts.googleapis.com/css?family=Raleway:800')
|
||||||
|
@import url('//fonts.googleapis.com/css?family=Fira+Mono:400,400i')
|
||||||
|
@import url('//brick.a.ssl.fastly.net/EB+Garamond:400i')
|
||||||
|
|
||||||
|
$body-font-size: 17px
|
||||||
|
$body-line-height: 1.7
|
||||||
|
|
||||||
|
@mixin font-size($multiplier, $lhmultiplier, $size, $line-height)
|
||||||
|
font-size: $size * $multiplier
|
||||||
|
@if $line-height != none
|
||||||
|
line-height: $line-height * $lhmultiplier
|
||||||
|
|
||||||
|
@mixin body-font
|
||||||
|
font-family: 'Roboto', sans-serif
|
||||||
|
font-weight: 400
|
||||||
|
|
||||||
|
@mixin italic-font
|
||||||
|
font-family: 'eb garamond', serif
|
||||||
|
font-weight: 400
|
||||||
|
font-style: italic
|
||||||
|
+kernliga
|
||||||
|
|
||||||
|
@mixin headline-font
|
||||||
|
font-family: 'eb garamond', serif
|
||||||
|
font-weight: 400
|
||||||
|
font-style: italic
|
||||||
|
+kernliga
|
||||||
|
|
||||||
|
@mixin caps-font
|
||||||
|
text-transform: uppercase
|
||||||
|
letter-spacing: 2px
|
||||||
|
|
||||||
|
@mixin mono-font
|
||||||
|
font-family: 'fira mono', monospace
|
||||||
|
font-weight: 400
|
||||||
|
letter-spacing: -0.5px
|
||||||
|
+no-antialias
|
||||||
|
|
||||||
|
@mixin bold-font
|
||||||
|
font-family: 'raleway', sans-serif
|
||||||
|
font-weight: 800
|
||||||
|
|
||||||
|
/*
|
||||||
|
* sizes
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin italic-font-size($size, $line-height: none)
|
||||||
|
+font-size(1.0, 1.0, $size, $line-height)
|
||||||
|
|
||||||
|
@mixin headline-font-size($size, $line-height: none)
|
||||||
|
+font-size(1.0, 1.0, $size, $line-height)
|
||||||
|
|
||||||
|
@mixin bold-font-size($size, $line-height: none)
|
||||||
|
+font-size(1.0, 1.0, $size, $line-height)
|
||||||
|
|
||||||
|
@mixin mono-font-size($size, $line-height: none)
|
||||||
|
+font-size(1.0, 1.0, $size, $line-height)
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
@mixin kernliga
|
||||||
|
font-size-adjust: none
|
||||||
|
// don't display digraphs in languages that don't support it
|
||||||
|
-webkit-font-language-override: normal
|
||||||
|
font-language-override: normal
|
||||||
|
|
||||||
|
// use font-defined kerning info
|
||||||
|
-webkit-font-kerning: auto
|
||||||
|
font-kerning: auto
|
||||||
|
|
||||||
|
// opentype options: kerning, ligatures, horiz ligatures, discretionary ligatures, contextual swash
|
||||||
|
// http://en.wikipedia.org/wiki/List_of_typographic_features
|
||||||
|
-webkit-font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
|
||||||
|
font-feature-settings: "kern", "liga", "dlig", "hlig", "cswh"
|
||||||
|
|
||||||
|
// allow browser to auto-infer missing glyphs
|
||||||
|
font-synthesis: weight style
|
||||||
|
|
||||||
|
// swashes on first letters
|
||||||
|
// &:first-letter
|
||||||
|
// font-feature-settings: "kern", "swsh"
|
||||||
|
// -webkit-font-feature-settings: "kern", "swsh"
|
||||||
|
|
||||||
|
@mixin antialias
|
||||||
|
text-rendering: optimizeLegibility
|
||||||
|
-webkit-font-smoothing: antialiased
|
||||||
|
-moz-osx-font-smoothing: grayscale
|
||||||
|
|
||||||
|
@mixin no-antialias
|
||||||
|
text-rendering: auto
|
||||||
|
-webkit-font-smoothing: subpixel-antialiased
|
||||||
|
-moz-osx-font-smoothing: auto
|
||||||
|
|
||||||
|
@mixin clearfix
|
||||||
|
&:after
|
||||||
|
display: table
|
||||||
|
content: ''
|
||||||
|
clear: both
|
||||||
|
height: 0
|
||||||
|
zoom: 1
|
||||||
|
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
/*
|
||||||
|
* .about-the-site
|
||||||
|
*/
|
||||||
|
|
||||||
|
.about-the-site
|
||||||
|
&
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.container
|
||||||
|
text-align: center
|
||||||
|
padding: 3em 80px
|
||||||
|
margin: 0 auto
|
||||||
|
+clearfix
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
padding-left: 40px
|
||||||
|
padding-right: 40px
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
left: 20px
|
||||||
|
right: 20px
|
||||||
|
top: 0
|
||||||
|
border-top: solid 1px $hairline
|
||||||
|
|
||||||
|
&
|
||||||
|
+body-font
|
||||||
|
font-size: 0.85em
|
||||||
|
color: lighten($gray, 20%)
|
||||||
|
|
||||||
|
a, a:visited
|
||||||
|
color: lighten($gray, 10%)
|
||||||
|
box-shadow: inset 0 -1px rgba(black, 0.05)
|
||||||
|
padding-bottom: 2px
|
||||||
|
|
||||||
|
a:hover, a:focus
|
||||||
|
color: $black
|
||||||
|
box-shadow: inset 0 -2px $accent
|
||||||
|
|
||||||
|
strong
|
||||||
|
+bold-font
|
||||||
|
|
||||||
|
strong a, strong a:visited
|
||||||
|
color: $black
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
strong a:hover, strong a:focus
|
||||||
|
color: $black
|
||||||
|
box-shadow: inset 0 -2px $accent
|
||||||
|
|
||||||
|
.identity
|
||||||
|
margin: 0
|
||||||
|
margin-top: 0.2em
|
||||||
|
float: right
|
||||||
|
+italic-font
|
||||||
|
+italic-font-size(2.5em)
|
||||||
|
|
||||||
|
.identity a,
|
||||||
|
.identity a:visited
|
||||||
|
color: $black
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
.identity a:hover,
|
||||||
|
.identity a:focus
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
.blurb
|
||||||
|
margin: 0
|
||||||
|
max-width: 500px
|
||||||
|
text-align: left
|
||||||
|
float: left
|
||||||
|
line-height: 1.55
|
||||||
|
|
||||||
|
.back
|
||||||
|
float: right
|
||||||
|
margin-top: 0.4em
|
||||||
|
margin-right: 2em
|
||||||
|
|
||||||
|
.fleuron:before
|
||||||
|
content: '\f492'
|
||||||
|
font-family: Ionicons
|
||||||
|
font-size: 16px
|
||||||
|
font-weight: normal
|
||||||
|
font-style: normal
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
color: $black
|
||||||
|
margin: 0 7px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
.identity
|
||||||
|
float: left
|
||||||
|
clear: both
|
||||||
|
.blurb
|
||||||
|
float: none
|
||||||
|
margin-bottom: 1em
|
||||||
|
width: auto
|
||||||
|
.back
|
||||||
|
float: right
|
||||||
|
margin-right: 0
|
||||||
|
|
@ -0,0 +1,66 @@
|
||||||
|
.big-button,
|
||||||
|
a.big-button
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
width: 180px
|
||||||
|
height: 50px
|
||||||
|
line-height: 50px - 2px
|
||||||
|
padding: 0
|
||||||
|
border-radius: 30px
|
||||||
|
font-size: 0.85em
|
||||||
|
box-shadow: none
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
width: 140px
|
||||||
|
height: 40px
|
||||||
|
line-height: 40px - 2px
|
||||||
|
|
||||||
|
&, &:visited
|
||||||
|
border: solid 2px $accent
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
&.-back,
|
||||||
|
&.-back:visited
|
||||||
|
border: solid 1px rgba($gray, 0.2)
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
&.-back:before,
|
||||||
|
&.-next:after
|
||||||
|
font-family: Ionicons
|
||||||
|
font-size: 20px
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
position: relative
|
||||||
|
top: -1px
|
||||||
|
|
||||||
|
&.-back:before
|
||||||
|
content: '\f38f'
|
||||||
|
|
||||||
|
&.-next:after
|
||||||
|
content: '\f3d1'
|
||||||
|
margin-left: 16px
|
||||||
|
top: 0
|
||||||
|
|
||||||
|
&.-slim
|
||||||
|
width: 60px
|
||||||
|
border-width: 2px
|
||||||
|
height: 60px
|
||||||
|
line-height: 60px
|
||||||
|
border-radius: 50%
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
line-height: 40px
|
||||||
|
|
||||||
|
&:hover, &:focus
|
||||||
|
background: $accent
|
||||||
|
border-color: transparent
|
||||||
|
color: white
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
&.-back:hover,
|
||||||
|
&.-back:focus
|
||||||
|
background: $accent
|
||||||
|
color: white
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
/*
|
||||||
|
* .brief-intro -- Brief introduction
|
||||||
|
*/
|
||||||
|
|
||||||
|
.brief-intro
|
||||||
|
font-size: 1.1em
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
|
@ -0,0 +1,38 @@
|
||||||
|
/*
|
||||||
|
* .full-image -- full width image containers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.full-image
|
||||||
|
&
|
||||||
|
overflow: hidden
|
||||||
|
text-align: center
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
img
|
||||||
|
background: #fcfcfc
|
||||||
|
|
||||||
|
&.cropped img,
|
||||||
|
&.cropped img:first-child:last-child
|
||||||
|
margin-bottom: -50px
|
||||||
|
display: block
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
&.cropped:after
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
position: absolute
|
||||||
|
bottom: 0
|
||||||
|
left: 20px
|
||||||
|
right: 20px
|
||||||
|
border-bottom: solid 1px $lightgray
|
||||||
|
|
||||||
|
&.stretched img
|
||||||
|
width: 100%
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin-left: -20px
|
||||||
|
margin-right: -20px
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
width: 100vw
|
||||||
|
margin-left: calc(-50vw + #{$page-width} / 2)
|
||||||
|
|
@ -0,0 +1,14 @@
|
||||||
|
.hint--top, .hint--bottom
|
||||||
|
&:before
|
||||||
|
margin-top: -14px
|
||||||
|
margin-left: -8px
|
||||||
|
border-radius: 2px
|
||||||
|
|
||||||
|
&:before, &:after
|
||||||
|
transition-duration: 10ms
|
||||||
|
|
||||||
|
&:after
|
||||||
|
box-shadow: none
|
||||||
|
border-radius: 2px
|
||||||
|
text-shadow: none
|
||||||
|
margin-left: -55px
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-value
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
.hljs-key,
|
||||||
|
.hljs-attribute
|
||||||
|
color: darken($accent, 20%)
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-constant
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
.hljs-comment
|
||||||
|
color: $gray
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
//
|
||||||
|
// Prism
|
||||||
|
//
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata
|
||||||
|
color: $gray
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
.token.punctuation
|
||||||
|
color: #999
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted
|
||||||
|
color: #905
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string
|
||||||
|
color: #a67f59
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword
|
||||||
|
color: #07a
|
||||||
|
|
||||||
|
.token.function
|
||||||
|
color: #DD4A68
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable
|
||||||
|
color: #e90
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold
|
||||||
|
font-weight: bold
|
||||||
|
.token.italic
|
||||||
|
font-style: italic
|
||||||
|
|
||||||
|
.token.entity
|
||||||
|
cursor: help
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
/*
|
||||||
|
* .next-article -- lead into the next article
|
||||||
|
*/
|
||||||
|
|
||||||
|
.next-article
|
||||||
|
$bg: darken(#8e44ad, 15%)
|
||||||
|
$textcolor: saturate(mix(white, $bg, 85%), 90%)
|
||||||
|
|
||||||
|
&
|
||||||
|
display: block
|
||||||
|
padding: 0
|
||||||
|
margin-left: 40px
|
||||||
|
margin-right: 40px
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
|
||||||
|
&, &:hover, &:focus
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
position: absolute
|
||||||
|
left: -20px
|
||||||
|
right: -20px
|
||||||
|
bottom: 0
|
||||||
|
border-bottom: solid 1px $hairline
|
||||||
|
|
||||||
|
// suppress its hairline
|
||||||
|
& + .about-the-site:before
|
||||||
|
display: none
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin-left: 0
|
||||||
|
margin-right: 0
|
||||||
|
|
||||||
|
// remove horizontal line
|
||||||
|
& + .about-the-site:before
|
||||||
|
display: none
|
||||||
|
|
||||||
|
.container
|
||||||
|
display: block
|
||||||
|
text-align: center
|
||||||
|
padding: 10em 20px
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-top: 8em
|
||||||
|
padding: 8em 20px
|
||||||
|
|
||||||
|
.h3
|
||||||
|
display: block
|
||||||
|
margin: 0 auto auto
|
||||||
|
padding: 0
|
||||||
|
font-size: 2.2em
|
||||||
|
line-height: 1.3em
|
||||||
|
+bold-font
|
||||||
|
color: white
|
||||||
|
transition: all 250ms linear
|
||||||
|
|
||||||
|
// &:hover > span
|
||||||
|
// box-shadow: inset 0 -2px $accent
|
||||||
|
// text-shadow: 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg, 0 0 4px $bg
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
font-size: 1.5em
|
||||||
|
|
||||||
|
.h3, .excerpt
|
||||||
|
max-width: $page-width * 0.9
|
||||||
|
|
||||||
|
.h3 + .excerpt
|
||||||
|
margin-top: 0.5em
|
||||||
|
|
||||||
|
.excerpt
|
||||||
|
display: block
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
font-size: 1em
|
||||||
|
line-height: 1.6em
|
||||||
|
|
||||||
|
.big-button
|
||||||
|
margin-top: 2em
|
||||||
|
|
||||||
|
h3 a:hover,
|
||||||
|
h3 a:focus
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
.heading
|
||||||
|
display: block
|
||||||
|
+caps-font
|
||||||
|
font-size: 0.7em
|
||||||
|
margin-bottom: 1em
|
||||||
|
|
||||||
|
.heading:before
|
||||||
|
font-family: Ionicons
|
||||||
|
content: '\f4a8'
|
||||||
|
margin-right: 15px
|
||||||
|
font-size: 16px
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
.big-button,
|
||||||
|
a.big-button
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
&, &:visited
|
||||||
|
border-color: $accent
|
||||||
|
color: white
|
||||||
|
|
||||||
|
&:hover, &:focus
|
||||||
|
background: $accent
|
||||||
|
border-color: transparent
|
||||||
|
|
||||||
|
@mixin recolor-article($bg, $bg2, $url: '', $a: 0.9, $angle: 177deg)
|
||||||
|
$w: 1500
|
||||||
|
$h: 10
|
||||||
|
$textcolor: mix(white, $bg, 75%)
|
||||||
|
$notch: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='#{$w}' height='#{$h}' version='1.1'><polyline fill='white' points='#{$w},0 0,0 0,#{$h}'/></svg>"
|
||||||
|
|
||||||
|
&
|
||||||
|
background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 0%), $a), rgba(adjust-color($bg2, $lightness: 0%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
|
||||||
|
&:hover, &:focus
|
||||||
|
background: url($notch) -50px top / 110% auto no-repeat, linear-gradient(to right, rgba(adjust-color($bg, $lightness: 1%), $a), rgba(adjust-color($bg2, $lightness: 1%), $a)), linear-gradient($angle, rgba($bg, 0.0), rgba($bg, 0.9)), url($url) center center / cover, $bg
|
||||||
|
.excerpt, .heading
|
||||||
|
color: $textcolor
|
||||||
|
|
||||||
|
.next-article
|
||||||
|
&
|
||||||
|
+recolor-article(#612e76, #5867cc)
|
||||||
|
&.-v2
|
||||||
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
||||||
|
+recolor-article(#027d65, #00536b, "bg/pebbles.jpg", 0.7, $angle: 35deg)
|
||||||
|
&.-v3
|
||||||
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
||||||
|
+recolor-article(#1d2434, #202a3e, "bg/roughwall.jpg", 0.9, $angle: 1deg)
|
||||||
|
&.-v4
|
||||||
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
||||||
|
+recolor-article(#902014, #c77e0a, "bg/woodfloor.jpg", 0.45, $angle: 1deg)
|
||||||
|
&.-v5
|
||||||
|
text-shadow: 0 1px 1px rgba(black, 0.5)
|
||||||
|
+recolor-article(#17283a, #25295e, "bg/stairs.jpg", 0.85, $angle: 1deg)
|
||||||
|
// &.next-article
|
||||||
|
|
@ -0,0 +1,56 @@
|
||||||
|
/*
|
||||||
|
* .post-headline -- H1's of posts
|
||||||
|
*/
|
||||||
|
|
||||||
|
.post-headline
|
||||||
|
&
|
||||||
|
margin: 1.5em auto 3em auto
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.post-icon
|
||||||
|
margin-bottom: 2px
|
||||||
|
|
||||||
|
h1
|
||||||
|
text-align: center
|
||||||
|
margin-bottom: 0
|
||||||
|
+headline-font
|
||||||
|
+headline-font-size(2.8em, 1.2)
|
||||||
|
width: 80%
|
||||||
|
margin-left: auto
|
||||||
|
margin-right: auto
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
+headline-font-size(2em)
|
||||||
|
|
||||||
|
.meta
|
||||||
|
display: block
|
||||||
|
text-align: center
|
||||||
|
margin: 0
|
||||||
|
margin-top: 1em
|
||||||
|
font-weight: normal
|
||||||
|
+caps-font
|
||||||
|
font-size: 0.8em
|
||||||
|
|
||||||
|
.meta .author,
|
||||||
|
.meta .date
|
||||||
|
margin: 0 5px
|
||||||
|
padding-bottom: 2px
|
||||||
|
|
||||||
|
.meta a,
|
||||||
|
.meta a:visited
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
.meta a:hover,
|
||||||
|
.meta a:focus
|
||||||
|
&, span
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
time
|
||||||
|
color: $black
|
||||||
|
box-shadow: inset 0 -2px $accent
|
||||||
|
|
||||||
|
a, a:visited, a:focus, a:hover
|
||||||
|
color: $black
|
||||||
|
text-decoration: none
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
|
@ -0,0 +1,58 @@
|
||||||
|
/*
|
||||||
|
* .post-icon -- category icons
|
||||||
|
*/
|
||||||
|
|
||||||
|
$icon-size: 56px
|
||||||
|
|
||||||
|
@mixin iconify($color, $text)
|
||||||
|
&
|
||||||
|
background: $color
|
||||||
|
color: lighten($color, 50%)
|
||||||
|
box-shadow: -2px 2px #e67e22, 2px -2px #f1c40f, 1px -2px rgba($color, 0.2), 1px 3px rgba($color, 0.3)
|
||||||
|
|
||||||
|
span:after
|
||||||
|
content: $text
|
||||||
|
|
||||||
|
.post-icon,
|
||||||
|
abbr.post-icon
|
||||||
|
border: 0
|
||||||
|
margin: 0
|
||||||
|
display: inline-block
|
||||||
|
width: $icon-size
|
||||||
|
height: $icon-size
|
||||||
|
line-height: $icon-size + 2px
|
||||||
|
text-align: center
|
||||||
|
border-radius: 50%
|
||||||
|
color: #aaa
|
||||||
|
background: #eee
|
||||||
|
|
||||||
|
+body-font
|
||||||
|
font-size: 16px
|
||||||
|
letter-spacing: 1px
|
||||||
|
|
||||||
|
span:after
|
||||||
|
content: attr(data-label)
|
||||||
|
font-size: 0.9em
|
||||||
|
position: relative
|
||||||
|
top: -1px
|
||||||
|
|
||||||
|
@media (max-width: 480px)
|
||||||
|
transform: scale(0.75)
|
||||||
|
|
||||||
|
&.-icon-css
|
||||||
|
+iconify(#3498db, 'CSS')
|
||||||
|
font-size: 14px
|
||||||
|
line-height: $icon-size + 2px
|
||||||
|
&.-icon-development
|
||||||
|
+iconify(#34495e, 'DEV')
|
||||||
|
font-size: 14px
|
||||||
|
line-height: $icon-size + 2px
|
||||||
|
&.-icon-ruby
|
||||||
|
+iconify(#e74c3c, 'RB')
|
||||||
|
text-indent: 2px
|
||||||
|
&.-icon-javascript
|
||||||
|
+iconify(#2ecc71, 'JS')
|
||||||
|
text-indent: 1px
|
||||||
|
&.-icon-productivity
|
||||||
|
+iconify(#2ecc71, 'PROD')
|
||||||
|
text-indent: 1px
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
* .post-index (et al) -- utility classes
|
||||||
|
*/
|
||||||
|
|
||||||
|
.post-index
|
||||||
|
&
|
||||||
|
margin: 0 auto 4em auto
|
||||||
|
position: relative
|
||||||
|
padding-top: 4em
|
||||||
|
font-size: 0.9em
|
||||||
|
|
||||||
|
.container
|
||||||
|
overflow: hidden
|
||||||
|
max-width: $page-width
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
h3
|
||||||
|
+caps-font
|
||||||
|
color: $gray
|
||||||
|
font-size: 1em
|
||||||
|
|
||||||
|
.post-index-item
|
||||||
|
display: block
|
||||||
|
overflow: hidden
|
||||||
|
padding: 6px 20px
|
||||||
|
border-top: solid 1px $hairline
|
||||||
|
|
||||||
|
&, &:hover, &:focus
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
&:hover, &:focus
|
||||||
|
.article
|
||||||
|
transition: none
|
||||||
|
|
||||||
|
.date
|
||||||
|
display: block
|
||||||
|
|
||||||
|
.date
|
||||||
|
width: 100px
|
||||||
|
font-size: 0.8em
|
||||||
|
color: $gray
|
||||||
|
|
||||||
|
@media (min-width: 768px)
|
||||||
|
padding-left: 0
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
.date, .tag
|
||||||
|
margin-top: 0.2em
|
||||||
|
|
||||||
|
.date, article
|
||||||
|
float: left
|
||||||
|
|
||||||
|
.tag
|
||||||
|
float: right
|
||||||
|
|
||||||
|
.article
|
||||||
|
color: $text
|
||||||
|
margin-right: 3px
|
||||||
|
transition: all 100ms linear
|
||||||
|
|
||||||
|
&:hover .article
|
||||||
|
color: $accent
|
||||||
|
|
||||||
|
&:nth-of-type(1) .article,
|
||||||
|
&:nth-of-type(2) .article,
|
||||||
|
&:nth-of-type(3) .article,
|
||||||
|
&:nth-of-type(4) .article
|
||||||
|
+bold-font
|
||||||
|
|
||||||
|
.tag
|
||||||
|
color: $gray
|
||||||
|
font-weight: normal
|
||||||
|
font-size: 0.8em
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
.post-item
|
||||||
|
max-width: $page-width
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
.post-list
|
||||||
|
margin: 40px auto
|
||||||
|
padding: 20px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
.post-list > .post-item:not(:first-child)
|
||||||
|
&:before
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
width: 150px
|
||||||
|
height: 1px
|
||||||
|
background: $hairline
|
||||||
|
margin: 7em auto
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin: 4em auto
|
||||||
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
.site-header
|
||||||
|
text-align: center
|
||||||
|
padding: 0 20px
|
||||||
|
|
||||||
|
.container
|
||||||
|
padding: 15px 20px
|
||||||
|
font-size: 0.9em
|
||||||
|
color: rgba($gray, 0.6)
|
||||||
|
border-bottom: solid 1px $hairline
|
||||||
|
|
||||||
|
em
|
||||||
|
+italic-font
|
||||||
|
+italic-font-size(1.1em)
|
||||||
|
font-size: 1.1em
|
||||||
|
color: $text
|
||||||
|
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
* .social-list -- social share icons
|
||||||
|
*/
|
||||||
|
|
||||||
|
.social-list
|
||||||
|
&, li
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
|
||||||
|
&
|
||||||
|
display: block
|
||||||
|
text-align: center
|
||||||
|
width: 100%
|
||||||
|
margin-top: 2em
|
||||||
|
|
||||||
|
@media (min-width: 768px)
|
||||||
|
margin-top: 4em
|
||||||
|
|
||||||
|
&.-top
|
||||||
|
margin-top: -2em
|
||||||
|
|
||||||
|
@media (min-width: 768px)
|
||||||
|
margin-top: -1em
|
||||||
|
|
||||||
|
li
|
||||||
|
display: inline-block
|
||||||
|
|
||||||
|
a
|
||||||
|
display: inline-block
|
||||||
|
padding: 6px
|
||||||
|
text-align: center
|
||||||
|
box-shadow: none
|
||||||
|
|
||||||
|
a:before, a:after
|
||||||
|
transition: all 100ms linear
|
||||||
|
|
||||||
|
.text
|
||||||
|
display: none
|
||||||
|
|
||||||
|
a:before
|
||||||
|
font-family: 'Ionicons'
|
||||||
|
font-weight: normal
|
||||||
|
font-style: normal
|
||||||
|
font-size: 18px
|
||||||
|
width: 40px
|
||||||
|
height: 40px
|
||||||
|
line-height: 40px
|
||||||
|
display: inline-block
|
||||||
|
text-align: center
|
||||||
|
border: solid 2px transparent
|
||||||
|
border-radius: 50%
|
||||||
|
|
||||||
|
@mixin socialiconify($color, $content, $filled)
|
||||||
|
&
|
||||||
|
color: darken($lightgray, 10%)
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus
|
||||||
|
color: $color
|
||||||
|
&:before
|
||||||
|
content: $filled
|
||||||
|
&:hover:before,
|
||||||
|
&:focus:before
|
||||||
|
border-color: $color
|
||||||
|
content: $filled
|
||||||
|
|
||||||
|
.facebook a
|
||||||
|
+socialiconify(#4c66a4, '\f230', '\f231')
|
||||||
|
.twitter a
|
||||||
|
+socialiconify(dodgerblue, '\f242', '\f243')
|
||||||
|
.googleplus a
|
||||||
|
+socialiconify(#f53, '\f234', '\f235')
|
||||||
|
|
||||||
|
|
@ -0,0 +1,157 @@
|
||||||
|
/*
|
||||||
|
* html base (html, body)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*
|
||||||
|
+antialias
|
||||||
|
|
||||||
|
html
|
||||||
|
font-size: $body-font-size
|
||||||
|
line-height: $body-line-height
|
||||||
|
background: $bg
|
||||||
|
color: $text
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
font-size: floor($body-font-size * 14/17)
|
||||||
|
|
||||||
|
html
|
||||||
|
transition: opacity 200ms linear
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
html, input, textarea, td, th
|
||||||
|
+body-font
|
||||||
|
|
||||||
|
html, body
|
||||||
|
overflow-x: hidden
|
||||||
|
|
||||||
|
/*
|
||||||
|
* fouc prevention
|
||||||
|
*/
|
||||||
|
|
||||||
|
body
|
||||||
|
transition: opacity 100ms linear
|
||||||
|
|
||||||
|
html.no-js *
|
||||||
|
opacity: 0
|
||||||
|
|
||||||
|
/*
|
||||||
|
* basic styles (a, p, img...)
|
||||||
|
*/
|
||||||
|
|
||||||
|
a, a:visited
|
||||||
|
color: $text
|
||||||
|
text-decoration: none
|
||||||
|
box-shadow: inset 0 -1px rgba(#888, 0.3)
|
||||||
|
transition: all 100ms linear
|
||||||
|
|
||||||
|
a:focus, a:hover
|
||||||
|
box-shadow: inset 0 -2px $accent
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
strong, b
|
||||||
|
&, a, a:visited
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
h3, p, ul, ol
|
||||||
|
margin: 1.5em 0
|
||||||
|
|
||||||
|
/*
|
||||||
|
* iframes
|
||||||
|
*/
|
||||||
|
|
||||||
|
p > iframe
|
||||||
|
margin: 0 auto
|
||||||
|
display: block
|
||||||
|
|
||||||
|
/*
|
||||||
|
* lists
|
||||||
|
*/
|
||||||
|
|
||||||
|
ul, ol
|
||||||
|
padding-left: 1.5em
|
||||||
|
|
||||||
|
ul
|
||||||
|
&
|
||||||
|
list-style: none
|
||||||
|
|
||||||
|
> li
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
> li:before
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
position: absolute
|
||||||
|
left: -1.4em
|
||||||
|
top: 0
|
||||||
|
margin-top: 0.7em
|
||||||
|
width: 4px
|
||||||
|
height: 4px
|
||||||
|
border-radius: 50%
|
||||||
|
border: solid 2px $lightgray
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
width: 3px
|
||||||
|
height: 3px
|
||||||
|
|
||||||
|
/*
|
||||||
|
* headings
|
||||||
|
*/
|
||||||
|
|
||||||
|
h2
|
||||||
|
&, a, a:visited
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
h2
|
||||||
|
text-align: center
|
||||||
|
+headline-font
|
||||||
|
+headline-font-size(2em, 1.4)
|
||||||
|
margin: 2em auto 0 auto
|
||||||
|
@media (max-width: 768px)
|
||||||
|
+headline-font-size(1.6em)
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
h2:before,
|
||||||
|
h2:after
|
||||||
|
content: ''
|
||||||
|
display: inline-block
|
||||||
|
vertical-align: middle
|
||||||
|
width: 46px
|
||||||
|
height: 1px
|
||||||
|
background: $lightgray
|
||||||
|
margin: 0 30px
|
||||||
|
|
||||||
|
h3
|
||||||
|
+bold-font
|
||||||
|
+bold-font-size(1.1em)
|
||||||
|
margin-top: 2em
|
||||||
|
|
||||||
|
&, a, a:visited
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin-top: 1.5em
|
||||||
|
|
||||||
|
h3 + p
|
||||||
|
margin-top: -1.7em
|
||||||
|
|
||||||
|
/*
|
||||||
|
* images
|
||||||
|
*/
|
||||||
|
|
||||||
|
p > img:first-child:last-child
|
||||||
|
display: block
|
||||||
|
margin: 0 auto
|
||||||
|
max-width: 100%
|
||||||
|
|
||||||
|
code
|
||||||
|
+mono-font
|
||||||
|
+mono-font-size(0.9em)
|
||||||
|
|
||||||
|
hr
|
||||||
|
width: 200px
|
||||||
|
height: 1px
|
||||||
|
border: 0
|
||||||
|
background: $lightgray
|
||||||
|
margin: 3em auto
|
||||||
|
display: block
|
||||||
|
|
||||||
|
|
@ -0,0 +1,119 @@
|
||||||
|
$term-border: mix($accent, white, 50%)
|
||||||
|
|
||||||
|
/*
|
||||||
|
* pre > code -- code blocks
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre > code
|
||||||
|
+mono-font
|
||||||
|
+mono-font-size(0.82em)
|
||||||
|
color: $text
|
||||||
|
padding-right: 20px
|
||||||
|
// box-shadow: inset 1px 1px rgba(black, 0.06)
|
||||||
|
|
||||||
|
pre
|
||||||
|
padding: 20px 50px
|
||||||
|
border-radius: 4px
|
||||||
|
background: $wash
|
||||||
|
margin: 2.2em -50px
|
||||||
|
line-height: 1.2em
|
||||||
|
|
||||||
|
@media (min-width: 768px)
|
||||||
|
border-top: solid 1px #eef3fa
|
||||||
|
border-bottom: solid 1px #c7d7ee
|
||||||
|
border-radius: 4px
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
padding: 20px
|
||||||
|
margin: 2em -20px
|
||||||
|
background: darken($wash, 3%)
|
||||||
|
|
||||||
|
@media (max-width: 660px)
|
||||||
|
border-radius: 0
|
||||||
|
|
||||||
|
pre + pre
|
||||||
|
margin-top: -1.5em
|
||||||
|
|
||||||
|
pre.medium
|
||||||
|
> code
|
||||||
|
font-size: 1em
|
||||||
|
@media (min-width: 768px)
|
||||||
|
padding-top: 30px
|
||||||
|
padding-bottom: 30px
|
||||||
|
|
||||||
|
pre.large
|
||||||
|
> code
|
||||||
|
font-size: 1.1em
|
||||||
|
line-height: 1.4em
|
||||||
|
@media (min-width: 768px)
|
||||||
|
padding-top: 30px
|
||||||
|
padding-bottom: 30px
|
||||||
|
|
||||||
|
pre.terminal,
|
||||||
|
pre.light
|
||||||
|
&
|
||||||
|
background: white
|
||||||
|
border: solid 1px $term-border
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
pre.light
|
||||||
|
background: #fdfdff
|
||||||
|
|
||||||
|
pre.terminal
|
||||||
|
&
|
||||||
|
padding-top: 56px
|
||||||
|
|
||||||
|
&.large
|
||||||
|
padding-top: 65px
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content: ''
|
||||||
|
display: block
|
||||||
|
height: 34px
|
||||||
|
line-height: 34px
|
||||||
|
background: white
|
||||||
|
border-bottom: solid 1px $term-border
|
||||||
|
border-top-left-radius: 3px
|
||||||
|
border-top-right-radius: 3px
|
||||||
|
position: absolute
|
||||||
|
top: 0
|
||||||
|
left: 0
|
||||||
|
right: 0
|
||||||
|
+bold-font
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content: ''
|
||||||
|
position: absolute
|
||||||
|
display: block
|
||||||
|
width: 4px
|
||||||
|
height: 4px
|
||||||
|
border-radius: 50%
|
||||||
|
left: 15px
|
||||||
|
top: 15px
|
||||||
|
font-size: 20px
|
||||||
|
background-color: $term-border
|
||||||
|
box-shadow: 20px 0 $term-border, 40px 0 $term-border
|
||||||
|
|
||||||
|
@media (max-width: 768px)
|
||||||
|
margin-left: 0
|
||||||
|
margin-right: 0
|
||||||
|
|
||||||
|
pre + pre
|
||||||
|
margin-top: -1.7em
|
||||||
|
|
||||||
|
@media (min-width: 769px)
|
||||||
|
pre.cursor > code > :last-child:after
|
||||||
|
content: ''
|
||||||
|
display: inline-block
|
||||||
|
width: 3px
|
||||||
|
height: 1em
|
||||||
|
transform: scaleY(1.5) translateY(0.1em)
|
||||||
|
margin-left: 0.4em
|
||||||
|
background-color: $accent
|
||||||
|
-webkit-animation: blink 700ms steps(2,end) infinite
|
||||||
|
-moz-animation: blink 700ms steps(2,end) infinite
|
||||||
|
animation: blink 700ms steps(2,end) infinite
|
||||||
|
|
||||||
|
h3 + pre,
|
||||||
|
h3 + table
|
||||||
|
margin-top: -1em
|
||||||
|
|
@ -0,0 +1,73 @@
|
||||||
|
/*
|
||||||
|
* table
|
||||||
|
*/
|
||||||
|
|
||||||
|
table
|
||||||
|
min-width: 100%
|
||||||
|
margin-top: 2em
|
||||||
|
margin-bottom: 2em
|
||||||
|
font-size: 0.9em
|
||||||
|
border-bottom: solid 1px $gray
|
||||||
|
|
||||||
|
thead > tr:first-child > th,
|
||||||
|
thead > tr:first-child > td,
|
||||||
|
tbody > tr:first-child > th,
|
||||||
|
tbody > tr:first-child > td
|
||||||
|
border-top: solid 1px $gray
|
||||||
|
|
||||||
|
td, th
|
||||||
|
text-align: left
|
||||||
|
border-top: solid 1px $hairline
|
||||||
|
padding: 8px 10px
|
||||||
|
|
||||||
|
th
|
||||||
|
+bold-font
|
||||||
|
color: $black
|
||||||
|
|
||||||
|
td:first-child,
|
||||||
|
th:first-child
|
||||||
|
text-align: left
|
||||||
|
padding-left: 0
|
||||||
|
|
||||||
|
td:last-child,
|
||||||
|
th:last-child
|
||||||
|
padding-right: 0
|
||||||
|
|
||||||
|
table.no-head
|
||||||
|
thead
|
||||||
|
display: none
|
||||||
|
|
||||||
|
table.shortcuts
|
||||||
|
&
|
||||||
|
table-layout: fixed
|
||||||
|
|
||||||
|
thead
|
||||||
|
display: none
|
||||||
|
|
||||||
|
th:nth-child(1), td:nth-child(1)
|
||||||
|
width: 25%
|
||||||
|
|
||||||
|
th:nth-child(2), td:nth-child(2)
|
||||||
|
width: 75%
|
||||||
|
|
||||||
|
td:first-child > code
|
||||||
|
background: #fcfcfc
|
||||||
|
padding: 5px 10px
|
||||||
|
border-radius: 2px
|
||||||
|
|
||||||
|
table.lite-headings
|
||||||
|
&
|
||||||
|
border-bottom: solid 1px mix($gray, $lightgray, 50%)
|
||||||
|
|
||||||
|
th
|
||||||
|
color: mix($gray, $lightgray, 50%)
|
||||||
|
font-size: 0.9em
|
||||||
|
|
||||||
|
thead > tr:first-child > td,
|
||||||
|
thead > tr:first-child > th
|
||||||
|
border-top: solid 1px mix($gray, $lightgray, 50%)
|
||||||
|
|
||||||
|
tbody > tr:first-child > td,
|
||||||
|
tbody > tr:first-child > th
|
||||||
|
border-top: solid 1px $hairline
|
||||||
|
|
||||||
|
|
@ -0,0 +1,11 @@
|
||||||
|
@keyframes blink
|
||||||
|
0%
|
||||||
|
opacity: 0
|
||||||
|
100%
|
||||||
|
opacity: 1
|
||||||
|
|
||||||
|
@-webkit-keyframes blink
|
||||||
|
0%
|
||||||
|
opacity: 0
|
||||||
|
100%
|
||||||
|
opacity: 1
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
/*
|
||||||
|
* .center (et al) -- utility classes
|
||||||
|
*/
|
||||||
|
|
||||||
|
.center
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
.spaced
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-top: 4em
|
||||||
|
margin-bottom: 4em
|
||||||
|
|
||||||
|
.spaced-more
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-top: 6em
|
||||||
|
margin-bottom: 6em
|
||||||
|
|
||||||
|
.spaced-less
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-top: 2em
|
||||||
|
margin-bottom: 2em
|
||||||
|
|
||||||
|
.wide
|
||||||
|
@media (min-width: 920px)
|
||||||
|
width: 140%
|
||||||
|
margin-left: -25%
|
||||||
|
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
/*
|
||||||
|
* .top/.bottom -- margin helpers
|
||||||
|
*/
|
||||||
|
|
||||||
|
.top-collapse-0
|
||||||
|
margin-top: 0
|
||||||
|
.top-collapse-1
|
||||||
|
margin-top: -1em
|
||||||
|
.top-collapse-2
|
||||||
|
margin-top: -2em
|
||||||
|
.top-collapse-4
|
||||||
|
margin-top: -4em
|
||||||
|
|
||||||
|
.top-space-0
|
||||||
|
margin-top: 0
|
||||||
|
.top-space-1
|
||||||
|
margin-top: 1em
|
||||||
|
.top-space-2
|
||||||
|
margin-top: 2em
|
||||||
|
.top-space-4
|
||||||
|
margin-top: 2em
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-top: 4em
|
||||||
|
|
||||||
|
.bottom-collapse-0
|
||||||
|
margin-bottom: 0
|
||||||
|
.bottom-collapse-1
|
||||||
|
margin-bottom: -1em
|
||||||
|
.bottom-collapse-2
|
||||||
|
margin-bottom: -2em
|
||||||
|
.bottom-collapse-4
|
||||||
|
margin-bottom: -4em
|
||||||
|
|
||||||
|
.bottom-space-0
|
||||||
|
margin-bottom: 0
|
||||||
|
.bottom-space-1
|
||||||
|
margin-bottom: 1em
|
||||||
|
.bottom-space-2
|
||||||
|
margin-bottom: 2em
|
||||||
|
.bottom-space-4
|
||||||
|
margin-bottom: 2em
|
||||||
|
@media (min-width: 769px)
|
||||||
|
margin-bottom: 4em
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
// base colors
|
||||||
|
$text: #555
|
||||||
|
$black: #151515
|
||||||
|
$bg: #fff
|
||||||
|
$wash: #f4f6f8
|
||||||
|
|
||||||
|
// grays
|
||||||
|
$gray: #939aa1
|
||||||
|
$lightgray: #c0d3da
|
||||||
|
$hairline: #eef3fa
|
||||||
|
|
||||||
|
// accents
|
||||||
|
$accent: #1ea3ff
|
||||||
|
$accent2: #f53
|
||||||
|
|
||||||
|
// metrics
|
||||||
|
$page-width: 620px
|
||||||
|
|
||||||
|
@import url('//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css')
|
||||||
|
@import url('//cdn.jsdelivr.net/hint.css/1.3.2/hint.min.css')
|
||||||
|
|
||||||
|
@import 'base/utils'
|
||||||
|
@import 'base/typography'
|
||||||
|
@import 'base/normalize'
|
||||||
|
|
||||||
|
@import 'elements/body'
|
||||||
|
@import 'elements/table'
|
||||||
|
@import 'elements/code'
|
||||||
|
|
||||||
|
@import 'components/about-the-site'
|
||||||
|
@import 'components/big-button'
|
||||||
|
@import 'components/brief-intro'
|
||||||
|
@import 'components/full-image'
|
||||||
|
@import 'components/hint'
|
||||||
|
@import 'components/hljs'
|
||||||
|
@import 'components/next-article'
|
||||||
|
@import 'components/post-headline'
|
||||||
|
@import 'components/post-icon'
|
||||||
|
@import 'components/post-index'
|
||||||
|
@import 'components/post-list'
|
||||||
|
@import 'components/site-header'
|
||||||
|
@import 'components/social-list'
|
||||||
|
|
||||||
|
@import 'helpers/general'
|
||||||
|
@import 'helpers/margins'
|
||||||
|
@import 'helpers/blink'
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
type: other
|
||||||
|
---
|
||||||
|
@import '2015/style.sass'
|
||||||
Loading…
Reference in New Issue