Begin implementing go serverHEADmain

1 files changed, 129 insertions, 0 deletions

diff --git a/public/style.css b/public/style.css
new file mode 100644
index 0000000..6f145db
--- /dev/null
+++ b/public/style.css
@@ -0,0 +1,129 @@
+* {
+    margin: 0;
+    box-sizing: border-box;
+}
+
+@font-face {
+    font-family: "OpenSans";
+    src: url(/OpenSans-VariableFont_wdth,wght.ttf);
+}
+
+:root {
+    --night: #0c090b;
+    --pink: #ea46c5;
+    --beige: #e9eddd;
+    --rose: #9e0012;
+
+    --green: #5a851c;
+    --green-1: #486a16;
+    --green-2: #364f10;
+
+    color: var(--night);
+}
+
+body {
+    font-family: OpenSans;
+    background-color: #eee;
+}
+
+header section {
+    padding-block: 0.6em;
+    text-align: center;
+    font-size: 32px;
+    background-color: var(--green);
+    display: grid;
+    place-items: center;
+    color: var(--beige);
+}
+
+@media (min-width: 500px) {
+    header section {
+        font-size: 48px;
+    }
+}
+
+header nav {
+    display: flex;
+    justify-content: center;
+    background-color: var(--green-1);
+    gap: 0.5em;
+}
+
+header nav a, header nav a:visited {
+    padding: 0.5em 1em;
+    color: var(--beige);
+    text-decoration: none;
+}
+
+main {
+    padding: 2em;
+    padding-top: 4em;
+    max-width: 1000px;
+    margin-inline: auto;
+}
+
+main article {
+    padding-bottom: 4em;
+    display: grid;
+    gap: 2em;
+    grid-template-columns: auto;
+    grid-template-areas: "p1" "img" "p2" "p3";
+}
+
+@media (min-width: 500px) {
+    main article {
+        grid-template-columns: auto auto;
+        grid-template-areas: "p1 img" "p2 p2" "p3 p3";
+    }
+}
+
+@media (min-width: 650px) {
+    main article {
+        grid-template-areas: "p1 img" "p2 img" "p3 img";
+    }
+}
+
+main article img {
+    max-width: 220px;
+    height: auto;
+    object-fit: contain;
+    grid-area: img;
+}
+
+main section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1em;
+    padding-bottom: 3em;
+}
+
+main section img {
+    width: 100%;
+    height: auto;
+}
+
+button {
+    background-color: var(--green);
+    border: none;
+    border-radius: 4px;
+    padding: 0.5em;
+    color: var(--beige);
+}
+
+button:active {
+    background-color: var(--green-1);
+}
+
+.height-transition-wrapper {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-in-out;
+}
+
+.height-transition-wrapper.open {
+    grid-template-rows: 1fr;
+}
+
+.height-transition-wrapper > * {
+    overflow: hidden;
+}