style: add minimal stylesheet rules

* NEW Adds CSS rules.
* BETTER Improves very slighlty some layout templates.
* FIX Fixes a missing code label.

Co-Authored-by: Igor Milhit <igor@milhit.ch>
pull/31/head
iGor milhit 2019-07-31 18:43:51 +02:00
parent 4477b3033e
commit 909c3caa97
Signed by: igor
GPG Key ID: 692D97C3D0228A99
8 changed files with 189 additions and 38 deletions

View File

@ -1,19 +1,18 @@
{{ define "main" }} {{ define "main" }}
<main> <main class="container">
<article>
<header> <header>
<h1>{{.Title}}</h1> <h1>{{.Title}}</h1>
</header> </header>
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md --> <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
{{.Content}} {{.Content}}
</article> <article>
<ul>
<!-- Ranges through content/posts/*.md --> <!-- Ranges through content/posts/*.md -->
{{ range .Pages }} {{ range .Pages }}
<li> <article>
<a href="{{.Permalink}}">{{.Date.Format "2006-01-02"}} | {{.Title}}</a> <a href="{{.Permalink}}">{{.Title}}</a>
</li> &mdash; {{.Date.Format "2006-01-02"}}
</article>
{{ end }} {{ end }}
</ul> </article>
</main> </main>
{{ end }} {{ end }}

View File

@ -1,16 +1,20 @@
{{ define "main" }} {{ define "main" }}
<main> <main class="container">
{{ .Content }} {{ .Content }}
<ul class="contents">
{{ range .Paginator.Pages }} {{ range .Paginator.Pages }}
<li><a href="{{ .Permalink }}">{{.Title}} &mdash; {{ .Date.Format "2006-01-02" }}</a> <article>
{{/* <div> <a href="{{ .Permalink }}">
{{ partial "summary.html" . }} {{.Title}}
</div> */}} </a>
</li> &mdash; {{ .Date.Format "2006-01-02" }}
{{ with .Params.categories }}
{{ range . }}
&mdash; <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }}
{{ end }}
</article>
{{ end }} {{ end }}
</ul> </ul>
{{/* {{ partial "pagination.html" . }} */}}
</main> </main>
{{ end }} {{ end }}

View File

@ -1,30 +1,32 @@
{{ define "main" }} {{ define "main" }}
<section id="main"> <main id="main" class="container">
<header> <header class="post-header">
<h1 id="title">{{ .Title }}</h1> <h1 id="title">{{ .Title }}</h1>
<ul class="post-info"> <ul class="post-info">
<li>Publié le&#x202F;: {{ .Date.Format "2006-01-02" }}</li> <li>Publié le&#x202F;: {{ .Date.Format "2006-01-02" }}</li>
{{ with .Params.categories }} {{ with .Params.categories }}
<li>Catégories&#x202F;:</li> <li>Catégories&#x202F;:
<ul> <ul>
{{ range . }} {{ range . }}
<li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li> <li><a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }} {{ end }}
</ul> </ul>
</li>
{{ end }} {{ end }}
{{ with .Params.tags }} {{ with .Params.tags }}
<li>Tags&#x202F;:</li> <li>Tags&#x202F;:
<ul> <ul>
{{ range . }} {{ range . }}
<li> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li> <li> <a href="{{ "tags" | absURL }}/{{ . | urlize }}">{{ . }}</a> </li>
{{ end }} {{ end }}
</ul> </ul>
</li>
{{ end }} {{ end }}
</ul> </ul>
</header> </header>
<article id="content"> <article id="content">
{{ .Content }} {{ .Content }}
</article> </article>
</section> </main>
{{ end }} {{ end }}

View File

@ -1,5 +1,5 @@
{{ define "main" }} {{ define "main" }}
<main aria-role="main" itemscope itemtype="https://schema.org/Person"> <main aria-role="main" class="container" itemscope itemtype="https://schema.org/Person">
{{if not .Site.Params.contactsPriv.hide }} {{if not .Site.Params.contactsPriv.hide }}
{{ partial "perso" .}} {{ partial "perso" .}}
{{ end }} {{ end }}

