feat: parametric css

Signed-off-by: QuentinN42 <quentin@lieumont.fr>

Makefile

@@ -1,6 +1,6 @@
 all: build/main.css build/index.html
 
-build/main.css: build builder/files/main.css builder/__main__.py
+build/main.css: build builder/templates/main.css builder/__main__.py
 	python3.10 -m builder
 
 build/index.html: build builder/templates/index.html config.json builder/__main__.py

builder/__main__.py

@@ -1,6 +1,6 @@
 """Jinja2 generator."""
 from json import load
-from os import getenv
+from os import getenv, listdir
 
 from jinja2 import Environment, FileSystemLoader  # type: ignore
 
@@ -26,6 +26,11 @@ def render(file: str, args: dict) -> str:
     return template.render(args=args)
 
 
+def get_files_to_process() -> list:
+    """List the files in the template directory."""
+    return listdir(BASE + 'templates')
+
+
 def write_output(result, location) -> None:
     """Write output to file."""
     with open(location, "w") as f:
@@ -34,17 +39,15 @@ def write_output(result, location) -> None:
 
 def main():
     """Script entrypoint."""
-    write_output(
-        render(
-            'index.html',
-            get_arguments()
-        ),
-        'build/index.html'
-    )
-    with open(BASE + 'files/main.css', encoding='utf-8') as f:
+    args = get_arguments()
+    files = get_files_to_process()
+    for file in files:
         write_output(
-            f.read(),
-            'build/main.css'
+            render(
+                file,
+                args
+            ),
+            'build/' + file
         )
 
 

builder/files/main.css

@@ -1,59 +0,0 @@
-.item {
-    display: block;
-    width: 150px;
-    height: 150px;
-    overflow: hidden;
-}
-
-.item {
-    display: relative;
-    background-size: cover !important;
-    color: black;
-    text-decoration: none;
-    overflow: hidden;
-}
-
-.item:hover {
-    color: black;
-}
-
-.item img {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-}
-
-.item h2 {
-    text-align: center;
-}
-
-.item .desc {
-    background: rgba(0,100,100,0.75);
-    width: 100%;
-    height: 100%;
-    transition-property: transform;
-    transition-duration: 0.2s;
-    transition-timing-function: linear;
-    border-radius: 5px;
-    overflow: hidden;
-}
-
-.item:hover .desc {
-    transform: translate(0,-100%);
-}
-
-
-h2 {
-    margin: 0;
-}
-
-.flex-container {
-    flex-direction: row;
-    display: flex;
-    flex-wrap: wrap;
-}
-
-.flex-item {
-    padding: 10px;
-    margin: 0%;
-}

builder/templates/main.css

@@ -0,0 +1,58 @@
+.item {
+  display: block;
+  width: 150px;
+  height: 150px;
+  overflow: hidden;
+}
+
+h2 {
+  margin: 0;
+}
+
+.flex-container {
+  flex-direction: row;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-item {
+  padding: 10px;
+  margin: 0%;
+}
+
+.item {
+  display: relative;
+  background-size: cover !important;
+  color: red;
+  text-decoration: none;
+  overflow: hidden;
+}
+
+.item:hover {
+  color: red;
+}
+
+.item img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.item h2 {
+  text-align: center;
+}
+
+.item .desc {
+  background: rgba(0, 100, 100, 0.75);
+  width: 100%;
+  height: 100%;
+  transition-property: transform;
+  transition-duration: 0.2s;
+  transition-timing-function: linear;
+  border-radius: 5px;
+  overflow: hidden;
+}
+
+.item:hover .desc {
+  transform: translate(0, -100%);
+}

config.json

@@ -1,6 +1,8 @@
 [
   {
     "name": "Rezel",
+    "bg-rgb": [0, 100, 100],
+    "txt-rgb": [100, 0, 100],
     "content": [
       {
         "url": "https://tutos.rezel.net",