mirror of
https://github.com/danbee/danbarber.me
synced 2025-03-04 08:59:10 +00:00
Massive CSS refactor!
* Also... Dark mode
This commit is contained in:
parent
3c300b5838
commit
a5640433e0
GPG Key ID:
931D8112E0103DD8
1
.gitignore
vendored
1
.gitignore
vendored
@ -2,3 +2,4 @@ _site
|
||||
.sass-cache
|
||||
.deploy
|
||||
.asset-cache
|
||||
.jekyll-cache
|
||||
|
||||
1
Gemfile
1
Gemfile
@ -11,6 +11,7 @@ gem "jekyll"
|
||||
group :jekyll_plugins do
|
||||
gem "jekyll-archives"
|
||||
gem "jekyll-assets"
|
||||
gem "jekyll-inline-svg"
|
||||
gem "jekyll-paginate"
|
||||
gem "jekyll-picture-tag",
|
||||
git: "https://github.com/danbee/jekyll-picture-tag.git",
|
||||
|
||||
54
Gemfile.lock
54
Gemfile.lock
@ -11,6 +11,11 @@ GIT
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (5.2.1)
|
||||
concurrent-ruby (~> 1.0, >= 1.0.2)
|
||||
i18n (>= 0.7, < 2)
|
||||
minitest (~> 5.1)
|
||||
tzinfo (~> 1.1)
|
||||
addressable (2.5.2)
|
||||
public_suffix (>= 2.0.2, < 4.0)
|
||||
bourbon (5.1.0)
|
||||
@ -18,7 +23,7 @@ GEM
|
||||
thor (~> 0.19)
|
||||
coderay (1.1.2)
|
||||
colorator (1.1.0)
|
||||
concurrent-ruby (1.0.5)
|
||||
concurrent-ruby (1.1.3)
|
||||
em-websocket (0.5.1)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.6.0)
|
||||
@ -33,7 +38,7 @@ GEM
|
||||
http_parser.rb (0.6.0)
|
||||
i18n (0.9.5)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll (3.8.4)
|
||||
jekyll (3.8.5)
|
||||
addressable (~> 2.4)
|
||||
colorator (~> 1.0)
|
||||
em-websocket (~> 0.5)
|
||||
@ -48,23 +53,34 @@ GEM
|
||||
safe_yaml (~> 1.0)
|
||||
jekyll-archives (2.1.1)
|
||||
jekyll (>= 2.4)
|
||||
jekyll-assets (2.3.2)
|
||||
concurrent-ruby (~> 1.0)
|
||||
jekyll-assets (3.0.11)
|
||||
activesupport (~> 5.0)
|
||||
execjs (~> 2.7)
|
||||
extras (~> 0.2)
|
||||
fastimage (~> 2.0, >= 1.8)
|
||||
jekyll (~> 3.1, >= 3.0)
|
||||
pathutil (>= 0.8)
|
||||
rack (~> 1.6)
|
||||
sprockets (~> 3.3, < 3.8)
|
||||
jekyll (>= 3.5, < 4.0)
|
||||
jekyll-sanity (~> 1.2)
|
||||
liquid-tag-parser (~> 1.0)
|
||||
nokogiri (~> 1.8)
|
||||
pathutil (~> 0.16)
|
||||
sprockets (>= 3.3, < 4.1.beta)
|
||||
jekyll-inline-svg (1.1.1)
|
||||
jekyll (~> 3.3)
|
||||
svg_optimizer (= 0.1.0)
|
||||
jekyll-paginate (1.1.0)
|
||||
jekyll-sanity (1.2.0)
|
||||
jekyll (~> 3.1)
|
||||
jekyll-sass-converter (1.5.2)
|
||||
sass (~> 3.4)
|
||||
jekyll-staging (1.0.6)
|
||||
jekyll-video-tag (0.1.0)
|
||||
jekyll-watch (2.0.0)
|
||||
jekyll-watch (2.1.2)
|
||||
listen (~> 3.0)
|
||||
kramdown (1.17.0)
|
||||
liquid (4.0.0)
|
||||
liquid (4.0.1)
|
||||
liquid-tag-parser (1.9.0)
|
||||
extras (~> 0.3)
|
||||
liquid (>= 3.0, < 5.0)
|
||||
listen (3.1.5)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
rb-inotify (~> 0.9, >= 0.9.7)
|
||||
@ -72,6 +88,10 @@ GEM
|
||||
mercenary (0.3.6)
|
||||
method_source (0.9.0)
|
||||
mini_magick (4.8.0)
|
||||
mini_portile2 (2.3.0)
|
||||
minitest (5.11.3)
|
||||
nokogiri (1.8.5)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
octopress (3.0.12.pre.1)
|
||||
jekyll (>= 2.0)
|
||||
mercenary (~> 0.3.2)
|
||||
@ -86,22 +106,22 @@ GEM
|
||||
jekyll (~> 3.0)
|
||||
octopress-hooks (2.6.2)
|
||||
jekyll (>= 2.0)
|
||||
pathutil (0.16.1)
|
||||
pathutil (0.16.2)
|
||||
forwardable-extended (~> 2.6)
|
||||
pry (0.11.3)
|
||||
coderay (~> 1.1.0)
|
||||
method_source (~> 0.9.0)
|
||||
public_suffix (3.0.3)
|
||||
rack (1.6.10)
|
||||
rack (2.0.6)
|
||||
rake (12.3.1)
|
||||
rb-fsevent (0.10.3)
|
||||
rb-inotify (0.9.10)
|
||||
ffi (>= 0.5.0, < 2)
|
||||
redcarpet (3.4.0)
|
||||
rouge (3.2.1)
|
||||
rouge (3.3.0)
|
||||
ruby_dep (1.5.0)
|
||||
safe_yaml (1.0.4)
|
||||
sass (3.6.0)
|
||||
sass (3.7.2)
|
||||
sass-listen (~> 4.0.0)
|
||||
sass-listen (4.0.0)
|
||||
rb-fsevent (~> 0.9, >= 0.9.4)
|
||||
@ -109,8 +129,13 @@ GEM
|
||||
sprockets (3.7.2)
|
||||
concurrent-ruby (~> 1.0)
|
||||
rack (> 1, < 3)
|
||||
svg_optimizer (0.1.0)
|
||||
nokogiri
|
||||
thor (0.20.0)
|
||||
thread_safe (0.3.6)
|
||||
titlecase (0.1.1)
|
||||
tzinfo (1.2.5)
|
||||
thread_safe (~> 0.1)
|
||||
uglifier (4.1.19)
|
||||
execjs (>= 0.3.0, < 3)
|
||||
|
||||
@ -124,6 +149,7 @@ DEPENDENCIES
|
||||
jekyll
|
||||
jekyll-archives
|
||||
jekyll-assets
|
||||
jekyll-inline-svg
|
||||
jekyll-paginate
|
||||
jekyll-picture-tag!
|
||||
jekyll-staging
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<svg width="109" height="79" viewBox="0 0 109 79" xmlns="http://www.w3.org/2000/svg">
|
||||
<svg viewBox="0 0 109 79" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Dan Barber</title>
|
||||
<path d="M93.45 47.384c0-8.752-6.996-15.847-15.626-15.847-7.88 0-14.906 6.66-15.824 14.463v33H47v-5c-4.425 3.093-10.13 5-15.824 5C13.958 79 0 64.845 0 47.384 0 29.95 13.916 15.81 31 16h13v16H31c-8.454-.463-15.45 6.632-15.45 15.384s6.996 15.848 15.626 15.848C39.194 63.232 46.272 55.748 47 48c.136-.747 0-48 0-48h15v20c4.402-2.37 10.193-4.232 15.824-4.232C95.042 15.768 109 29.923 109 47.384 109 64.844 95.042 79 77.824 79l-12.834-.003L65 63h13c8.454.232 15.45-6.864 15.45-15.616z" fill="#fff" fill-rule="evenodd"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 638 B After Width: | Height: | Size: 614 B |
105
_assets/stylesheets/components/_blog-post.scss
Normal file
105
_assets/stylesheets/components/_blog-post.scss
Normal file
@ -0,0 +1,105 @@
|
||||
.blog-post {
|
||||
border-bottom: 1px dashed $border-color;
|
||||
padding-bottom: 2.5rem;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-bottom: 1px dashed $border-color-dark;
|
||||
}
|
||||
|
||||
img {
|
||||
background-color: $white;
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
|
||||
&.left {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
&.right {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
figure {
|
||||
figcaption {
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
img, video, .flash-video {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
padding: 0.5em;
|
||||
margin: -0.5em;
|
||||
max-width: 100%;
|
||||
|
||||
&.no-border {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post__header {
|
||||
.meta {
|
||||
text-transform: uppercase;
|
||||
color: $meta-text-color;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0.1em;
|
||||
width: 100%;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
h1 + .meta {
|
||||
margin-top: -2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post__title {
|
||||
font-size: 1.35rem;
|
||||
|
||||
a {
|
||||
color: $heading-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover, &:focus {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: $heading-color-dark;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post__content {
|
||||
> * {
|
||||
@include container;
|
||||
}
|
||||
}
|
||||
|
||||
.blog-post__read-on {
|
||||
background: darken($background-color, 8);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 1.5em;
|
||||
text-decoration: none;
|
||||
color: mix($text-color, $text-color-light);
|
||||
transition: background-color 0.5s;
|
||||
|
||||
&:hover {
|
||||
background: $link-color-hover;
|
||||
text-shadow: none;
|
||||
color: $background-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: lighten($background-color-dark, 8);
|
||||
color: mix($text-color-dark, $text-color-light);
|
||||
}
|
||||
}
|
||||
40
_assets/stylesheets/components/_pagination.scss
Normal file
40
_assets/stylesheets/components/_pagination.scss
Normal file
@ -0,0 +1,40 @@
|
||||
.pagination {
|
||||
font-size: 0.95em;
|
||||
height: 1.5em;
|
||||
padding: {
|
||||
bottom: 1.5em;
|
||||
top: 1.5em;
|
||||
};
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
clear: both;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $text-color-light;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
|
||||
&[href*=archive] {
|
||||
&:before,
|
||||
&:after {
|
||||
content: "—";
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
&.prev {
|
||||
float: left;
|
||||
}
|
||||
|
||||
&.next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,13 +1,14 @@
|
||||
$photo-wide-max-width: 1024px;
|
||||
|
||||
figure.photo-wide {
|
||||
.photo--wide {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1048px) {
|
||||
figure.photo-wide {
|
||||
.photo--wide {
|
||||
max-width: 100%;
|
||||
|
||||
img {
|
||||
margin: -0.5em 0;
|
||||
padding: 0.5em 0;
|
||||
@ -16,7 +17,7 @@ figure.photo-wide {
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1049px) {
|
||||
figure.photo-wide {
|
||||
.photo--wide {
|
||||
max-width: $photo-wide-max-width;
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,25 @@
|
||||
body > footer {
|
||||
text-align: center;
|
||||
.site-footer {
|
||||
font-size: 0.8em;
|
||||
position: relative;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
margin-bottom: 3em;
|
||||
border-radius-bottom: 0.4em;
|
||||
padding-bottom: 1em;
|
||||
padding-top: 1em;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
|
||||
a {
|
||||
color: $footer-link-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover { color: $footer-link-color-hover; }
|
||||
&:visited { color: $footer-link-color; }
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p:last-child { margin-bottom: 0; }
|
||||
p {
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 0;
|
||||
46
_assets/stylesheets/components/_site-header.scss
Normal file
46
_assets/stylesheets/components/_site-header.scss
Normal file
@ -0,0 +1,46 @@
|
||||
.site-header {
|
||||
background-color: $header-color;
|
||||
padding: 1rem 0 1rem;
|
||||
}
|
||||
|
||||
.site-header__container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.site-header__logo-link {
|
||||
color: $white;
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-header__logo {
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.site-header__navigation {
|
||||
display: inline;
|
||||
position: relative;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
li {
|
||||
padding-left: 1.25em;
|
||||
float: left;
|
||||
}
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: text-shadow 0.25s 0s ease;
|
||||
&:hover, &:focus {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
7
_assets/stylesheets/elements/_abbr.scss
Normal file
7
_assets/stylesheets/elements/_abbr.scss
Normal file
@ -0,0 +1,7 @@
|
||||
abbr {
|
||||
border-bottom: 1px dotted $text-color-light;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.1em;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
17
_assets/stylesheets/elements/_blockquote.scss
Normal file
17
_assets/stylesheets/elements/_blockquote.scss
Normal file
@ -0,0 +1,17 @@
|
||||
blockquote {
|
||||
font-size: 1rem;
|
||||
font-style: italic;
|
||||
line-height: 1.6;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
content: "“";
|
||||
float: left;
|
||||
font-family: $body-font-family;
|
||||
font-size: 2.75em;
|
||||
margin-top: 0.1em;
|
||||
opacity: 0.3;
|
||||
text-indent: -0.6em;
|
||||
}
|
||||
11
_assets/stylesheets/elements/_body.scss
Normal file
11
_assets/stylesheets/elements/_body.scss
Normal file
@ -0,0 +1,11 @@
|
||||
body {
|
||||
color: $text-color;
|
||||
font-family: $body-font-family;
|
||||
font-weight: 300;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: $text-color-dark;
|
||||
}
|
||||
}
|
||||
14
_assets/stylesheets/elements/_code.scss
Normal file
14
_assets/stylesheets/elements/_code.scss
Normal file
@ -0,0 +1,14 @@
|
||||
pre,
|
||||
code,
|
||||
tt {
|
||||
font-family: $mono;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
border-radius: 0.25rem;
|
||||
display: inline-block;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.5;
|
||||
padding: 0 0.3rem;
|
||||
}
|
||||
19
_assets/stylesheets/elements/_dl.scss
Normal file
19
_assets/stylesheets/elements/_dl.scss
Normal file
@ -0,0 +1,19 @@
|
||||
dl {
|
||||
margin: 1.75em 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-style: italic;
|
||||
margin-top: 1.25em;
|
||||
font-size: 1.13em;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #999;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
dd {
|
||||
font-style: italic;
|
||||
font-size: 0.85em;
|
||||
margin-top: 1em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
33
_assets/stylesheets/elements/_headings.scss
Normal file
33
_assets/stylesheets/elements/_headings.scss
Normal file
@ -0,0 +1,33 @@
|
||||
h1, h2, h3,
|
||||
h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: $heading-font-family;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
line-height: 1.333;
|
||||
margin: 4rem 0 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1;
|
||||
margin: 2rem 0 0.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.125rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
24
_assets/stylesheets/elements/_html.scss
Normal file
24
_assets/stylesheets/elements/_html.scss
Normal file
@ -0,0 +1,24 @@
|
||||
html {
|
||||
background: $background-color;
|
||||
font-size: 100%;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $background-color-dark;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 450px) {
|
||||
font-size: 110%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 650px) {
|
||||
font-size: 125%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
font-size: 135%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 892px) {
|
||||
font-size: 145%;
|
||||
}
|
||||
}
|
||||
12
_assets/stylesheets/elements/_links.scss
Normal file
12
_assets/stylesheets/elements/_links.scss
Normal file
@ -0,0 +1,12 @@
|
||||
a {
|
||||
color: $link-color;
|
||||
transition: color 0.25s 0s ease;
|
||||
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
}
|
||||
20
_assets/stylesheets/elements/_lists.scss
Normal file
20
_assets/stylesheets/elements/_lists.scss
Normal file
@ -0,0 +1,20 @@
|
||||
ul,
|
||||
ol {
|
||||
margin: 1.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
list-style-type: disc;
|
||||
line-height: 1.5;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: outside;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
8
_assets/stylesheets/elements/_p.scss
Normal file
8
_assets/stylesheets/elements/_p.scss
Normal file
@ -0,0 +1,8 @@
|
||||
p {
|
||||
hyphenate-after: 3;
|
||||
hyphenate-before: 2;
|
||||
hyphenate-lines: 3;
|
||||
hyphenate: auto;
|
||||
margin: 1.5rem 0;
|
||||
orphans: 4;
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
$max-width: 800px !default;
|
||||
$pad-min: 8.5% !default;
|
||||
|
||||
header[role=banner] {
|
||||
padding: 1em 0 0.5em;
|
||||
h1 {
|
||||
font-size: 1em;
|
||||
margin: 0.25em 0 0.5em;
|
||||
a {
|
||||
color: white;
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
span {
|
||||
width: 0;
|
||||
font-size: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
article img.left {
|
||||
float: left;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
article img.right {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
#content header,
|
||||
.entry-content > *,
|
||||
.container,
|
||||
footer,
|
||||
.pagination {
|
||||
padding-left: $pad-min;
|
||||
padding-right: $pad-min;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
nav[role=navigation] {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
header[role=banner] h1 img {
|
||||
width: 4.6982758621em;
|
||||
height: 3.4051724138em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 450px) {
|
||||
body {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 650px) {
|
||||
body {
|
||||
font-size: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
body {
|
||||
font-size: 135%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 892px) {
|
||||
body {
|
||||
font-size: 145%;
|
||||
}
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
// This File is imported last, and will override other styles in the cascade
|
||||
// Add styles here to make changes without digging in too much
|
||||
html { background: $background-color; }
|
||||
|
||||
body { font-weight: 300; }
|
||||
|
||||
body > div > div {
|
||||
border: none;
|
||||
}
|
||||
|
||||
body > header {
|
||||
background-color: $header-color;
|
||||
padding-top: 0.9em;
|
||||
padding-bottom: 0.9em;
|
||||
h1 a {
|
||||
//display: inline-block
|
||||
margin-top: 0;
|
||||
font-weight: 600;
|
||||
//line-height: 0
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
transition: color 0.25s 0s ease;
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
header nav {
|
||||
display: inline;
|
||||
position: relative;
|
||||
ul {
|
||||
list-style: none;
|
||||
float: right;
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
li {
|
||||
padding-left: 1.25em;
|
||||
float: left;
|
||||
}
|
||||
padding-top: 0.15em;
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
transition: text-shadow 0.25s 0s ease;
|
||||
&:hover, &:focus {
|
||||
color: white;
|
||||
text-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article > header {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
article > header h1, #content .blog-index article h1 {
|
||||
font-size: 1.35em;
|
||||
}
|
||||
|
||||
body > nav {
|
||||
border: none;
|
||||
}
|
||||
|
||||
body > nav a {
|
||||
text-shadow: none;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 400px) {
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
header nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: 1em;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#content div.pagination, #content div.navigation {
|
||||
font-size: 0.95em;
|
||||
height: 1.5em;
|
||||
position: relative;
|
||||
padding: {
|
||||
top: 1.5em;
|
||||
bottom: 1.5em;
|
||||
};
|
||||
&:after {
|
||||
display: block;
|
||||
content: "";
|
||||
clear: both;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $text-color-light;
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
&[href*=archive] {
|
||||
&:before, &:after {
|
||||
content: "—";
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content div.navigation {
|
||||
a {
|
||||
&.prev {
|
||||
float: left;
|
||||
}
|
||||
&.next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content div.pagination {
|
||||
a {
|
||||
&.prev {
|
||||
float: left;
|
||||
}
|
||||
&.next {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,352 +0,0 @@
|
||||
// $blockquote: $type-border !default
|
||||
$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
|
||||
$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
|
||||
$mono: "source-code-pro", monospace !default;
|
||||
$header-title-font-family: $heading-font-family !default;
|
||||
$header-subtitle-font-family: $heading-font-family !default;
|
||||
|
||||
/*Type-A-File "Field Report" designed by Russ Maschmeyer, aka StrangeNative.
|
||||
*http://www.strangenative.com
|
||||
*@strangenative
|
||||
*
|
||||
*Creative Commons License by Attribution.
|
||||
*Feel free to take it, adapt it, & use it on both commercial and non-commercial projects.
|
||||
*Though I'd like a smidgeon of credit, so just leave this bit in here. K? */
|
||||
|
||||
/*Pick Your Fonts */
|
||||
body, h5, h6, .run-in, dt {
|
||||
font-family: $body-font-family;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, .pullquote, .sidenote h1, aside h1, .pullquote, .drop-cap, cite {
|
||||
font-family: $heading-font-family;
|
||||
}
|
||||
|
||||
/*Nav Fonts */
|
||||
nav[role=navigation] {
|
||||
font-family: $heading-font-family;
|
||||
}
|
||||
|
||||
/*Size & Vertical Rhythm */
|
||||
body {
|
||||
font-size: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
/*Color */
|
||||
body {
|
||||
color: $text-color;
|
||||
}
|
||||
|
||||
/*HTML Standard Elements */
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
line-height: 1.333em;
|
||||
margin: 5rem 0 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.1em;
|
||||
margin: 2em 0 0.5em;
|
||||
}
|
||||
|
||||
h1 + img, h2 + img {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 0.75em;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 2.2em 0 -0.2em;
|
||||
font-style: italic;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
|
||||
p, ul, ol, form {
|
||||
margin: 1.5rem 0 1.5rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-position: outside;
|
||||
list-style-type: disc;
|
||||
line-height: 1.5;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-position: outside;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
line-height: 1.6em;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
blockquote:before {
|
||||
font-family: Georgia, serif;
|
||||
content: "“";
|
||||
font-size: 2.75em;
|
||||
text-indent: -0.6em;
|
||||
margin-top: 0.1em;
|
||||
float: left;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
cite {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
margin-top: 1.5em;
|
||||
margin-left: 1em;
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
cite:before {
|
||||
content: "— ";
|
||||
margin-left: -3.4em;
|
||||
margin-right: 0.9em;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
pre, code, tt {
|
||||
font-family: $mono;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
code {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 0.25em;
|
||||
display: inline-block;
|
||||
font-size: 0.75em;
|
||||
line-height: 1.5em;
|
||||
padding: 0 0.3em;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
padding: 0.5em 0.75em;
|
||||
border-radius: 0.25em;
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
code {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 1.75em 0 1.75em;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-style: italic;
|
||||
margin-top: 1.25em;
|
||||
font-size: 1.13em;
|
||||
font-weight: 700;
|
||||
border-bottom: 1px solid #999;
|
||||
background: #DDD;
|
||||
}
|
||||
|
||||
dd {
|
||||
font-style: italic;
|
||||
font-size: 0.85em;
|
||||
margin-top: 1em;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.1em;
|
||||
border-bottom: 1px dotted $text-color-light;
|
||||
}
|
||||
|
||||
p {
|
||||
hyphenate: auto;
|
||||
hyphenate-before: 2;
|
||||
hyphenate-after: 3;
|
||||
hyphenate-lines: 3;
|
||||
orphans: 4;
|
||||
}
|
||||
|
||||
p span.pullquote {
|
||||
text-indent: 0;
|
||||
}
|
||||
|
||||
/*Compositional Elements */
|
||||
.kicker {
|
||||
font-size: 1.25em;
|
||||
line-height: 1.693em;
|
||||
/*font-style:italic; */
|
||||
margin: (-0.35em) 0 -0.35em;
|
||||
}
|
||||
|
||||
.kicker, .pullquote {
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
.run-in {
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.superscript {
|
||||
font-family: arial, sans-serif;
|
||||
vertical-align: super;
|
||||
font-size: 75%;
|
||||
margin-right: 0.4em;
|
||||
text-transform: lowercase;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.subscript {
|
||||
font-family: arial, sans-serif;
|
||||
vertical-align: sub;
|
||||
font-size: 75%;
|
||||
margin-right: 0.4em;
|
||||
text-transform: lowercase;
|
||||
font-variant: small-caps;
|
||||
letter-spacing: 0.1em;
|
||||
line-height: 0em;
|
||||
}
|
||||
|
||||
a.superscript, a.subscript {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
aside, .sidenote {
|
||||
font-size: 0.83em;
|
||||
font-style: italic;
|
||||
margin-top: 1.25em;
|
||||
}
|
||||
|
||||
aside h1, .sidenote h1 {
|
||||
text-transform: uppercase;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
aside p, .sidenote p {
|
||||
line-height: 1.7em;
|
||||
margin: 1.3em 0;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
aside ul, aside ol, .sidenote ul, .sidenote ol {
|
||||
margin-top: 1.3em;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
|
||||
aside ul li, aside ol li, .sidenote ul li, .sidenote ol li {
|
||||
margin-bottom: 1.3em;
|
||||
}
|
||||
|
||||
.pullquote {
|
||||
font-style: italic;
|
||||
letter-spacing: 0.05em;
|
||||
margin: 0.5em 0.7em 0.3em 0em;
|
||||
padding-top: 0.15em;
|
||||
line-height: 1.7em;
|
||||
display: block;
|
||||
float: left;
|
||||
font-size: 1.6em;
|
||||
width: 55%;
|
||||
}
|
||||
|
||||
.pullquote:before {
|
||||
font-family: Georgia, serif;
|
||||
content: "“";
|
||||
font-size: 2em;
|
||||
text-indent: -0.8em;
|
||||
margin-top: 0.05em;
|
||||
float: left;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
border-top: 1px solid #999;
|
||||
font-size: 0.75em;
|
||||
margin-top: 3.5em;
|
||||
}
|
||||
|
||||
.footnotes li {
|
||||
margin: 1.5em 0 1.5em;
|
||||
word-spacing: 0.1em;
|
||||
line-height: 1.75em;
|
||||
}
|
||||
|
||||
.caption {
|
||||
font-size: 0.8em;
|
||||
font-style: italic;
|
||||
margin: 0.6em 0 -0.2em;
|
||||
}
|
||||
|
||||
.kicker .run-in {
|
||||
text-transform: uppercase;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.25em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.drop-cap {
|
||||
display: block;
|
||||
font-style: normal;
|
||||
font-size: 5.1em;
|
||||
float: left;
|
||||
margin: 0.13em 0.1em 0 0;
|
||||
line-height: 0.67em;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
/*Tweaks */
|
||||
.kern {
|
||||
letter-spacing: -0.1em;
|
||||
}
|
||||
3
_assets/stylesheets/objects/_container.scss
Normal file
3
_assets/stylesheets/objects/_container.scss
Normal file
@ -0,0 +1,3 @@
|
||||
.container {
|
||||
@include container;
|
||||
}
|
||||
12
_assets/stylesheets/objects/_highlight.scss
Normal file
12
_assets/stylesheets/objects/_highlight.scss
Normal file
@ -0,0 +1,12 @@
|
||||
@import "lib/solarized-dark";
|
||||
|
||||
.highlight {
|
||||
border-radius: 0.25em;
|
||||
margin: 1.5em 0;
|
||||
overflow: auto;
|
||||
padding: 0.5em 0.75em;
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
.video-container {
|
||||
height: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
#archive {
|
||||
#content > div {
|
||||
&, > article {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#blog-archives {
|
||||
padding-top: 1em;
|
||||
article {
|
||||
padding: 0 0 1em;
|
||||
position: relative;
|
||||
&:last-child {
|
||||
border: none;
|
||||
}
|
||||
footer {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
color: $text-color;
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
h2 {
|
||||
display: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
text-decoration: underline;
|
||||
}
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
a.category, time {
|
||||
color: $text-color-light;
|
||||
}
|
||||
color: $text-color-light;
|
||||
.entry-content {
|
||||
display: none;
|
||||
}
|
||||
time {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.2em;
|
||||
.month, .day {
|
||||
display: inline-block;
|
||||
}
|
||||
.month {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
&, .entry-content {
|
||||
a {
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
a:hover {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
@media only screen and (min-width: 550px) {
|
||||
article {
|
||||
margin-left: 5em;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.3em;
|
||||
font-weight: normal;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
float: left;
|
||||
}
|
||||
time {
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
left: 0em;
|
||||
top: 0.3em;
|
||||
}
|
||||
.year {
|
||||
display: none;
|
||||
}
|
||||
article {
|
||||
padding: {
|
||||
left: 4.5em;
|
||||
bottom: 0.7em;
|
||||
};
|
||||
}
|
||||
a.category {
|
||||
line-height: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#content > .category {
|
||||
article {
|
||||
margin-left: 0;
|
||||
padding-left: 6.8em;
|
||||
}
|
||||
.year {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
@ -1,77 +0,0 @@
|
||||
article {
|
||||
border-bottom: 1px dashed $border-color;
|
||||
padding-bottom: 2.5rem;
|
||||
header {
|
||||
.meta {
|
||||
text-transform: uppercase;
|
||||
color: $meta-text-color;
|
||||
font-size: 0.8em;
|
||||
letter-spacing: 0.1em;
|
||||
width: 100%;
|
||||
text-rendering: optimizelegibility;
|
||||
}
|
||||
h1 + .meta {
|
||||
margin-top: -2.25rem;
|
||||
}
|
||||
}
|
||||
header a {
|
||||
color: $heading-color;
|
||||
text-decoration: none;
|
||||
&:hover, &:focus {
|
||||
color: $link-color-hover;
|
||||
}
|
||||
}
|
||||
figure {
|
||||
margin: 1.5em 0 0 0;
|
||||
figcaption {
|
||||
font-size: 0.7em;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
img, video, .flash-video {
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
||||
padding: 0.5em;
|
||||
margin: -0.5em;
|
||||
&.no-border {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
> footer {
|
||||
margin-top: 1.75em;
|
||||
p.meta {
|
||||
margin-bottom: 0.8em;
|
||||
font-size: 0.85em;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
}
|
||||
.byline + time:before, time + time:before, .comments:before, .byline ~ .categories:before {
|
||||
@extend .separator;
|
||||
}
|
||||
}
|
||||
footer {
|
||||
a[rel=full-article] {
|
||||
background: darken($background-color, 8);
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
padding: 0.4em 0.8em;
|
||||
margin-right: 0.5em;
|
||||
margin-bottom: 1.5em;
|
||||
text-decoration: none;
|
||||
color: mix($text-color, $text-color-light);
|
||||
transition: background-color 0.5s;
|
||||
&:hover {
|
||||
background: $link-color-hover;
|
||||
text-shadow: none;
|
||||
color: $background-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
content: "•";
|
||||
padding: 0 0.4em 0 0.2em;
|
||||
display: inline-block;
|
||||
}
|
||||
@ -1,14 +1,21 @@
|
||||
$background-color: white;
|
||||
$white: #fff;
|
||||
|
||||
$background-color: $white;
|
||||
$background-color-dark: #222;
|
||||
|
||||
$text-color: #333;
|
||||
$text-color-dark: #ddd;
|
||||
$text-color-light: lighten($text-color, 45%);
|
||||
$heading-color: #333;
|
||||
$heading-color-dark: #ddd;
|
||||
$meta-text-color: lighten($text-color, 45%);
|
||||
$header-color: #518F00;
|
||||
|
||||
$border-color: #ccc;
|
||||
$border-color-dark: #666;
|
||||
|
||||
$link-color: rgb(24, 99, 161);
|
||||
$link-color-dark: lighten($link-color, 25%);
|
||||
$link-color-hover: lighten($link-color, 10%);
|
||||
|
||||
$footer-link-color: lighten($text-color, 25%);
|
||||
2
_assets/stylesheets/settings/_global.scss
Normal file
2
_assets/stylesheets/settings/_global.scss
Normal file
@ -0,0 +1,2 @@
|
||||
$max-width: 800px !default;
|
||||
$pad-min: 8.5% !default;
|
||||
5
_assets/stylesheets/settings/_typography.scss
Normal file
5
_assets/stylesheets/settings/_typography.scss
Normal file
@ -0,0 +1,5 @@
|
||||
$heading-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
|
||||
$body-font-family: "Sentinel SSm A", "Sentinel SSm B", Georgia, Times, "Times New Roman", serif;
|
||||
$mono: "Source Code Pro", "Consolas", "Menlo", monospace !default;
|
||||
$header-title-font-family: $heading-font-family !default;
|
||||
$header-subtitle-font-family: $heading-font-family !default;
|
||||
@ -1,14 +0,0 @@
|
||||
@import "bourbon";
|
||||
|
||||
@import "includes/main.css.scss";
|
||||
@import "includes/colors.css.scss";
|
||||
@import "includes/typography.css.scss";
|
||||
@import "includes/layout.css.scss";
|
||||
@import "includes/styles.css.scss";
|
||||
@import "includes/video.css.scss";
|
||||
@import "lib/solarized-dark.css.scss";
|
||||
|
||||
@import "parts/photos.css.scss";
|
||||
@import "parts/post.css.scss";
|
||||
@import "parts/archive.css.scss";
|
||||
@import "parts/footer.css.scss";
|
||||
47
_assets/stylesheets/styles.scss
Normal file
47
_assets/stylesheets/styles.scss
Normal file
@ -0,0 +1,47 @@
|
||||
// 0. Vendor - Imported from other source
|
||||
@import "bourbon";
|
||||
|
||||
// 1. Settings – used with preprocessors and contain font,
|
||||
// colors definitions, etc.
|
||||
@import "settings/global";
|
||||
@import "settings/colors";
|
||||
@import "settings/typography";
|
||||
|
||||
// 2. Tools – globally used mixins and functions.
|
||||
// It’s important not to output any CSS in the first 2 layers.
|
||||
@import "tools/container";
|
||||
|
||||
// 3. Generic – reset and/or normalize styles, box-sizing definition, etc.
|
||||
// This is the first layer which generates actual CSS.
|
||||
|
||||
// 4. Elements – styling for bare HTML elements (like H1, A, etc.).
|
||||
// These come with default styling from the browser so we can redefine
|
||||
// them here.
|
||||
@import "elements/abbr";
|
||||
@import "elements/blockquote";
|
||||
@import "elements/body";
|
||||
@import "elements/code";
|
||||
@import "elements/dl";
|
||||
@import "elements/headings";
|
||||
@import "elements/html";
|
||||
@import "elements/links";
|
||||
@import "elements/lists";
|
||||
@import "elements/p";
|
||||
|
||||
// 5. Objects – class-based selectors which define undecorated design patterns,
|
||||
// for example media object known from OOCSS
|
||||
@import "objects/container";
|
||||
@import "objects/highlight";
|
||||
@import "objects/video-container";
|
||||
|
||||
// 6. Components – specific UI components.
|
||||
// This is where majority of our work takes place and our UI components
|
||||
// are often composed of Objects and Components
|
||||
@import "components/site-header";
|
||||
@import "components/site-footer";
|
||||
@import "components/blog-post";
|
||||
@import "components/pagination";
|
||||
@import "components/photo";
|
||||
|
||||
// 7. Utilities – utilities and helper classes with ability to override
|
||||
// anything which goes before in the triangle, eg. hide helper class
|
||||
7
_assets/stylesheets/tools/_container.scss
Normal file
7
_assets/stylesheets/tools/_container.scss
Normal file
@ -0,0 +1,7 @@
|
||||
@mixin container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: $max-width;
|
||||
padding-left: $pad-min;
|
||||
padding-right: $pad-min;
|
||||
}
|
||||
@ -1,40 +1,27 @@
|
||||
{% unless page.no_header %}
|
||||
<header>
|
||||
{% if index %}
|
||||
{% if post.external-url %}<!-- This defines how Octopress will use posts with external-url. -->
|
||||
<h1 class="entry-title"><a href="{{ post.external-url }}">{% if site.titlecase %}{{ post.title | titlecase }} →{% else %}{{ post.title }}{% endif %}</a></h1>
|
||||
{% else %}<!-- Now we're back to normal posts. Note the links used under href in both headers.-->
|
||||
<h1 class="entry-title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
|
||||
{% endif %}
|
||||
{% if post.date %}<p class="meta">{% include post/date.html date=post.date %}{{ time }}</p>{% endif %}
|
||||
{% else %}
|
||||
{% if page.external-url %}
|
||||
<h1 class="entry-title"><a href="{{ page.external-url }}">{% if site.titlecase %}{{ page.title | titlecase }} →{% else %}{{ page.title }}{% endif %}</a></h1>
|
||||
{% else %}
|
||||
<h1 class="entry-title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
|
||||
{% endif %}
|
||||
{% if page.date %}<p class="meta">{% include post/date.html date=page.date %}{{ time }}</p>{% endif %}
|
||||
{% endif %}
|
||||
</header>
|
||||
{% endunless %}
|
||||
{% if index %}
|
||||
<div class="entry-content">{{ post.excerpt }}</div>
|
||||
{% if post.content contains site.excerpt_separator %}
|
||||
<footer>
|
||||
<a rel="full-article" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
|
||||
</footer>
|
||||
<header class="container blog-post__header">
|
||||
{% if page.external-url %}
|
||||
<h1 class="blog-post__title"><a href="{{ page.external-url }}">{% if site.titlecase %}{{ page.title | titlecase }} →{% else %}{{ page.title }}{% endif %}</a></h1>
|
||||
{% else %}
|
||||
<h1 class="blog-post__title">{% if site.titlecase %}{{ page.title | titlecase }}{% else %}{{ page.title }}{% endif %}</h1>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<div class="entry-content">{{ content }}</div>
|
||||
<footer>
|
||||
<p class="meta">
|
||||
{% if page.date %}{% include post/date.html date=page.date %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}{% endif %}
|
||||
|
|
||||
{% include post/categories.html %}
|
||||
</p>
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
{% if page.date %}<p class="meta">{% include post/date.html date=page.date %}{{ time }}</p>{% endif %}
|
||||
</header>
|
||||
|
||||
<div class="blog-post__content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<footer class="blog-post__footer container">
|
||||
<p class="meta">
|
||||
{% if page.date %}{% include post/date.html date=page.date %}{% if updated %}{{ updated }}{% else %}{{ time }}{% endif %}{% endif %}
|
||||
|
|
||||
{% include post/categories.html %}
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
{% if post.external-url %}
|
||||
<div class="entry-content"><p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
|
||||
<div class="blog-post__content">
|
||||
<p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<footer role="contentinfo">
|
||||
<footer class="site-footer" role="contentinfo">
|
||||
<p>
|
||||
Follow me <a href="http://twitter.com/_danbarber">{% img social/twitter.svg %} @_danbarber</a>
|
||||
Follow me <a href="http://twitter.com/_danbarber">{% asset social/twitter.svg %} @_danbarber</a>
|
||||
</p>
|
||||
{% if site.simple_search %}
|
||||
<form action="{{ site.simple_search }}" method="get">
|
||||
|
||||
@ -16,28 +16,28 @@
|
||||
<link rel="alternate" type="application/json" title="{{site.title}} - Photos" href="{{ site.url }}/feed.photos.json">
|
||||
|
||||
<!-- Large favicon for Opera Speed Dial -->
|
||||
<link rel="icon" type="image/png" href="{{ 'speeddial-icon.png' | asset_path }}">
|
||||
<link rel="icon" type="image/png" href="{% asset speeddial-icon.png @path %}">
|
||||
|
||||
<!-- iOS favicons -->
|
||||
<link href="{{ 'favicon.ico' | asset_path }}" rel="shortcut icon">
|
||||
{{ 'styles' | stylesheet }}
|
||||
{{ 'main' | javascript }}
|
||||
<link href="{% asset favicon.ico @path %}" rel="shortcut icon">
|
||||
{% asset styles.css %}
|
||||
{% asset main.js %}
|
||||
<!-- 144x144 for iPad 3rd and 4th generation -->
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{{ 'apple-touch-icon-144x144.png' | asset_path }}">
|
||||
<link rel="apple-touch-icon" sizes="144x144" href="{% asset apple-touch-icon-144x144.png @path %}">
|
||||
<!-- 114x114 for iPhone 4, 4S, 5 and 2012 iPod Touch -->
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{{ 'apple-touch-icon-114x114.png' | asset_path }}">
|
||||
<link rel="apple-touch-icon" sizes="114x114" href="{% asset apple-touch-icon-114x114.png @path %}">
|
||||
<!-- 72x72 for 1st generation iPad, iPad 2 and iPad mini -->
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{{ 'apple-touch-icon-72x72.png' | asset_path }}">
|
||||
<link rel="apple-touch-icon" sizes="72x72" href="{% asset apple-touch-icon-72x72.png @path %}">
|
||||
<!-- 57x57 for iPhone 3GS, 2011 iPod Touch and older Android devices -->
|
||||
<link rel="apple-touch-icon" href="{{ 'apple-touch-icon.png' | asset_path }}">
|
||||
<link rel="apple-touch-icon" href="{% asset apple-touch-icon.png @path %}">
|
||||
|
||||
<!-- Windows 8 Pinned Site -->
|
||||
<meta name="msapplication-TileImage" content="{{ 'win8-pinsite.png' | asset_path }}">
|
||||
<meta name="msapplication-TileImage" content="{% asset win8-pinsite.png @path }}">
|
||||
<meta name="msapplication-TileColor" content="#4B8400">
|
||||
<meta name="application-name" content="DanBarber.me">
|
||||
|
||||
<!-- Safari pinned tab -->
|
||||
<link rel="mask-icon" href="{{ 'favicon.svg' | asset_path }}" color="#4B8400">
|
||||
<link rel="mask-icon" href="{% asset favicon.svg @path %}" color="#4B8400">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/7434852/6285372/css/fonts.css">
|
||||
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
<header role="banner">
|
||||
<div class="container">
|
||||
<nav role="navigation">{% include navigation.html %}</nav>
|
||||
<h1><a class="logo" href="/">{% img logo.svg alt="Dan Barber" %}</a></h1>
|
||||
</div>
|
||||
</header>
|
||||
<header class="site-header" role="banner">
|
||||
<div class="container site-header__container">
|
||||
<a class="logo" href="/" class="site-header__logo-link">
|
||||
{% svg _assets/images/logo.svg title="Dan Barber" class="site-header__logo" %}
|
||||
</a>
|
||||
|
||||
<nav role="navigation" class="site-header__navigation">
|
||||
<ul>
|
||||
<li><a href="{{ root_url }}/">Blog</a></li>
|
||||
<li><a href="{{ root_url }}/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
25
_includes/index_article.html
Normal file
25
_includes/index_article.html
Normal file
@ -0,0 +1,25 @@
|
||||
<header class="container blog-post__header">
|
||||
{% if post.external-url %}<!-- This defines how Octopress will use posts with external-url. -->
|
||||
<h1 class="blog-post__title"><a href="{{ post.external-url }}">{% if site.titlecase %}{{ post.title | titlecase }} →{% else %}{{ post.title }}{% endif %}</a></h1>
|
||||
{% else %}<!-- Now we're back to normal posts. Note the links used under href in both headers.-->
|
||||
<h1 class="blog-post__title"><a href="{{ root_url }}{{ post.url }}">{% if site.titlecase %}{{ post.title | titlecase }}{% else %}{{ post.title }}{% endif %}</a></h1>
|
||||
{% endif %}
|
||||
|
||||
{% if post.date %}<p class="meta">{% include post/date.html date=post.date %}{{ time }}</p>{% endif %}
|
||||
</header>
|
||||
|
||||
<div class="blog-post__content">
|
||||
{{ post.excerpt }}
|
||||
</div>
|
||||
|
||||
{% if post.content contains site.excerpt_separator %}
|
||||
<footer class="blog-post__footer container">
|
||||
<a rel="full-article" class="blog-post__read-on" href="{{ root_url }}{{ post.url }}">{{ site.excerpt_link }}</a>
|
||||
</footer>
|
||||
{% endif %}
|
||||
|
||||
{% if post.external-url %}
|
||||
<div class="blog-post__content">
|
||||
<p><a href="{{ root_url }}{{ post.url }}">Permalink</a></p><!-- add permalink at end of link posts; could be text or glyph -->
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -1,4 +0,0 @@
|
||||
<ul class="main-navigation">
|
||||
<li><a href="{{ root_url }}/">Blog</a></li>
|
||||
<li><a href="{{ root_url }}/about">About</a></li>
|
||||
</ul>
|
||||
@ -5,14 +5,16 @@ single: true
|
||||
|
||||
{% include header.html %}
|
||||
|
||||
<div id="content">
|
||||
<article>
|
||||
<div class="blog-content">
|
||||
<article class="blog-post">
|
||||
{% include article.html %}
|
||||
</article>
|
||||
<div class="pagination">
|
||||
|
||||
<div class="container pagination">
|
||||
{% if page.previous.url %}
|
||||
<a class="prev" href="{{page.previous.url}}" title="Previous Post: {{page.previous.title}}">« {{page.previous.title}}</a>
|
||||
{% endif %}
|
||||
|
||||
{% if page.next.url %}
|
||||
<a class="next" href="{{page.next.url}}" title="next Post: {{page.next.title}}">{{page.next.title}} »</a>
|
||||
{% endif %}
|
||||
|
||||
@ -43,7 +43,7 @@ When saving your images for the web it is usually best to use the "Web Export...
|
||||
|
||||
<figure>
|
||||
<div style="margin-left: -5.6%; margin-right: -5.7%; margin-bottom: -5%;">
|
||||
{% image blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class:"no-border" %}
|
||||
{% asset blog/the-complete-guide-to-optimising-web-images/web-export.png alt:"Photoshop's web export dialog box" class="no-border" %}
|
||||
</div>
|
||||
<figcaption>Photoshop's Web Export dialogue box</figcaption>
|
||||
</figure>
|
||||
@ -60,7 +60,7 @@ Most image editing applications will only let you export a PNG file with an 8-bi
|
||||
|
||||
<figure>
|
||||
<div style="margin-left: -5.4%; margin-right: -5.5%; margin-bottom: -5%;">
|
||||
{% image blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class:"no-border" %}
|
||||
{% asset blog/the-complete-guide-to-optimising-web-images/imagealpha.png alt:"ImageAlpha on OS X" class="no-border" %}
|
||||
</div>
|
||||
<figcaption>ImageAlpha on OS X</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -10,7 +10,7 @@ categories:
|
||||
layout: post
|
||||
---
|
||||
|
||||
<figure class="photo-wide">
|
||||
<figure class="photo photo-wide">
|
||||
{% picture photo-wide blog/liberty-sunset/DSCF3723.jpg alt="Liberty Sunset" %}
|
||||
<figcaption>Fuji X-E2, XF 55-200mm at 141mm, ISO 200, 1/1800 sec at ƒ/7.1</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -11,7 +11,7 @@ categories:
|
||||
- eisenhower
|
||||
---
|
||||
|
||||
<figure class="photo-square">
|
||||
<figure class="photo photo--square">
|
||||
{% picture photo-square blog/eisenhower-executive-office-building/DSCF4369.jpg alt="Eisenhower Executive Office Building" %}
|
||||
<figcaption>Fuji X-E2, XF 35mm, ISO 1250, 1/60 sec at ƒ/1.4</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -11,7 +11,7 @@ categories:
|
||||
date: 2017-08-29T18:04:53+00:00
|
||||
---
|
||||
|
||||
<figure class="photo-wide">
|
||||
<figure class="photo photo--wide">
|
||||
{% picture photo-wide blog/four-corners/IMG_6164.jpg alt="Four Corners" %}
|
||||
<figcaption>Taken on July 2nd, 2017. iPhone 6S & Halide App, 4.15mm, ISO 25, 1/1500 sec at ƒ/2.2</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -11,7 +11,7 @@ tags:
|
||||
- horses
|
||||
---
|
||||
|
||||
<figure class="photo-wide">
|
||||
<figure class="photo photo--wide">
|
||||
{% picture photo-wide blog/barrel-race/DSCF8015.jpg alt="Barrel Race" %}
|
||||
<figcaption>Taken on December 10th, 2017. Fuji X-E2, XF 55-200mm at 200mm, ISO 1250, 1/60 sec at ƒ/4.8</figcaption>
|
||||
</figure>
|
||||
|
||||
@ -10,12 +10,12 @@ layout: default
|
||||
{% for post in paginator.posts %}
|
||||
{% assign content = post.content %}
|
||||
|
||||
<article>
|
||||
{% include article.html %}
|
||||
<article class="blog-post">
|
||||
{% include index_article.html %}
|
||||
</article>
|
||||
{% endfor %}
|
||||
|
||||
<div class="pagination">
|
||||
<div class="container pagination">
|
||||
{% if paginator.next_page %}
|
||||
<a class="prev" href="{{ paginator.next_page_path }}">← Older</a>
|
||||
{% endif %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user