Adjust submissions padding

settings.yaml

@@ -1,3 +1,4 @@
+copyright_start: 2021
 guilds:
     # Tegaki Tuesday
   - id: 814700630958276649

src/models/settings.rs

@@ -6,6 +6,7 @@ use std::fs;
 #[derive(Serialize, Deserialize)]
 pub struct Settings {
     pub guilds: Vec<Guild>,
+    pub copyright_start: u32,
 }
 
 impl Settings {

styles/sass/style.scss

@@ -43,11 +43,19 @@ input[type=number] {
 #content {
   width: 100%;
   height: 100%;
-  display: flex;
+
-  flex-direction: column;
+  display: grid;
+  grid-template-areas:
+    "nav        nav"
+    "challenge  submissions";
+  grid-template-columns: 30em auto;
+  grid-template-rows: min-content auto;
+
   overflow: hidden;
 
   nav {
+    grid-area: nav;
+
     --bg: #{$fg};
     --fg: #{$bg};
     background: var(--bg);
@@ -98,17 +106,21 @@ input[type=number] {
     }
   }
 
-  & > div:first-of-type {
+  & > div {
+    overflow: scroll;
     display: flex;
-    height: 100%;
+    flex-direction: column;
-    & > :first-child {
+    gap: 1em;
-      min-width: 40em;
+
-      padding: 1em;
+    footer {
-    }
+      margin-top: auto;
-    & > * {
+      text-align: center;
-      overflow: scroll;
     }
   }
+
+  #challenge {
+    padding: 1em;
+  }
 }
 
 * {
@@ -116,17 +128,17 @@ input[type=number] {
 }
 
 #submissions {
-  display: flex;
+  grid-area: submissions;
-  flex-direction: column;
+
-  height: calc(100% - 2em);
   background: rgba(0, 0, 0, 0.125);
-  $gap: 0.5em;
+  padding: 1em;
-  padding: $gap;
+
   & > div {
     width: 100%;
     column-count: 3;
     margin: 0;
     
+    $gap: 0.5em;
     gap: $gap;
 
     & > figure {

templates/copyright-years.html.tera

@@ -0,0 +1 @@
+© {% set year = now() | date(format="%Y") | int %}{{ settings.copyright_start }}{% if year != settings.copyright_start %}–{{ year }}{% endif %}

templates/index.html.tera

@@ -64,7 +64,7 @@
                 </nav>
             </a>
         </nav>
-        <div>
+        <div id="challenge">
             <div>
                 <h1>Welcome to Tegaki Tuesday #{{ challenge }}!</h1>
                 {% if content.japanese %}
@@ -118,38 +118,41 @@
                     <p><em>This challenge was suggested by <strong>{{ content.suggester }}</strong> using the <code>-h suggest</code> command.</code></em></p>
                 {%- endif -%}
             </div>
-            <div id="submissions">
+            <footer>
-                <script>
+                Copyright {% include "copyright-years" %} Tegaki Tuesday. All rights reserved. 字ちゃん mascot art by <a href="https://twitter.com/bellumela" target="_blank">@bellumela</a>.
-                const submissionModal = image => {
+            </footer>
-                    const dialog = document.createElement("dialog");
+        </div>
-                    dialog.style.padding = "0";
+        <div id="submissions">
-                    const img = document.createElement("img");
+            <script>
-                    img.src = "/{{ challenge }}/" + image;
+            const submissionModal = image => {
-                    const defaultZoom = "75vh";
+                const dialog = document.createElement("dialog");
-                    img.style.height = defaultZoom;
+                dialog.style.padding = "0";
-                    img.style.cursor = "zoom-in";
+                const img = document.createElement("img");
-                    img.style.display = "block";
+                img.src = "/{{ challenge }}/" + image;
-                    img.style.margin = "0";
+                const defaultZoom = "75vh";
-                    img.onclick = event => img.style.height = img.style.height ? "" : defaultZoom;
+                img.style.height = defaultZoom;
-                    dialog.appendChild(img);
+                img.style.cursor = "zoom-in";
-                    dialog.addEventListener("close", event => document.body.removeChild(dialog));
+                img.style.display = "block";
-                    document.body.appendChild(dialog);
+                img.style.margin = "0";
-                    dialog.showModal();
+                img.onclick = event => img.style.height = img.style.height ? "" : defaultZoom;
-                };
+                dialog.appendChild(img);
-                </script>
+                dialog.addEventListener("close", event => document.body.removeChild(dialog));
-                <div>
+                document.body.appendChild(dialog);
-                    {% for submission in submissions %}
+                dialog.showModal();
-                        {% set author = users[submission.author_id] %}
+            };
-                        <figure>
+            </script>
-                            <img src="/{{ challenge }}/{{ submission.image }}" alt="{{ author.username }}'s submission" onclick="submissionModal('{{ submission.image }}')">
+            <div>
-                            <figcaption>{% if not author.deleted %}<a href="https://discord.com/users/{{ author.id }}" target="_blank">{% endif %}{{ author.username }}{% if author.deleted %} (deleted account){% else %}</a>{% endif %}</figcaption>
+                {% for submission in submissions %}
-                        </figure>
+                    {% set author = users[submission.author_id] %}
-                    {% endfor %}
+                    <figure>
-                </div>
+                        <img src="/{{ challenge }}/{{ submission.image }}" alt="{{ author.username }}'s submission" onclick="submissionModal('{{ submission.image }}')">
-                <div>
+                        <figcaption>{% if not author.deleted %}<a href="https://discord.com/users/{{ author.id }}" target="_blank">{% endif %}{{ author.username }}{% if author.deleted %} (deleted account){% else %}</a>{% endif %}</figcaption>
-                some random shit goes here
+                    </figure>
-                </div>
+                {% endfor %}
-            </div> 
+            </div>
+            <footer>
+                Submissions are copyright {% include "copyright-years" %} their respective submitters, and are licensed under the <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Attribution-ShareAlike 4.0 International (CC BY-SA 4.0)</a> license. 
+            </footer>
         </div>
     </div>
 </body>