diff options
| -rw-r--r-- | .scss-lint.yml | 3 | ||||
| -rw-r--r-- | Gemfile | 3 | ||||
| -rw-r--r-- | Gemfile.lock | 18 | ||||
| -rw-r--r-- | README.md | 14 | ||||
| -rw-r--r-- | scss/journal.scss | 277 | ||||
| -rw-r--r-- | static/css/journal.css | 50 |
6 files changed, 31 insertions, 334 deletions
diff --git a/.scss-lint.yml b/.scss-lint.yml deleted file mode 100644 index 20b7210..0000000 --- a/.scss-lint.yml +++ /dev/null @@ -1,3 +0,0 @@ -linters: - PropertySortOrder: - order: smacss diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 10c85fc..0000000 --- a/Gemfile +++ /dev/null @@ -1,3 +0,0 @@ -source 'https://rubygems.org' -gem 'sass' -gem 'scss_lint' diff --git a/Gemfile.lock b/Gemfile.lock deleted file mode 100644 index ecb3489..0000000 --- a/Gemfile.lock +++ /dev/null @@ -1,18 +0,0 @@ -GEM - remote: https://rubygems.org/ - specs: - rake (12.3.3) - sass (3.4.25) - scss_lint (0.54.0) - rake (>= 0.9, < 13) - sass (~> 3.4.20) - -PLATFORMS - ruby - -DEPENDENCIES - sass - scss_lint - -BUNDLED WITH - 1.15.3 @@ -36,17 +36,3 @@ A few parameters should be adjusted in the site config: Both highlight theme and lib can be overridden. Just drop your build in the `static/js` directory, and the theme file in the `static/css` directory. Note that the theme has to be named `highlight.css`. - -### Customize styles - -sass is required to build the theme css file. If [bundler](http://bundler.io/) is installed on your system: - -```bash -bundle install - -# test your changes -scss-lint scss/journal.scss - -# build stylesheet -sass --scss --sourcemap=none scss/journal.scss static/css/journal.css -``` diff --git a/scss/journal.scss b/scss/journal.scss deleted file mode 100644 index a7ea083..0000000 --- a/scss/journal.scss +++ /dev/null @@ -1,277 +0,0 @@ -$black: #303030; -$gray: #686868; -$light-gray: #e5e5e5; -$white: #fbfbfb; -$serif: 'Arvo'; -$monospace: '"Source Code Pro"'; -$fs: 1rem; -$fs-large: 1.125rem; -$std-margin: 0 0 1rem; -$break-small: 800px; - -*, -*::before, -*::after { - box-sizing: border-box; -} - -html { - background-color: $white; - - color: $black; - - font-family: $serif, serif; - font-size: $fs; - - @media screen and (min-width: $break-small) { - font-size: $fs-large; - } -} - -body { - line-height: 1.6; -} - -html, -body { - margin: 0; -} - -h1, -p, -figure, -pre, -blockquote { - margin: $std-margin; -} - -hr { - display: block; - width: 100%; - height: 0; - margin: 2rem 0; - - border: 0; - border-top: 1px solid $gray; - -} - -figure { - .representation { - display: block; - margin: 0 0 .5rem; - } -} - -figcaption { - padding: 0 .5rem .5rem; - font-size: .8125rem; - text-align: right; - - .original::before { - content: ' '; - display: block; - } -} - -img { - max-width: 100%; -} - -blockquote { - padding: 1rem; - border-left: 5px solid $light-gray; - color: $gray; - font-style: italic; - - p { - margin: 0; - } - - cite { - display: block; - margin: 1rem 0 0; - font-size: .875rem; - text-align: right; - } -} - -a { - border-bottom: 1px solid currentColor; - color: currentColor; - text-decoration: none; - - &:hover { - border-bottom-color: currentColor; - color: $gray; - } -} - -ol, -ul { - margin: 0 0 1rem 1.25rem; - padding: 0; - list-style-position: outside; - - ol, - ul { - margin-bottom: 0; - } -} - -li { - margin: 0; - - &:not(last-of-type) { - margin-bottom: .4rem; - } -} - -abbr { - border-bottom: 1px dashed currentColor; - text-decoration: none; - cursor: help; -} - -kbd, -code, -pre { - font-family: $monospace, monospace; -} - -pre { - max-width: 100%; -} - -kbd, -code { - margin: 0; - padding: .125rem .25rem 0; - background-color: $light-gray; -} - -article, -section { - display: block; - margin-bottom: 1rem; -} - -h1 { - font-size: 1.875rem; -} - -h2, -h3, -h4, -h5, -h6 { - margin: 0 0 .5rem; -} - -h2 { - font-size: 2rem; -} - -h3 { - font-size: 1.75rem; -} - -h4 { - font-size: 1.5rem; -} - -h5 { - font-size: 1.25rem; -} - -h6 { - font-size: 1rem; -} - -.container { - width: 100%; - max-width: 38rem; - margin: 0 auto; - padding: .5rem; - - @media screen and (min-width: $break-small) { - padding: 1rem 0; - } -} - -.site-header, -.site-nav { - margin-bottom: 2rem; - - h1 { - margin-bottom: .5rem; - } -} - -.site-nav a::before { - content: '\2190'; // left arrow - margin-right: .25rem; -} - -.site-footer { - margin: 3rem 0 0; - font-size: .8125rem; - - [itemprop="sameAs"] + [itemprop="sameAs"] { - margin-left: .4rem; - } - - @media screen and (min-width: $break-small) { - margin-bottom: .5rem; - } -} - -.posts { - - ol { - margin-left: 0; - list-style: none; - } - - li { - margin-bottom: .5rem; - - @media screen and (min-width: $break-small) { - display: flex; - flex-direction: row; - } - } - - time { - display: block; - - @media screen and (min-width: $break-small) { - flex: 0 0 5rem; - } - - + a { - margin-left: 1rem; - - @media screen and (min-width: $break-small) { - margin-left: 2rem; - } - } - } -} - -.post { - - .post-header { - margin-bottom: 3rem; - } - - .post-date { - display: block; - margin: $std-margin; - text-align: right; - } -} - -.hljs { - font-size: .875rem; -} diff --git a/static/css/journal.css b/static/css/journal.css index 6e18085..f9a3e6c 100644 --- a/static/css/journal.css +++ b/static/css/journal.css @@ -1,16 +1,28 @@ +:root { + --color-dark: #303030; + --color-grey: #686868; + --color-light-grey: #e5e5e5; + --color-light: #fbfbfb; + --font-serif: 'Arvo'; + --font-monospace: '"Source Code Pro"'; + --font-size: 1rem; + --font-size-large: 1.125rem; + --margin: 0 0 1rem; + --breakpoint-sm: 800px; } + *, *::before, *::after { box-sizing: border-box; } html { - background-color: #fbfbfb; - color: #303030; - font-family: "Arvo", serif; - font-size: 1rem; } - @media screen and (min-width: 800px) { + background-color: var(--color-light); + color: var(--color-dark); + font-family: var(--font-serif), serif; + font-size: --font-size; } + @media screen and (min-width: var(--breakpoint-sm)) { html { - font-size: 1.125rem; } } + font-size: var(--font-size) -large; } } body { line-height: 1.6; } @@ -24,7 +36,7 @@ p, figure, pre, blockquote { - margin: 0 0 1rem; } + margin: var(--margin); } hr { display: block; @@ -32,7 +44,7 @@ hr { height: 0; margin: 2rem 0; border: 0; - border-top: 1px solid #686868; } + border-top: 1px solid var(--color-grey); } figure .representation { display: block; @@ -51,8 +63,8 @@ img { blockquote { padding: 1rem; - border-left: 5px solid #e5e5e5; - color: #686868; + border-left: 5px solid var(--color-light-grey); + color: var(--color-grey); font-style: italic; } blockquote p { margin: 0; } @@ -68,7 +80,7 @@ a { text-decoration: none; } a:hover { border-bottom-color: currentColor; - color: #686868; } + color: var(--color-grey); } ol, ul { @@ -94,7 +106,7 @@ abbr { kbd, code, pre { - font-family: '"Source Code Pro"', monospace; } + font-family: var(--font-monospace), monospace; } pre { max-width: 100%; } @@ -103,7 +115,7 @@ kbd, code { margin: 0; padding: .125rem .25rem 0; - background-color: #e5e5e5; } + background-color: var(--color-light-grey); } article, section { @@ -140,7 +152,7 @@ h6 { max-width: 38rem; margin: 0 auto; padding: .5rem; } - @media screen and (min-width: 800px) { + @media screen and (min-width: var(--breakpoint-sm)) { .container { padding: 1rem 0; } } @@ -160,7 +172,7 @@ h6 { font-size: .8125rem; } .site-footer [itemprop="sameAs"] + [itemprop="sameAs"] { margin-left: .4rem; } - @media screen and (min-width: 800px) { + @media screen and (min-width: var(--breakpoint-sm)) { .site-footer { margin-bottom: .5rem; } } @@ -169,18 +181,18 @@ h6 { list-style: none; } .posts li { margin-bottom: .5rem; } - @media screen and (min-width: 800px) { + @media screen and (min-width: var(--breakpoint-sm)) { .posts li { display: flex; flex-direction: row; } } .posts time { display: block; } - @media screen and (min-width: 800px) { + @media screen and (min-width: var(--breakpoint-sm)) { .posts time { flex: 0 0 5rem; } } .posts time + a { margin-left: 1rem; } - @media screen and (min-width: 800px) { + @media screen and (min-width: var(--breakpoint-sm)) { .posts time + a { margin-left: 2rem; } } @@ -188,7 +200,7 @@ h6 { margin-bottom: 3rem; } .post .post-date { display: block; - margin: 0 0 1rem; + margin: var(--margin); text-align: right; } .hljs { |