From 892858567f0b5bc8719801bacd1e81d4334c2c7e Mon Sep 17 00:00:00 2001
From: Anhgelus Morhtuuzh <anhgelus.morhtuuzh@proton.me>
Date: Sat, 9 Nov 2024 22:49:17 +0100
Subject: [PATCH] feat(style): simple card

---
 bun.lockb                   | Bin 14466 -> 14454 bytes
 dist/styles.css             | 131 ++++++++++++++++++++++++++++++++++++
 example.json                |   8 +--
 main.go                     |  12 +++-
 package.json                |   6 +-
 scss/main.scss              |  74 ++++++++++++++++++++
 templates/base/base.gohtml  |   2 +-
 templates/page/index.gohtml |  11 ++-
 8 files changed, 235 insertions(+), 9 deletions(-)
 create mode 100644 scss/main.scss

diff --git a/bun.lockb b/bun.lockb
index 86d0650ba6ec7f9ebd5aca406d27230b0baf63a2..85132a720d925e975734f18c92e0450accd41a69 100755
GIT binary patch
delta 1337
zcmYL}e@v8h9LK-k`vngOXN%0o^D4pw?z-pTjsx=O9?AY7CbSyqoe6o+@gsB49Uu(@
zYBDFzf_;X?tj%I`WkXG56K!e!*n~pohAq~lDJ2**vK1@mp!f5fPj`QOU+?et{dqq3
zd_Ujs=Xvj~g@$e^m6CR?YO)sXsoXiX@7~>y2Uc%7^+i%c<2zraEw;|bUHIsB&x?ia
zVaAx5u@0Y(F$<UqT0uSd82Afk>~ZiS_ypJwrh=WI;#Y%;zY$yoW`jzem7oaTNB-5|
zEl}~t!DMh0Okk|Iqb80q0SlGkU{xr>*d*pKI@ZKT1Dip`uZuWp-mI@=^O!6CStLjV
zLtqkEN&#+pN{NK4Mod8{^DKlZkxdwuf$7x8m*OK=f7tQC!Mf#iNY}!xB<f}UE(P?m
zF@T+KqH?|0cnoTbssue_TU8Z;s!-JhsBNlBGcZ=Es!phA+)bzovYHAEM#joilc1uB
z??An*u6a$2`J*nB8po$;!X$G$iE%P-pa8}r)E6fkXHb~}x?%Ei7m4vQZ>K=KEDWO_
zx!9F~K8?#0{>7{SGacPD<q0of`##LL;_*Ec5M(|=eS$3LQJZ}Asnqy9?j<on79v<%
zhczRmCgkw}>PwLM98F+^pQx4x<9X`Cs2iL}oLjcO^2Zd>Hhi`BWX@mx#~(Q}dS!N~
z`fK^zlMkOfy&~zx^&FkAJEPg;l5YEZOW3;ezaJi!cR6d12FI3)*T3<1k$KQ4CK{G&
zN9n=qrr-sr&~kZj#@ZmXE61lDl#W+;q%6tBSR@$1ML`LtpX++4r?v%7wv?YG<+7^U
z`t5bE2g5bzy2>rG^E8|sJd?#(DdLrE?$Vh7|JtX0F-N;V_UrxOYuit3)$z@URqkjQ
z7glYK`agC)zoM&5Z{QU!DM!j?>@3|)cUwl`qi7woJ1!pdPrvltgQOnD#!1c)J=&$W
zm)yD4c6@xqz+DpdfTy&!82WX_KehPfV$4}d`!hs~)<y@8_Kr2rUfUh>H`2EmBCn>O
z5T!NY<u#L^pE^9+7K`d9bEfFgnl^Cax4o~K&veFot*u)>`=q#K^F(3H(NlS*Xwg0c
zQybpjd+AC^Z_M{mPo~?Vb?qzL=9cbt2N$q&m*iF|Gf6+=pSA8a_+4dVrX!c&D~AVP
z>t~y@=>9*iru+#fFM34t<gmH<6a{S}Pp4L!Xwf>i$GK(y+M#Ek(eXAHlDMS&COU?w
zEE=(WC@wtc>)rXD?|Dn|;vqW<jNc@^ZTFhOp-8CFG5C$WG2zjuu8KsQ4(I>c;URNw
K+F)aDvhF`g9bG8^

