Basic CSS
This commit is contained in:
parent
f9722dacf7
commit
0277057723
|
|
@ -1,22 +1,153 @@
|
|||
/* TYPOGRAPHY */
|
||||
|
||||
body {
|
||||
color: #222;
|
||||
font-family: sans-serif;
|
||||
line-height: 1.5;
|
||||
margin: 1rem;
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #222;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px solid #222;
|
||||
margin-top: 1rem;
|
||||
/* TODO: add custom font */
|
||||
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;
|
||||
font-size-adjust: 0.5;
|
||||
background-color: white;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #00e;
|
||||
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>
|
||||
{{ partial "head.html" . }}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<body class="kind-{{ .Kind }}">
|
||||
<header class="layout-header">
|
||||
{{ partial "header.html" . }}
|
||||
</header>
|
||||
<main>
|
||||
<main class="layout-main">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</main>
|
||||
<footer>
|
||||
<footer class="layout-footer">
|
||||
{{ partial "footer.html" . }}
|
||||
</footer>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ 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 }}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,9 @@
|
|||
<h1>{{ .Title }}</h1>
|
||||
{{ .Content }}
|
||||
{{ 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 }}
|
||||
</article>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
{{ 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" }}
|
||||
{{ $dateHuman := .Date | time.Format ":date_long" }}
|
||||
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
|
||||
<time datetime="{{ $dateMachine }}" class="layout-post-time">{{ $dateHuman }}</time>
|
||||
|
||||
{{ .Content }}
|
||||
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -1 +1,2 @@
|
|||
<hr>
|
||||
<p>Copyright {{ now.Year }}. All rights reserved.</p>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<h1>{{ site.Title }}</h1>
|
||||
{{ with site.Params.description }}<p>{{ . }}</p>{{end}}
|
||||
<h1 class="layout-page-title"><a href="/">{{ site.Title }}</a></h1>
|
||||
{{ with site.Params.description }}<p class="layout-description">{{ . }}</p>{{end}}
|
||||
{{ partial "menu.html" (dict "menuID" "main" "page" .) }}
|
||||
|
|
@ -11,7 +11,7 @@ Renders a menu for the given menu ID.
|
|||
{{- $menuID := .menuID }}
|
||||
|
||||
{{- with index site.Menus $menuID }}
|
||||
<nav>
|
||||
<nav class="layout-menu">
|
||||
<ul>
|
||||
{{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
|
||||
</ul>
|
||||
|
|
|
|||
Loading…
Reference in a new issue