From fd606d3c949093c81b1580ae57edbfa96e19b8c2 Mon Sep 17 00:00:00 2001 From: Marc Riera Irigoyen Date: Sun, 25 Mar 2018 17:47:19 +0200 Subject: [PATCH] CSS optimisation --- layouts/partials/footer.html | 1 - layouts/partials/header.html | 13 +- static/css/{style.css => kozmo-dark.css} | 712 +++++++++++------------ 3 files changed, 358 insertions(+), 368 deletions(-) rename static/css/{style.css => kozmo-dark.css} (66%) diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 4010777..50a6a65 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,4 +1,3 @@ - diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 173474e..8dfecf3 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -2,8 +2,8 @@ {{ .Title }} - {{ .Site.Title }} - - + + {{ .Hugo.Generator }} @@ -22,7 +22,7 @@
@@ -53,11 +53,8 @@ Featured image
{{end}} -
-
-

{{ .Title }}

-
+
+

{{ .Title }}

-
diff --git a/static/css/style.css b/static/css/kozmo-dark.css similarity index 66% rename from static/css/style.css rename to static/css/kozmo-dark.css index 49f86b6..6d38ab9 100644 --- a/static/css/style.css +++ b/static/css/kozmo-dark.css @@ -1,5 +1,7 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,500,500i,600,600i,700,700i'); +/* Basic theme elements */ + html { background: #222222; } @@ -16,126 +18,6 @@ h6 { font-family: 'Open Sans', sans-serif; } -#container { - background: #292929; - margin: auto; - border-style: solid; - border-radius: 10px; - border-color: #252525; -} - -#header-left { - padding-top: 15px; - float: left; - width: 60%; -} - -#header-right { - padding-top: 15px; - float: right; - width: 40%; -} - -#site-logo { - float: left; - height: 100px; - width: 100px; - padding: 0 20px 0 20px; -} - -#site-title, -a:link, -a:active, -a:visited { - color: #BBBBBB; -} - -a:hover { - color: #208DCC; -} - -#site-title { - padding: 10px 20px 0 0; - font-weight: 600; - font-size: 36px; -} - -a:link, -a:active, -a:visited, -a:hover { - text-decoration: none; -} - -p a:link, -p a:active, -p a:visited, -p a:hover { - color: #208DCC; -} - -#footer { - background: #3E3E3E; - color: #BBBBBB; - padding: 10px 20px 10px 20px; - clear: both; - font-size: 12px; -} - -nav { - clear: both; - text-align: right; -} - -nav ul { - list-style-type: none; - padding: 0; -} - -nav ul.first > li { - display: block; - text-align: left; -} - -nav ul li a { - display: block; - font-size: 90%; -} - -nav a:link, -nav a:active, -nav a:visited, -nav a:hover { - text-decoration: none; -} - -nav a:link, -nav a:active, -nav a:visited { - color: #BBBBBB; -} - -nav a:hover { - color: #208DCC; -} - -nav a.selected { - color: #208DCC; -} - -#content, -#page-title { - padding: 10px 20px 10px 20px; -} - -#content { - margin-bottom: 20px; -} - -#page-title h1 { - margin: 0; -} - h1 { font-size: 150%; font-weight: 600; @@ -162,47 +44,39 @@ h6 { font-size: 100%; } -#article p, #article ol li, #article ul li { - text-align: justify; + +/* Hyperlinks */ + +a { + text-decoration: none; } -#article blockquote { - font-family: 'Lora', serif; - font-style: italic; - font-size: 1.05em; - line-height: 1.5em; +a:link, +a:active, +a:visited { + color: #BBBBBB; } -#article dl dt { - font-weight: bold; +a:hover, +a.selected { + color: #208DCC; } -#article dl dt em { - font-weight: normal; +p a:link, +p a:active, +p a:visited, +p a:hover { + color: #208DCC; } -#article .timestamp, -#article .tags, -#article .tags a:link, -#article .tags a:active, -#article .tags a:visited, -#article .tags a:hover { - color: #777; -} -#article .timestamp { - padding-bottom: 1em; -} +/* Images */ -hr { - border-bottom: 0; - border-left: 0; - border-right: 0; - margin: 2.5em 0; -} - -span.upper { - text-transform: uppercase; +img { + margin: auto; + max-width:100%; + max-height:100%; + display: block; } img.right { @@ -215,45 +89,18 @@ img.left { margin: 0 1em 1em 0; } -img { - margin: auto; - max-width:100%; - max-height:100%; - display: block; -} -#featured-image img { - max-width:100%; - max-height:100%; - display: block; +/* Thematic breaks */ + +hr { + border-bottom: 0; + border-left: 0; + border-right: 0; + margin: 2.5em 0; } - -ul.pagination { - padding: 0; - list-style-type: none; - text-align: center; -} - -.pagination li { - display: inline; - margin: 10px; -} - -.pagination .active a:link, -.pagination .active a:active, -.pagination .active a:visited, -.pagination .active a:hover, -.pagination .disabled a:link, -.pagination .disabled a:active, -.pagination .disabled a:visited, -.pagination .disabled a:hover, -.pagination .previous-disabled, -.pagination .next-disabled { - color: #555; - text-decoration: none; -} +/* Tables */ table, th, @@ -275,21 +122,159 @@ table img { box-sizing: border-box; } -#page-title-container { - background: #3E3E3E; - border-top: 1px solid #444444; - border-bottom: 1px solid #444444; + +/* Forms */ + +form label { display: block; } +form textarea, +form input { + margin-top: 10px; + margin-bottom: 20px; + width: 100%; + display: block; + box-sizing: border-box; +} + +form textarea { + min-height: 160px; + width: 100%; + resize: vertical; +} + + +/* Main menu */ + +nav { + clear: both; + text-align: right; +} + +nav ul { + list-style-type: none; + padding: 0; +} + +nav ul.first > li { + display: block; + text-align: left; +} + +nav ul li a { + display: block; + font-size: 90%; +} + +nav a:link, +nav a:active, +nav a:visited { + color: #BBBBBB; +} + +nav a:hover, +nav a.selected { + color: #208DCC; +} + + +/* Language selector */ + +.language-selector { + list-style-type: none; + font-size: 90%; +} + +.language-selector li { + display: inline; + margin: .5em; + text-align: center; +} + + +/* Main container */ + +#container { + background: #292929; + margin: auto; + border-style: solid; + border-radius: 10px; + border-color: #252525; +} + + +/* Header */ + +#header-left, +#header-right { + padding-top: 15px; +} + +#site-logo { + height: 100px; + width: 100px; + padding: 0 20px 0 20px; +} + +#site-title { + padding: 10px 20px 0 0; + font-weight: 600; + font-size: 220%; +} + + +/* Footer */ + +#footer { + background: #3E3E3E; + color: #BBBBBB; + padding: 10px 20px 10px 20px; + clear: both; + font-size: 12px; +} + + +/* Page title */ + +#page-title { + padding: 10px 20px 10px 20px; + background: #3E3E3E; + border-top: 1px solid #444444; + border-bottom: 1px solid #444444; +} + +#page-title h1 { + margin: 0; +} + + +/* Page content */ + +#content { + padding: 10px 20px 10px 20px; + margin-bottom: 20px; + text-align: justify; +} + +#content .timestamp, +#content .tags { + color: #777; +} + +#content .timestamp { + padding-bottom: 1em; +} + + +/* Paginator page: entries */ + #paginator-page { margin-bottom: 30px; - text-align: justify; } #paginator-page-footer { margin-top: 10px; - display: block; height: 45px; /*border-bottom: 1px solid #444444;*/ } @@ -312,9 +297,7 @@ table img { margin: 0px 0px 0px 0px; } -#paginator-page-button a:link, -#paginator-page-button a:active, -#paginator-page-button a:visited { +#paginator-page-button a { color: #FFF; } @@ -322,52 +305,185 @@ table img { color: #DDD; } -.language-selector { - display: inline; + +/* Paginator page: bottom buttons */ + +.pagination { + padding: 0; list-style-type: none; - float: right; - margin-right: 30px; - font-size: 90%; -} - -.language-selector li { - display: inline; - margin: .5em; -} - -.language-selector .selected, -.first .selected { - color: #208DCC; -} - -form label { - display: block; -} - -form textarea, -form input { - margin-top: 10px; - margin-bottom: 20px; - width: 100%; - display: block; - box-sizing: border-box; -} - -form textarea { - height: 160px; - width: 100%; - resize: none; -} - -@media screen and (max-width: 779px) { - -#header-left { - display: block; - float: none; - width: 100%; text-align: center; } +.pagination li { + display: inline; + margin: 10px; +} + +.pagination .previous-disabled, +.pagination .next-disabled { + color: #555; + text-decoration: none; +} + + + +@media (min-width: 780px) { + +/* Main menu */ + +.burger-button { + display: none; +} + +nav ul.first > li { + display: inline-block; + position: relative; + padding-right: 1.25em; +} + +nav ul.second, +nav ul.third { + display: none; + position: absolute; + background: #000000; + width: 160px; + box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25); +} + +nav ul.first li:hover ul.second, +nav ul.second li:hover ul.third { + display: block; +} + +nav ul.second li a, +nav ul.third li a { + padding: 0.75em 1em; +} + +nav ul.second { + z-index: 2; +} + +nav ul.third { + z-index: 3; +} + +nav ul.second li { + position: relative; +} + +nav ul.third { + left: 212px; + top: -1px; +} + + +/* Language selector */ + +.language-selector { + float: right; + margin-right: 30px; +} + + +/* Main container */ + +#container { + max-width: 1200px; +} + + +/* Header */ + +#header-left { + float: left; + width: 60%; +} + +#header-right { + float: right; + width: 40%; +} + +#site-logo { + float: left; +} + +} + + + +@media screen and (max-width: 779px) { + +/* Main menu */ + +.burger-button { + display: block; + background: #3E3E3E; + font-size: 100%; + padding: 5px 20px 5px 20px; + margin-top: 20px; + cursor: pointer; +} + +.burger-button:hover { + color: #DDDDDD; + background: #208DCC; +} + +#menu-entries { + display: none; +} + +.burger-toggle:checked ~ #menu-entries { + display: block; +} + +.burger-toggle:checked ~ .burger-button { + color: #DDDDDD; + background: #208DCC; +} + +nav { + text-align: center; + margin-bottom: 20px; +} + +nav ul.first > li a, +nav ul.second > li a { + display: block; + padding: 5px 20px 5px 20px; + background: #3E3E3E; +} + +nav ul.first > li a:hover, +nav ul.second > li a:hover { + color: #DDDDDD; + background: #208DCC; +} + +nav ul.first { + margin-top: 0px; +} + +nav ul.second > li a { + padding-left: 40px; +} + + +/* Language selector */ + +.language-selector { + text-align: center; + float: none; + margin: auto; + padding: 0; +} + + +/* Header */ + +#header-left, #header-right { display: block; float: none; @@ -387,126 +503,4 @@ form textarea { padding: 0px 5px; } -.language-selector { - text-align: center; - float: none; -} - -nav { - text-align: center; - margin-bottom: 20px; -} - -.burger-button { - display: block; - background: #3E3E3E; - font-size: 100%; - padding: 5px 20px 5px 20px; - margin-top: 20px; - cursor: pointer; -} - -#menu-entries { - display: none; -} - -.burger-toggle:checked ~ #menu-entries { - display: block; -} - -.burger-toggle:checked ~ .burger-button { - color: #DDDDDD; - background: #208DCC; -} - -nav ul.first > li a, -nav ul.second > li a { - display: block; - padding: 5px 20px 5px 20px; - background: #3E3E3E; -} - -nav ul.first > li a:hover, -nav ul.second > li a:hover, -.burger-button:hover { - color: #DDDDDD; - background: #208DCC; -} - -nav ul.first { - margin-top: 0px; -} - -nav ul.second > li a { - padding-left: 40px; -} - -} - -@media (min-width: 780px) { - #container { - max-width: 1200px; - } - - .burger-button { - display: none; - } - - nav ul.second, - nav ul.third { - display: none; - } - - nav ul.first > li { - display: inline-block; - position: relative; - padding-right: 1.25em; - } - - nav ul.second, - nav ul.third { - position: absolute; - background: #000000; - width: 160px; - box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.25); - } - - nav ul.second { - z-index: 2; - } - - nav ul.third { - z-index: 3; - } - - nav ul.second li { - position: relative; - } - - nav ul.third { - left: 212px; - top: -1px; - } - - nav ul.first li:hover ul.second, - nav ul.second li:hover ul.third { - display: block; - } - - nav ul.second li a, - nav ul.third li a { - padding: 0.75em 1em; - } - - #article { - position: relative; - } - - #summary { - display: block; - position: absolute; - top: 0px; - left: 608px; - width: 342px; - } }