From 11632cc94b9c527872a4b0c146a7fe92dc3f804b Mon Sep 17 00:00:00 2001 From: Alexis Tacnet Date: Tue, 18 Apr 2017 20:50:08 +0200 Subject: [PATCH] Separate media queries in css files and add inline css --- layouts/partials/footer_scripts.html | 5 - layouts/partials/head_includes.html | 16 +- .../partials}/highlight.min.css | 0 .../partials}/progressively.min.css | 0 static/css/main.v1.0.0.css | 174 ------------------ static/css/min600px.v1.0.0.css | 145 +++++++++++++++ static/css/min769px.v1.0.0.css | 9 + 7 files changed, 167 insertions(+), 182 deletions(-) rename {static/css => layouts/partials}/highlight.min.css (100%) rename {static/css => layouts/partials}/progressively.min.css (100%) create mode 100644 static/css/min600px.v1.0.0.css create mode 100644 static/css/min769px.v1.0.0.css diff --git a/layouts/partials/footer_scripts.html b/layouts/partials/footer_scripts.html index aab9d08..a868a01 100644 --- a/layouts/partials/footer_scripts.html +++ b/layouts/partials/footer_scripts.html @@ -21,8 +21,3 @@ {{ end }} }; - - - - - diff --git a/layouts/partials/head_includes.html b/layouts/partials/head_includes.html index 4ba31bc..a78ce5f 100644 --- a/layouts/partials/head_includes.html +++ b/layouts/partials/head_includes.html @@ -1,13 +1,23 @@ - + + + + + + + {{ if .Site.Params.highlightjs }} - + {{ end }} {{ if .Site.Params.progressively }} - + {{ end }} {{ range .Site.Params.extracssfiles }} diff --git a/static/css/highlight.min.css b/layouts/partials/highlight.min.css similarity index 100% rename from static/css/highlight.min.css rename to layouts/partials/highlight.min.css diff --git a/static/css/progressively.min.css b/layouts/partials/progressively.min.css similarity index 100% rename from static/css/progressively.min.css rename to layouts/partials/progressively.min.css diff --git a/static/css/main.v1.0.0.css b/static/css/main.v1.0.0.css index e61489c..12d1d6b 100644 --- a/static/css/main.v1.0.0.css +++ b/static/css/main.v1.0.0.css @@ -88,17 +88,6 @@ body { line-height: 1.6; text-rendering: optimizeLegibility !important; } -@media (min-width: 600px) { - body { - -webkit-justify-content: center; - -moz-justify-content: center; - -ms-justify-content: center; - justify-content: center; - } - .non-narrow.zero-top-spacing { - padding-top: 0 !important; - } -} .icon { text-rendering: geometricPrecision !important; } @@ -126,14 +115,6 @@ section { display: flex; width: 100%; } -@media (min-width: 600px) { - section { - padding: 0 16px; - margin-left: 100px; - margin-right: 100px; - max-width: 750px; - } -} section.header .container { -webkit-align-items: center; -moz-align-items: center; @@ -211,53 +192,6 @@ section.header nav ul li { section.header nav ul li:hover { color: #111111; } -@media (min-width: 600px) { - section.header { - background-color: transparent; - } - section.header .container { - -webkit-justify-content: flex-start; - -moz-justify-content: flex-start; - -ms-justify-content: flex-start; - justify-content: flex-start; - } - section.header .container .logo { - margin: 0; - } - section.header-home .container .logo { - max-width: 180px; - margin-left: 20px; - } - section.header-home .name-home { - padding-top: 30px; - font-size: 40px; - } - section.header-home nav ul li { - font-size: 18px; - } - section.header .content { - -webkit-align-items: flex-start; - -moz-align-items: flex-start; - -ms-align-items: flex-start; - align-items: flex-start; - } - section.header .name { - color: #333333; - } - section.header nav { - font-size: 14px; - margin-bottom: 0; - } - section.header nav ul { - text-align: left; - } - section.header nav ul li { - color: #666666; - } - section.header nav ul li:hover { - color: #333333; - } -} section.footer .container { -webkit-align-items: center; -moz-align-items: center; @@ -302,28 +236,6 @@ section.footer .container .icons { flex-grow: 0.5; text-align: end; } -@media (min-width: 600px) { - section.footer { - background-color: transparent; - } - section.footer .container { - flex-direction: row; - } - section.footer .container a { - margin-left: 3px; - margin-right: 3px; - color: #666666; - } - section.footer .container a:hover { - color: #333333; - } - section.footer .container a .icon { - font-size: 18px; - } - section.footer .container a .icon.larger { - font-size: 20px; - } -} section.main .container { -webkit-align-items: center; -moz-align-items: center; @@ -420,15 +332,6 @@ section.main .content .front-matter .tags ul li:hover { section.main .content .front-matter .tags ul li a { color: #666666; } -@media (min-width: 600px) { - section.main .content .front-matter .date, - section.main .content .front-matter .author, - section.main .content .front-matter .tags, - section.main .content .front-matter .word-count, - section.main .content .front-matter .reading-time .middot { - display: initial; - } -} section.main .container.f04 { -webkit-justify-content: center; -moz-justify-content: center; @@ -459,27 +362,6 @@ section.main .container.f04 .content .num { section.main .container.f04 .content .detail { margin-bottom: 40px; } -@media (min-width: 600px) { - section.main .container.f04 { - -webkit-justify-content: flex-start; - -moz-justify-content: flex-start; - -ms-justify-content: flex-start; - justify-content: flex-start; - } - section.main .container.f04 .content { - -webkit-align-items: flex-start; - -moz-align-items: flex-start; - -ms-align-items: flex-start; - align-items: flex-start; - } - section.main .container.f04 .content .num { - margin: 0 0 10px 0; - font-size: 32px; - } - section.main .container.f04 .content .detail { - margin-bottom: 30px; - } -} section.main .container .content .groupby { margin-top: 1em; padding-left: 0.5em; @@ -532,34 +414,6 @@ section.main .container .content .post-item { display: flex; list-style: none; } -@media (min-width: 600px) { - .container { - padding: 0 30px; - } - section.header { - padding-top: 60px; - padding-bottom: 60px; - } - section.footer { - padding-top: 30px; - padding-bottom: 60px; - } - section.main { - padding-top: 0; - } - section.main .container .content .post-item { - display: flex; - list-style: none; - padding-left: 1.5em; - } - section.main .container .content .post-item .meta { - display: block; - } - section.main.post { - padding-top: 60px; - padding-bottom: 60px; - } -} a { color: #428bca; -webkit-transition: color 0.1s cubic-bezier(0.47, 0, 0.75, 0.72); @@ -719,12 +573,6 @@ section.main .content .markdown blockquote { section.main .content .markdown blockquote p:last-child { margin-bottom: 0; } -@media (min-width: 550px) { - section.main .content .markdown blockquote { - padding-right: 5rem; - padding-left: 1.25rem; - } -} section.main .content .markdown figure { width: 100%; background: #fff; @@ -738,17 +586,6 @@ section.main .content .markdown figure img { position: static; margin: auto; } -@media (min-width: 769px) { - section.main .content .markdown figure { - width: 110%; - margin-left: -4%; - } - section.main .content .markdown img { - max-width: 110%; - width: 110%; - margin-left: -4%; - } -} section.main .content .markdown table { margin-bottom: 1rem; width: 100%; @@ -815,15 +652,4 @@ section.main .content .navigation a { text-align: center; font-style: italic; color: #313537; -} -@media (min-width: 570px) { - section.main .content .navigation { - -webkit-flex-direction: row; - -moz-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } - section.main .content .navigation div { - margin-top: 0em; - } } \ No newline at end of file diff --git a/static/css/min600px.v1.0.0.css b/static/css/min600px.v1.0.0.css new file mode 100644 index 0000000..4a69a77 --- /dev/null +++ b/static/css/min600px.v1.0.0.css @@ -0,0 +1,145 @@ +body { +-webkit-justify-content: center; +-moz-justify-content: center; +-ms-justify-content: center; +justify-content: center; +} +.non-narrow.zero-top-spacing { +padding-top: 0 !important; +} +section { +padding: 0 16px; +margin-left: 100px; +margin-right: 100px; +max-width: 750px; +} +section.header { +background-color: transparent; +} +section.header .container { +-webkit-justify-content: flex-start; +-moz-justify-content: flex-start; +-ms-justify-content: flex-start; +justify-content: flex-start; +} +section.header .container .logo { +margin: 0; +} +section.header-home .container .logo { +max-width: 180px; +margin-left: 20px; +} +section.header-home .name-home { +padding-top: 30px; +font-size: 40px; +} +section.header-home nav ul li { +font-size: 18px; +} +section.header .content { +-webkit-align-items: flex-start; +-moz-align-items: flex-start; +-ms-align-items: flex-start; +align-items: flex-start; +} +section.header .name { +color: #333333; +} +section.header nav { +font-size: 14px; +margin-bottom: 0; +} +section.header nav ul { +text-align: left; +} +section.header nav ul li { +color: #666666; +} +section.header nav ul li:hover { +color: #333333; +} +section.footer { +background-color: transparent; +} +section.footer .container { +flex-direction: row; +} +section.footer .container a { +margin-left: 3px; +margin-right: 3px; +color: #666666; +} +section.footer .container a:hover { +color: #333333; +} +section.footer .container a .icon { +font-size: 18px; +} +section.footer .container a .icon.larger { +font-size: 20px; +} +section.main .content .front-matter .date, +section.main .content .front-matter .author, +section.main .content .front-matter .tags, +section.main .content .front-matter .word-count, +section.main .content .front-matter .reading-time .middot { +display: initial; +} +section.main .container.f04 { +-webkit-justify-content: flex-start; +-moz-justify-content: flex-start; +-ms-justify-content: flex-start; +justify-content: flex-start; +} +section.main .container.f04 .content { +-webkit-align-items: flex-start; +-moz-align-items: flex-start; +-ms-align-items: flex-start; +align-items: flex-start; +} +section.main .container.f04 .content .num { +margin: 0 0 10px 0; +font-size: 32px; +} +section.main .container.f04 .content .detail { +margin-bottom: 30px; +} +.container { +padding: 0 30px; +} +section.header { +padding-top: 60px; +padding-bottom: 60px; +} +section.footer { +padding-top: 30px; +padding-bottom: 60px; +} +section.main { +padding-top: 0; +} +section.main .container .content .post-item { +display: flex; +list-style: none; +padding-left: 1.5em; +} +section.main .container .content .post-item .meta { +display: block; +} +section.main.post { +padding-top: 60px; +padding-bottom: 60px; +} +section.main .content .markdown blockquote { +padding-right: 5rem; +padding-left: 1.25rem; +} +section.main .content .navigation { +-webkit-flex-direction: row; +-moz-flex-direction: row; +-ms-flex-direction: row; +flex-direction: row; +} +section.main .content .navigation div { +margin-top: 0em; +} \ No newline at end of file diff --git a/static/css/min769px.v1.0.0.css b/static/css/min769px.v1.0.0.css new file mode 100644 index 0000000..77b9031 --- /dev/null +++ b/static/css/min769px.v1.0.0.css @@ -0,0 +1,9 @@ +section.main .content .markdown figure { +width: 110%; +margin-left: -4%; +} +section.main .content .markdown img { +max-width: 110%; +width: 110%; +margin-left: -4%; +} \ No newline at end of file