Basic CSS
This commit is contained in:
parent
f9722dacf7
commit
0277057723
|
|
@ -1,22 +1,153 @@
|
||||||
|
/* TYPOGRAPHY */
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: #222;
|
/* TODO: add custom font */
|
||||||
font-family: sans-serif;
|
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;
|
||||||
line-height: 1.5;
|
font-size-adjust: 0.5;
|
||||||
margin: 1rem;
|
background-color: white;
|
||||||
max-width: 768px;
|
color: #111;
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
border-bottom: 1px solid #222;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
border-top: 1px solid #222;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #00e;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a {
|
||||||
|
color: black;
|
||||||
|
transition-duration: 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 a:hover {
|
||||||
|
color: #303030;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: 0;
|
||||||
|
height: 1px;
|
||||||
|
background: #ccc;
|
||||||
|
max-width: 40em;
|
||||||
|
margin: 4em auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* LAYOUT */
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-header {
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
opacity: 0.4;
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-duration: 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-header:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-page-title {
|
||||||
|
display: inline;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-description {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu {
|
||||||
|
display: inline;
|
||||||
|
margin: 0 1rem;
|
||||||
|
line-height: 2.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu ul {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
display: inline-flex;
|
||||||
|
gap: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-menu a {
|
||||||
|
color: #767676;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-description {
|
||||||
|
color: #444;
|
||||||
|
font-size: 1.1em;
|
||||||
|
margin-top: 0.5em;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-main {
|
||||||
|
max-width: 50rem;
|
||||||
|
margin: 1rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-post {
|
||||||
|
padding: 0.5em 2rem 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layout-footer {
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 2rem 4rem;
|
||||||
|
color: #444;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* LAYOUT (SPECIFIC PAGES) */
|
||||||
|
|
||||||
|
.kind-home .layout-header {
|
||||||
|
margin: 3rem auto 4rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
text-align: center;
|
||||||
|
max-width: 50rem;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-home .layout-menu {
|
||||||
|
display: block;
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-home .layout-menu ul {
|
||||||
|
gap: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-home .layout-description {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-page .layout-post {
|
||||||
|
max-width: 40rem;
|
||||||
|
margin: 0 auto 2rem;
|
||||||
|
font-size: 1.2em;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-page .layout-post-title {
|
||||||
|
font-size: 1.5em;
|
||||||
|
margin: 0 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.kind-page .layout-post-time {
|
||||||
|
display: block;
|
||||||
|
color: #666;
|
||||||
|
margin: -1em 0 1em;
|
||||||
|
}
|
||||||
|
|
@ -3,14 +3,14 @@
|
||||||
<head>
|
<head>
|
||||||
{{ partial "head.html" . }}
|
{{ partial "head.html" . }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="kind-{{ .Kind }}">
|
||||||
<header>
|
<header class="layout-header">
|
||||||
{{ partial "header.html" . }}
|
{{ partial "header.html" . }}
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main class="layout-main">
|
||||||
{{ block "main" . }}{{ end }}
|
{{ block "main" . }}{{ end }}
|
||||||
</main>
|
</main>
|
||||||
<footer>
|
<footer class="layout-footer">
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
</footer>
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,9 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ range site.RegularPages }}
|
{{ range site.RegularPages }}
|
||||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
<article class="layout-post">
|
||||||
|
<h1 class="layout-post-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,9 @@
|
||||||
<h1>{{ .Title }}</h1>
|
<h1>{{ .Title }}</h1>
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ range .Pages }}
|
{{ range .Pages }}
|
||||||
<h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
|
<article class="layout-post">
|
||||||
|
<h1 class="layout-post-title"><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h1>
|
||||||
{{ .Summary }}
|
{{ .Summary }}
|
||||||
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<h1>{{ .Title }}</h1>
|
<article class="layout-post">
|
||||||
|
<h1 class="layout-post-title">{{ .Title }}</h1>
|
||||||
|
|
||||||
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
|
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
|
||||||
{{ $dateHuman := .Date | time.Format ":date_long" }}
|
{{ $dateHuman := .Date | time.Format ":date_long" }}
|
||||||
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
|
<time datetime="{{ $dateMachine }}" class="layout-post-time">{{ $dateHuman }}</time>
|
||||||
|
|
||||||
{{ .Content }}
|
{{ .Content }}
|
||||||
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
|
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
|
||||||
|
</article>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,2 @@
|
||||||
|
<hr>
|
||||||
<p>Copyright {{ now.Year }}. All rights reserved.</p>
|
<p>Copyright {{ now.Year }}. All rights reserved.</p>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
<h1>{{ site.Title }}</h1>
|
<h1 class="layout-page-title"><a href="/">{{ site.Title }}</a></h1>
|
||||||
{{ with site.Params.description }}<p>{{ . }}</p>{{end}}
|
{{ with site.Params.description }}<p class="layout-description">{{ . }}</p>{{end}}
|
||||||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||||
|
|
@ -11,7 +11,7 @@ Renders a menu for the given menu ID.
|
||||||
{{- $menuID := .menuID }}
|
{{- $menuID := .menuID }}
|
||||||
|
|
||||||
{{- with index site.Menus $menuID }}
|
{{- with index site.Menus $menuID }}
|
||||||
<nav>
|
<nav class="layout-menu">
|
||||||
<ul>
|
<ul>
|
||||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue