diff options
author | serg <contact@sergfurtak.com> | 2020-11-15 16:17:06 +0300 |
---|---|---|
committer | Sergey Furtak <contact@sergfurtak.com> | 2020-11-17 00:37:45 +0300 |
commit | 5a6584e6ef37467903eedf9f73c595148a930882 (patch) | |
tree | 711effb956bc081645485167bee46dc16b78c429 /layouts | |
parent | c5ffd48c4e17c16931169bf599eb1fb207f97e73 (diff) |
extract styles from layout into separate sass modules
Diffstat (limited to 'layouts')
-rw-r--r-- | layouts/404.html | 47 | ||||
-rw-r--r-- | layouts/partials/funcs/GetCSS.html | 14 | ||||
-rw-r--r-- | layouts/partials/head-includes.html | 339 |
3 files changed, 24 insertions, 376 deletions
diff --git a/layouts/404.html b/layouts/404.html index c9c8caf..854bb3a 100644 --- a/layouts/404.html +++ b/layouts/404.html @@ -1,52 +1,11 @@ {{- define "page-class" -}}error404{{- end -}} {{- define "head-includes" -}} {{- partialCached "head-includes.html" . -}} + {{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/404.scss" "enableSourceMap" false)}} <style> - .error404 { - height: 100%; } - .error404 body, .error404 .main-container, .error404 .header, .error404 .container, .error404 .padder { - height: 100%; } - .error404 .header { - overflow: hidden; } - - .error404 .main-description { - height: 100%; } - .error404 .main-description h1 { - padding-bottom: 0.370em; } - .error404 .main-description p { - display: inline; - font-size: 2em; - font-weight: 600; - color: #989898; } - .error404 .main-description .img-col { - display: none; } - - @media screen and (max-height: 25em) { - .error404 .main-description h1 { - font-size: 4em; - padding-top: 1.3em; } } - - @media screen and (min-width: 56.25em), (min-height: 52.5625em) and (min-width: 56.25em) { - .error404 .main-description p { - display: block; } - .error404 .main-description .img-col { - display: block; - position: absolute; - bottom: 0; - right: 0; - width: 47%; } - .error404 .main-description img { - position: static; - display: inline; - max-width: none; - max-height: 75em; - bottom: 9.1em; - z-index: -1; } } - - @media screen and (max-height: 52.5625em) and (min-width: 56.25em) { - .error404 .main-description img { - bottom: 0; } } + {{.Content | safeCSS}} </style> + {{end}} {{- end -}} {{- define "main" -}} <div class="main-container"> diff --git a/layouts/partials/funcs/GetCSS.html b/layouts/partials/funcs/GetCSS.html new file mode 100644 index 0000000..bcbb7a1 --- /dev/null +++ b/layouts/partials/funcs/GetCSS.html @@ -0,0 +1,14 @@ +{{$isProduction := hugo.IsProduction}} +{{$sassOptions := dict "enableSourceMap" (.enableSourceMap | default (not $isProduction))}} + +{{with .outputPath}} + {{$sassOptions = merge $sassOptions (dict "targetPath" .)}} +{{end}} + +{{$css := resources.Get .sourcePath | toCSS $sassOptions}} + +{{if $isProduction}} + {{$css = $css | minify | fingerprint}} +{{end}} + +{{return $css}}
\ No newline at end of file diff --git a/layouts/partials/head-includes.html b/layouts/partials/head-includes.html index 9058b6e..c2be4eb 100644 --- a/layouts/partials/head-includes.html +++ b/layouts/partials/head-includes.html @@ -1,339 +1,14 @@ +{{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/critical.scss" "enableSourceMap" false)}} <style> - a, - body, - div, - h1, - html, - img, - li, - span, - ul, - p { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - - body { - line-height: 1; } - - ul { - list-style: none; } - - @font-face { - font-family: 'Open Sans'; - font-weight: 600; - font-style: normal; - src: url("//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot"); - src: url("//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSnZ2MAKAc2x4R1uOSeegc5U.eot?#iefix") format("embedded-opentype"), url("//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2") format("woff2"), url("//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff") format("woff"), url("//fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSonF5uFdDttMLvmWuJdhhgs.ttf") format("truetype"), url("//fonts.gstatic.com/l/font?kit=MTP_ySUJH_bn48VBG8sNSllIn5tFQcqMuf-jhyJP0ps&skey=a162967ffaa5aa08&v=v13#OpenSans") format("svg"); } - - @font-face { - font-family: 'Open Sans'; - font-weight: 700; - font-style: normal; - src: url("//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot"); - src: url("//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzHZ2MAKAc2x4R1uOSeegc5U.eot?#iefix") format("embedded-opentype"), local("Open Sans Bold"), local("Open-Sans-700"), url("//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2") format("woff2"), url("//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff") format("woff"), url("//fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzInF5uFdDttMLvmWuJdhhgs.ttf") format("truetype"), url("//fonts.gstatic.com/l/font?kit=k3k702ZOKiLJc3WVjuplzFlIn5tFQcqMuf-jhyJP0ps&skey=cd9e1a36bb25a3c3&v=v13#OpenSans") format("svg"); } - - @font-face { - font-family: 'Open Sans'; - font-weight: 400; - font-style: normal; - src: url('//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot'); - src: url('//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot?#iefix') format('embedded-opentype'), local('Open Sans'), local('Open-Sans-regular'), url('//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2') format('woff2'), url('//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff'), url('//fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3aCWcynf_cDxXwCLxiixG1c.ttf') format('truetype'), url('//fonts.gstatic.com/l/font?kit=cJZKeOuBrn4kERxqtaUH3Zbd9NUM7myrQQz30yPaGQ4&skey=62c1cbfccc78b4b2&v=v13#OpenSans') format('svg'); } - - body { - font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 50%; - line-height: 1.5; - background: white; - color: #2f2f2f; } - - .main-container { - font-size: 125%; } - .main-container a { - color: #989898; - text-decoration: none; } - .main-container a:hover { - color: #2f2f2f; } - .main-container .blue-text { - color: #224afa; } - .main-container a.blue-text:hover { - color: #1538d1; } - - .padder { - padding-left: 2em; - padding-right: 2em; } - - .nav-container, .header { - background: #f1f1f1; } - - .navbar { - position: relative; - z-index: 5; - height: 7.1em; - max-height: 7.1em; - padding-top: 2em; } - - .logo { - float: left; } - .logo:before { - display: inline-block; - vertical-align: middle; - content: ''; - height: 100%; - width: 0px; } - .logo img { - vertical-align: middle; } - - .links { - visibility: hidden; - opacity: 0; - position: absolute; - top: 100%; - right: -2em; - left: -2em; - padding: 1em 0; - background: #f1f1f1; - text-align: center; - -webkit-box-shadow: 0 5px 7px 0 rgba(1,1,1,.1); - box-shadow: 0 5px 7px 0 rgba(1,1,1,.1); - -webkit-transition: opacity .4s; - -o-transition: opacity .4s; - transition: opacity .4s; } - .links li { - padding: 0.5em 0; } - .links .active a { - color: #2f2f2f; } - .links a { - font-size: 1.8em; - font-weight: 600; - -webkit-transition: all 500ms; - -moz-transition: all 500ms; - -ms-transition: all 500ms; - -o-transition: all 500ms; - transition: all 500ms; } - - .break-word { - overflow-wrap: break-word; - word-wrap: break-word; - -ms-word-break: break-all; - word-break: break-word; - -ms-hyphens: auto; - -moz-hyphens: auto; - -webkit-hyphens: auto; - hyphens: auto; } - - .main-description { - position: relative; } - .main-description h1 { - position: relative; - font-size: 4em; - font-weight: bold; - line-height: 1.15; - padding-top: 1.3em; - padding-bottom: 1.3em; - z-index: 1; } - .main-description img { - position: absolute; - bottom: 0; - display: block; - max-width: 100%; - height: auto; } - - .categories .category { - margin-top: 3em; } - - .categories .category.line { - margin: 0; } - - .categories .name { - font-size: 1.6em; - font-weight: bold; - text-transform: uppercase; - margin-bottom: 0.472em; } - - .categories .description { - font-size: 1.8em; - font-weight: 600; - color: #989898; } - - .default-text { - color: #2f2f2f; } - - .bold-text { - font-weight: bold; } - - .transparent { - opacity: 0; } - - .animated { - -webkit-animation-duration: 1s; - animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; } - - @-webkit-keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } - - @keyframes slideInDown { - from { - -webkit-transform: translate3d(0, -100%, 0); - transform: translate3d(0, -100%, 0); - visibility: visible; } - to { - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } } - - .slideInDown { - -webkit-animation-duration: 1.3s; - animation-duration: 1.3s; - -webkit-animation-name: slideInDown; - animation-name: slideInDown; } - - @-webkit-keyframes fadeIn { - 0% { - opacity: 0; } - 40% { - opacity: 0; } - 100% { - opacity: 1; } } - - @keyframes fadeIn { - 0% { - opacity: 0; } - 40% { - opacity: 0; } - 100% { - opacity: 1; } } - - .fadeIn { - -webkit-animation-timing-function: linear; - animation-timing-function: linear; - -webkit-animation-name: fadeIn; - animation-name: fadeIn; } - - @media only screen and (min-width: 22.5625em) { - .main-description h1 { - font-size: 4.6em; - padding-top: 1.923em; - padding-bottom: 1.923em; } - .categories .category { - margin-top: 5em; } - .categories .name { - margin-bottom: 0.625em; } } - - @media only screen and (min-width: 33.5625em) { - .main-description h1 { - font-size: 5.2em; } } - - @media only screen and (min-width: 46.3125em) { - .links { - visibility: visible; - opacity: 1; - position: static; - float: right; - width: auto; - padding: 0; - height: 100%; - -webkit-box-shadow: none; - box-shadow: none; } - .links:before { - display: inline-block; - vertical-align: middle; - content: ''; - height: 100%; - width: 0px; } - .links li { - display: inline-block; - width: auto; - margin-left: 4em; - vertical-align: middle; } - .burger-wrap { - display: none; - } - .showBurger .burger-wrap { - display: block; - } - .showBurger .links { - visibility: hidden; - opacity: 0; - position: absolute; - float: none; - height: auto; - padding: 1em 0; - -webkit-box-shadow: 0 5px 7px 0 rgba(1, 1, 1, .1); - box-shadow: 0 5px 7px 0 rgba(1, 1, 1, .1); - } - .showBurger .links:before { - display: none; - } - .showBurger .links > li { - display: list-item; - margin: 0; - } - .main-description h1 { - font-size: 5.4em; - line-height: 1.1428; - padding-top: 2.3148em; - padding-bottom: 2.3148em; } - .categories .category, .categories .name, .categories .description { - float: left; } - .categories .category { - width: 100%; } - .categories .name { - width: 30%; - margin-bottom: 0; } - .categories .description { - width: 70%; } - .projects { - margin-top: 10em; } - .clearfix:after { - content: ""; - display: block; - clear: both; } } - - @media only screen and (min-width: 58.5em) { - .main-description h1 { - padding-bottom: 3.907em; } - .categories .category { - margin-top: 7.5em; } - .categories .name { - width: 42.47787%; } - .categories .description { - width: 57.52213%; } } - - @media only screen and (min-width: 73.125em) { - .main-container { - overflow-x: hidden; - } - .container { - max-width: 117em; - margin: 0 auto; } - .showBurger .links { - left: -100%; - right: -100%; } - } + {{.Content | safeCSS}} </style> +{{end}} +{{with partial "funcs/GetCSS.html" (dict "sourcePath" "scss/app.scss" "outputPath" "css/app.css")}} <noscript id="deferredCss"> - {{$isProduction := hugo.IsProduction | or (eq .Site.Params.env "production")}} - {{$sassOptions := dict "targetPath" "css/app.css" "enableSourceMap" (not $isProduction)}} - - {{$css := resources.Get "scss/app.scss" | toCSS $sassOptions}} - - {{if $isProduction}} - {{$css = $css | minify | fingerprint}} - {{end}} - <link rel="stylesheet" href="{{$css.RelPermalink}}"> + <link rel="stylesheet" href="{{.RelPermalink}}"> </noscript> +{{end}} <script> document.createElement("picture"); </script> -<script src="https://cdn.jsdelivr.net/picturefill/3.0.2/picturefill.min.js" async></script> +<script src="https://cdn.jsdelivr.net/picturefill/3.0.2/picturefill.min.js" async></script>
\ No newline at end of file |