optimize css
This commit is contained in:
parent
9177380628
commit
5aef9acd95
|
@ -1,7 +1,7 @@
|
||||||
baseURL = 'https://hugodemo.hoogi.eu/'
|
baseURL = 'https://hugodemo.hoogi.eu/'
|
||||||
languageCode = "en-us"
|
languageCode = "en-us"
|
||||||
defaultContentLanguage = "en"
|
defaultContentLanguage = "en"
|
||||||
title = 'This is an example site'
|
title = 'Hugodemo'
|
||||||
theme = 'Hoogi'
|
theme = 'Hoogi'
|
||||||
|
|
||||||
pygmentsUseClasses = true
|
pygmentsUseClasses = true
|
||||||
|
@ -11,6 +11,7 @@ paginate = 4
|
||||||
relativeURLs = false
|
relativeURLs = false
|
||||||
|
|
||||||
[params]
|
[params]
|
||||||
|
mainSections = "posts"
|
||||||
useSummary = true
|
useSummary = true
|
||||||
sidebar = true
|
sidebar = true
|
||||||
description = 'An example description'
|
description = 'An example description'
|
||||||
|
|
|
@ -4,4 +4,4 @@
|
||||||
--link-visited-text-color: gray;
|
--link-visited-text-color: gray;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -2,7 +2,6 @@
|
||||||
<html {{ if .Lang }}lang="{{.Lang}}"{{ end }}>
|
<html {{ if .Lang }}lang="{{.Lang}}"{{ end }}>
|
||||||
<head>
|
<head>
|
||||||
{{- partialCached "head.html" . .Description .IsPage .Title }}
|
{{- partialCached "head.html" . .Description .IsPage .Title }}
|
||||||
|
|
||||||
{{- partial "head-custom.html" . -}}
|
{{- partial "head-custom.html" . -}}
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
|
|
|
@ -1,21 +1,25 @@
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
|
||||||
<meta charset="utf-8">
|
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
|
||||||
|
|
||||||
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}
|
<link rel="stylesheet" href="{{ "css/master.css" | relURL }}">
|
||||||
<meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{if .IsPage}}{{ .Summary }}{{ else }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ end }}{{ end }}">
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ "css/master.css" | relURL }}">
|
<link rel="stylesheet" href="{{ "css/light.css" | relURL }}" media="(prefers-color-scheme: light)">
|
||||||
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
|
<link rel="stylesheet" href="{{ "css/syntax-light.css" | relURL }}" media="(prefers-color-scheme: light)">
|
||||||
|
<link rel="stylesheet" href="{{ "css/dark.css" | relURL }}" media="(prefers-color-scheme: dark)">
|
||||||
|
<link rel="stylesheet" href="{{ "css/syntax-dark.css" | relURL }}" media="(prefers-color-scheme: dark)">
|
||||||
|
|
||||||
{{ if .OutputFormats.Get "RSS" }}
|
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
|
||||||
{{ with .OutputFormats.Get "RSS" }}
|
|
||||||
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
|
||||||
<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
|
||||||
{{ end }}
|
|
||||||
{{ end }}
|
|
||||||
|
|
||||||
{{ $title := print .Title " | " .Site.Title }}
|
{{ if .OutputFormats.Get "RSS" }}
|
||||||
|
{{ with .OutputFormats.Get "RSS" }}
|
||||||
|
<link href="{{ .RelPermalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
||||||
|
<link href="{{ .RelPermalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
||||||
|
{{ end }}
|
||||||
|
{{ end }}
|
||||||
|
|
||||||
<title>{{ $title }}</title>
|
{{ $title := print .Title " | " .Site.Title }}
|
||||||
</head>
|
|
||||||
|
<title>{{ $title }}</title>
|
|
@ -0,0 +1,24 @@
|
||||||
|
:root {
|
||||||
|
--body-bg-color: #000000;
|
||||||
|
--body-text-color: #ffffff;
|
||||||
|
|
||||||
|
--header-bg-color: #132d44;
|
||||||
|
--header-text-color: #fffaf0;
|
||||||
|
|
||||||
|
--nav-bg-color: #1f1f1f;
|
||||||
|
--nav-border-color: #132d44;
|
||||||
|
--nav-hover-bg-color: #000000;
|
||||||
|
--nav-hover-color: #ffffff;
|
||||||
|
|
||||||
|
--footer-bg-color: #1f1f1f;;
|
||||||
|
--footer-text-color: #ffffff;
|
||||||
|
--footer-active-link-color: #ffffff;
|
||||||
|
|
||||||
|
--article-box-bg-color: #1f1f1f;
|
||||||
|
--headline-text-color: #3a8cd3;
|
||||||
|
|
||||||
|
--link-text-color: #8ab4f8;
|
||||||
|
--link-visited-text-color: #c58af9;
|
||||||
|
--code-text-color: #ffffff;
|
||||||
|
--code-bg-color: #1f1f1f;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
:root {
|
||||||
|
--body-bg-color: #ffffff;
|
||||||
|
--body-text-color: #000000;
|
||||||
|
|
||||||
|
--header-bg-color: #285e8e;
|
||||||
|
--header-text-color: #fffaf0;
|
||||||
|
|
||||||
|
--nav-bg-color: #1f1f1f;
|
||||||
|
--nav-text-color: #ffffff;
|
||||||
|
--nav-hover-bg-color: #fffaf0;
|
||||||
|
--nav-border-color: #285e8e;
|
||||||
|
--nav-hover-color: #285e8e;
|
||||||
|
|
||||||
|
--footer-bg-color: #1f1f1f;;
|
||||||
|
--footer-text-color: #ffffff;
|
||||||
|
--footer-active-link-color: #ffffff;
|
||||||
|
|
||||||
|
--headline-text-color: #285e8e;
|
||||||
|
--article-box-bg-color: #f8f8f8;
|
||||||
|
|
||||||
|
--link-text-color: #285e8e;
|
||||||
|
--link-visited-text-color: #c58af9;
|
||||||
|
--code-text-color: #000000;
|
||||||
|
--code-bg-color: #f8f8f8;
|
||||||
|
}
|
|
@ -1,117 +1,56 @@
|
||||||
/* Import syntax themes */
|
|
||||||
@import "syntax-light.css" screen;
|
|
||||||
@import "syntax-dark.css" screen and (prefers-color-scheme: dark);
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
*:before,
|
*::before,
|
||||||
*:after {
|
*::after {
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'rubik';
|
font-family: rubik;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
src: url("fonts/Rubik-Regular.woff2") format("woff2");
|
src: url("fonts/Rubik-Regular.woff2") format("woff2");
|
||||||
font-display: swap
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'rubik';
|
font-family: rubik;
|
||||||
src: url("fonts/Rubik-Bold.woff2") format("woff2");
|
src: url("fonts/Rubik-Bold.woff2") format("woff2");
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-display: swap
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'rubik';
|
font-family: rubik;
|
||||||
src: url("fonts/Rubik-Italic.woff2") format("woff2");
|
src: url("fonts/Rubik-Italic.woff2") format("woff2");
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'rubik';
|
font-family: rubik;
|
||||||
src: url("fonts/Rubik-BoldItalic.woff2") format("woff2");
|
src: url("fonts/Rubik-BoldItalic.woff2") format("woff2");
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
font-display: swap
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: "rubik", Helvetica, Arial, sans-serif;
|
font-family: rubik, Helvetica, Arial, sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
background-color: var(--body-bg-color);
|
background-color: var(--body-bg-color);
|
||||||
color: var(--body-text-color);
|
color: var(--body-text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
--body-bg-color: #ffffff;
|
|
||||||
--body-text-color: #000000;
|
|
||||||
|
|
||||||
--header-bg-color: #285e8e;
|
|
||||||
--header-text-color: #fffaf0;
|
|
||||||
|
|
||||||
--nav-bg-color: #1f1f1f;
|
|
||||||
--nav-text-color: #ffffff;
|
|
||||||
--nav-hover-bg-color: #fffaf0;
|
|
||||||
--nav-border-color: #285e8e;
|
|
||||||
--nav-hover-color: #285e8e;
|
|
||||||
|
|
||||||
--footer-bg-color: #1f1f1f;;
|
|
||||||
--footer-text-color: #ffffff;
|
|
||||||
--footer-active-link-color: #ffffff;
|
|
||||||
|
|
||||||
--headline-text-color: #285e8e;
|
|
||||||
--article-box-bg-color: #f8f8f8;
|
|
||||||
|
|
||||||
--link-text-color: #285e8e;
|
|
||||||
--link-visited-text-color: #c58af9;
|
|
||||||
--code-text-color: #000000;
|
|
||||||
--code-bg-color: #f8f8f8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--body-bg-color: #000000;
|
|
||||||
--body-text-color: #ffffff;
|
|
||||||
|
|
||||||
--header-bg-color: #132d44;
|
|
||||||
--header-text-color: #fffaf0;
|
|
||||||
|
|
||||||
--nav-bg-color: #1f1f1f;
|
|
||||||
--nav-border-color: #132d44;
|
|
||||||
--nav-hover-bg-color: #000000;
|
|
||||||
--nav-hover-color: #ffffff;
|
|
||||||
|
|
||||||
--footer-bg-color: #1f1f1f;;
|
|
||||||
--footer-text-color: #ffffff;
|
|
||||||
--footer-active-link-color: #ffffff;
|
|
||||||
|
|
||||||
--article-box-bg-color: #1f1f1f;
|
|
||||||
--headline-text-color: #3a8cd3;
|
|
||||||
|
|
||||||
--link-text-color: #8ab4f8;
|
|
||||||
--link-visited-text-color: #c58af9;
|
|
||||||
--code-text-color: #ffffff;
|
|
||||||
--code-bg-color: #1f1f1f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#container {
|
#container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-rows: 80px 1fr 30px;
|
grid-template-rows: 80px 1fr 40px;
|
||||||
grid-template-columns: minmax(150px, 20%) 30% 35% minmax(100px, 15%);
|
grid-template-columns: minmax(150px, 20%) 30% 35% minmax(100px, 15%);
|
||||||
grid-template-areas:
|
grid-template-areas:
|
||||||
"header header header header"
|
"header header header header"
|
||||||
|
@ -133,7 +72,12 @@ body {
|
||||||
* General styles
|
* General styles
|
||||||
*/
|
*/
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
color: var(--headline-text-color);
|
color: var(--headline-text-color);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
@ -200,7 +144,6 @@ header#page-header {
|
||||||
/**
|
/**
|
||||||
* Navigation styles left and right side
|
* Navigation styles left and right side
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#container > aside ul li:first-child {
|
#container > aside ul li:first-child {
|
||||||
padding: 1rem 0.5rem;
|
padding: 1rem 0.5rem;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
|
@ -242,17 +185,14 @@ header#page-header {
|
||||||
*/
|
*/
|
||||||
#container > footer {
|
#container > footer {
|
||||||
grid-area: footer;
|
grid-area: footer;
|
||||||
|
display: inline-grid;
|
||||||
background-color: var(--footer-bg-color);
|
background-color: var(--footer-bg-color);
|
||||||
color: var(--footer-text-color);
|
color: var(--footer-text-color);
|
||||||
text-align: center;
|
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#container > footer p {
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-left: 5px;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
#container > footer ul {
|
#container > footer ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
@ -260,8 +200,7 @@ header#page-header {
|
||||||
|
|
||||||
#container > footer ul li {
|
#container > footer ul li {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
list-style-type: none;
|
margin-right: 0.8em;
|
||||||
padding: 5px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#container > footer a,
|
#container > footer a,
|
||||||
|
@ -273,7 +212,7 @@ header#page-header {
|
||||||
|
|
||||||
#container > footer a:active,
|
#container > footer a:active,
|
||||||
#container > footer a:hover,
|
#container > footer a:hover,
|
||||||
#container > ooter a:active,
|
#container > footer a:active,
|
||||||
#container > footer a.active {
|
#container > footer a.active {
|
||||||
color: var(--footer-active-link-color);
|
color: var(--footer-active-link-color);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -284,13 +223,40 @@ header#page-header {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#pagination {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 2em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pagination .pages {
|
||||||
|
padding: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pagination ul li {
|
||||||
|
display: inline;
|
||||||
|
margin-right: 0.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pagination ul li a {
|
||||||
|
font-size: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#index .menu {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#index .submenu {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0.4em 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
white-space: pre;
|
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
white-space: -moz-pre-wrap;
|
|
||||||
white-space: -o-pre-wrap;
|
|
||||||
border: 1px solid grey;
|
border: 1px solid grey;
|
||||||
background-color: var(--code-bg-color);
|
background-color: var(--code-bg-color);
|
||||||
color: var(--code-text-color);
|
color: var(--code-text-color);
|
||||||
|
@ -350,7 +316,6 @@ article header ul.categories li {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
article h1,
|
article h1,
|
||||||
article h2,
|
article h2,
|
||||||
article h3,
|
article h3,
|
||||||
|
@ -458,35 +423,6 @@ article footer div.read-more {
|
||||||
background-color: var(--article-box-bg-color);
|
background-color: var(--article-box-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#pagination {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pagination .pages {
|
|
||||||
padding: 1em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pagination ul li {
|
|
||||||
display: inline;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pagination ul li a {
|
|
||||||
display: inline;
|
|
||||||
font-size: 1.3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#index .menu {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#index .submenu {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0.4em 0.8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#index .submenu-item {
|
#index .submenu-item {
|
||||||
margin-bottom: 0.625rem;
|
margin-bottom: 0.625rem;
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
@ -507,8 +443,7 @@ article footer div.read-more {
|
||||||
"nav"
|
"nav"
|
||||||
"content"
|
"content"
|
||||||
"sidebar"
|
"sidebar"
|
||||||
"footer"
|
"footer";
|
||||||
;
|
|
||||||
|
|
||||||
grid-template-columns: 100%;
|
grid-template-columns: 100%;
|
||||||
grid-template-rows:
|
grid-template-rows:
|
||||||
|
@ -516,8 +451,7 @@ article footer div.read-more {
|
||||||
min-content
|
min-content
|
||||||
min-content
|
min-content
|
||||||
min-content
|
min-content
|
||||||
40px
|
40px;
|
||||||
;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#container > main {
|
#container > main {
|
||||||
|
|
Loading…
Reference in New Issue