raghnarok/hugo_idunn
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Compare commits

base: raghnarok:v1.0.0
Branches Tags
raghnarok:master
raghnarok:v1.2.0
raghnarok:v1.1.0
raghnarok:v1.0.0
...
compare: raghnarok:master
Branches Tags
raghnarok:master
raghnarok:v1.2.0
raghnarok:v1.1.0
raghnarok:v1.0.0

11 commits
v1.0.0 ... master

Author SHA1 Message Date
Gregory Trolliet
1edb0e8f7c Change the logo to center and transparent 2020-10-30 13:35:57 +01:00
Gregory Trolliet
59d14d98e4 V1.2.0 2020-04-28 08:41:39 +02:00
Gregory Trolliet
b5e4178324 Make the footer multilines view variable 2020-04-28 08:40:17 +02:00
Gregory Trolliet
c76fa98be3 Fix the navbar height 2020-04-28 08:10:37 +02:00
Gregory Trolliet
2575097323 Fix the theme name 2020-04-28 07:48:45 +02:00
Gregory Trolliet
7b8f3b98d7 Set v1.1.0 2020-04-28 07:43:24 +02:00
Gregory Trolliet
420b8cff26 Fix the width for mobile 2020-04-27 23:29:35 +02:00
Gregory Trolliet
9ac32636c5 Make header vh sized 2020-04-27 23:17:53 +02:00
Gregory Trolliet
2ace48748e Remove bold navbar 2020-04-27 21:59:24 +02:00
Gregory Trolliet
2aaf20406d Add option to set colors in config file 2020-04-27 21:39:46 +02:00
Gregory Trolliet
578125c659 Properly indent comments 2020-04-27 20:22:22 +02:00
9 changed files with 108 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

27
CHANGELOG.md
View file

@ -6,7 +6,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [Unreleased] ## [Unreleased]
## [1.2.0] - 2020-04-28
### Added
* Footer height in multilines view is now dependant of params.contact variable.
### Changed
* Export the CSS variable modification to a new partial *style.css*.
### Fixed
* Fix the navbar height.
## [1.1.0] - 2020-04-28
### Added
* Option to set color variables in config.toml. Options are:
* **font**, general font color, default to *black*;
* **background**, general background color, default to *white*;
* **main**, theme color, used for footer among others, default to *grey*;
* **font_above**, used for font above *main* color, default to *white*.
### Changed
* Change the height of the navbar, use vh now.
### Fixed
* Viewport size on mobile.
## [1.0.0] - 2020-04-27 ## [1.0.0] - 2020-04-27
### Added ### Added
* First version of the theme.
* First version of the theme

8
README.md
View file

@ -10,7 +10,7 @@ to your site's theme directory.
```bash ```bash
$ mkdir themes $ mkdir themes
$ cd themes $ cd themes
$ git clone https://git.vulgarisons.info/raghnarok/hugo_idunn.git simple-site $ git clone https://git.vulgarisons.info/raghnarok/hugo_idunn.git idunn
``` ```
Don't forget to change the theme in your config.toml file. Don't forget to change the theme in your config.toml file.
@ -44,8 +44,10 @@ It is possible to basicaly change some colors:
```toml ```toml
[params.colors] [params.colors]
main = "green" # Color of the footer font = "black" # General font color, default to black
alt_text = "black" # Color of the text above 'main' color background = "white" # General background color, default to white
main = "grey" # Theme color, used for footer among others, default to grey
font_above = "white" # Used for font above *main* color, default to white
``` ```
### Custom CSS ### Custom CSS

2
layouts/_default/baseof.html
View file

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

8
layouts/partials/footer.html
View file

