First commit of the theme

This commit is contained in:
Gregory Trolliet 2020-04-27 16:49:21 +02:00
commit 360f7ecd96
24 changed files with 525 additions and 0 deletions

20
LICENSE Normal file
View file

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2020 Gregory Trolliet
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

10
archetypes/default.md Normal file
View file

@ -0,0 +1,10 @@
---
title: "{{ replace .Name "-" " " | title }}"
description: ""
date: {{ .Date }}
publishDate: {{ .Date }}
author: "John Doe"
images: []
draft: true
tags: []
---

8
archetypes/page.md Normal file
View file

@ -0,0 +1,8 @@
---
title: "{{ replace .Name "-" " " | title }}"
description: ""
images: []
draft: true
menu: main
weight: 0
---

6
archetypes/section.md Normal file
View file

@ -0,0 +1,6 @@
---
title : "{{ replace .Name "-" " " | title }}"
description: ""
draft: true
weight: 0
---

5
layouts/404.html Normal file
View file

@ -0,0 +1,5 @@
{{ define "main" }}
<main class="notfound">
<h1 class="notfound__title">404</h1>
</main>
{{ end }}

View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html lang="fr">
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
{{- block "main" . }}{{- end }}
{{- partial "footer.html" . -}}
</body>
</html>

View file

View file

@ -0,0 +1,14 @@
{{ define "main" }}
<article class="post">
<header class="post_header">
<h1 class="post_title">{{ .Title }}</h1>
{{ if .Description }}
<p class="post_subtitle">{{ .Description }}</p>
{{ end }}
</header>
<main class="post_body">
{{ .Content }}
</main>
</article>
{{ end }}

4
layouts/index.html Normal file
View file

@ -0,0 +1,4 @@
{{ define "main" }}
{{ partial "front.html" . }}
{{ partial "sections.html" . }}
{{ end }}

View file

@ -0,0 +1,33 @@
<footer class="footer">
<address class="footer_contact">
{{ if $.Site.Params.contact.email }}
<p class="footer_item">
<img class="page-icon" src="/svg/envelope.svg"/>
<a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email">
{{ $.Site.Params.contact.email }}
</a>
</p>
{{ end }}
{{ if $.Site.Params.contact.phone }}
<p class="footer_item">
<img class="page-icon" src="/svg/phone.svg"/>
<a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone">
{{ $.Site.Params.contact.phone }}
</a>
</p>
{{ end }}
{{ if $.Site.Params.contact.address }}
<p class="footer_item">
<img class="page-icon" src="/svg/map-marker.svg"/>
{{ $.Site.Params.contact.address }}
</p>
{{ end }}
<p class="footer_item">
<img class="page-icon" src="/svg/copyright.svg"/>
{{ now.Format "2006" }} - {{ $.Site.Title }}
</p>
</address>
</footer>

View file

@ -0,0 +1,6 @@
<main class="front-screen" {{ if $.Params.background }}
style="background-image: url('{{ $.Site.BaseURL }}{{ print (index $.Params.background 0) }}');" {{ end }}>
<div class="front-screen_caption">
{{ .Content }}
</div>
</main>

View file

@ -0,0 +1,18 @@
<head>
<meta charset="UTF-8" />
<title>{{ $.Site.Title }} - {{ .Title }}</title>
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" />
<meta name="description" content="{{ $.Site.Params.description }}" />
{{ hugo.Generator }}
{{ template "_internal/twitter_cards.html" . }}
{{ template "_internal/opengraph.html" . }}
<link rel="stylesheet" type="text/css" href="/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/css/media-queries.css"/>
{{ range .Site.Params.custom_css }}
<link rel="stylesheet" type="text/css" href="{{ . | relURL }}"/>
{{ end }}
</head>

View file

