rebranding from liquidex.house to riki.house

static/css/page/index.css

@@ -1,6 +1,90 @@
 h1.page-title {
     --recursive-wght: 900;
     font-size: 5.6rem;
+
+    display: flex;
+    flex-direction: column;
+    line-height: 1;
+    width: min-content;
+
+    transform: skew(-5deg, -5deg);
+
+    & .rikis {
+        width: max-content;
+        background-color: var(--text-color);
+        color: var(--background-color);
+        padding: 0.1em;
+
+        --shadow-color: var(--accent-pink);
+        box-shadow:
+            0.5px 0.5px 0 var(--shadow-color),
+            1px 1px 0 var(--shadow-color),
+            1.5px 1.5px 0 var(--shadow-color),
+            2px 2px 0 var(--shadow-color),
+            2.5px 2.5px 0 var(--shadow-color),
+            3px 3px 0 var(--shadow-color),
+            3.5px 3.5px 0 var(--shadow-color),
+            4px 4px 0 var(--shadow-color);
+
+        /*
+            import math
+
+            print("box-shadow:")
+            x = 0
+            max_x = 16
+            while x < max_x:
+                print(f"{x}px {x}px {math.pow(x / max_x, 2) * 16}px rgba(from var(--shadow-color) r g b / {math.pow(1 - x / max_x, 3)}),")
+                x += 0.5
+        */
+        /* prettier-ignore */
+        box-shadow:
+            0px 0px 0.0px rgba(from var(--shadow-color) r g b / 1.0),
+            0.5px 0.5px 0.015625px rgba(from var(--shadow-color) r g b / 0.909149169921875),
+            1.0px 1.0px 0.0625px rgba(from var(--shadow-color) r g b / 0.823974609375),
+            1.5px 1.5px 0.140625px rgba(from var(--shadow-color) r g b / 0.744293212890625),
+            2.0px 2.0px 0.25px rgba(from var(--shadow-color) r g b / 0.669921875),
+            2.5px 2.5px 0.390625px rgba(from var(--shadow-color) r g b / 0.600677490234375),
+            3.0px 3.0px 0.5625px rgba(from var(--shadow-color) r g b / 0.536376953125),
+            3.5px 3.5px 0.765625px rgba(from var(--shadow-color) r g b / 0.476837158203125),
+            4.0px 4.0px 1.0px rgba(from var(--shadow-color) r g b / 0.421875),
+            4.5px 4.5px 1.265625px rgba(from var(--shadow-color) r g b / 0.371307373046875),
+            5.0px 5.0px 1.5625px rgba(from var(--shadow-color) r g b / 0.324951171875),
+            5.5px 5.5px 1.890625px rgba(from var(--shadow-color) r g b / 0.282623291015625),
+            6.0px 6.0px 2.25px rgba(from var(--shadow-color) r g b / 0.244140625),
+            6.5px 6.5px 2.640625px rgba(from var(--shadow-color) r g b / 0.209320068359375),
+            7.0px 7.0px 3.0625px rgba(from var(--shadow-color) r g b / 0.177978515625),
+            7.5px 7.5px 3.515625px rgba(from var(--shadow-color) r g b / 0.149932861328125),
+            8.0px 8.0px 4.0px rgba(from var(--shadow-color) r g b / 0.125),
+            8.5px 8.5px 4.515625px rgba(from var(--shadow-color) r g b / 0.102996826171875),
+            9.0px 9.0px 5.0625px rgba(from var(--shadow-color) r g b / 0.083740234375),
+            9.5px 9.5px 5.640625px rgba(from var(--shadow-color) r g b / 0.067047119140625),
+            10.0px 10.0px 6.25px rgba(from var(--shadow-color) r g b / 0.052734375),
+            10.5px 10.5px 6.890625px rgba(from var(--shadow-color) r g b / 0.040618896484375),
+            11.0px 11.0px 7.5625px rgba(from var(--shadow-color) r g b / 0.030517578125),
+            11.5px 11.5px 8.265625px rgba(from var(--shadow-color) r g b / 0.022247314453125),
+            12.0px 12.0px 9.0px rgba(from var(--shadow-color) r g b / 0.015625),
+            12.5px 12.5px 9.765625px rgba(from var(--shadow-color) r g b / 0.010467529296875),
+            13.0px 13.0px 10.5625px rgba(from var(--shadow-color) r g b / 0.006591796875),
+            13.5px 13.5px 11.390625px rgba(from var(--shadow-color) r g b / 0.003814697265625),
+            14.0px 14.0px 12.25px rgba(from var(--shadow-color) r g b / 0.001953125),
+            14.5px 14.5px 13.140625px rgba(from var(--shadow-color) r g b / 0.000823974609375),
+            15.0px 15.0px 14.0625px rgba(from var(--shadow-color) r g b / 0.000244140625),
+            15.5px 15.5px 15.015625px rgba(from var(--shadow-color) r g b / 3.0517578125e-05)
+            ;
+    }
+
+    & .adjectives {
+        --recursive-wght: 800;
+        font-size: 2rem;
+        vertical-align: 50%;
+    }
+
+    & .house {
+        width: max-content;
+        font-size: 4rem;
+        padding-left: 1em;
+        padding-top: 0.1em;
+    }
 }
 
 @media (hover: none) {
@@ -69,28 +153,28 @@ main.tree > ul {
 }
 
 #index\:about {
-    --section-color: #a7d5e0;
+    --section-color: var(--accent-pink);
 }
 
 #index\:programming {
-    --section-color: var(--liquidex-brand-red);
+    --section-color: var(--accent-red);
     --section-text-offset: -0.1em;
 }
 
 #index\:design {
-    --section-color: var(--liquidex-brand-yellow);
+    --section-color: var(--accent-yellow);
 }
 
 #index\:music {
-    --section-color: var(--liquidex-brand-green);
+    --section-color: var(--accent-green);
     --section-text-offset: -0.05em;
 }
 
 #index\:games {
-    --section-color: var(--liquidex-brand-blue);
+    --section-color: var(--accent-blue);
     --section-text-offset: 0.05em;
 }
 
 #index\:philosophy {
-    --section-color: #c952f5;
+    --section-color: var(--accent-purple);
 }