Begin design

content/index.md

@@ -0,0 +1,125 @@
+---
+title: "Georges"
+date: 2022-02-02T12:52:22+01:00
+draft: false
+---
+
+
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur convallis
+malesuada leo. Donec tincidunt gravida ullamcorper. Aenean magna quam, pretium
+at ipsum vel, vulputate viverra nibh. In bibendum nulla id augue feugiat
+consequat. In sed viverra sem, et maximus nunc. Phasellus ut purus at lorem
+rutrum bibendum at vel nisl. Etiam vestibulum dui ligula, at eleifend elit
+mollis eu. Donec lorem urna, lacinia vitae justo quis, pellentesque molestie
+lacus. Donec dapibus pretium diam nec gravida. Quisque cursus sem eu erat
+dictum, et accumsan nunc consequat.
+
+Nam tincidunt, purus ac sagittis blandit, mauris nulla malesuada tortor, eget
+vehicula velit risus at dolor. Nam et imperdiet odio, et congue lorem. Etiam
+volutpat volutpat erat sed scelerisque. Donec tortor dui, laoreet nec suscipit
+et, tristique quis dui. Aenean vulputate ut nisl nec fermentum. Aliquam eget
+ante vitae eros tempor maximus. Sed consequat tempor risus, eu consectetur
+justo placerat faucibus. Donec nisl dolor, dapibus nec ex vel, eleifend
+interdum eros. Sed vel suscipit elit. Phasellus tincidunt porta mi, id tempor
+nunc fringilla in.
+
+Proin tristique enim et fringilla fermentum. Suspendisse potenti. Sed
+malesuada, eros lobortis pellentesque tempus, est turpis eleifend ante, vitae
+cursus tellus elit vel mi. Maecenas vitae risus et orci efficitur eleifend a id
+enim. Cras aliquam sapien nisi. Duis risus tortor, placerat a mauris vitae,
+suscipit interdum lorem. Nulla ultricies ultrices convallis. Curabitur ligula
+nulla, ultrices nec dapibus eget, mattis quis sem. Vivamus consectetur commodo
+elit, accumsan vulputate nisl rutrum sed. Etiam ullamcorper enim ut ligula
+cursus blandit. Quisque iaculis sit amet nunc id blandit. Nunc nec lorem
+libero. Quisque nec hendrerit felis. Sed maximus dapibus metus, et faucibus
+diam. Suspendisse dolor urna, feugiat vitae consectetur a, tempus at ante.
+Aliquam dignissim nibh in purus elementum molestie.
+
+In convallis dapibus dignissim. Duis dignissim tortor bibendum, sollicitudin
+mauris eget, iaculis lacus. In vel consectetur augue. Mauris maximus, urna non
+bibendum iaculis, massa velit consectetur augue, id blandit purus velit sed ex.
+Suspendisse semper quam sed hendrerit porttitor. Aenean aliquam, diam eu
+vestibulum tristique, velit nunc pulvinar ligula, sed feugiat nisl sapien non
+mauris. Pellentesque efficitur ut nunc sit amet elementum. Aenean laoreet
+placerat erat quis fermentum. Integer ultricies iaculis magna, vitae posuere
+erat aliquet et.
+
+Donec scelerisque ultrices libero quis imperdiet. Pellentesque id orci quam.
+Aliquam vel pretium felis, a tempor metus. Nullam bibendum, eros sit amet
+sollicitudin aliquet, neque nisl tempus quam, a malesuada lacus nisl a lacus.
+Mauris volutpat ornare lacus, sit amet pretium eros dapibus eu. Proin ut ante
+scelerisque velit eleifend varius. Maecenas vehicula hendrerit lectus quis
+feugiat.
+
+Proin finibus quam non faucibus vehicula. Nullam vel leo nunc. Nullam sed
+turpis vel erat gravida efficitur ac sed augue. Sed maximus mi ut augue ornare
+tincidunt. Duis id fermentum lacus. Integer vehicula nulla mauris, non blandit
+sem euismod eu. Donec faucibus malesuada placerat. Cras non est scelerisque
+nulla elementum euismod. Nam efficitur quam quis nisi sagittis dapibus. Aliquam
+placerat ipsum ac nunc placerat imperdiet. Fusce mattis tincidunt odio, ut
+faucibus nunc laoreet a. Morbi sodales sodales massa sed tempor. Donec aliquet
+suscipit quam eget malesuada. Quisque commodo nisi sit amet tincidunt
+imperdiet.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent placerat
+lectus consequat, iaculis ante vitae, lobortis velit. Integer sed nibh quis sem
+condimentum luctus. Nunc ut luctus nibh. Suspendisse pellentesque tortor id
+ligula luctus tincidunt. Donec turpis mi, auctor non ligula quis, gravida
+euismod est. Proin ullamcorper velit lacus, vitae porta tortor ultrices sit
+amet. Nunc augue tellus, consectetur eu urna vel, auctor porta nunc. Duis
+vestibulum at urna et aliquet. Quisque scelerisque, tellus id interdum dapibus,
+libero arcu pretium lorem, non ultricies turpis urna id ante. Cras et arcu
+egestas, luctus dolor eget, cursus orci. In condimentum tempus pharetra.
+Pellentesque auctor metus nec augue condimentum, et posuere felis fermentum.
+Nullam at sagittis mauris.
+
+Donec tincidunt leo a nisl commodo finibus. Mauris tincidunt nibh enim, eget
+interdum dui imperdiet quis. Donec aliquet augue vel ex euismod, id iaculis
+elit blandit. Donec sit amet venenatis turpis, vel mollis dolor. Integer purus
+sem, malesuada vitae varius vitae, auctor eget dolor. Aliquam ullamcorper nisl
+id sem iaculis vehicula. Mauris imperdiet, quam sodales blandit vestibulum,
+nisi dui rhoncus felis, sit amet commodo dolor lorem quis elit. Sed consequat
+et ipsum eget hendrerit. Duis feugiat odio arcu, vitae aliquam arcu bibendum
+congue.
+
+Vestibulum commodo sed mauris a facilisis. Quisque vitae turpis volutpat,
+pharetra tortor eget, cursus urna. Cras lorem quam, ornare at pellentesque ut,
+rhoncus sed dolor. Ut quis felis urna. Vivamus quis risus fringilla, elementum
+velit at, elementum diam. Curabitur viverra urna vitae rhoncus elementum.
+Curabitur et vestibulum mauris. Aliquam molestie neque purus, porta ultrices ex
+mollis vel. Sed malesuada quam tortor.
+
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur
+interdum rhoncus rhoncus. Phasellus vestibulum erat ut laoreet tristique.
+Maecenas dignissim ultricies mauris eget feugiat. Sed sem odio, pulvinar ac
+mauris ut, volutpat rhoncus mauris. Nulla facilisi. Nulla lacus sem, pharetra
+et lacus pharetra, sodales convallis nulla. Integer id odio luctus, venenatis
+nulla a, cursus diam. Nulla nibh mauris, accumsan vel ullamcorper eu, molestie
+et mauris. Morbi at purus purus. Sed non metus mattis purus mattis sodales. Ut
+aliquam, ex a mattis aliquet, dolor eros tempus sem, a convallis quam odio at
+diam. In suscipit erat at nunc scelerisque consectetur. Cras facilisis quis
+turpis ac posuere. Sed ut euismod lectus. Suspendisse sit amet lacinia magna.
+
+Donec placerat nisi sit amet elit interdum interdum. In congue nunc eu lorem
+lobortis blandit. Nam lobortis lobortis lacus consequat tincidunt. Integer
+sapien nisl, scelerisque in neque ut, euismod fringilla mi. Vestibulum sed nisl
+quis libero laoreet tempor ut vitae ante. Phasellus id quam vel felis convallis
+semper eget sed dolor. Nullam nec commodo diam, id dignissim velit. Phasellus
+semper tortor ipsum. Praesent scelerisque orci vitae quam vestibulum, sed
+dictum quam tempus. Aenean porttitor ut nunc ut tempor. Nulla facilisi. Nullam
+at sem id quam fringilla sagittis et eget diam. Vivamus fermentum laoreet elit,
+ut convallis odio facilisis eu.
+
+Mauris ut vulputate diam. Donec in consectetur justo. Vivamus feugiat, ligula
+quis suscipit congue, massa purus luctus lorem, luctus pellentesque dolor magna
+sed odio. Curabitur tempus dolor justo, vitae feugiat risus placerat sit amet.
+Sed pellentesque aliquet velit vitae auctor. Aliquam porttitor, est in dictum
+vestibulum, elit ligula varius metus, vitae sollicitudin orci lacus at arcu.
+Cras nisl justo, aliquam ut diam quis, blandit interdum justo. Donec fringilla,
+velit non mattis mollis, lacus sapien cursus dolor, sed interdum tortor nibh id
+diam. Vestibulum rutrum sodales ipsum, quis aliquam odio pharetra at. Nullam
+interdum nibh augue, vitae accumsan tortor elementum at. Integer in enim
+porttitor est vulputate sollicitudin. Duis non pretium ipsum. Donec vitae purus
+sit amet sem placerat viverra vel sed ligula. Integer fermentum finibus augue,
+sit amet blandit lacus sagittis non. 

