Change the logo to center and transparent

V1.2.0
Make the footer multilines view variable
2020-10-30 13:35:57 +01:00 · 2020-04-28 08:41:39 +02:00 · 2020-04-28 08:40:17 +02:00 · 2020-04-28 08:10:37 +02:00 · 2020-04-28 07:48:45 +02:00 · 2020-04-28 07:43:24 +02:00
9 changed files with 108 additions and 55 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -6,7 +6,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

 ## [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
 ### Added
-
-* First version of the theme
+* First version of the theme.
--- a/README.md
+++ b/README.md
@ -10,7 +10,7 @@ to your site's theme directory.
 ```bash
 $ mkdir 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.
@ -24,7 +24,7 @@ baseurl = "https://yourdoma.in" # The base url of your Hugo website
 title = "Title"                 # The title of your website
 author = "Author"               # The author of the website
 language = "fr"
-theme = "idunn"           # The Hugo theme
+theme = "idunn"                 # The Hugo theme
 ```

 ### Description
@ -44,8 +44,10 @@ It is possible to basicaly change some colors:

 ```toml
 [params.colors]
-	main = "green"     # Color of the footer
-	alt_text = "black" # Color of the text above 'main' color
+	font = "black"       # General font color, default to black
+	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
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
 {{- partial "head.html" . -}}
-
+{{- partial "style.html" . -}}
 <body>
-    {{- partial "header.html" . -}}
-    {{- block "main" . }}{{- end }}
-    {{- partial "footer.html" . -}}
+	{{- partial "header.html" . -}}
+	{{- block "main" . }}{{- end }}
+	{{- partial "footer.html" . -}}
 </body>

 </html>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -1,13 +1,10 @@
 <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">
 		{{ 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"
-				style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
+			<a href="mailto:{{ $.Site.Params.contact.email}}" class="footer_link" alt="Email">
 				{{ $.Site.Params.contact.email }}
 			</a>
 		</p>
@ -16,8 +13,7 @@
 		{{ 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"
-				style="{{ if $.Site.Params.colors.alt_text }}color: {{ $.Site.Params.colors.alt_text }};{{ end }}">
+			<a href="tel:{{ $.Site.Params.contact.phone}}" class="footer_link" alt="Phone">
 				{{ $.Site.Params.contact.phone }}
 			</a>
 		</p>
--- a/layouts/partials/front.html
+++ b/layouts/partials/front.html
@ -1,5 +1,6 @@
-<main class="front-screen" {{ if $.Params.background }}
-	style="background-image: url('{{ $.Site.BaseURL }}{{ print (index $.Params.background 0) }}');" {{ end }}>
+<main class="front-screen">
+	{{ if $.Params.background }}
+	<img class="front-screen_image" src="{{ $.Site.BaseURL }}{{ print (index $.Params.background 0) }}"/> {{ end }}
 	<div class="front-screen_caption">
 		{{ .Content }}
 	</div>
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -1,6 +1,7 @@
 <head>
-	<meta charset="UTF-8" />
 	<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 }}" />
 	<meta name="description" content="{{ $.Site.Params.description }}" />

--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@ -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>
--- a/static/css/base.css
+++ b/static/css/base.css
@ -1,8 +1,9 @@
 /******************* Constants *******************/
 :root {
-	--font-color: #000000;
-	--background-color: #FFFFFF;
-	--footer-color: grey;
+	--font-color: black;
+	--background-color: white;
+	--main-color: grey;
+	--font_above-color: white;

 	--max-width: 800px;
 	--max-width-full: 1000px;
@ -10,16 +11,20 @@

 	--footer-height-inline: 4em;
 	--footer-height-block: 8em;
+
+	--navbar-height: 8vh;
 }

 /******************* Base *******************/
-html {
-	box-sizing: border-box;
-}
 *,
 *::before,
 *::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 {
 	color: black;
@ -30,10 +35,9 @@ a:visited {
 	text-decoration: none;
 }
 body {
-	padding-top: 4em;
-	font-family: Roboto, Ubuntu, Oxygen, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+	padding-top: var(--navbar-height);
 	line-height: 1.62;
-	height: 100vh;
+	min-height: 100vh;
 	margin: 0;
 }
 .page-icon {
@ -44,9 +48,9 @@ body {

 /******************* Post *******************/
 .post {
-	min-height: 100%;
+	min-height: 92vh;
 	padding-top: 3em;
-	padding-bottom: 3em;
+	padding-bottom: var(--footer-height-inline);
 	margin-bottom: calc(-1 * var(--footer-height-inline));
 }
 .post:after {
@ -80,11 +84,11 @@ body {
 /******************* Footer *******************/
 .footer {
 	height: var(--footer-height-inline);
-	background-color: var(--footer-color);
-	color: white;
+	background-color: var(--main-color);
+	color: var(--font_above-color);
 }
 .footer .footer_link {
-	color: white;
+	color: var(--font_above-color);
 }
 .footer .footer_link:hover {
 	color: black;
@ -108,7 +112,7 @@ body {
 	width: 100%;
 	margin: auto;
 	padding: 0 5vw;
-	line-height: 4em;
+	line-height: 8vh;
 	z-index: 50;
 	background: white;
 	box-shadow: 0 1px 5px black;
@ -117,6 +121,9 @@ body {
 	max-width: var(--max-width-full);
 	margin: auto;
 }
+.navigation-container {
+	height: 8vh
+}
 #navigation-list {
 	margin-bottom: 0;
 }
@ -139,7 +146,7 @@ body {
 	width: 0%;
 }
 .navigation-item a::before {
-	background-color: black;
+	background-color: var(--main-color);
 }
 .navigation-item a:hover::before,
 .navigation-item a:focus::before {
@ -162,28 +169,27 @@ body {
 #navigation .menu-button {
 	float: right;
 	position:relative;
-	display: none;
 	width: 4em;
 	height: 4em;
+	cursor: pointer;
+	max-height: var(--navbar-height);
 }
 #navigation .menu-button-inner {
-	width: 3em;
-	height: 3em;
+	width: 100%;
+	height: 100%;
 	position:relative;
-	top: 0.5em;
-	left: 0.5em;
 	text-align:center
 }
 #navigation .menu-button .menu-button-image {
 	display: inline-block;
-	position: relative;
+	position: absolute;
 	height: 20px;
 	width: 24px;
-	top: 14px;
+	top: 50%;
+	left: 50%;
 	background-image: url(../svg/bars.svg);
 	background-size: contain;
-	margin: auto;
-	vertical-align: top;
+	transform: translateX(-50%) translateY(-50%);
 }
 #menu-toggle:checked + .menu-button .menu-button-image {
 	opacity: 40%;
@ -219,23 +225,25 @@ body {
 	opacity: 1;
 	max-height: max-content;
 }
-#navigation .menu-button {
-	display: block;
-	cursor: pointer;
-}

 /******************* Front-screen *******************/
 .front-screen {
-	height: 90vh;
+	height: 93vh;
 	position: relative;
 	padding-left: 3em;
 	margin: auto;
 	max-width: var(--max-width-full);
 }
+.front-screen_image {
+	opacity: 0.5;
+	width: 100%;
+}
 .front-screen_caption {
 	position: absolute;
 	top: 50%;
-	transform: translateY(-50%);
+	left: 50%;
+	transform: translateY(-50%) translateX(-50%);
+	text-align: center;
 }
 .front-screen_caption h1 {
 	font-weight: normal;
--- a/static/css/media-queries.css
+++ b/static/css/media-queries.css
@ -1,10 +1,18 @@
 /******************* Main layout *******************/
+@media only screen and (max-width: 320px) {
+	html {
+		font-size: smaller;
+	}
+}
+
@media screen and (max-width: 768px) {
 	.post {
 		margin-bottom: calc(-1 * var(--footer-height-block));
 	}
-	.post_body {
-		margin: 0 1em;
+	.post_body,
+	.post_header {
+		padding: 0 1em;
+		width: 100%;
 	}
 	.post:after {
 		height: var(--footer-height-block);
@ -21,6 +29,7 @@
 	}
 	.front-screen {
 		margin-left: 1em;
+		margin-right: 1em;
 		padding-left: 0;
 	}
 	.section {
@ -30,7 +39,8 @@
 }

 /******************* Navbar Menu *******************/
-@media only screen and (min-width: 768px) {
+@media screen and (min-width: 768px) {
+
 	#navigation-list {
 		position: relative;
 		float: right;
@ -45,7 +55,6 @@
 	}
 	#navigation-list .navigation-item {
 		display: inline-block;
-		font-weight: bold;
 		line-height: 4rem;
 	}
 	#navigation-list .navigation-item a,
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