@ -0,0 +1,28 @@
<header class="navbar">
<nav id="navigation">
<section class="navigation-container">
<a id="navigation-title" href="/">
{{ if $.Site.Params.logo }}
<img src="{{ $.Site.BaseURL }}{{ $.Site.Params.logo }}" class="navbar_title_logo" alt="{{ $.Site.Title }}">
{{ else }}
{{ $.Site.Title }}
{{ end }}
</a>
<input type="checkbox" id="menu-toggle" />
<label class="menu-button" for="menu-toggle">
<div class="menu-button-inner">
<div class="menu-button-image"></div>
</div>
</label>
<ul id="navigation-list">
{{ $current := . }}
{{ range .Site.Menus.main }}
<li class="navigation-item {{ if $current.IsMenuCurrent "main" . }}active{{ end }}">
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</section>
</nav>
</header>

View file

@ -0,0 +1,6 @@
<section class="section">
<h1>{{ .Title }}</h1>
<div class="content">
{{ .Content }}
</div>
</section>

View file

@ -0,0 +1,14 @@
{{ $items := (where $.Site.RegularPages "Type" "sections") }}
{{ $len := (len $items) }}
{{ range $i, $e := $items }}
{{ partial "section.html" .}}
{{ if ne (add $i 1) $len }}
<div class="separator">
<img src="/svg/circle.svg"/>
</div>
{{ end }}
{{ end}}

259
static/css/base.css Normal file
View file

@ -0,0 +1,259 @@
/******************* Constants *******************/
:root {
--font-color: #000000;
--background-color: #FFFFFF;
--max-width: 800px;
--max-width-full: 1000px;
--icon-size: 1em;
--footer-height-inline: 4em;
--footer-height-block: 8em;
}
/******************* Base *******************/
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing:inherit
}
a {
color: black;
text-decoration: none;
}
a:visited {
color: black;
text-decoration: none;
}
body {
padding-top: 4em;
font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.62;
height: 100vh;
margin: 0;
}
.page-icon {
display: inline-block;
max-width: var(--icon-size);
max-height: var(--icon-size);
}
/******************* Post *******************/
.post {
min-height: 100%;
padding-top: 3em;
padding-bottom: 3em;
margin-bottom: calc(-1 * var(--footer-height-inline));
}
.post:after {
content: "";
display: block;
}
.post_header {
margin: 0 auto;
width: 80%;
text-align: center;
max-width: var(--max-width);
}
.post_header .post_title {
font-size: 2em;
font-weight: normal;
}
.post_body {
margin: 0 auto;
width: 80%;
max-width: var(--max-width);
}
.post a {
text-decoration: underline dotted;
}
.post a:hover {
text-decoration: underline solid;
}
.post:after {
height: var(--footer-height-inline);
}
/******************* Footer *******************/
.footer {
height: var(--footer-height-inline);
}
.footer {
background-color: grey;
color: white;
}
.footer .footer_link {
color: white;
}
.footer .footer_link:hover {
color: black;
}
.footer address {
margin: auto;
width: 90%;
max-width: var(--max-width-full);
display: flex;
justify-content: space-between;
line-height: var(--footer-height-inline);
}
.footer p {
margin: 0;
}
/******************* Navbar *******************/
.navbar {
position: fixed;
top: 0;
width: 100%;
margin: auto;
padding: 0 5vw;
line-height: 4em;
z-index: 50;
background: white;
}
#navigation {
max-width: var(--max-width-full);
margin: auto;
}
.navigation-item a {
color: var(--primary-text);
padding: 0.5rem 0;
position: relative;
}
.navigation-item a:hover,
.navigation-item a:focus {
color: var(--primary-text);
}
.navigation-item a::before {
bottom: 0;
content: "";
display: inline-block;
height: 3px;
position: absolute;
transition: all 0.25s ease-in-out;
width: 0%;
}
.navigation-item a::before {
background-color: black;
}
.navigation-item a:hover::before,
.navigation-item a:focus::before {
opacity: 1;
width: 100%;
}
.navigation-item.active a::before {
opacity: 1;
width: 100%;
}
.navbar_title_logo {
max-width: 7rem;
vertical-align: middle;
}
/******************* Navbar Toggle *******************/
#menu-toggle {
display: none;
}
#navigation .menu-button {
float: right;
position:relative;
display: none;
width: 4em;
height: 4em;
}
#navigation .menu-button-inner {
width: 3em;
height: 3em;
position:relative;
top: 0.5em;
left: 0.5em;
text-align:center
}
#navigation .menu-button .menu-button-image {
display: inline-block;
position: relative;
height: 20px;
width: 24px;
top: 14px;
background-image: url(../svg/bars.svg);
background-size: contain;
margin: auto;
vertical-align: top;
}
#menu-toggle:checked + .menu-button .menu-button-image {
opacity: 40%;
}
#navigation-list {
position: absolute;
top: 6rem;
right: 0;
visibility: hidden;
opacity: 0;
max-height: 0;
width: 100%;
font-size: 1.5em;
background-color: var(--background-color);
border-top: solid 2px var(--font-color);
border-bottom: solid 2px var(--font-color);
transition: opacity .5s, max-height .35s linear;
padding: 0;
}
#navigation-list .navigation-item {
float: none !important;
text-align: center;
margin: 0;
display: block;
}
#navigation-list .navigation-item,
#navigation-list .navigation-item span {
line-height: 5rem;
margin: 0 1.5rem;
}
#menu-toggle:checked + label + ul {
visibility: visible;
opacity: 1;
max-height: max-content;
}
#navigation .menu-button {
display: block;
cursor: pointer;
}
/******************* Front-screen *******************/
.front-screen {
height: 90vh;
position: relative;
padding-left: 3em;
margin: auto;
max-width: var(--max-width-full);
}
.front-screen_caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.front-screen_caption h1 {
font-weight: normal;
font-size: 4rem;
}
.front-screen_caption h2 {
font-weight: normal;
font-size: 1.5rem;
}
/******************* Main - Sections *******************/
.section, .separator {
width: 60%;
max-width: var(--max-width);
margin: auto;
}
.separator {
text-align: center;
}
.separator img {
width: .5em;
}
.section:last-of-type {
margin-bottom: 3em;
}