layouts/_default/baseof.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <link rel="stylesheet" href="/css/style.css">
+    <meta charset="utf-8">
+    <title>{{ block "title" . }}
+      {{- .Site.Title -}}
+    {{ end }}</title>
+  </head>
+  <body>
+    {{ block "header" . }}
+      {{ partial "site-header.html" . }}
+    {{ end }}
+
+    <div id="content">
+			{{ block "pagename" . }}
+			{{ partial "pagetitle.html" . }}
+			{{ end }}
+
+			<div id="main">
+				{{ block "main" . }}
+				{{ end }}
+			</div>
+    </div>
+
+    {{ block "footer" . }}
+      {{ partial "site-footer.html" . }}
+    {{ end }}
+  </body>
+</html>

layouts/_default/list.html

@@ -0,0 +1,13 @@
+{{ define "main" }}
+  <div class="descr">
+    {{ .Content }}
+  </div>
+
+  <div class="list">
+    <ul>
+      {{ range .Pages }}
+      <li><a href="{{ .Permalink }}">{{ .Title }}</a>
+      {{ end }}
+    </ul>
+  </div>
+{{ end }}

layouts/_default/single.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}

layouts/index.html

@@ -0,0 +1,3 @@
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}

layouts/partials/pagetitle.html

@@ -0,0 +1,3 @@
+  <div id="pagename">
+    {{ .Page.Title }}
+  </div>