@ -1,13 +1,10 @@
<footer class="footer" style=" <footer class="footer" style="
{{ if $.Site.Params.colors.main }}background-color: {{ $.Site.Params.colors.main }};{{ end }}
{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}
"> ">
<address class="footer_contact"> <address class="footer_contact">
{{ if $.Site.Params.contact.email }} {{ if $.Site.Params.contact.email }}
<p class="footer_item"> <p class="footer_item">
<img class="page-icon" src="/svg/envelope.svg"/> <img class="page-icon" src="/svg/envelope.svg"/>
<a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email" <a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email">
style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
{{ $.Site.Params.contact.email }} {{ $.Site.Params.contact.email }}
</a> </a>
</p> </p>
@ -16,8 +13,7 @@
{{ if $.Site.Params.contact.phone }} {{ if $.Site.Params.contact.phone }}
<p class="footer_item"> <p class="footer_item">
<img class="page-icon" src="/svg/phone.svg"/> <img class="page-icon" src="/svg/phone.svg"/>
<a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone" <a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone">
style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
{{ $.Site.Params.contact.phone }} {{ $.Site.Params.contact.phone }}
</a> </a>
</p> </p>

5
layouts/partials/front.html
View file

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

3
layouts/partials/head.html
View file

@ -1,6 +1,7 @@
<head> <head>
<meta charset="UTF-8" />
<title>{{ $.Site.Title }} - {{ .Title }}</title> <title>{{ $.Site.Title }} - {{ .Title }}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" /> <link rel="icon" href="{{ $.Site.BaseURL }}{{ $.Site.Params.favicon }}" />
<meta name="description" content="{{ $.Site.Params.description }}" /> <meta name="description" content="{{ $.Site.Params.description }}" />

13
layouts/partials/style.html Normal file
View file

@ -0,0 +1,13 @@
<style>
:root {
{{ if .Site.Params.colors }}
{{ range $key, $val := .Site.Params.colors }}
--{{ $key }}-color: {{ $val }};
{{ end }}
{{ end }}
{{ if .Site.Params.contact }}
--footer-height-block: {{ mul (add (len .Site.Params.contact) 2) 2 }}em;
{{ end }}
}
</style>

72
static/css/base.css
View file

