add: css and button to home page

2025-04-16 13:53:48 +02:00
parent 97f05cee5e
commit 760bd86bf0
5 changed files with 51 additions and 7 deletions
--- a/src/templates/album.css
+++ b/src/templates/album.css
@ -1,3 +1,44 @@
+:root {
+    --bg1: #002b36;
+    --bg2: #073642;
+    --content1: #586e75;
+    --content2: #657b83;
+    --content3: #839496;
+    --content4: #93a1a1;
+    --lbg1: #eee8d5;
+    --lbg2: #fdf6e3;
+}
+
+.picture-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    background-color: var(--bg2);
+    width: auto;
+    padding: 30px;
+}
+
 body {
-    background-color: red;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    background-color: var(--bg1);
+}
+
+img {
+    width: 100%;
+    height: auto;
+}
+
+a {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background-color: var(--content1);
+    padding: 10px;
+    margin: 10px;
+    height: 200px;
+    width: 200px;
 }
--- a/src/templates/album.jinja
+++ b/src/templates/album.jinja
@ -6,12 +6,12 @@
 </head>

 <body>
-    {{album.name}}
-    caaaa
    <h1>{{ album._name }}</h1>
-    <div class="picture_container">
+    <div class="picture-container">
        {% for picture in album._pictures %}
-        <img src="{{ picture.get_small().get_absolute_path() }}">
+        <a href="{{ picture.get_page().html.get_url() }}">
+            <img src="{{ picture.get_small().get_absolute_path() }}">
+        </a>
        {% endfor %}
    </div>
 </body>