layouts/partials/site-footer.html

@@ -0,0 +1,9 @@
+<footer id="foot">
+  <div id="footer-legal">
+    Site sous license libre
+    <a href="{{ $.Site.Params.siteLicenseURL }}">
+      {{- $.Site.Params.siteLicenseName -}}
+    </a> (<a href="{{ $.Site.Params.sourceURL }}">code</a>).
+  </div>
+  <div id="madeby">Made by <a href="https://tobast.fr/">tobast</a>.</div>
+</footer>

layouts/partials/site-header.html

@@ -0,0 +1,38 @@
+<header id="head">
+  <div class="sitetitle">
+    <a href="/">{{ .Site.Title }}</a>
+  </div>
+</header>
+<div id="headbg"></div>
+
+
+<script>
+  const GEORGES_POS = 0.2;
+  let isHeaderMenu = false;
+  let ticking = false;
+
+  function setHeaderbar(scrollPos) {
+      if(!isHeaderMenu && scrollPos > GEORGES_POS * window.innerHeight) {
+          header_elt = document.getElementsByTagName('header')[0];
+          header_elt.classList.add('headerbar');
+          isHeaderMenu = true;
+        } else if(isHeaderMenu && scrollPos < GEORGES_POS * window.innerHeight) {
+            document.getElementsByTagName('header')[0].classList.remove('headerbar');
+            isHeaderMenu = false;
+          }
+    }
+  setHeaderbar(window.scrollY);
+
+  document.addEventListener('scroll', function(e) {
+
+      if (!ticking) {
+          window.requestAnimationFrame(function() {
+              setHeaderbar(window.scrollY);
+              ticking = false;
+            });
+
+          ticking = true;
+        }
+    });
+</script>
+

layouts/shortcodes/partial1.html

@@ -0,0 +1 @@
+{{- partial (.Get 0) (.Get 1) -}}

scss/Makefile

@@ -0,0 +1,10 @@
+STYLES=style.scss
+IMPORTS=$(shell ls -1 _*.scss)
+OUTDIR=../static/css
+
+SASS=sassc
+
+all: $(addprefix $(OUTDIR)/,$(STYLES:.scss=.css))
+
+$(OUTDIR)/%.css: %.scss $(IMPORTS)
+	$(SASS) "$<" "$@"

scss/_params.scss