View File

@ -1,6 +1,9 @@
<footer class="main-footer"> <footer class="main-footer">
<ul> <ul class="container">
<li><a href="https://framagit.org/iGormilhit/igor.milhit">Sources</a></li> <li><a href="https://framagit.org/iGormilhit/igor.milhit">Sources</a></li>
<li><a href="http://creativecommons.org/licenses/by/4.0/">CC-BY</a></li> <li><a href="http://creativecommons.org/licenses/by/4.0/">
<span class="smallcaps">cc-by</span>
</a>
</li>
</ul> </ul>
</footer> </footer>

View File

@ -1,4 +1,12 @@
<header class="main-header"> <header class="main-header">
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a> <section class="container">
<a href="{{ .Site.BaseURL }}blog">Blog</a> <header>
<a href="{{ .Site.BaseURL }}" class="title">
<img class="avatar" src="{{ .Site.BaseURL }}images/avatar.png">
<h1>{{ .Site.Title }}</h1></a>
</header>
<nav>
<a href="{{ .Site.BaseURL }}blog">Blog</a>
</nav>
</section>
</header> </header>

View File

@ -21,7 +21,7 @@
{{ end }} {{ end }}
{{ with .Site.Params.contactsPriv.fingerprint }} {{ with .Site.Params.contactsPriv.fingerprint }}
<dt>Empreinte</dt> <dt>Empreinte</dt>
<dd>{{ . }}</dd> <dd><code>{{ . }}</code></dd>
{{ end }} {{ end }}
{{ with .Site.Params.contactsPriv.xmpp }} {{ with .Site.Params.contactsPriv.xmpp }}
<dt>XMPP/jabber</dt> <dt>XMPP/jabber</dt>

View File

@ -1,7 +1,100 @@
main { /*
max-width: 35rem; /* 960px */ * ************** *
* FONTS *
* ************** *
*/
html, body {
font-size: 1.25rem;
} }
/*
* ************** *
* LAYOUT *
* ************** *
*/
.container {
max-width: 35rem; /* 960px */
margin: 0 auto;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
}
/*
* ************** *
* HEADER *
* ************** *
*/
.main-header {
margin-bottom: 2em;
}
.main-header section {
display: flex;
align-items: center;
border-bottom: solid .1em #e1e1e1;
padding-bottom: 1em;
}
.main-header header {
flex-grow: 1;
}
.title {
display: flex;
align-items: center;
}
.avatar {
border-radius: 50%;
width: 5rem;
margin-right: 1rem;
}
nav {
margin-right: .5em;
}
/*
* ************** *
* FOOTER *
* ************** *
*/
.main-footer ul {
display: flex;
align-items: center;
justify-content: flex-end;
border-top: solid .1em #e1e1e1;
padding-top: 1em;
margin-bottom: 1em;
}
.main-footer li {
list-style: none;
margin-right: .5em;
}
.smallcaps {
font-variant: small-caps;
}
/*
* ************** *
* MAIN *
* ************** *
*/
dl { dl {
display: inline-flex; display: inline-flex;
flex-flow: row; flex-flow: row;
@ -11,15 +104,57 @@ dl {
} }
dt { dt {
flex: 0 0 25%; flex: 0 0 39%;
text-overflow: ellipsis; word-wrap: anywhere;
overflow: hidden; }
dt::after {
content: ":";
} }
dd { dd {
flex:0 0 75%; flex:0 0 59%;
margin-left: auto; margin-left: auto;
text-align: left; text-align: left;
text-overflow: ellipsis; }
overflow: hidden;
.contents {
padding: 0;
}
.contents li {
list-style: none;
}
/*
* ************** *
* POST *
* ************** *
*/
.post-header {
margin: 1em 0 1em 0;
}
.post-header h1 {
margin: 0;
}
.post-info {
font-size: 1rem;
display: flex;
flex-wrap: wrap;
padding: 0;
margin-top: 0;
}
.post-info li {
list-style: none;
display: flex;
padding-right: .5em;
}
.post-info li > ul {
display: flex;
padding: 0;
} }