cleanup styles

issues/04.md

@@ -96,10 +96,11 @@ This can be quite helpful when you need to initialise a list full of the same va
 
 ## Challenge
 
-Can you write an expression that takes in a group of words (no punctuation) as input, and underlines each individual word with `=`?
+Can you write an expression or function that takes in a group of words (no punctuation) as input, and underlines each individual word with `=`?
 
 ```py
 >>> words = input()
+Never Gonna Give You Up
 >>> print(your_magic(words))
 Never Gonna Give You Up
 ===== ===== ==== === ==

site/src/parts/Header.svelte

@@ -102,6 +102,7 @@ li {
 
   &:not(:hover) {
     &.syntax { background-color: rgba($pink-spirit, 0.69); }
+    &.tricks { background-color: rgba($lilac-nova, 0.69); }
     &.quickies { background-color: rgba($blue-sky, 0.69); }
     &.challenge { background-color: rgba($teal-elec, 0.69); }
   }

site/src/parts/IssueFooter.svelte

@@ -1,4 +1,4 @@
-<p class="caption"> Question? Bug that needs fixing? Drop a message in the <a target="_blank" href="https://github.com/Sup2point0/pycobytes/discussions">GitHub discussion</a> for this issue. </p>
+<p class="caption"> Question? Bug needs fixing? Or just want to nerd out over programming? <br> Drop a message in the <a target="_blank" href="https://github.com/Sup2point0/pycobytes/discussions">GitHub discussion</a> for this issue. </p>
 
 
 <style lang="scss">

site/src/routes/issues/4/+page.svelte

@@ -0,0 +1,49 @@
+<script>
+
+import ISSUES from "#src/issues-config";
+
+import Header from "#src/parts/Header.svelte";
+import Main from "#src/parts/Main.svelte";
+import IssueNav from "#src/parts/IssueNav.svelte";
+import IssueFooter from "#src/parts/IssueFooter.svelte";
+
+import "#src/routes/issues/issue.scss";
+
+import Content from "../4/_Content.svx";
+
+const issue = ISSUES[3];
+
+</script>
+
+
+<svelte:head>
+  <title> {issue.titleText ?? "404 Not Found"} · pycobytes[{issue.issueIndex ?? "?"}] </title>
+</svelte:head>
+
+{#if Content}
+  <Header
+    type = "issue"
+    issueIndex = {issue.issueIndex}
+    title = "{issue.titleText}"
+    caption = {issue.releaseDate}
+    tags = {issue.topicTags}
+  >
+    <IssueNav {issue} duality="dark" />
+  </Header>
+
+
+  <article>
+    <Main>
+      <Content />
+      <IssueFooter />
+    </Main>
+  </article>
+
+  <IssueNav {issue} />
+
+{:else}
+  <Main>
+    <h1 align="center"> Oops, something went wrong! </h1>
+  </Main>
+
+{/if}