extend layout
This adjusts the layout for lists and single post pages. The theme is still mostly white with petrol and orange accents and it looks pretty decent at the moment. The author page and tags are still missing.
This commit is contained in:
Gibheer
parent
6ce886dfd5
commit
866dd93710
|
|
@ -1,19 +1,14 @@
|
|||
<div class="entry">
|
||||
<nav class="pagination">
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{ .NextInSection.Permalink }}">newer</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">newer</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<header>
|
||||
<h1><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
|
||||
</header>
|
||||
<nav>
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{ .PrevInSection.Permalink }}">prev</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">prev</a>
|
||||
{{ end }}
|
||||
{{ if .NextInSection }}
|
||||
<a href="{{ .NextInSection.Permalink }}">next</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">next</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<aside>
|
||||
<span class="author">{{ .Params.author }}</span>
|
||||
<span class="date">{{ dateFormat "2006-01-02 15:04" .Date }}</span>
|
||||
|
|
@ -21,4 +16,11 @@
|
|||
<section>
|
||||
{{ .Content }}
|
||||
</section>
|
||||
<nav class="pagination">
|
||||
{{ if .PrevInSection }}
|
||||
<a href="{{ .PrevInSection.Permalink }}">older</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">older</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>{{ if eq .URL "/" }}{{ .Site.Title }}{{ else }}{{ .Title }} - {{ .Site.Title }}{{ end }}</title>
|
||||
<link href="{{ .Site.BaseURL }}/style.css" rel="stylesheet" type="text/css"></link>
|
||||
<link href="{{ .Site.BaseURL }}/css/style.css" rel="stylesheet" type="text/css"></link>
|
||||
</head>
|
||||
<body>
|
||||
<haeder>
|
||||
<header>
|
||||
<h1><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
{{ if .HasPrev }}
|
||||
<a href="{{ .Prev.URL }}">prev</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">prev</a>
|
||||
{{ end }}
|
||||
<nav class="pagination">
|
||||
{{ if .HasPrev }}
|
||||
<a href="{{ .Prev.URL }}">newer</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">newer</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
<ul class="entries">
|
||||
{{ range .Pages }}
|
||||
<li>
|
||||
|
|
@ -10,8 +12,10 @@
|
|||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ if .HasNext }}
|
||||
<a href="{{ .Next.URL }}">next</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">next</a>
|
||||
{{ end }}
|
||||
<nav class="pagination">
|
||||
{{ if .HasNext }}
|
||||
<a href="{{ .Next.URL }}">older</a>
|
||||
{{ else }}
|
||||
<a href="" class="deactivated">older</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@
|
|||
<header>
|
||||
<h1><a href="{{.Permalink }}">{{ .Title }}</a></h1>
|
||||
</header>
|
||||
<aside>
|
||||
<nav>
|
||||
{{ if .Truncated }}<a class="more" href="{{ .Permalink }}">read more</a>{{ end }}
|
||||
</nav>
|
||||
<aside>
|
||||
<span class="author">{{ .Params.author }}</span>
|
||||
<span class="date">{{ dateFormat "2006-01-02 15:04" .Date }}</span>
|
||||
</aside>
|
||||
<section class="summary">
|
||||
{{ .Summary }}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,146 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body > header > h1 {
|
||||
margin: 1em;
|
||||
}
|
||||
body > header > h1 > a {
|
||||
color: transparent;
|
||||
display: block;
|
||||
width: 465px;
|
||||
height: 117px;
|
||||
background: url('/img/zero-knowledge.png');
|
||||
}
|
||||
|
||||
.entries {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
align-items: stretch;
|
||||
}
|
||||
.entries > li {
|
||||
margin-top: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@media screen and ((max-width: 750px) or (orientation: portait)) {
|
||||
.entries > li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 750px) and (orientation: landscape) {
|
||||
.entries > li {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1000px) and (orientation: landscape) {
|
||||
.entries > li {
|
||||
width: 33%;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1450px) and (orientation: landscape) {
|
||||
.entries > li {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
nav.pagination > a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 0.5em;
|
||||
|
||||
font-weight: bold;
|
||||
color: #ff9900;
|
||||
|
||||
background-color: #3a5f78;
|
||||
}
|
||||
nav.pagination > a.deactivated {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
article {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
article > header {
|
||||
order: 1;
|
||||
}
|
||||
article > nav {
|
||||
order: 4;
|
||||
}
|
||||
article > aside {
|
||||
order: 2;
|
||||
}
|
||||
article > section {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
article > header > h1, .entry > header > h1 {
|
||||
border-bottom: 0.1em solid #ff9900;
|
||||
}
|
||||
article > header > h1 > *, .entry > header > h1 > * {
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
color: #ff9900;
|
||||
}
|
||||
|
||||
article > aside, .entry > aside {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
article > aside > *, .entry > aside > * {
|
||||
color: #3a5f78;
|
||||
font-weight: bold;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
article > aside > .author::before, .entry > aside > .author::before {
|
||||
content: 'by ';
|
||||
}
|
||||
article > aside > .date::before, .entry > aside > .date::before {
|
||||
content: 'on ';
|
||||
}
|
||||
|
||||
article > section {
|
||||
}
|
||||
|
||||
article > nav > a {
|
||||
font-size: 0.8rem;
|
||||
color: #3a5f78;
|
||||
font-weight: bold;
|
||||
}
|
||||
article > nav > .more::after {
|
||||
content: ' >';
|
||||
}
|
||||
|
||||
body > .entry > header {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.entry > header > h1, .entry > aside {
|
||||
padding-left: 1em;
|
||||
}
|
||||
.entry > section {
|
||||
margin: auto;
|
||||
max-width: 50rem;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.entry > section h1, .entry > section h2 {
|
||||
margin-top: 1em;
|
||||
margin-bottom: 0.5em;
|
||||
font-size: 1.25rem;
|
||||
color: #3a5f78;
|
||||
border-bottom: 0.1em solid #3a5f78;
|
||||
}
|
||||
.entry > section pre {
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
background-color: rgba(58, 95, 120, 0.3);
|
||||
overflow-x: auto;
|
||||
}
|
||||
.entry > section ul, .entry > section dl, .entry > section ol {
|
||||
margin: 0.5em;
|
||||
margin-left: 1.5em;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -1,16 +0,0 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.entries {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.entries > li {
|
||||
width: 33%;
|
||||
min-width: 400px;
|
||||
padding: 1em;
|
||||
}
|
||||
Loading…
Reference in New Issue