optimization for css structure
This commit is contained in:
parent
a87c82115e
commit
9e89b11bca
|
@ -1,7 +1,7 @@
|
|||
<style>
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--link-visited-text-color: gray;
|
||||
--header-text-color: gray;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
{{ define "main" }}
|
||||
<article>
|
||||
<div id="index">
|
||||
<article class="article">
|
||||
<div class="index">
|
||||
<h1>Index</h1>
|
||||
|
||||
<ul>
|
||||
{{ with .Site.GetPage "section" "posts" }}
|
||||
{{ range .Data.Pages.GroupByDate "2006-01" }}
|
||||
<li class="year">
|
||||
<li class="index__year">
|
||||
<h4>{{.Key}}</h4>
|
||||
</li>
|
||||
|
||||
<ul class="submenu">
|
||||
<ul class="index__submenu">
|
||||
{{ range .Pages }}
|
||||
<li class="submenu-item">
|
||||
<li class="index__submenu-item">
|
||||
<a href="{{.Permalink}}"><time>{{ .Date.Format "Jan 2, 2006" }}</time> | {{.Title}}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div class="container">
|
||||
|
||||
{{ if hugo.IsProduction }}
|
||||
{{- partialCached "header.html" . }}
|
||||
|
@ -20,19 +20,17 @@
|
|||
{{- partial "nav.html" . }}
|
||||
{{end}}
|
||||
|
||||
<main>
|
||||
<main class="page-content">
|
||||
{{- block "main" . }}{{- end }}
|
||||
</main>
|
||||
|
||||
{{ if and .Site.Taxonomies "categories" .Site.Params.sidebar }}
|
||||
{{ if not (eq (len .Site.Taxonomies.categories) 0) }}
|
||||
<aside>
|
||||
{{ if hugo.IsProduction }}
|
||||
{{- partialCached "aside.html" . .Title }}
|
||||
{{else}}
|
||||
{{- partial "aside.html" . }}
|
||||
{{end}}
|
||||
</aside>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
{{ define "main" }}
|
||||
{{ range .Paginator.Pages }}
|
||||
{{ .Scratch.Set "scope" "list" }}
|
||||
<article>
|
||||
<article class="article">
|
||||
{{ partial "article-header.html" . }}
|
||||
|
||||
{{ if .Site.Params.useSummary }}
|
||||
{{ .Summary }}
|
||||
<div class="article__content">
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
{{ partial "article-footer.html" . }}
|
||||
{{ else }}
|
||||
{{.Content}}
|
||||
<div class="article__content">
|
||||
{{.Content}}
|
||||
</div>
|
||||
|
||||
{{ partial "article-footer.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
{{ define "main" }}
|
||||
|
||||
<article>
|
||||
<article class="article">
|
||||
<h1>{{.Title}}</h1>
|
||||
|
||||
{{ .Content }}
|
||||
<div class="article__content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
|
@ -1,5 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<article>
|
||||
<article class="article">
|
||||
<h1>{{ .Title }}</h1>
|
||||
{{ range .Data.Terms.Alphabetical }}
|
||||
<ul>
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
{{ define "main" }}
|
||||
<article>
|
||||
{{ .Content }}
|
||||
<article class="article">
|
||||
<div class="article__content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
|
@ -1,12 +1,16 @@
|
|||
<footer>
|
||||
<footer class="article-footer">
|
||||
{{ if .Site.Params.useSummary }}
|
||||
<div class="read-more"><a href='{{ .Permalink }}'>{{ T "read_more" }}</a></div>
|
||||
<div class="article-footer__read-more">
|
||||
<a href='{{ .Permalink }}'>{{ T "read_more" }}</a>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Params.tags }}
|
||||
<ul class="tags">
|
||||
<ul class="article-footer__tags">
|
||||
{{ range .Params.tags }}
|
||||
<li><a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">#{{ . }}</a></li>
|
||||
<li class="article-footer__tag">
|
||||
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}">#{{ . }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{end}}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
<header>
|
||||
<header class="article-header">
|
||||
<h1>
|
||||
{{ if eq (.Scratch.Get "scope") "single" }}
|
||||
{{.Title}}
|
||||
|
@ -7,16 +7,16 @@
|
|||
{{ end }}
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
{{ T "written_on" }} <time>{{ .Date.Format "Jan 2, 2006" }}</time> {{ if .Params.Author }}{{ T "written_by" }} {{ .Params.Author }}{{ end }}
|
||||
</p>
|
||||
<div class="article-header__meta">
|
||||
<p class="article-header__meta__paragraph">
|
||||
{{ T "written_on" }} <time>{{ .Date.Format "Jan 2, 2006" }}</time> {{ if .Params.Author }}{{ T "written_by" }} {{ .Params.Author }}{{ end }}
|
||||
|
||||
<ul class="categories">
|
||||
{{ if .Params.categories }}
|
||||
{{ T "category_in" }}
|
||||
{{ range .Params.categories }}
|
||||
<li><a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}">{{ . | humanize }}</a></li>
|
||||
{{ if .Params.categories }}
|
||||
{{ T "category_in" }}
|
||||
{{ range .Params.categories }}
|
||||
<a href="{{ $.Site.BaseURL }}categories/{{ . | urlize }}">{{ . | humanize }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
|
@ -1,13 +1,15 @@
|
|||
<ul>
|
||||
{{ $current := . }}
|
||||
<aside class="page-aside-nav">
|
||||
<ul>
|
||||
{{ $current := . }}
|
||||
|
||||
<li>{{ T "categories" }}</li>
|
||||
<li class="nav-item nav-title">{{ T "categories" }}</li>
|
||||
|
||||
{{ range $key, $value := .Site.Taxonomies.categories }}
|
||||
{{ $active := (eq $key $current.Title) }}
|
||||
{{ range $key, $value := .Site.Taxonomies.categories }}
|
||||
{{ $active := (eq $key $current.Title) }}
|
||||
|
||||
<li>
|
||||
<a href="{{ .Page.Permalink | relURL }}" {{if $active}}class="active"{{end}}>{{ $key | humanize }} ({{ len $value }})</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
<li class="nav-item page-aside-nav__items">
|
||||
<a class="link-button link-button--right{{if $active}} link-button--right-active{{end}}" href="{{ .Page.Permalink | relURL }}">{{ $key | humanize }} ({{ len $value }})</a>
|
||||
</li>
|
||||
{{end}}
|
||||
</ul>
|
||||
</aside>
|
|
@ -1,13 +1,13 @@
|
|||
<footer>
|
||||
<ul>
|
||||
<footer class="page-footer">
|
||||
<ul class="page-footer--list">
|
||||
{{ $current := . }}
|
||||
{{ range .Site.Menus.footer.ByWeight }}
|
||||
{{ $active := or ($current.IsMenuCurrent "footer" .) ($current.HasMenuCurrent "footer" .) }}
|
||||
{{ $active = or $active (eq .Identifier $current.Title) }}
|
||||
{{ $active = or $active (eq .Name $current.Title) }}
|
||||
|
||||
<li>
|
||||
<a class="{{if $active}}active{{end}}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
|
||||
<li class="page-footer--items">
|
||||
<a class="page-footer--link {{if $active}}page-footer--link-active{{end}}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
|
@ -1,3 +1,3 @@
|
|||
<header id="page-header">
|
||||
<header class="page-header">
|
||||
<h1>{{.Site.Title }}</h1>
|
||||
</header>
|
|
@ -1,4 +1,4 @@
|
|||
<nav>
|
||||
<nav class="page-nav">
|
||||
<ul>
|
||||
{{ $current := . }}
|
||||
{{ range .Site.Menus.nav }}
|
||||
|
@ -6,8 +6,8 @@
|
|||
{{ $active = or $active (eq .Name $current.Title) }}
|
||||
{{ $active = or $active (eq .Identifier $current.Title) }}
|
||||
{{ $active = or $active (and (eq .Name "Articles") (eq $current.Section "posts")) }}
|
||||
<li>
|
||||
<a {{if $active}}class="active"{{end}} href="{{ .URL | relLangURL }}">{{ .Name }}</a>
|
||||
<li class="nav-item page-nav--items">
|
||||
<a class="link-button link-button--left{{if $active}} link-button--left-active{{end}}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
|
|
|
@ -1,17 +1,22 @@
|
|||
|
||||
{{ if gt .Paginator.TotalPages 1 }}
|
||||
<div id="pagination">
|
||||
<div class="pagination">
|
||||
<ul>
|
||||
{{ if .Paginator.HasPrev }}
|
||||
<li><a class="button button-active" href="{{ .Paginator.Prev.URL }}">{{ T "pagination_backward" }}</a></li>
|
||||
<li class="pagination__list">
|
||||
<a class="pagination__pages" href="{{ .Paginator.Prev.URL }}">{{ T "pagination_backward" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
||||
{{ range .Paginator.Pagers }}
|
||||
<li><a class="button button-active" href="{{ .URL }}">{{ .PageNumber }}</a></li>
|
||||
<li class="pagination__list">
|
||||
<a class="pagination__pages" href="{{ .URL }}">{{ .PageNumber }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
||||
{{ if .Paginator.HasNext }}
|
||||
<li><a class="button button-active" href="{{ .Paginator.Next.URL }}">{{ T "pagination_forward" }}</a></li>
|
||||
<li class="pagination__list">
|
||||
<a class="pagination__pages" href="{{ .Paginator.Next.URL }}">{{ T "pagination_forward" }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -1,14 +1,18 @@
|
|||
{{ define "main" }}
|
||||
{{ range .Paginator.Pages }}
|
||||
{{ .Scratch.Set "scope" "list" }}
|
||||
<article>
|
||||
<article class="article">
|
||||
{{ partial "article-header.html" . }}
|
||||
|
||||
{{ if .Site.Params.useSummary }}
|
||||
{{ .Summary }}
|
||||
<div class="article__content">
|
||||
{{ .Summary }}
|
||||
</div>
|
||||
{{ partial "article-footer.html" . }}
|
||||
{{ else }}
|
||||
{{.Content}}
|
||||
<div class="article__content">
|
||||
{{.Content}}
|
||||
</div>
|
||||
|
||||
{{ partial "article-footer.html" . }}
|
||||
{{ end }}
|
||||
|
|
|
@ -1,8 +1,10 @@
|
|||
{{ define "main" }}
|
||||
{{ .Scratch.Set "scope" "single" }}
|
||||
<article>
|
||||
<article class="article">
|
||||
{{ partial "article-header.html" . }}
|
||||
|
||||
{{ .Content }}
|
||||
<div class="article__content">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
|
@ -5,19 +5,20 @@
|
|||
--header-bg-color: #132d44;
|
||||
--header-text-color: #fffaf0;
|
||||
|
||||
--nav-bg-color: #1f1f1f;
|
||||
--nav-bg-color: #111111;
|
||||
--nav-text-color: #ffffff;
|
||||
--nav-border-color: #132d44;
|
||||
--nav-hover-bg-color: #000000;
|
||||
--nav-hover-color: #ffffff;
|
||||
|
||||
--footer-bg-color: #1f1f1f;;
|
||||
--footer-bg-color: #111111;;
|
||||
--footer-text-color: #ffffff;
|
||||
--footer-active-link-color: #ffffff;
|
||||
|
||||
--article-box-bg-color: #1f1f1f;
|
||||
--article-box-bg-color: #111111;
|
||||
--headline-text-color: #3a8cd3;
|
||||
|
||||
--link-text-color: #8ab4f8;
|
||||
--link-text-color: #4e91ff;
|
||||
--link-visited-text-color: #c58af9;
|
||||
--code-text-color: #ffffff;
|
||||
--code-bg-color: #1f1f1f;
|
||||
|
|
|
@ -7,8 +7,8 @@
|
|||
|
||||
--nav-bg-color: #1f1f1f;
|
||||
--nav-text-color: #ffffff;
|
||||
--nav-hover-bg-color: #fffaf0;
|
||||
--nav-border-color: #285e8e;
|
||||
--nav-hover-bg-color: #fffaf0;
|
||||
--nav-hover-color: #285e8e;
|
||||
|
||||
--footer-bg-color: #1f1f1f;;
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
:root {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
|
@ -36,224 +38,96 @@
|
|||
font-display: swap;
|
||||
}
|
||||
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: rubik, Helvetica, Arial, sans-serif;
|
||||
font-size: 100%;
|
||||
font-size: 1.2rem;
|
||||
background-color: var(--body-bg-color);
|
||||
color: var(--body-text-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: 80px 1fr 40px;
|
||||
grid-template-columns: minmax(150px, 20%) 30% 35% minmax(100px, 15%);
|
||||
grid-template-areas:
|
||||
"header header header header"
|
||||
"nav content content sidebar"
|
||||
"footer footer footer footer"
|
||||
;
|
||||
}
|
||||
|
||||
/*
|
||||
* Layout positioning
|
||||
*/
|
||||
#container > main {
|
||||
grid-area: content;
|
||||
width: 100%;
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
/**
|
||||
* General styles
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
.article__content h1,
|
||||
.article__content h2,
|
||||
.article__content h3,
|
||||
.article__content h4,
|
||||
.article__content h5,
|
||||
.article__content h6 {
|
||||
color: var(--headline-text-color);
|
||||
font-weight: 700;
|
||||
margin: 0 0 0.8em 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.article__content h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.8em;
|
||||
.article__content h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5em;
|
||||
.article__content h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-text-color);
|
||||
text-decoration: underline;
|
||||
.article__content h4 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--link-text-color);
|
||||
text-decoration: none;
|
||||
.article__content h5 {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--link-visited-text-color);
|
||||
.article__content h6 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#container > header#page-header {
|
||||
display: flex;
|
||||
grid-area: header;
|
||||
align-items: center;
|
||||
justify-content: left;
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
#container > nav {
|
||||
grid-area: nav;
|
||||
background-color: var(--nav-bg-color);
|
||||
.article__content p {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
#container > aside {
|
||||
color: var(--nav-text-color);
|
||||
grid-area: sidebar;
|
||||
background-color: var(--nav-bg-color);
|
||||
font-size: 1.1em;
|
||||
.article__content ul,
|
||||
.article__content ol {
|
||||
margin-left: 1.0em;
|
||||
}
|
||||
|
||||
|
||||
header#page-header {
|
||||
padding-left: 20px;
|
||||
.article__content table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
|
||||
#page-header h1 {
|
||||
color: var(--header-text-color);
|
||||
.article__content .footnotes {
|
||||
margin-top: 0.4em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation styles left and right side
|
||||
*/
|
||||
#container > aside ul li:first-child {
|
||||
padding: 1rem 0.5rem;
|
||||
font-size: 1.3em;
|
||||
border-bottom: 0.0625rem solid var(--nav-border-color);
|
||||
.article__content sup {
|
||||
margin-left: 0.1rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
#container > aside a,
|
||||
#container > nav a,
|
||||
#container > aside a:visited,
|
||||
#container > nav a:visited {
|
||||
color: var(--nav-text-color);
|
||||
display: inline-block;
|
||||
border-bottom: 0.0625rem solid var(--nav-border-color);
|
||||
padding: 1rem 0.5rem;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
.article__content hr {
|
||||
border: 1px dotted #132d44;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#container > nav a:active,
|
||||
#container > nav a:hover,
|
||||
#container > nav a:active,
|
||||
#container > nav a.active {
|
||||
color: var(--nav-hover-color);
|
||||
background-color: var(--nav-hover-bg-color);
|
||||
border-right: 0.3125rem solid var(--nav-border-color);
|
||||
.article__content td,
|
||||
.article__content th {
|
||||
border: 1px solid gray;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#container > aside a:active,
|
||||
#container > aside a:hover,
|
||||
#container > aside a:active,
|
||||
#container > aside a.active {
|
||||
color: var(--nav-hover-color);
|
||||
background-color: var(--nav-hover-bg-color);
|
||||
border-left: 0.3125rem solid var(--nav-border-color);
|
||||
.article__content th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Footer styles
|
||||
*/
|
||||
#container > footer {
|
||||
grid-area: footer;
|
||||
display: inline-grid;
|
||||
background-color: var(--footer-bg-color);
|
||||
color: var(--footer-text-color);
|
||||
font-size: 0.9em;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
#container > footer ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#container > footer ul li {
|
||||
display: inline-block;
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
#container > footer a,
|
||||
#container > footer a:visited {
|
||||
color: var(--footer-text-color);
|
||||
width: 100%;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#container > footer a:active,
|
||||
#container > footer a:hover,
|
||||
#container > footer a:active,
|
||||
#container > footer a.active {
|
||||
color: var(--footer-active-link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#container > nav li,
|
||||
#container > aside li {
|
||||
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;
|
||||
}
|
||||
|
||||
pre {
|
||||
.article__content pre {
|
||||
font-size: 1.1rem;
|
||||
display: block;
|
||||
font-size: 1.1em;
|
||||
white-space: pre-wrap;
|
||||
border: 1px solid grey;
|
||||
background-color: var(--code-bg-color);
|
||||
|
@ -262,157 +136,217 @@ pre {
|
|||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
.article__content a:link,
|
||||
.article-header a:link {
|
||||
color: var(--link-text-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.article__content a:visited,
|
||||
.article-header a:visited {
|
||||
color: var(--link-visited-text-color);
|
||||
}
|
||||
|
||||
.article-header a:hover,
|
||||
.article-header a:active,
|
||||
.article-header a:focus {
|
||||
color: var(--link-text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: minmax(150px, 20%) 65% minmax(100px, 15%);
|
||||
grid-template-areas:
|
||||
"header header header"
|
||||
"nav content sidebar"
|
||||
"footer footer footer"
|
||||
;
|
||||
}
|
||||
|
||||
.page-content {
|
||||
grid-area: content;
|
||||
width: 100%;
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: grid;
|
||||
grid-area: header;
|
||||
align-content: center;
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
.page-nav {
|
||||
font-size: 1.1em;
|
||||
grid-area: nav;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
font-size: 0.9em;
|
||||
display: grid;
|
||||
grid-area: footer;
|
||||
background-color: var(--footer-bg-color);
|
||||
color: var(--footer-text-color);
|
||||
justify-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.page-aside-nav {
|
||||
font-size: 1.1em;
|
||||
color: var(--nav-text-color);
|
||||
grid-area: sidebar;
|
||||
background-color: var(--nav-bg-color);
|
||||
}
|
||||
|
||||
.page-nav > ul,
|
||||
.page-aside-nav > ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-nav__items,
|
||||
.page-aside-nav__items {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.page-header > h1 {
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
list-style-type: none;
|
||||
color: var(--nav-text-color);
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 1.3em;
|
||||
padding: 1em 0.5em;
|
||||
border-bottom: 1px solid var(--nav-border-color);
|
||||
}
|
||||
|
||||
.link-button:link,
|
||||
.link-button:visited {
|
||||
display: block;
|
||||
color: inherit;
|
||||
border-bottom: 1px solid var(--nav-border-color);
|
||||
padding: 1em 0.5em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.link-button--left:hover,
|
||||
.link-button--left:active,
|
||||
.link-button--left-active {
|
||||
color: var(--nav-hover-color);
|
||||
background-color: var(--nav-hover-bg-color);
|
||||
border-right: 10px solid var(--nav-border-color);
|
||||
}
|
||||
|
||||
.link-button--right:hover,
|
||||
.link-button--right:active,
|
||||
.link-button--right-active {
|
||||
color: var(--nav-hover-color);
|
||||
background-color: var(--nav-hover-bg-color);
|
||||
border-left: 10px solid var(--nav-border-color);
|
||||
}
|
||||
|
||||
|
||||
.page-footer--list {
|
||||
margin: 0.5em 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.page-footer--items {
|
||||
display: inline-block;
|
||||
margin-right: 0.8em;
|
||||
}
|
||||
|
||||
.page-footer--link,
|
||||
.page-footer--link:visited {
|
||||
color: var(--footer-text-color);
|
||||
width: 100%;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-footer--link:active,
|
||||
.page-footer--link:hover,
|
||||
.page-footer--link:active,
|
||||
.page-footer--link-active {
|
||||
color: var(--footer-active-link-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 2em 0;
|
||||
}
|
||||
|
||||
.pagination__list {
|
||||
display: inline;
|
||||
margin-right: 0.7em;
|
||||
}
|
||||
|
||||
.pagination__pages {
|
||||
background-color: var(--article-box-bg-color);
|
||||
border: 1px solid var(--nav-border-color);
|
||||
font-size: 1.3em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
/* FIX for highlighted lines in code */
|
||||
.chroma .hl {
|
||||
background-color: rgba(255, 255, 0, 0.1);
|
||||
}
|
||||
|
||||
article {
|
||||
.article {
|
||||
background-color: var(--article-box-bg-color);
|
||||
margin: 2em 1em 2em 1em;
|
||||
border: 1px dotted grey;
|
||||
padding: 15px;
|
||||
margin: 2em 1em;
|
||||
border: 1px solid #132d44;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
article header {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
.article-header {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
article header h1 {
|
||||
margin-bottom: 5px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
article header h1 a {
|
||||
color: var(--headline-text-color);
|
||||
}
|
||||
|
||||
article header {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 0.14rem solid #285e8e;
|
||||
}
|
||||
article header p {
|
||||
.article-header__meta {
|
||||
font-size: 0.9em;
|
||||
margin-bottom: 0.25em;
|
||||
line-height: 1;
|
||||
filter: brightness(60%);
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
||||
article header ul.categories {
|
||||
text-align: left;
|
||||
.article-header__meta__paragraph {
|
||||
margin: 0 0 0.6em 0;
|
||||
}
|
||||
|
||||
.article-header > h1 {
|
||||
font-size: 2em;
|
||||
margin: 0;
|
||||
color: var(--headline-text-color)
|
||||
}
|
||||
|
||||
.article-footer__tags {
|
||||
font-size: 0.9em;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article header ul.categories li {
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
.article-footer__tag {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
article h1,
|
||||
article h2,
|
||||
article h3,
|
||||
article h4,
|
||||
article h5,
|
||||
article h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8em;
|
||||
}
|
||||
|
||||
article h1 {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
article h2 {
|
||||
font-size: 1.6em;
|
||||
}
|
||||
|
||||
article h3 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
article h4 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
article h5 {
|
||||
font-size: 1.0em;
|
||||
}
|
||||
|
||||
article h6 {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
article ul,
|
||||
article ol,
|
||||
article p {
|
||||
font-size: 1.1em;
|
||||
margin-bottom: 20px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
article ul,
|
||||
article ol {
|
||||
margin-left: 2.0em;
|
||||
}
|
||||
|
||||
article table {
|
||||
border-collapse: collapse;
|
||||
border: 1px solid gray;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
article .footnotes {
|
||||
margin-top: 0.4em;
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
article sup {
|
||||
margin-left: 0.1rem;
|
||||
font-weight: bold;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
article hr {
|
||||
border: 1px dotted gray;
|
||||
margin-bottom: 1rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
article td,
|
||||
article th {
|
||||
border: 1px solid gray;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
article th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
article footer {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
article footer ul.tags {
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
article footer ul.tags li {
|
||||
text-align: left;
|
||||
font-size: 0.9em;
|
||||
display: inline;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
article footer div.read-more {
|
||||
.article-footer__read-more {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
@ -420,24 +354,24 @@ article footer div.read-more {
|
|||
background-color: var(--article-box-bg-color);
|
||||
}
|
||||
|
||||
#index .submenu {
|
||||
margin-left: 1.1em;
|
||||
.index__submenu {
|
||||
padding-left: 1em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
#index .submenu-item {
|
||||
margin-bottom: 0.625rem;
|
||||
.index__submenu-item {
|
||||
margin-bottom: 1.5em;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#index .year {
|
||||
.index__year {
|
||||
list-style-type: none;
|
||||
font-weight: 700;
|
||||
color: #285e8e;
|
||||
display: inline-block;
|
||||
list-style-type: none;
|
||||
color: var(--headline-text-color);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 70em) {
|
||||
#container {
|
||||
.container {
|
||||
height: 100vh;
|
||||
grid-template-areas:
|
||||
"header"
|
||||
|
@ -448,18 +382,46 @@ article footer div.read-more {
|
|||
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows:
|
||||
80px
|
||||
min-content
|
||||
min-content
|
||||
min-content
|
||||
40px;
|
||||
min-content
|
||||
min-content;
|
||||
}
|
||||
|
||||
#container > main {
|
||||
.page-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#container > main article {
|
||||
.article {
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media print {
|
||||
.container {
|
||||
height: 100vh;
|
||||
grid-template-areas: "content";
|
||||
grid-template-columns: 100%;
|
||||
grid-template-rows: min-content
|
||||
}
|
||||
|
||||
.article-footer__tags,
|
||||
.article-footer__read-more {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.article-header > h1,
|
||||
a,
|
||||
a:visited,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
color: #000;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue