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
|
||||
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
|
||||
update: _site critical
|
||||
|
||||
|
|
@ -9,27 +15,39 @@ update: _site critical
|
|||
_site:
|
||||
bundle exec jekyll build --incremental
|
||||
|
||||
# Builds critical path CSS/JS
|
||||
critical: _site
|
||||
critical: _site ## Builds critical path CSS/JS
|
||||
node _support/critical.js
|
||||
|
||||
# Starts development server
|
||||
dev:
|
||||
# Ensure that bins are available.
|
||||
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" \
|
||||
"make dev-webpack" \
|
||||
"make dev-jekyll"
|
||||
|
||||
dev-webpack:
|
||||
dev-webpack: ensure-bin
|
||||
$(npmbin)/webpack --watch --colors -p
|
||||
|
||||
dev-jekyll:
|
||||
dev-jekyll: ensure-bin
|
||||
if [ -f _site ]; then \
|
||||
bundle exec jekyll serve --safe --trace --drafts --watch --incremental --host $(HOST) --port $(PORT); \
|
||||
else \
|
||||
bundle exec jekyll serve --safe --trace --drafts --watch --host $(HOST) --port $(PORT); \
|
||||
fi
|
||||
|
||||
test: _site
|
||||
test: _site ## Runs rudimentary tests
|
||||
@test -f _site/vim.html
|
||||
@test -f _site/react.html
|
||||
@test -f _site/index.html
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
{% include meta.html %}
|
||||
{% include polyfills.html %}
|
||||
<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/print.css?t={{ timestamp }}" rel="stylesheet" media="print" />
|
||||
</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