commit ae62744be2353351c23b59a87c76d048771556fe
parent 6667aa86b9a53ae89386e6871811b6516f441c13
Author: Oscar Benedito <oscar@oscarbenedito.com>
Date: Mon, 21 Sep 2020 19:10:04 +0200
Minimize CSS on build
Diffstat:
4 files changed, 409 insertions(+), 363 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -0,0 +1,394 @@
+/*
+Copyright (C) 2019-2020 Oscar Benedito
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+*/
+
+/* variables {{{ */
+
+:root {
+ --gap: 1.5rem;
+ --content-gap: 1.5rem;
+ --main-width: 800px;
+
+ --text-color: hsl(0, 0%, 12%);
+ --text-strong: hsl(0, 0%, 10%);
+ --secondary-text: hsl(0, 0%, 44%);
+ --primary-logo: #6dba6a;
+ --primary-active: #6dba6a;
+ --primary-dark: #50914a;
+ --primary-invert: #fff;
+ --hr-color: hsl(0, 0%, 94%);
+ --hr-dark: hsl(0, 0%, 88%);
+ --button-color: hsl(0, 0%, 74%);
+ --background: #fff;
+ --code-bg: hsl(0, 0%, 96%);
+}
+
+@media(prefers-color-scheme:dark) {
+ :root {
+ --text-color: hsl(0, 0%, 80%);
+ --text-strong: hsl(0, 0%, 80%);
+ --secondary-text: hsl(0, 0%, 55%);
+ --primary-logo: #4876a1;
+ --primary-active: #1b2c3f;
+ --primary-dark: #4d80b3;
+ --primary-invert: hsl(0, 0%, 80%);
+ --hr-color: hsl(0, 0%, 20%);
+ --hr-dark: hsl(0, 0%, 20%);
+ --button-color: hsl(0, 0%, 70%);
+ --background: hsl(0, 0%, 8%);
+ --code-bg: hsl(0, 0%, 8%);
+ }
+}
+
+/* variables }}} */
+
+/* defaults {{{ */
+
+*,
+*::after,
+*::before {
+ box-sizing: border-box;
+}
+
+body {
+ margin: 0;
+ color: var(--text-color);
+ font-family: sans-serif;
+ line-height: 1.7;
+ word-break: break-word;
+ background: var(--background);
+}
+
+article,
+aside,
+div,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section {
+ display: block;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin-top: 0;
+ margin-bottom: 0;
+ line-height: 1.2;
+ color: var(--text-strong);
+}
+
+h1 {
+ margin-bottom: 2px;
+ font-size: 2em;
+}
+
+b,
+strong {
+ font-weight: 700;
+ color: var(--text-strong);
+}
+
+ul {
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ color: var(--primary-dark);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+table {
+ width: 100%;
+ border-collapse: collapse;
+ border-spacing: 0;
+ margin-bottom: 2rem;
+}
+
+table td,
+table th {
+ min-width: 80px;
+ padding: 0.75rem 0.5rem;
+ line-height: 1.5;
+ border-bottom: 1px solid var(--hr-dark);
+}
+
+table th {
+ font-size: 0.9em;
+ text-align: left;
+}
+
+svg {
+ fill: currentColor;
+ stroke: currentColor;
+ max-width: 400px;
+}
+
+/* defaults }}} */
+
+/* header {{{ */
+
+header#page-header {
+ border-bottom: 2px solid var(--hr-color);
+ padding: calc(1.5 * var(--gap)) var(--gap);
+}
+
+header#page-header .content {
+ max-width: var(--main-width);
+ margin-right: auto;
+ margin-left: auto;
+}
+
+header#page-header .content .logo {
+ height: 1.6em;
+ fill: var(--primary-logo);
+ stroke: none;
+}
+
+header#page-header .content .logo:hover {
+ fill: var(--primary-dark);
+}
+
+header#page-header .content nav {
+ color: var(--secondary-text);
+}
+
+header#page-header .content nav a {
+ color: var(--secondary-text);
+}
+
+/* header }}} */
+
+/* footer {{{ */
+
+footer#page-footer {
+ border-top: 2px solid var(--hr-color);
+ padding: calc(1.5 * var(--gap)) var(--gap);
+}
+
+footer#page-footer .content {
+ max-width: var(--main-width);
+ margin-right: auto;
+ margin-left: auto;
+ text-align: center;
+}
+
+footer#page-footer .content nav {
+ color: var(--secondary-text);
+}
+
+footer#page-footer .content nav a {
+ color: var(--secondary-text);
+}
+
+/* footer }}} */
+
+/* main {{{ */
+
+main {
+ position: relative;
+ max-width: calc(var(--main-width) + var(--gap) * 2);
+ padding: 0 var(--gap);
+ margin: var(--gap) auto calc(var(--gap) * 2) auto;
+}
+
+.pagination {
+ display: flex;
+}
+
+.button {
+ color: var(--secondary-text);
+ font-size: 0.8em;
+ line-height: 2.8em;
+ background: var(--background);
+ border-radius: calc(2.8em/2);
+ padding-left: 1.2em;
+ padding-right: 1.2em;
+ border: 1px solid transparent;
+ border-color: var(--button-color);
+ border-width: 1px;
+}
+
+.button:hover {
+ color: var(--background);
+ border-color: transparent;
+ background: var(--button-color);
+ text-decoration: none;
+}
+
+.button.right {
+ margin-left: auto;
+}
+
+/* main }}} */
+
+/* post entry summary {{{ */
+
+main.list > header {
+ margin-bottom: var(--gap);
+}
+
+article.summary {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+article.summary h2 a {
+ color: var(--text-color);
+}
+
+article.summary p {
+ margin: 0 !important;
+}
+
+article.summary header {
+ margin-bottom: 1rem;
+}
+
+article.summary .metadata {
+ color: var(--secondary-text);
+}
+
+article.summary .metadata a {
+ color: var(--secondary-text);
+}
+
+article.summary:not(:first-of-type) {
+ border-top: 2px solid var(--hr-color);
+}
+
+/* post entry summary }}} */
+
+/* article {{{ */
+
+article header {
+ margin-bottom: var(--content-gap);
+}
+
+article .metadata {
+ color: var(--secondary-text);
+}
+
+article .metadata a {
+ color: var(--secondary-text);
+}
+
+article .content h1 {
+ margin-top: 2.5rem;
+ margin-bottom: 2rem;
+}
+
+article .content h2 {
+ margin-top: 2rem;
+ margin-bottom: 1.5rem;
+}
+
+article .content h3 {
+ margin-top: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+article .content h4,
+article .content h5,
+article .content h6 {
+ margin-top: 1.5rem;
+ margin-bottom: 0.5rem;
+}
+
+article .content ol,
+article .content p,
+article .content:not(li) > ul {
+ margin-bottom: var(--content-gap);
+}
+
+article .content ol,
+article .content ul {
+ padding-left: 1.25rem;
+}
+
+article .content li {
+ margin-top: 0.3rem;
+}
+
+article .content li p {
+ margin-bottom: 0;
+}
+
+article .content pre {
+ margin-bottom: var(--gap);
+ border-radius: 4px;
+ overflow-x: auto;
+ margin-left: 0;
+ margin-right: 0;
+ border: 1px solid var(--hr-dark);
+ background-color: var(--code-bg)!important;
+}
+
+article .content code {
+ border: 1px solid var(--hr-dark);
+ background-color: var(--code-bg);
+ padding: 4px 6px;
+ font-family: monospace;
+ line-height: 1.5;
+ border-radius: 2px;
+}
+
+article .content pre code {
+ display: block;
+ margin-left: 0;
+ margin-right: 0;
+ padding: calc(var(--gap)/2);
+ border: none;
+ background: 0 0;
+}
+
+article .content blockquote {
+ padding: 0 0 0 1.2rem;
+ border-left: 3px solid var(--secondary-text);
+ color: var(--secondary-text);
+}
+
+article .content hr {
+ height: 2px;
+ margin-top: var(--content-gap);
+ margin-bottom: var(--content-gap);
+ background: var(--hr-color);
+ border-top: 0;
+ border-bottom: 0;
+ border: 0;
+}
+
+/* article }}} */
+
+/* other {{{ */
+
+.table-container {
+ overflow-x: auto;
+}
+
+/* other }}} */
diff --git a/assets/css/style.min.css b/assets/css/style.min.css
@@ -1 +0,0 @@
-:root{--gap: 1.5rem;--content-gap: 1.5rem;--main-width: 800px;--text-color: hsl(0, 0%, 12%);--text-strong: hsl(0, 0%, 10%);--secondary-text: hsl(0, 0%, 44%);--primary-logo: #6dba6a;--primary-active: #6dba6a;--primary-dark: #50914a;--primary-invert: #fff;--hr-color: hsl(0, 0%, 94%);--hr-dark: hsl(0, 0%, 88%);--button-color: hsl(0, 0%, 74%);--background: #fff;--code-bg: hsl(0, 0%, 96%)}@media(prefers-color-scheme:dark){:root{--text-color: hsl(0, 0%, 80%);--text-strong: hsl(0, 0%, 80%);--secondary-text: hsl(0, 0%, 55%);--primary-logo: #4876a1;--primary-active: #1b2c3f;--primary-dark: #4d80b3;--primary-invert: hsl(0, 0%, 80%);--hr-color: hsl(0, 0%, 20%);--hr-dark: hsl(0, 0%, 20%);--button-color: hsl(0, 0%, 70%);--background: hsl(0, 0%, 8%);--code-bg: hsl(0, 0%, 8%)}}*,*::before,*::after{box-sizing:border-box}body{margin:0;color:var(--text-color);font-family:sans-serif;line-height:1.7;word-break:break-word;background:var(--background)}article,aside,div,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:0;line-height:1.2;color:var(--text-strong)}h1{margin-bottom:2px;font-size:2em}strong,b{font-weight:700;color:var(--text-strong)}ul{margin:0;padding:0}a{color:var(--primary-dark);text-decoration:none}a:hover{text-decoration:underline}table{width:100%;border-collapse:collapse;border-spacing:0;margin-bottom:2rem}table th,table td{min-width:80px;padding:.75rem .5rem;line-height:1.5;border-bottom:1px solid var(--hr-dark)}table th{font-size:.9em;text-align:left}svg{fill:currentColor;stroke:currentColor;max-width:400px}header#page-header{border-bottom:2px solid var(--hr-color);padding:calc(1.5 * var(--gap)) var(--gap)}header#page-header .content{max-width:var(--main-width);margin-right:auto;margin-left:auto}header#page-header .content .logo{height:1.6em;fill:var(--primary-logo);stroke:none}header#page-header .content .logo:hover{fill:var(--primary-dark)}header#page-header .content nav{color:var(--secondary-text)}header#page-header .content nav a{color:var(--secondary-text)}footer#page-footer{border-top:2px solid var(--hr-color);padding:calc(1.5 * var(--gap)) var(--gap)}footer#page-footer .content{max-width:var(--main-width);margin-right:auto;margin-left:auto;text-align:center}footer#page-footer .content nav{color:var(--secondary-text)}footer#page-footer .content nav a{color:var(--secondary-text)}main{position:relative;max-width:calc(var(--main-width) + var(--gap) * 2);padding:0 var(--gap);margin:var(--gap) auto calc(var(--gap) * 2) auto}.pagination{display:flex}.button{color:var(--secondary-text);font-size:.8em;line-height:2.8em;background:var(--background);border-radius:calc(2.8em/2);padding-left:1.2em;padding-right:1.2em;border:1px solid transparent;border-color:var(--button-color);border-width:1px}.button:hover{color:var(--background);border-color:transparent;background:var(--button-color);text-decoration:none}.button.right{margin-left:auto}main.list>header{margin-bottom:var(--gap)}article.summary{padding-top:1rem;padding-bottom:1rem}article.summary h2 a{color:var(--text-color)}article.summary p{margin:0!important}article.summary header{margin-bottom:1rem}article.summary .metadata{color:var(--secondary-text)}article.summary .metadata a{color:var(--secondary-text)}article.summary:not(:first-of-type){border-top:2px solid var(--hr-color)}article header{margin-bottom:var(--content-gap)}article .metadata{color:var(--secondary-text)}article .metadata a{color:var(--secondary-text)}article .content h1{margin-top:2.5rem;margin-bottom:2rem}article .content h2{margin-top:2rem;margin-bottom:1.5rem}article .content h3{margin-top:1.5rem;margin-bottom:1rem}article .content h4,article .content h5,article .content h6{margin-top:1.5rem;margin-bottom:.5rem}article .content p,article .content :not(li)>ul,article .content ol{margin-bottom:var(--content-gap)}article .content ul,article .content ol{padding-left:1.25rem}article .content li{margin-top:.3rem}article .content li p{margin-bottom:0}article .content pre{margin-bottom:var(--gap);border-radius:4px;overflow-x:auto;margin-left:0;margin-right:0;border:1px solid var(--hr-dark);background-color:var(--code-bg)!important}article .content code{border:1px solid var(--hr-dark);background-color:var(--code-bg);padding:4px 6px;font-family:monospace;line-height:1.5;border-radius:2px}article .content pre code{display:block;margin-left:0;margin-right:0;padding:calc(var(--gap)/2);border:none;background:0 0}article .content blockquote{padding:0 0 0 1.2rem;border-left:3px solid var(--secondary-text);color:var(--secondary-text)}article .content hr{height:2px;margin-top:var(--content-gap);margin-bottom:var(--content-gap);background:var(--hr-color);border-top:0;border-bottom:0;border:0}.table-container{overflow-x:auto}.mathjax-container{overflow-x:auto;margin-top:-21.5px}
diff --git a/gensite.py b/gensite.py
@@ -338,16 +338,28 @@ def main():
for name in files:
file = os.path.join(path, name)
rfile = os.path.relpath(file, 'assets')
+ with open(file, 'r') as c:
+ content = c.read()
+
+ # minify css
+ if os.path.splitext(file)[1] == '.css':
+ content = re.sub('\s*/\*(?:.|\n)*?\*/\s*', '', content)
+ content = re.sub('\s+', ' ', content)
+ content = re.sub('\s*({|}|;|,)\s*', r'\1', content)
+ content = re.sub(':\s*', ':', content)
+ rfile = '{0}.min{1}'.format(*os.path.splitext(rfile))
+
h = hashlib.sha256()
- with open(file, 'rb') as c:
- h.update(c.read())
+ h.update(content.encode('utf-8'))
name, ext = os.path.splitext(rfile)
dst = '{n}.{h}{e}'.format(n=name, h=h.hexdigest()[:8], e=ext)
+
params['_asset_' + rfile] = dst
basedir = os.path.dirname(os.path.join('_site', dst))
if not os.path.isdir(basedir):
os.makedirs(basedir)
- shutil.copy(file, os.path.join('_site', dst))
+ with open(os.path.join('_site', dst), 'w') as c:
+ c.write(content)
# load layouts
base_layout = fread('layouts/base.html')
diff --git a/misc/style.scss b/misc/style.scss
@@ -1,359 +0,0 @@
-/*
-Copyright (C) 2019-2020 Oscar Benedito
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 3 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-*/
-
-// variables {{{
-
-@mixin lightcolors {
- --text-color: hsl(0, 0%, 12%);
- --text-strong: hsl(0, 0%, 10%);
- --secondary-text: hsl(0, 0%, 44%);
- --primary-logo: #6dba6a;
- --primary-active: #6dba6a;
- --primary-dark: #50914a;
- --primary-invert: #fff;
- --hr-color: hsl(0, 0%, 94%);
- --hr-dark: hsl(0, 0%, 88%);
- --button-color: hsl(0, 0%, 74%);
- --background: #fff;
- --code-bg: hsl(0, 0%, 96%);
-}
-@mixin darkcolors {
- --text-color: hsl(0, 0%, 80%);
- --text-strong: hsl(0, 0%, 80%);
- --secondary-text: hsl(0, 0%, 55%);
- --primary-logo: #4876a1;
- --primary-active: #1b2c3f;
- --primary-dark: #4d80b3;
- --primary-invert: hsl(0, 0%, 80%);
- --hr-color: hsl(0, 0%, 20%);
- --hr-dark: hsl(0, 0%, 20%);
- --button-color: hsl(0, 0%, 70%);
- --background: hsl(0, 0%, 8%);
- --code-bg: hsl(0, 0%, 8%);
-}
-:root {
- --gap: 1.5rem;
- --content-gap: 1.5rem;
- --main-width: 800px;
-
- @include lightcolors;
- @media (prefers-color-scheme: dark) {
- @include darkcolors;
- }
-}
-
-// variables }}}
-
-// defaults {{{
-
-*,
-*::before,
-*::after {
- box-sizing: border-box;
-}
-body {
- margin: 0;
- color: var(--text-color);
- font-family: sans-serif;
- line-height: 1.7;
- word-break: break-word;
- background: var(--background);
-}
-article,
-aside,
-div,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section {
- display: block;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- margin-top: 0;
- margin-bottom: 0;
- line-height: 1.2;
- color: var(--text-strong);
-}
-h1 {
- margin-bottom: 2px;
- font-size: 2em;
-}
-strong,
-b {
- font-weight: 700;
- color: var(--text-strong);
-}
-ul {
- margin: 0;
- padding: 0;
-}
-a {
- color: var(--primary-dark);
- text-decoration: none;
-}
-a:hover {
- text-decoration: underline;
-}
-table {
- width: 100%;
- border-collapse: collapse;
- border-spacing: 0;
- margin-bottom: 2rem;
- th,
- td {
- min-width: 80px;
- padding: 0.75rem 0.5rem;
- line-height: 1.5;
- border-bottom: 1px solid var(--hr-dark);
- }
- th {
- font-size: 0.9em;
- text-align: left;
- }
-}
-svg {
- fill: currentColor;
- stroke: currentColor;
- max-width: 400px;
-}
-
-// defaults }}}
-
-// header {{{
-
-header#page-header {
- border-bottom: 2px solid var(--hr-color);
- padding: calc(1.5 * var(--gap)) var(--gap);
- .content {
- max-width: var(--main-width);
- margin-right: auto;
- margin-left: auto;
- .logo {
- height: 1.6em; /* this is also specified using inline css */
- fill: var(--primary-logo);
- stroke: none;
- }
- .logo:hover {
- fill: var(--primary-dark);
- }
- nav {
- color: var(--secondary-text);
- a {
- color: var(--secondary-text);
- }
- }
- }
-}
-
-// header }}}
-
-// footer {{{
-
-footer#page-footer {
- border-top: 2px solid var(--hr-color);
- padding: calc(1.5 * var(--gap)) var(--gap);
- .content {
- max-width: var(--main-width);
- margin-right: auto;
- margin-left: auto;
- text-align: center;
- nav {
- color: var(--secondary-text);
- a {
- color: var(--secondary-text);
- }
- }
- }
-}
-
-// footer }}}
-
-// main {{{
-
-main {
- position: relative;
- max-width: calc(var(--main-width) + var(--gap) * 2);
- padding: 0 var(--gap);
- margin: var(--gap) auto calc(var(--gap) * 2) auto;
-}
-.pagination {
- display: flex;
-}
-.button {
- color: var(--secondary-text);
- font-size: 0.8em;
- line-height: 2.8em;
- background: var(--background);
- border-radius: calc(2.8em / 2);
- padding-left: 1.2em;
- padding-right: 1.2em;
- border: 1px solid transparent;
- border-color: var(--button-color);
- border-width: 1px;
-}
-.button:hover {
- color: var(--background);
- border-color: transparent;
- background: var(--button-color);
- text-decoration: none;
-}
-.button.right {
- margin-left: auto;
-}
-
-// main }}}
-
-// post entry summary {{{
-
-main.list > header {
- margin-bottom: var(--gap);
-}
-article.summary {
- padding-top: 1rem;
- padding-bottom: 1rem;
- h2 a {
- color: var(--text-color);
- }
- p {
- margin: 0 !important;
- }
- header {
- margin-bottom: 1rem;
- }
- .metadata {
- color: var(--secondary-text);
- a {
- color: var(--secondary-text);
- }
- }
-}
-article.summary:not(:first-of-type) {
- border-top: 2px solid var(--hr-color);
-}
-
-// post entry summary }}}
-
-// article {{{
-
-article {
- header {
- margin-bottom: var(--content-gap);
- }
- .metadata {
- color: var(--secondary-text);
- a {
- color: var(--secondary-text);
- }
- }
- .content {
- h1 {
- margin-top: 2.5rem;
- margin-bottom: 2rem;
- }
- h2 {
- margin-top: 2rem;
- margin-bottom: 1.5rem;
- }
- h3 {
- margin-top: 1.5rem;
- margin-bottom: 1rem;
- }
- h4,
- h5,
- h6 {
- margin-top: 1.5rem;
- margin-bottom: 0.5rem;
- }
- p,
- :not(li) > ul,
- ol {
- margin-bottom: var(--content-gap);
- }
- ul,
- ol {
- padding-left: 1.25rem;
- }
- li {
- margin-top: 0.3rem;
- }
- li p {
- margin-bottom: 0;
- }
- pre {
- margin-bottom: var(--gap);
- border-radius: 4px;
- overflow-x: auto;
- margin-left: 0;
- margin-right: 0;
- border: 1px solid var(--hr-dark);
- background-color: var(--code-bg) !important;
- }
- code {
- border: 1px solid var(--hr-dark);
- background-color: var(--code-bg);
- padding: 4px 6px;
- font-family: monospace;
- line-height: 1.5;
- border-radius: 2px;
- }
- pre code {
- display: block;
- margin-left: 0;
- margin-right: 0;
- padding: calc(var(--gap) / 2);
- border: none;
- background: none;
- }
- blockquote {
- padding: 0 0 0 1.2rem;
- border-left: 3px solid var(--secondary-text);
- color: var(--secondary-text);
- }
- hr {
- height: 2px;
- margin-top: var(--content-gap);
- margin-bottom: var(--content-gap);
- background: var(--hr-color);
- border-top: 0;
- border-bottom: 0;
- border: 0;
- }
- }
-}
-
-// article }}}
-
-// other {{{
-
-.table-container {
- overflow-x: auto;
-}
-.mathjax-container {
- overflow-x: auto;
- margin-top: -21.5px;
-}
-
-// other }}}
