Styling basics

static/avatar.svg

@@ -0,0 +1,105 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
+   sodipodi:docname="avatar.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#232323"
+     bordercolor="#424242"
+     borderopacity="1"
+     inkscape:showpageshadow="false"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="false"
+     inkscape:deskcolor="#1e1e1e"
+     inkscape:document-units="px"
+     inkscape:clip-to-page="false"
+     labelstyle="default"
+     showgrid="false"
+     inkscape:zoom="0.54386574"
+     inkscape:cx="1420.3873"
+     inkscape:cy="418.30177"
+     inkscape:window-width="3440"
+     inkscape:window-height="1417"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid1"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="1"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1">
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="avatar">
+    <g
+       id="g7">
+      <rect
+         style="fill:#ffffff"
+         id="rect1"
+         width="100"
+         height="100"
+         x="0"
+         y="0" />
+      <rect
+         style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
+         id="rect4"
+         width="72.597359"
+         height="181.80991"
+         x="20.128069"
+         y="-24.013468"
+         transform="rotate(-45)" />
+      <rect
+         style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
+         id="rect5"
+         width="72.597359"
+         height="181.80991"
+         x="-92.725426"
+         y="-20.194273"
+         transform="rotate(-45)" />
+      <rect
+         style="mix-blend-mode:multiply;fill:#6fff75;fill-opacity:1;stroke-width:0.402561"
+         id="rect6"
+         width="72.597359"
+         height="181.80991"
+         x="90.838745"
+         y="-90.904953"
+         transform="rotate(45)" />
+      <rect
+         style="mix-blend-mode:multiply;fill:#ff9c32;fill-opacity:1;stroke-width:0.402561"
+         id="rect7"
+         width="72.597359"
+         height="181.80991"
+         x="-22.014748"
+         y="-90.904953"
+         transform="rotate(45)" />
+    </g>
+  </g>
+</svg>

static/css/base.scss

@@ -1,9 +1,13 @@
 :root {
   font-size: 16px;
+
+  --accent: #846bf7;
+  --accent-dim: #846bf760;
+  --accent-very-dim: #846bf716;
 }
 
 body {
-  background-color: #111;
+  background-color: #111118;
 
   margin: 0;
   position: relative;
@@ -11,4 +15,11 @@ body {
 
 * {
   color: white;
+  font-family: "Nunito Sans", sans-serif;
+  font-optical-sizing: auto;
+  font-weight: 300;
+  font-style: normal;
+  font-variation-settings:
+    "wdth" 100,
+    "YTLC" 500;
 }

static/icon/bulb.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  id="icon"  width="24"  height="24"  viewBox="0 0 24 24"  fill="currentColor"  class="icon icon-tabler icons-tabler-filled icon-tabler-bulb"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" /><path d="M12 2a1 1 0 0 1 .993 .883l.007 .117v1a1 1 0 0 1 -1.993 .117l-.007 -.117v-1a1 1 0 0 1 1 -1z" /><path d="M21 11a1 1 0 0 1 .117 1.993l-.117 .007h-1a1 1 0 0 1 -.117 -1.993l.117 -.007h1z" /><path d="M4.893 4.893a1 1 0 0 1 1.32 -.083l.094 .083l.7 .7a1 1 0 0 1 -1.32 1.497l-.094 -.083l-.7 -.7a1 1 0 0 1 0 -1.414z" /><path d="M17.693 4.893a1 1 0 0 1 1.497 1.32l-.083 .094l-.7 .7a1 1 0 0 1 -1.497 -1.32l.083 -.094l.7 -.7z" /><path d="M14 18a1 1 0 0 1 1 1a3 3 0 0 1 -6 0a1 1 0 0 1 .883 -.993l.117 -.007h4z" /><path d="M12 6a6 6 0 0 1 3.6 10.8a1 1 0 0 1 -.471 .192l-.129 .008h-6a1 1 0 0 1 -.6 -.2a6 6 0 0 1 3.6 -10.8z" /></svg>

static/icon/heart.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  id="icon"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-heart"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>

static/icon/thumb-down.svg

@@ -0,0 +1 @@
+<svg  xmlns="http://www.w3.org/2000/svg"  id="icon"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-thumb-down"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 13v-8a1 1 0 0 0 -1 -1h-2a1 1 0 0 0 -1 1v7a1 1 0 0 0 1 1h3a4 4 0 0 1 4 4v1a2 2 0 0 0 4 0v-5h3a2 2 0 0 0 2 -2l-1 -5a2 3 0 0 0 -2 -2h-7a3 3 0 0 0 -3 3" /></svg>