delta 1364
zcmY+Ee{54#6vyxF@3*o|BbYqiP>PIg?fN>}b=|Vcqr*f)GMvkV7S>5u5xP-}D;Wdg
zD9REyGsAKM*eoQd(Je#3tdJ;*(I7aK&0sWHV>Yvr$=qhpEe<p?JolBChW>Fs-+R92
z-QTARd)|2MsA&3Ox-n)8U;VgdG4{%)RPf$K<KE?y9jk(0>fe3qv4V5Sxt`}ehgu0C
zxrD^3RD=k~eB=tG9{B`viW2f9atOH+*@rYCJCV$9LNdPwxg6<4vT^c|Jdz;ukiX$P
z%pXPOAV-i{glvp8>j~j7(AW|P?uZhS!af?YLPI+70FwEksCDP=NF$lYKJzc*07e!^
zW+Q9CM}>T*(3LZ8qhMdUF^y#&#%2l90dacYz?WLj=Z`0b;gqV4nt)eJv;%x<N$ba*
zZw9}*Qky`vRaV(*Lh5A|Le(IvZ&7WRRe^?(Mp<>DO6N_YO6P6R5>h9-Cs3tF{sUDl
z__c10ju3C!L?x%u8A$3RY6D&`(Y@fq_AJEpl6DqP#tmb-N?HcIL85Ph&meJ^@I1<J
zR~mRv@8a%Z&y775Oz2!(HEw?$_9*k{+u-9QIt+16;`Den<?>f1gNsVQXGz>Xj8$RG
z04(+y#Iq!N7n0aM3%pUH-QdG^1mf7{B$CG2CF=)@e=ME9G(P67ois_|-t)o!v7!1e
z);2BcU#QOOmDXRs>KWn6O8WNSnYi=e#F@V<md&NYTTXih2af;K`}*{%gqAmI9#O8c
z0++iK7XTh%C^5BS4|j-Nr*cs$yp8lP8i?XU!4tey)%9r4uC|O5+!bjKy&P!S`Bj%+
zkZc!Kw4qci5lb)^^Vwr?Y??abT~oX+<Al&*^H_fVpyfvMV7-cN!w7q$t@vQ&;)wjY
z@0rKD>eL$AU>8fpwS-)TzX}|}gGU^j34hb;z4gNP4+eD-G73^5?^GVWrTX_&`zJqL
z(@?wUWUC=cSzMT$^4?rLy_j+Gpu3P4lrlPg_SkUi%#9-%zXrZ8<Y^Q9f>}xt4y_*V
z|Ma8p+A~>wkXyt%m7?_xPItbP`*}ykSIYX}`zJTHZAp4Ejvo9)yrBFI+}!X^=arG_
zV;R2+dWsx^QnfE`pS}O@(ZB-k+%7uU$)w;{oLQ+}jn`f`tQ)w3K5m@(N<Eux&;56I
z+tN97T<I&C2dmjZZ$rS$QwJP0^MX>jJ+`ggYc4!pp`z_}9K<e`ABJ<7<%VnK6TAwG
zn$`7@a_4p0ma}-u!VZ{_Y1nV6%zib}5)SMR9oQiTqfsyw3yD$7=B%e43fru<hx*oX
RwpO6FmC)|eB_d^d)&D{KXU_lt

diff --git a/dist/styles.css b/dist/styles.css
index e69de29..323caaf 100644
--- a/dist/styles.css
+++ b/dist/styles.css
@@ -0,0 +1,131 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v5.0.1 | 20191019
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+main, menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, main, menu, nav, section {
+  display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+
+body {
+  line-height: 1;
+}
+
+menu, ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+main {
+  width: 50%;
+  background: mediumpurple;
+  padding: 2rem;
+  border-radius: 32px;
+  box-shadow: 0px 0px 70px 2px rgba(0, 0, 0, 0.75);
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+.presentation {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+.presentation__information {
+  display: flex;
+  margin-right: 1rem;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.presentation figure {
+  display: inline;
+}
+.presentation figure img {
+  height: 128px;
+  border-radius: 32px;
+  box-shadow: 0px 0px 50px -20px rgba(0, 0, 0, 0.75);
+}
+.presentation h2, .presentation p {
+  display: inline;
+}
+
+.links {
+  display: flex;
+  margin-top: 2rem;
+  width: 100%;
+  gap: 1rem;
+}
+.links .link {
+  display: block;
+  background: purple;
+  width: 33%;
+  padding: 1em;
+  border-radius: 16px;
+}
+.links a {
+  display: block;
+  color: black;
+  text-decoration: none;
+  text-align: center;
+}
+
+/*# sourceMappingURL=styles.css.map */
diff --git a/example.json b/example.json
index 75e887e..640356a 100644
--- a/example.json
+++ b/example.json
@@ -1,9 +1,9 @@
 {
   "image": "",
-  "description": "",
+  "description": "Sem magna a dui labore et cursus nibh ipsum nulla. Sem magna a dui labore et cursus nibh ipsum nulla. Blandit adipiscing nulla diam dolore ultricies ornare sed risus faucibus. Lobortis mi sed dui risus nulla ultrices vulputate at enim.",
   "person": {
-    "name": "",
-    "pronouns": "",
-    "image": ""
+    "name": "Anhgelus Morhtuuzh",
+    "pronouns": "he/his - some basic things though",
+    "image": "pfp.webp"
   }
 }
\ No newline at end of file
diff --git a/main.go b/main.go
index 50bc462..e05c422 100644
--- a/main.go
+++ b/main.go
@@ -55,5 +55,15 @@ func main() {
 	}
 	g.Templates = append(g.Templates, "templates/base/*.gohtml")
 
-	//g.StartServer(":80")
+	t := golatt.Template{
+		Golatt: g,
+		Name:   "index",
+		Title:  data.Person.Name,
+		Data:   &data,
+		URL:    "/",
+	}
+
+	g.HandleFunc("/", t.Handle())
+
+	g.StartServer(":8000")
 }
diff --git a/package.json b/package.json
index 20a2d20..7b199d3 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,10 @@
   "name": "now",
   "module": "index.ts",
   "type": "module",
+  "scripts": {
+    "build-sass": "sass --no-source-map --style=compressed scss/main.scss dist/styles.css",
+    "watch-sass": "sass --watch scss/main.scss dist/styles.css"
+  },
   "devDependencies": {
     "@types/bun": "latest"
   },
@@ -9,7 +13,7 @@
     "typescript": "^5.0.0"
   },
   "dependencies": {
-    "normalize.css": "^8.0.1",
+    "reset-css": "^5.0.2",
     "sass": "^1.80.6"
   }
 }
\ No newline at end of file
diff --git a/scss/main.scss b/scss/main.scss
new file mode 100644
index 0000000..60a3a90
--- /dev/null
+++ b/scss/main.scss
@@ -0,0 +1,74 @@
+@use "../node_modules/reset-css/reset.css";
+
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+main {
+  width: 50%;
+  background: mediumpurple;
+  padding: 2rem;
+  border-radius: 32px;
+  box-shadow: 0px 0px 70px 2px rgba(0,0,0,0.75);
+}
+
+h1 {
+  font-size: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+.presentation {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+
+  &__information {
+    display: flex;
+    //width: 100%;
+    margin-right: 1rem;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  & figure {
+    display: inline;
+    & img {
+      height: 128px;
+      border-radius: 32px;
+      box-shadow: 0px 0px 50px -20px rgba(0,0,0,0.75);
+    }
+  }
+  & h2, p {
+    display: inline;
+  }
+}
+
+.links {
+  display: flex;
+  margin-top: 2rem;
+  width: 100%;
+  gap: 1rem;
+  & .link {
+    display: block;
+    background: purple;
+    width: 33%;
+    padding: 1em;
+    border-radius: 16px;
+  }
+  & a {
+    display: block;
+    color: black;
+    text-decoration: none;
+    text-align: center;
+  }
+}
diff --git a/templates/base/base.gohtml b/templates/base/base.gohtml
index 5859805..f8c6678 100644
--- a/templates/base/base.gohtml
+++ b/templates/base/base.gohtml
@@ -10,7 +10,7 @@
         {{template "opengraph-base" .SEO}}
     </head>
     <body>
-    {{template "body" .}}
+    {{template "body" .Data}}
     <script type="module" src="{{getAssetPath "index.js"}}" defer></script>
     </body>
     </html>
diff --git a/templates/page/index.gohtml b/templates/page/index.gohtml
index dbc228a..390ca7b 100644
--- a/templates/page/index.gohtml
+++ b/templates/page/index.gohtml
@@ -4,9 +4,16 @@
             <figure>
                 <img src="{{ getStaticPath .Person.Image }}" alt="{{ .Person.Name }}'s image">
             </figure>
-            <h2>{{ .Person.Name }}</h2>
-            <p>{{ .Person.Pronouns }}</p>
+            <div class="presentation__information">
+                <h2>{{ .Person.Name }}</h2>
+                <p>{{ .Person.Pronouns }}</p>
+            </div>
         </div>
         <p class="description">{{ .Description }}</p>
+        <div class="links">
+            <div class="link"><a href="">Link 1</a></div>
+            <div class="link"><a href="">Link 2</a></div>
+            <div class="link"><a href="">Link 3</a></div>
+        </div>
     </main>
 {{end}}
\ No newline at end of file