View file

@ -0,0 +1,62 @@
/******************* Main layout *******************/
@media screen and (max-width: 768px) {
.post {
margin-bottom: calc(-1 * var(--footer-height-block));
}
.post_body {
margin: 0 1em;
}
.post:after {
height: var(--footer-height-block);
}
.footer {
height: var(--footer-height-block);
padding: 1em 0;
}
.footer address {
display: block;
}
.footer p {
line-height: 2em;
}
.front-screen {
margin-left: 1em;
padding-left: 0;
}
.section {
width: 100%;
padding: 1em 1em;
}
}
/******************* Navbar Menu *******************/
@media only screen and (min-width: 768px) {
#navigation-list {
position: relative;
float: right;
top: 0;
max-height: none;
visibility: visible;
opacity: 100;
width: auto;
border: none;
font-size: 1em;
margin-top: 0;
}
#navigation-list .navigation-item {
display: inline-block;
font-weight: bold;
line-height: 4rem;
}
#navigation-list .navigation-item a,
#navigation-list .navigation-item span {
line-height: 1rem;
}
#menu-toggle:checked + label + ul {
visibility: visible;
opacity: 1;
}
#navigation .menu-button {
display: none;
}
}

1
static/svg/bars.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="13.333"><path d="M16 11.333v1.334a.671.671 0 01-.667.666H.667A.671.671 0 010 12.667v-1.334c0-.364.302-.666.667-.666h14.666c.365 0 .667.302.667.666zM16 6v1.333a.671.671 0 01-.667.667H.667A.671.671 0 010 7.333V6c0-.365.302-.667.667-.667h14.666c.365 0 .667.302.667.667zm0-5.333V2a.671.671 0 01-.667.667H.667A.671.671 0 010 2V.667C0 .302.302 0 .667 0h14.666c.365 0 .667.302.667.667z"/></svg>

After

Width:  |  Height:  |  Size: 446 B

1
static/svg/circle.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 8c0 4.417-3.583 8-8 8s-8-3.583-8-8 3.583-8 8-8 8 3.583 8 8z"/></svg>

After

Width:  |  Height:  |  Size: 144 B

