theme: improve spacings

- Improves spacings by using the pico theme variables.
- Restores a space after separator in post informations component.
- Updates the screenshot of the README.
- Closes #38.

Co-Authored-by: iGor milhit <igor@milhit.ch>

CHANGELOG.md

@@ -7,17 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
-## [Unreleased](https://git.milhit.ch/igor/portfoligor/compare/v0.3.0...HEAD)
+## [Unreleased](https://git.milhit.ch/igor/portfoligor/compare/v0.2.0...HEAD)
 
 ### Fixed
 
+- theme: improve spacings [`#38`](https://git.milhit.ch/igor/portfoligor/issues/38)
 - picocss: implement the pico css framework [`#29`](https://git.milhit.ch/igor/portfoligor/issues/29) [`#15`](https://git.milhit.ch/igor/portfoligor/issues/15) [`#16`](https://git.milhit.ch/igor/portfoligor/issues/16)
-
-## [v0.3.0](https://git.milhit.ch/igor/portfoligor/compare/v0.2.0...v0.3.0) - 2024-10-19
-
-### Fixed
-
-- picocss: implement the pico css framework [`#29`](https://git.milhit.ch/igor/portfoligor/issues/29)
 - i18n: extract, translate strings to be translated [`#18`](https://git.milhit.ch/igor/portfoligor/issues/18)
 - style: add a stylesheet for printing [`#28`](https://git.milhit.ch/igor/portfoligor/issues/28)
 

README.md

@@ -142,7 +142,7 @@ yarn auto-changelog
 [4]: https://gohugo.io/getting-started/quick-start/#step-3-add-a-theme
 [5]: #social-media-metadata
 [6]: https://git.milhit.ch/igor/portfoligor/src/branch/dev/LICENSE
-[7]: screenshots/theme-example.png "Screenshot of my own site using this theme"
+[7]: screenshots/theme-example-v030.png "Screenshot of my own site using this theme"
 [8]: ./CHANGELOG.md
 [9]: https://github.com/CookPete/auto-changelog
 [10]: ./.auto-changelog

assets/scss/_medias.scss

@@ -18,7 +18,7 @@
 
   figcaption p {
     font-size: smaller;
-    padding-left: .5rem;
+    padding-left: .5em;
     text-align: left;
   }
 }
@@ -31,7 +31,7 @@
     flex-direction: row;
 
     img {
-      width: 8rem;
+      width: 8em;
     }
 
     div {
@@ -58,8 +58,8 @@
 
 figure {
   border-radius: var(--pico-border-radius);
-  margin: 1em auto;
+  margin: var(--pico-spacing) auto;
-  padding: .4rem;
+  padding: .4em;
   border: $purple-200 solid var(--pico-border-width);
   width: 80%;
 
@@ -71,7 +71,7 @@ figure {
     font-size: smaller;
 
     p {
-      margin: .2rem 0;
+      margin: .2em 0;
       text-align: center;
     }
   }
@@ -84,7 +84,6 @@ figure {
 
   @media (min-width: 768px) {
     max-width: 97%;
-    margin: auto;
     padding-right: 0;
   }
 }

assets/scss/_texts.scss

@@ -9,7 +9,7 @@
 .verse {
   line-height: var(--line-height-verse);
   @media (min-width: 768px) {
-    margin-left: 3rem;
+    margin-left: 3em;
   }
 
   p:not(:last-child) {
@@ -20,7 +20,7 @@
   }
 
   br {
-    margin-bottom: .5rem;
+    margin-bottom: calc(var(--pico-spacing)/2);
   }
 }
 
@@ -35,12 +35,12 @@ mark {
 
   blockquote {
     margin: 0;
-    margin-left: .5rem;
+    margin-left: calc(var(--pico-spacing)/2);
-    padding: 0 0 0 .5rem;
+    padding: 0 0 0 calc(var(--pico-spacing)/2);
 
     p {
       text-align: left;
-      margin: .4rem 0;
+      margin: .4em 0;
     }
 
     em {
@@ -49,7 +49,7 @@ mark {
 
     figcaption {
       text-align: right;
-      margin-top: 1rem;
+      margin-top: var(--pico-spacing);
     }
   }
 }

assets/scss/_variables.scss

@@ -7,8 +7,8 @@
   --pico-font-family: "mylilex", serif, var(--pico-font-family-emoji);
   --pico-font-weight: 400;
   --line-height-verse: 1.4;
-  --verse-p-bottom-space: 2rem;
+  --verse-p-bottom-space: 2em;
-  --verse-p-bottom-space-larger: 3rem;
+  --verse-p-bottom-space-larger: 3em;
 }
 
 h1,
@@ -28,15 +28,15 @@ tfoot td {
 
 [data-theme=light],
   :root:not([data-theme=dark]) {
-  --logo-color: #000000;
+  --logo-color: var(--pico-color);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
-    --logo-color: #ffffff;
+    --logo-color: var(--pico-color);
   }
 }
 
 [data-theme=dark] {
-  --logo-color: #ffffff;
+  --logo-color: var(--pico-color);
 }