igor
/
portfoligor
1
1
Fork 0
Code Issues 9 Pull Requests Packages Projects 1 Releases 4 Wiki Activity

section: improve sections, lists and navigation 

* Splits styles into partials.
* Adds a category entry to the navigation menu.
* Adds a flex to the header to get the menu on the right.
* Adds a flex to the sections and lists to diplay information evenly.

Co-Authored-by: Igor Milhit <igor@milhit@.ch>
pull/31/head
iGor milhit 2020-01-15 17:42:04 +01:00
parent a7a017b68a
commit c44eb759f0
Signed by: igor
GPG Key ID: 692D97C3D0228A99
12 changed files with 219 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/scss/_fonts.scss 100644
View File

@ -0,0 +1,20 @@
/*
* ************** *
* FONTS *
* ************** *
*/
html, body {
font-size: $font-size-base;
}
code,
.footnotes,
.footnote-ref,
figure p,
.main-footer,
.posts-list footer {
font-size: $font-size-small;
}

26
assets/scss/_footer.scss 100644
View File

@ -0,0 +1,26 @@
/*
* ************** *
* FOOTER *
* ************** *
*/
.main-footer {
ul {
display: flex;
align-items: center;
justify-content: flex-end;
border-top: solid .1em #e1e1e1;
padding-top: 1em;
margin-bottom: 1em;
}
li {
list-style: none;
margin-right: .5em;
}
}
.smallcaps {
font-variant: small-caps;
}

34
assets/scss/_header.scss 100644
View File

@ -0,0 +1,34 @@
/*
* ************** *
* HEADER *
* ************** *
*/
.main-header {
section {
display: flex;
flex-direction: column;
// align-items: center;
border-bottom: solid .1em #e1e1e1;
padding-bottom: 1em;
}
header {
flex-grow: 1;
}
}
.title {
display: flex;
align-items: center;
}
.avatar {
border-radius: 50%;
width: 5rem;
margin-right: 1rem;
}
nav {
margin-right: .5em;
align-self: end;
}

22
assets/scss/_layout.scss 100644
View File

@ -0,0 +1,22 @@
/*
* ************** *
* LAYOUT *
* ************** *
*/
.container {
max-width: 35rem; /* 960px */
margin: 0 auto;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
main {
flex-grow: 1;
}

12
assets/scss/_lists.scss 100644
View File

@ -0,0 +1,12 @@
/*
* ************** *
* LISTS *
* ************** *
*/
.posts-list {
display: flex;
flex-direction: column;
margin-bottom: .5em;
}

37
assets/scss/_main_body.scss 100644
View File

@ -0,0 +1,37 @@
/*
* ************** *
* MAIN *
* ************** *
*/
dl {
display: inline-flex;
flex-flow: row;
flex-wrap: wrap;
width: 100%; /* set the container width*/
overflow: visible;
}
dt {
flex: 0 0 39%;
word-wrap: anywhere;
}
dt::after {
content: " :";
}
dd {
flex:0 0 59%;
margin-left: auto;
text-align: left;
}
.contents {
padding: 0;
li {
list-style: none;
}
}

29
assets/scss/_post.scss 100644
View File

@ -0,0 +1,29 @@
/*
* ************** *
* POST *
* ************** *
*/
.post-header {
margin: 1em 0 1em 0;
h1 {
margin: 0;
}
}
.post-info {
font-size: 1rem;
display: flex;
flex-wrap: wrap;
padding: 0;
margin-top: 0;
li {
list-style: none;
display: flex;
padding-right: .5em;
> ul {
display: flex;
padding: 0;
}
}
}

2
assets/scss/_variables.scss 100644
View File

@ -0,0 +1,2 @@
$font-size-base: 1.25rem;
$font-size-small: 1rem;

168
assets/scss/main.scss
View File

@ -1,167 +1,17 @@
/*
* ************** *
* FONTS *
* Includes *
* ************** *
*/
html, body {
font-size: 1.25rem;
}
code, .footnotes, .footnote-ref, figure p {
font-size: 1rem;
}
/*
* ************** *
* 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 {
display: inline-flex;
flex-flow: row;
flex-wrap: wrap;
width: 100%; /* set the container width*/
overflow: visible;
}
dt {
flex: 0 0 39%;
word-wrap: anywhere;
}
dt::after {
content: " :";
}
dd {
flex:0 0 59%;
margin-left: auto;
text-align: left;
}
.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;
}
@import '_variables.scss';
@import '_fonts.scss';
@import '_footer.scss';
@import '_header.scss';
@import '_layout.scss';
@import '_lists.scss';
@import '_main_body.scss';
@import '_post.scss';
/*
* ************** *

10
layouts/_default/list.html
View File

@ -4,14 +4,18 @@
</header>
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
{{.Content}}
<article>
<article class="posts-list">
<!-- Ranges through content/posts/*.md -->
{{ range .Pages }}
<article>
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a> &mdash;
<article class="posts-list">
<article>
<a href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
</article>
<footer>
{{ if isset .Params "publishdate" }}
{{.PublishDate.Format "2006-01-02"}}
{{ end }}
</footer>
</article>
{{ end }}
</article>

29
layouts/_default/section.html
View File

@ -3,20 +3,29 @@
<h1>{{.Title}}</h1>
</header>
<!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
<section>
<header>
{{.Content }}
</header>
<section class="posts-list">
{{ range .Pages }}
<article>
<a href="{{ .Permalink }}">
{{.Title}}
</a>
&mdash; {{ .PublishDate.Format "2006-01-02" }}
{{ with .Params.categories }}
{{ range . }}
&mdash; <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
<article class="posts-list">
<article>
<a href="{{ .Permalink }}">
{{.Title}}
</a>
</article>
<footer>
{{ .PublishDate.Format "2006-01-02" }}
{{ with .Params.categories }}
{{ range . }}
/ <a href="{{ "categories" | absURL}}/{{ . | urlize }}">{{ . }}</a>
{{ end }}
{{ end }}
{{ end }}
</footer>
</article>
{{ end }}
</ul>
</section>
</section>
{{ end }}

3
layouts/partials/header.html
View File

@ -6,7 +6,8 @@
<h1>{{ .Site.Title }}</h1></a>
</header>
<nav>
<a href="{{ .Site.BaseURL }}blog">Blog</a>
<a href="{{ .Site.BaseURL }}blog">Blog</a> /
<a href="{{ .Site.BaseURL }}categories">Catégories</a>
</nav>
</section>
</header>