1
static/svg/copyright.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M11.98 9.854v1.136c0 1.468-2.345 2.01-3.813 2.01-2.854 0-5-2.177-5-5.052C3.167 5.125 5.292 3 8.115 3c1.03 0 3.729.365 3.729 2.02v1.136a.164.164 0 01-.167.167h-1.23a.165.165 0 01-.166-.167v-.729c0-.656-1.26-.958-2.114-.958-1.948 0-3.302 1.406-3.302 3.427 0 2.094 1.416 3.625 3.385 3.625.75 0 2.167-.281 2.167-.938v-.729c0-.094.073-.166.156-.166h1.24c.083 0 .166.072.166.166zM8 1.334A6.673 6.673 0 001.333 8 6.673 6.673 0 008 14.667 6.673 6.673 0 0014.667 8 6.673 6.673 0 008 1.333zM16 8c0 4.417-3.583 8-8 8s-8-3.583-8-8 3.583-8 8-8 8 3.583 8 8z"/></svg>

After

Width:  |  Height:  |  Size: 624 B

1
static/svg/envelope.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12.571"><path d="M16 4.053v7.09c0 .785-.643 1.428-1.429 1.428H1.43A1.433 1.433 0 010 11.143v-7.09c.268.295.571.554.902.777 1.482 1.01 2.982 2.018 4.437 3.08.75.554 1.679 1.233 2.652 1.233h.018c.973 0 1.902-.679 2.652-1.232a171.118 171.118 0 014.446-3.08c.322-.224.625-.483.893-.778zm0-2.625c0 1-.741 1.902-1.527 2.447-1.393.964-2.794 1.928-4.178 2.902C9.715 7.178 8.732 8 8.009 8H7.99c-.723 0-1.705-.822-2.286-1.223-1.384-.974-2.785-1.938-4.17-2.902C.903 3.446 0 2.437 0 1.625 0 .75.473 0 1.429 0H14.57C15.348 0 16 .643 16 1.429z"/></svg>

After

Width:  |  Height:  |  Size: 597 B

View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="10.667" height="16"><path d="M8 5.333a2.672 2.672 0 00-2.667-2.666 2.672 2.672 0 00-2.666 2.666A2.672 2.672 0 005.333 8 2.672 2.672 0 008 5.333zm2.667 0c0 .636-.073 1.292-.344 1.865L6.53 15.26a1.33 1.33 0 01-1.198.74c-.5 0-.979-.281-1.187-.74L.344 7.198C.073 6.625 0 5.968 0 5.333A5.33 5.33 0 015.333 0a5.33 5.33 0 015.334 5.333z"/></svg>

After

Width:  |  Height:  |  Size: 385 B

1
static/svg/phone.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 12.636c0 .41-.182 1.205-.352 1.58-.239.557-.875.92-1.387 1.205-.67.363-1.352.579-2.113.579-1.057 0-2.012-.432-2.978-.784a10.62 10.62 0 01-1.988-.943C5.25 13.079 2.92 10.75 1.727 8.818A10.622 10.622 0 01.784 6.83C.432 5.864 0 4.91 0 3.852 0 3.091.216 2.41.58 1.74.864 1.227 1.227.59 1.784.352 2.16.182 2.954 0 3.364 0c.08 0 .159 0 .238.034.239.079.489.636.603.864.363.647.715 1.306 1.09 1.943.182.295.523.659.523 1.011 0 .693-2.057 1.705-2.057 2.318 0 .307.284.705.444.978 1.147 2.068 2.58 3.5 4.647 4.647.273.16.67.444.978.444.613 0 1.625-2.057 2.318-2.057.352 0 .716.34 1.011.522.636.375 1.296.728 1.943 1.091.228.114.784.364.864.603.034.08.034.159.034.238z"/></svg>

After

Width:  |  Height:  |  Size: 743 B

15
theme.toml Normal file
View file

@ -0,0 +1,15 @@
# theme.toml template for a Hugo theme
# See https://github.com/gohugoio/hugoThemes#themetoml for an example
name = "Simple Site"
license = "MIT"
licenselink = "https://github.com/yourname/yourtheme/blob/master/LICENSE"
description = ""
homepage = "http://example.com/"
tags = []
features = []
min_version = "0.41.0"
[author]
name = "Gregory Trolliet"
homepage = "https://trolliet.info"