From fdccf7d0ace6772ca712fe6c2d880c0644ecd751 Mon Sep 17 00:00:00 2001 From: Evrard Van Espen Date: Thu, 30 Oct 2025 10:04:44 +0000 Subject: [PATCH] feat: add SCSS styles and HTML templates for blog layout --- styles/main.scss | 195 +++++++++++++++++++++++++++++++++++ templates/#post.html# | 0 templates/layout.html | 34 ++++++ templates/parts/header.html | 13 +++ templates/parts/index.html | 22 ++++ templates/parts/tagPage.html | 22 ++++ 6 files changed, 286 insertions(+) create mode 100644 styles/main.scss create mode 100644 templates/#post.html# create mode 100644 templates/layout.html create mode 100644 templates/parts/header.html create mode 100644 templates/parts/index.html create mode 100644 templates/parts/tagPage.html diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 0000000..72fa241 --- /dev/null +++ b/styles/main.scss @@ -0,0 +1,195 @@ +$accent-dark: #66BB6A; +$accent-light: #33691E; + +$bg-dark: #202020; +$bg-light: #fefefe; + +$fg-dark: #fefefe; +$fg-light: #101010; + +$primary-light: #81C784; +$primary-dark: #81C784; + +@font-face { + font-family: "sterla"; + src: url("/STERLA.otf") +} + +@font-face { + font-family: "grotesk"; + src: url("/SpaceGrotesk-Medium.ttf"); +} + +@font-face { + font-family: "walkind"; + src: url("/walkind.ttf"); +} + +body, html { + padding: 0; + margin: 0; + background-color: $bg-light; + color: $fg-light; + font-family: sans; + + a { + color: $accent-light; + } +} + +// -------------------------------------------------- + +.tag { + background-color: $primary-light; + padding: 5px; + margin-right: 5px; + color: $accent-light; + text-decoration: none; + border-radius: 5px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); +} + +.verbatim { + background-color: #505050; + color: $fg-dark; + padding: 2px; + border-radius: 3px; +} + +// -------------------------------------------------- + +header { + font-family: walkind, sans-serif; + width: 80vw; + margin-left: 10vw; + + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 20px; + + #logo { + a { + color: $fg-light; + text-decoration: none !important; + } + } + + #nav { + font-family: sans-serif; + + a { + text-decoration: none !important; + margin-left: 10px; + } + } +} + +#hero { + opacity: .9; + height: 30vh; + width: 80vw; + margin-left: 10vw; + margin-bottom: 50px; + background-image: url("/images/waterfall.jpg"); + background-size: cover; + background-position: center; + border-radius: 5px; + box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2); + object-fit: cover; +} + +// -------------------------------------------------- + +#page { + width: 80vw; + margin-left: 10vw; + + display: flex; + justify-content: space-between; + + #content { + width: calc(80% - 20px); + } + + #sidebar { + width: 20%; + border-left: 1px solid #bbb; + padding-left: 10px; + + #tags { + display: flex; + flex-wrap: wrap; + + a { + @extend .tag; + } + } + } + + h1, h2, h3, h4, h5 { + color: $accent-light; + font-family: walkind, serif; + } + + h1, h2 { + margin-top: 10px; + } + + .highlight { + pre { + padding: 10px; + } + } +} + +// -------------------------------------------------- + +.article { + margin-bottom: 20px; + + article { + display: flex; + gap: 20px; + align-items: start; + + .date { + color: #999; + font-weight: bold; + } + + .description { + color: #999; + } + + .reading-time { + margin-top: -10px; + font-style: italic; + color: #999; + font-size: .8em; + } + + .article-tags { + display: flex; + + .tag { + font-size: .8em; + } + } + } + + a { + color: $fg-light !important; + text-decoration: none !important; + + h3 { + color: $fg-light !important; + font-family: sans-serif !important; + font-weight: 400 !important; + line-height: 0; + } + } +} + + +// -------------------------------------------------- diff --git a/templates/#post.html# b/templates/#post.html# new file mode 100644 index 0000000..e69de29 diff --git a/templates/layout.html b/templates/layout.html new file mode 100644 index 0000000..793ca06 --- /dev/null +++ b/templates/layout.html @@ -0,0 +1,34 @@ + + + + + + Evrard Van Espen + + + + {{ template "header.html" . }} + + {{ .Hero }} + +
+
+ {{ .Content }} +
+ {{ if .ShowSidebar }} + + {{ end }} +
+ + diff --git a/templates/parts/header.html b/templates/parts/header.html new file mode 100644 index 0000000..ae8f219 --- /dev/null +++ b/templates/parts/header.html @@ -0,0 +1,13 @@ +
+ + + +
diff --git a/templates/parts/index.html b/templates/parts/index.html new file mode 100644 index 0000000..59d206f --- /dev/null +++ b/templates/parts/index.html @@ -0,0 +1,22 @@ +
+

~ Posts

+ {{ range .Posts }} +
+ +
+

{{ .DateStr }}

+
+

{{ .Title }}

+

{{ .Description }}

+

{{ .ReadTime }} minutes read

+
+ {{ range .Tags }} +
{{ . }}
+ {{ end }} +
+
+
+ +
+ {{end}} +
diff --git a/templates/parts/tagPage.html b/templates/parts/tagPage.html new file mode 100644 index 0000000..da212a2 --- /dev/null +++ b/templates/parts/tagPage.html @@ -0,0 +1,22 @@ +
+

~ Articles taggés "{{ .Tag }}"

+ {{ range .Posts }} +
+ +
+

{{ .DateStr }}

+
+

{{ .Title }}

+

{{ .Description }}

+

{{ .ReadTime }} minutes de lecture

+
+ {{ range .Tags }} +
{{ . }}
+ {{ end }} +
+
+
+ +
+ {{end}} +