@@ -0,0 +1,14 @@
+// vim: tabstop=2 shiftwidth=2 expandtab
+
+$bg_color: white;
+$link_color: #07a;
+$fg_color: #555;
+$head_bg_color: #060033;
+
+$width_xlarge: 1250px;
+$width_large: 1000px;
+$width_med: 650px;
+
+$font_size_small: 10pt;
+$font_size_med: 11pt;
+$font_size_large: 12pt;

scss/style.scss

@@ -0,0 +1,103 @@
+// vim: tabstop=2 shiftwidth=2 expandtab
+
+@import url('fonts.css');
+@import 'params';
+
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+html {
+  background-color: $bg_color;
+  color:$fg_color;
+  height: 100%;
+}
+
+body {
+  font-family:Open Sans,Arial;
+
+  font-size: $font_size_small;
+  line-height:1.4;
+
+  @media (min-width: $width_med) {
+    font-size: $font_size_med;
+  }
+  @media (min-width: $width_large) {
+    font-size: $font_size_large;
+  }
+
+  text-align:justify;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#headbg {
+  background-image: url("../img/headbg.jpg");
+
+  /* Full height */
+  height: 100vh;
+
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+#head {
+  position: absolute;
+  top: 20%;
+  width: 100%;
+  height: 100px;
+  text-align: center;
+  font: 400 65px/1.8 sans-serif;
+  color: white;
+  letter-spacing: 10px;
+  z-index: 100;
+
+	a {
+    color: white;
+    text-decoration: none;
+	}
+
+  &.headerbar {
+    position: fixed;
+    top: 0px;
+    background-color: black;
+    height: 75px;
+    font-size: 45px;
+    transition: none .224s ease-in-out;
+    transition-property: background-color, font-size, height;
+  }
+}
+
+
+footer {
+  font-size: 0.7em;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  flex-direction: column;
+  @media (min-width: $width_med) {
+    flex-direction: row;
+  }
+
+  margin: 10px 20px;
+  margin-top: auto;
+
+  > div {
+    margin: 5px 15px;
+    @media (min-width: $width_med) {
+      margin: 0 15px;
+    }
+  }
+}
+
+a, a:visited {
+  color: $link_color;
+}

static/css/font-opensans.css

@@ -0,0 +1,58 @@
+/**** OPEN SANS **************************************************************/
+
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* greek-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans Regular'), local('OpenSans-Regular'), url('../fonts/OpenSans-Regular.woff') format('woff');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

static/css/fonts.css

@@ -0,0 +1,2 @@
+@import url('font-opensans.css');
+@import url('font-awesome.min.css');

static/css/style.css

@@ -0,0 +1,77 @@
+@import url("fonts.css");
+html {
+  box-sizing: border-box; }
+
+*, *:before, *:after {
+  box-sizing: inherit; }
+
+html {
+  background-color: white;
+  color: #555;
+  height: 100%; }
+
+body {
+  font-family: Open Sans,Arial;
+  font-size: 10pt;
+  line-height: 1.4;
+  text-align: justify;
+  margin: 0;
+  padding: 0;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column; }
+  @media (min-width: 650px) {
+    body {
+      font-size: 11pt; } }
+  @media (min-width: 1000px) {
+    body {
+      font-size: 12pt; } }
+#headbg {
+  background-image: url("../img/headbg.jpg");
+  /* Full height */
+  height: 100vh;
+  /* Center and scale the image nicely */
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover; }
+
+#head {
+  position: absolute;
+  top: 20%;
+  width: 100%;
+  height: 100px;
+  text-align: center;
+  font: 400 65px/1.8 sans-serif;
+  color: white;
+  letter-spacing: 10px;
+  z-index: 100; }
+  #head a {
+    color: white;
+    text-decoration: none; }
+  #head.headerbar {
+    position: fixed;
+    top: 0px;
+    background-color: black;
+    height: 75px;
+    font-size: 45px;
+    transition: none .224s ease-in-out;
+    transition-property: background-color, font-size, height; }
+
+footer {
+  font-size: 0.7em;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: column;
+  margin: 10px 20px;
+  margin-top: auto; }
+  @media (min-width: 650px) {
+    footer {
+      flex-direction: row; } }
+  footer > div {
+    margin: 5px 15px; }
+    @media (min-width: 650px) {
+      footer > div {
+        margin: 0 15px; } }
+a, a:visited {
+  color: #07a; }