@ -1,8 +1,9 @@
/******************* Constants *******************/ /******************* Constants *******************/
:root { :root {
--font-color: #000000; --font-color: black;
--background-color: #FFFFFF; --background-color: white;
--footer-color: grey; --main-color: grey;
--font_above-color: white;
--max-width: 800px; --max-width: 800px;
--max-width-full: 1000px; --max-width-full: 1000px;
@ -10,16 +11,20 @@
--footer-height-inline: 4em; --footer-height-inline: 4em;
--footer-height-block: 8em; --footer-height-block: 8em;
--navbar-height: 8vh;
} }
/******************* Base *******************/ /******************* Base *******************/
html {
box-sizing: border-box;
}
*, *,
*::before, *::before,
*::after { *::after {
box-sizing:inherit box-sizing: border-box;
}
html {
font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-size: medium;
} }
a { a {
color: black; color: black;
@ -30,10 +35,9 @@ a:visited {
text-decoration: none; text-decoration: none;
} }
body { body {
padding-top: 4em; padding-top: var(--navbar-height);
font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
line-height: 1.62; line-height: 1.62;
height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
} }
.page-icon { .page-icon {
@ -44,9 +48,9 @@ body {
/******************* Post *******************/ /******************* Post *******************/
.post { .post {
min-height: 100%; min-height: 92vh;
padding-top: 3em; padding-top: 3em;
padding-bottom: 3em; padding-bottom: var(--footer-height-inline);
margin-bottom: calc(-1 * var(--footer-height-inline)); margin-bottom: calc(-1 * var(--footer-height-inline));
} }
.post:after { .post:after {
@ -80,11 +84,11 @@ body {
/******************* Footer *******************/ /******************* Footer *******************/
.footer { .footer {
height: var(--footer-height-inline); height: var(--footer-height-inline);
background-color: var(--footer-color); background-color: var(--main-color);
color: white; color: var(--font_above-color);
} }
.footer .footer_link { .footer .footer_link {
color: white; color: var(--font_above-color);
} }
.footer .footer_link:hover { .footer .footer_link:hover {
color: black; color: black;
@ -108,7 +112,7 @@ body {
width: 100%; width: 100%;
margin: auto; margin: auto;
padding: 0 5vw; padding: 0 5vw;
line-height: 4em; line-height: 8vh;
z-index: 50; z-index: 50;
background: white; background: white;
box-shadow: 0 1px 5px black; box-shadow: 0 1px 5px black;
@ -117,6 +121,9 @@ body {
max-width: var(--max-width-full); max-width: var(--max-width-full);
margin: auto; margin: auto;
} }
.navigation-container {
height: 8vh
}
#navigation-list { #navigation-list {
margin-bottom: 0; margin-bottom: 0;
} }
@ -139,7 +146,7 @@ body {
width: 0%; width: 0%;
} }
.navigation-item a::before { .navigation-item a::before {
background-color: black; background-color: var(--main-color);
} }
.navigation-item a:hover::before, .navigation-item a:hover::before,
.navigation-item a:focus::before { .navigation-item a:focus::before {
@ -162,28 +169,27 @@ body {
#navigation .menu-button { #navigation .menu-button {
float: right; float: right;
position:relative; position:relative;
display: none;
width: 4em; width: 4em;
height: 4em; height: 4em;
cursor: pointer;
max-height: var(--navbar-height);
} }
#navigation .menu-button-inner { #navigation .menu-button-inner {
width: 3em; width: 100%;
height: 3em; height: 100%;
position:relative; position:relative;
top: 0.5em;
left: 0.5em;
text-align:center text-align:center
} }
#navigation .menu-button .menu-button-image { #navigation .menu-button .menu-button-image {
display: inline-block; display: inline-block;
position: relative; position: absolute;
height: 20px; height: 20px;
width: 24px; width: 24px;
top: 14px; top: 50%;
left: 50%;
background-image: url(../svg/bars.svg); background-image: url(../svg/bars.svg);
background-size: contain; background-size: contain;
margin: auto; transform: translateX(-50%) translateY(-50%);
vertical-align: top;
} }
#menu-toggle:checked + .menu-button .menu-button-image { #menu-toggle:checked + .menu-button .menu-button-image {
opacity: 40%; opacity: 40%;
@ -219,23 +225,25 @@ body {
opacity: 1; opacity: 1;
max-height: max-content; max-height: max-content;
} }
#navigation .menu-button {
display: block;
cursor: pointer;
}
/******************* Front-screen *******************/ /******************* Front-screen *******************/
.front-screen { .front-screen {
height: 90vh; height: 93vh;
position: relative; position: relative;
padding-left: 3em; padding-left: 3em;
margin: auto; margin: auto;
max-width: var(--max-width-full); max-width: var(--max-width-full);
} }
.front-screen_image {
opacity: 0.5;
width: 100%;
}
.front-screen_caption { .front-screen_caption {
position: absolute; position: absolute;
top: 50%; top: 50%;
transform: translateY(-50%); left: 50%;
transform: translateY(-50%) translateX(-50%);
text-align: center;
} }
.front-screen_caption h1 { .front-screen_caption h1 {
font-weight: normal; font-weight: normal;

17
static/css/media-queries.css
View file

@ -1,10 +1,18 @@
/******************* Main layout *******************/ /******************* Main layout *******************/
@media only screen and (max-width: 320px) {
html {
font-size: smaller;
}
}
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
.post { .post {
margin-bottom: calc(-1 * var(--footer-height-block)); margin-bottom: calc(-1 * var(--footer-height-block));
} }
.post_body { .post_body,
margin: 0 1em; .post_header {
padding: 0 1em;
width: 100%;
} }
.post:after { .post:after {
height: var(--footer-height-block); height: var(--footer-height-block);
@ -21,6 +29,7 @@
} }
.front-screen { .front-screen {
margin-left: 1em; margin-left: 1em;
margin-right: 1em;
padding-left: 0; padding-left: 0;
} }
.section { .section {
@ -30,7 +39,8 @@
} }
/******************* Navbar Menu *******************/ /******************* Navbar Menu *******************/
@media only screen and (min-width: 768px) { @media screen and (min-width: 768px) {
#navigation-list { #navigation-list {
position: relative; position: relative;
float: right; float: right;
@ -45,7 +55,6 @@
} }
#navigation-list .navigation-item { #navigation-list .navigation-item {
display: inline-block; display: inline-block;
font-weight: bold;
line-height: 4rem; line-height: 4rem;
} }
#navigation-list .navigation-item a, #navigation-list .navigation-item a,