summaryrefslogtreecommitdiff
path: root/assets
diff options
context:
space:
mode:
Diffstat (limited to 'assets')
-rw-r--r--assets/css/404.page.css (renamed from assets/css/404.css)4
-rw-r--r--assets/css/buttons.page.css103
-rw-r--r--assets/css/content.css230
-rw-r--r--assets/css/deco.css46
-rw-r--r--assets/css/fonts.css17
-rw-r--r--assets/css/index.page.css15
-rw-r--r--assets/css/main.css377
-rw-r--r--assets/css/posts.page.css (renamed from assets/css/posts.css)0
-rw-r--r--assets/css/prismite.page.css (renamed from assets/css/prismite.css)26
-rw-r--r--assets/svg/external.svg1
-rw-r--r--assets/svg/mask_bottom_left.svg21
-rw-r--r--assets/svg/mask_bottom_right.svg21
-rw-r--r--assets/svg/mask_top_left.svg21
-rw-r--r--assets/svg/mask_top_right.svg21
-rw-r--r--assets/triangle.svg16
15 files changed, 610 insertions, 309 deletions
diff --git a/assets/css/404.css b/assets/css/404.page.css
index b75ef00..baece67 100644
--- a/assets/css/404.css
+++ b/assets/css/404.page.css
@@ -8,6 +8,6 @@ main > div {
text-align: center;
}
-main > div > div {
- color: var(--fg-low);
+.wavy {
+ margin-bottom: var(--padding-big);
}
diff --git a/assets/css/buttons.page.css b/assets/css/buttons.page.css
new file mode 100644
index 0000000..57e23dc
--- /dev/null
+++ b/assets/css/buttons.page.css
@@ -0,0 +1,103 @@
+main > div {
+ max-width: 100%;
+ width: 100%;
+}
+
+p {
+
+}
+
+p > img {
+ width: 20%;
+ border-radius: var(--border-radius);
+ display: block;
+}
+
+#buttons {
+ display: grid;
+ margin-top: var(--padding-big);
+ grid-template-columns: repeat(3, 1fr);
+ gap: var(--padding-big);
+ flex-grow: 1;
+ height: min-content;
+}
+
+main a {
+ position: relative;
+ display: block;
+ box-sizing: border-box;
+ text-decoration: none;
+ overflow: hidden;
+ border-radius: var(--border-radius);
+ color: var(--fg) !important;
+}
+
+main a:focus,
+main a:hover {
+ font-weight: normal;
+}
+
+main a > .icon > img {
+ width: 1em;
+ height: 1em;
+ display: block;
+}
+
+@keyframes ticker {
+ 0% {
+ transform: rotate(-90deg) translateX(-9ch);
+ }
+
+ 100% {
+ transform: rotate(-90deg) translateX(0ch);
+ }
+}
+
+main a > img,
+p > img {
+ image-rendering: -webkit-optimize-contrast;
+ image-rendering: -moz-crisp-edges;
+ image-rendering: crisp-edges;
+}
+
+main a > img {
+ width: 100%;
+ display: block;
+}
+
+main a > .icon,
+main a > .link {
+ --color: var(--bg);
+ background-color: var(--color);
+ position: absolute;
+ transition: transform 0.4s var(--easing);
+}
+
+main a > .link {
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, 100%);
+ font-size: 0.8em;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ border: var(--border) solid var(--border-width);
+ border-bottom: none;
+ padding: var(--padding);
+}
+
+main a:hover > .link {
+ transform: translate(-50%, 0);
+}
+
+main a > .icon {
+ top: 50%;
+ right: -0.5px;
+ transform: translate(100%, -50%);
+ padding: var(--padding-big);
+ border-radius: var(--border-radius) 0 0 var(--border-radius);
+ border: var(--border) solid var(--border-width);
+ border-right: none;
+}
+
+main a:hover > .icon {
+ transform: translate(0, -50%);
+}
diff --git a/assets/css/content.css b/assets/css/content.css
new file mode 100644
index 0000000..e39b29c
--- /dev/null
+++ b/assets/css/content.css
@@ -0,0 +1,230 @@
+main a,
+main a:link {
+ transition: color 0.1s var(--easing), background-color 0.1s var(--easing);
+}
+
+main a:visited {
+ color: inherit
+}
+
+main a.volatile:visited {
+ color: inherit
+}
+
+main a:focus,
+main a:hover {
+ background-color: var(--bg);
+ color: var(--yellow);
+}
+
+main a:active {
+ color: inherit
+}
+
+.anchor {
+ order: -1;
+}
+
+a.anchor:link, a.anchor:visited {
+ color: var(--border);
+}
+
+a.anchor:focus,
+a.anchor:hover {
+ color: var(--yellow-bright);
+}
+
+a.anchor:active {
+ color: var(--yellow);
+}
+
+.anchor::after {
+ content: "#";
+ font-size: 0.8em;
+}
+
+h1, h2 {
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ gap: var(--padding-big);
+}
+
+.anchor::before {
+ content: "";
+ height: var(--border-width);
+ background-color: var(--border);
+}
+
+h1::after, h2::after {
+ content: "";
+ height: var(--border-width);
+ background-color: var(--border);
+ flex-grow: 1;
+}
+
+h1 {
+ font-size: 1.5em;
+}
+
+h2 {
+ font-size: 1.25em;
+}
+
+main li {
+ margin-left: var(--padding-big);
+ list-style-type: "- ";
+ list-style-position: inside;
+}
+
+main li::marker {
+ color: var(--border);
+}
+
+main ol,
+main ul {
+ padding-top: var(--padding);
+ gap: var(--padding);
+ display: flex;
+ flex-direction: column;
+}
+
+p,
+pre,
+h1, h2
+{
+ margin-top: 0.8em;
+}
+
+strong {
+ font-weight: bold;
+}
+
+code {
+ border-radius: var(--border-radius);
+ padding-inline: calc(var(--padding) / 2);
+ font-family: "Aporetic Mono", monospace;
+ border: var(--border-width) solid var(--border);
+ color: var(--fg);
+ background: var(--bg);
+ overflow: auto;
+}
+
+pre > code {
+ display: block;
+ padding: calc(var(--padding) * 2);
+ position: relative;
+ line-height: 1.3;
+ /* overflow-wrap: break-word; */
+}
+
+pre > code[data-lang]::after {
+ content: attr(data-lang);
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: var(--padding);
+ border-radius: 0 var(--border-radius);
+ border-bottom: var(--border-width) solid var(--border);
+ border-left: var(--border-width) solid var(--border);
+ background-color: var(--bg-high);
+ transition: transform 0.2s var(--easing);
+}
+
+pre > code[data-lang]:hover::after {
+ transform: translateX(100%);
+}
+
+aside {
+ padding: var(--padding-big);
+ border: var(--border-width) solid var(--border);
+ border-radius: var(--border-radius);
+ box-sizing: border-box;
+ font-size: 0.9em;
+}
+
+aside::before,
+aside::after {
+ content: "";
+ position: absolute;
+ width: 0;
+ height: 0;
+}
+
+/* @media (max-width: 130ch) { */
+ aside {
+ position: relative;
+ margin-bottom: var(--padding-big);
+ margin-top: calc(var(--padding-big) + var(--arrow-size) / 2);
+ }
+
+ aside::before,
+ aside::after {
+ border-right: var(--arrow-size) solid transparent;
+ border-left: var(--arrow-size) solid transparent;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ aside::before {
+ border-bottom: var(--arrow-size) solid var(--border);
+ top: calc(var(--arrow-size) * -1);
+ }
+
+ aside::after {
+ border-bottom: var(--arrow-size) solid var(--yellow);
+ top: calc(var(--arrow-size) * -1 + var(--border-width));
+ }
+/* } */
+
+/* @media (min-width: 130ch) { */
+/* aside { */
+/* position: absolute; */
+/* left: calc(100% + var(--padding-big)); */
+/* max-width: calc(20vw - var(--padding-big)); */
+/* transform: translateY(calc(-50% - 1lh)); */
+/* } */
+/**/
+/* aside::before, */
+/* aside::after { */
+/* content: ""; */
+/* border-top: var(--arrow-size) solid transparent; */
+/* border-bottom: var(--arrow-size) solid transparent; */
+/* position: absolute; */
+/* width: 0; */
+/* height: 0; */
+/* top: 50%; */
+/* transform: translateY(-50%); */
+/* } */
+/**/
+/* aside::before { */
+/* border-right: var(--arrow-size) solid var(--border); */
+/* left: calc(var(--arrow-size) * -1); */
+/* } */
+/**/
+/* aside::after { */
+/* border-right: var(--arrow-size) solid var(--yellow); */
+/* left: calc(var(--arrow-size) * -1 + var(--border-width)); */
+/* } */
+/* } */
+
+.wavy > span {
+ display: inline-block;
+ transform: translateY(10%);
+ animation: wave 12s ease-in-out infinite;
+ white-space: pre;
+}
+
+@keyframes wave {
+ 0% {
+ transform: translateY(10%);
+ }
+
+ 50% {
+ transform: translateY(-10%);
+ }
+
+ 100% {
+ transform: translateY(10%);
+ }
+}
diff --git a/assets/css/deco.css b/assets/css/deco.css
new file mode 100644
index 0000000..91cf431
--- /dev/null
+++ b/assets/css/deco.css
@@ -0,0 +1,46 @@
+nav .tab::before,
+nav .tab::after {
+ background-color: var(--color);
+ z-index: 1;
+}
+
+nav .tab::before,
+nav .tab::after,
+nav .tab > a::before,
+nav .tab > a::after {
+ --size: var(--border-radius);
+ content: "";
+ width: var(--size);
+ height: var(--size);
+ position: absolute;
+ bottom: 0;
+}
+
+nav .tab::before,
+nav .tab > a::before {
+ right: 100%;
+}
+
+nav .tab::after,
+nav .tab > a::after {
+ left: 100%;
+}
+
+nav .tab > a::before,
+nav .tab > a::after {
+ background-color: var(--bg-lowest);
+ z-index: 2;
+}
+
+nav .tab > a:focus-visible::before,
+nav .tab > a:focus-visible::after {
+ background-color: transparent;
+}
+
+nav .tab > a::after {
+ border-bottom-left-radius: var(--size);
+}
+
+nav .tab > a::before {
+ border-bottom-right-radius: var(--size);
+}
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index 1e1fc07..82a96e9 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -4,6 +4,7 @@
src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalbolditalic.woff2");
font-style: italic;
font-weight: bold;
+ font-display: swap;
}
@font-face {
@@ -11,6 +12,7 @@
src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalboldupright.woff2");
font-style: normal;
font-weight: bold;
+ font-display: swap;
}
@font-face {
@@ -18,6 +20,7 @@
src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularitalic.woff2");
font-style: italic;
font-weight: normal;
+ font-display: swap;
}
@font-face {
@@ -25,6 +28,7 @@
src: local("Aporetic"), url("/assets/fonts/aporetic-sans-normalregularupright.woff2");
font-style: normal;
font-weight: normal;
+ font-display: swap;
}
/* Mono */
@@ -33,6 +37,7 @@
src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalbolditalic.woff2");
font-style: italic;
font-weight: bold;
+ font-display: swap;
}
@font-face {
@@ -40,6 +45,7 @@
src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalboldupright.woff2");
font-style: normal;
font-weight: bold;
+ font-display: swap;
}
@font-face {
@@ -47,6 +53,7 @@
src: local("Aporetitalicic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularitalic.woff2");
font-style: italic;
font-weight: normal;
+ font-display: swap;
}
@font-face {
@@ -54,4 +61,14 @@
src: local("Aporetic Mono"), url("/assets/fonts/aporetic-sans-mono-normalregularupright.woff2");
font-style: normal;
font-weight: normal;
+ font-display: swap;
+}
+
+/* Fallback */
+@font-face {
+ font-family: "Aporetic Fallback";
+ src: local(-apple-system), local(BlinkMacSystemFont), local("Segoe UI"), local("Noto Sans"), local(Helvetica), local(Arial), local(sans-serif);
+ ascent-override: 96.5%;
+ descent-override: -21.5%;
+ line-gap-override: 0.07%;
}
diff --git a/assets/css/index.page.css b/assets/css/index.page.css
new file mode 100644
index 0000000..bf7091b
--- /dev/null
+++ b/assets/css/index.page.css
@@ -0,0 +1,15 @@
+main > div {
+ min-height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+main > div > div:first-child {
+ flex-grow: 1;
+}
+
+.webring {
+ display: flex;
+ gap: var(--padding);
+ justify-content: center;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 32ea47d..504fd15 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -32,6 +32,7 @@
--pink-bright: oklch(90% 0.06662 9.2146);
--border-radius: 5px;
+ --border-radius-big: calc(var(--border-radius) * 4);
--border-width: 1px;
--padding: 5px;
--padding-big: 10px;
@@ -40,38 +41,32 @@
}
body {
- font-family: "Aporetic", "Open Sans", sans-serif;
- background-color: var(--bg);
+ font-family: "Aporetic", "Aporetic Fallback";
+ background-color: var(--bg-lowest);
background-repeat: repeat;
- color: var(--fg);
+ color: var(--bg);
display: flex;
- gap: var(--padding-big);
min-height: 100vh;
- padding: var(--padding-big);
+ padding: calc(var(--padding-big) * 2);
+ padding-bottom: 0;
box-sizing: border-box;
position: relative;
-}
-
-#deco {
- overflow: hidden;
- position: fixed;
- width: 100%;
- height: 100%;
- left: 0;
- top: 0;
- z-index: -1;
+ scroll-behavior: smooth;
+ flex-direction: column;
}
#triangles {
content: "";
- width: 200%;
- height: 200%;
- background-image: url("/assets/triangle.svg");
- position: absolute;
- transform: translate(-50%, -50%) rotate(22.5deg);
+ /* cos(22.5deg) sin(22.5deg) */
+ width: calc(100vw * 0.92387953 + 100vh * 0.38268343);
+ height: calc(100vh * 0.92387953 + 100vw * 0.38268343);
+ position: fixed;
left: 50%;
top: 50%;
- z-index: -2;
+ z-index: 2;
+ background-image: url("/assets/triangle.svg");
+ opacity: 0.075;
+ transform: translate(-50%, -50%) rotate(22.5deg);
animation: scroll 16s linear infinite;
}
@@ -87,323 +82,121 @@ body {
}
}
-#rainbow {
- --bar-size: 0.3em;
- position: absolute;
- z-index: -1;
- bottom: 0;
- right: 0;
- aspect-ratio: 1 / 1;
- height: calc(var(--bar-size) * 14); /* magic number */
- background-image: linear-gradient(
- -45deg,
- transparent,
- transparent var(--bar-size),
- var(--blue) var(--bar-size),
- var(--blue) calc(var(--bar-size) * 2),
- transparent calc(var(--bar-size) * 2),
- transparent calc(var(--bar-size) * 3),
- var(--green) calc(var(--bar-size) * 3),
- var(--green) calc(var(--bar-size) * 4),
- transparent calc(var(--bar-size) * 4),
- transparent calc(var(--bar-size) * 5),
- var(--yellow) calc(var(--bar-size) * 5),
- var(--yellow) calc(var(--bar-size) * 6),
- transparent calc(var(--bar-size) * 6),
- transparent calc(var(--bar-size) * 7),
- var(--orange) calc(var(--bar-size) * 7),
- var(--orange) calc(var(--bar-size) * 8),
- transparent calc(var(--bar-size) * 8),
- transparent calc(var(--bar-size) * 9),
- var(--red) calc(var(--bar-size) * 9),
- var(--red) calc(var(--bar-size) * 10),
- transparent calc(var(--bar-size) * 10)
- );
-}
-
-/*
- * failsafe for when the viewport is too small and the rainbow overlaps the text
- */
-main > div,
-footer,
-nav > ul {
- background-color: var(--bg);
- box-shadow: var(--bg) 0 0 32px 8px;
- border-radius: var(--border-radius);
-}
-
-#upper {
- display: flex;
- flex-direction: column;
- flex-grow: 1;
-}
-
-#upper > div {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- gap: var(--padding-big);
- align-items: center;
-}
-
.subtle {
color: var(--fg-low);
}
main {
flex-grow: 1;
- width: 80vw;
line-height: 1.4;
+ padding: calc(var(--padding-big) * 2);
+ display: flex;
+ justify-content: center;
box-sizing: border-box;
+ background-color: var(--yellow);
+ border-radius: var(--border-radius-big);
+ overflow: hidden;
+ text-wrap: pretty;
}
-nav {
- z-index: 999;
-}
-
-nav > ul > li {
- display: inline;
+main > div {
+ max-width: 70%;
+ z-index: 3;
+ position: relative;
}
-main,
nav {
- padding: var(--padding-big);
-}
-
-nav li:not(:last-of-type)::after,
-footer > div > span:not(:last-of-type)::after {
- content: "";
- border-left: calc(var(--border-width) * 1) solid var(--border);
- margin-left: var(--padding);
- margin-right: var(--padding);
- display: inline-block;
- vertical-align: baseline;
- height: 1cap;
-}
-
-footer > div {
- line-height: 1.5;
+ padding-bottom: 0;
+ position: relative;
}
-footer {
- text-align: center;
- padding: var(--padding);
- font-size: 0.8em;
+nav > ul {
display: flex;
- flex-direction: column;
- gap: var(--padding);
+ gap: calc(var(--padding) + var(--border-radius) * 2);
+ padding-left: calc(var(--border-radius-big) + var(--padding-big));
}
-a,
-a:link {
- color: var(--yellow);
+nav .tab {
+ --color: var(--bg);
+ display: block;
+ color: var(--fg);
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ background-color: var(--color);
+ position: relative;
}
-a:not(.volatile):visited {
- color: var(--pink);
+nav .tab:not(.active) {
+ z-index: 3
}
-a:focus,
-a:hover {
- color: var(--yellow-bright);
+nav .tab:hover {
+ --color: var(--bg-high);
}
-a:active {
- color: var(--yellow);
+nav .tab.active {
+ --color: var(--yellow);
+ color: var(--bg);
}
-.anchor {
- order: -1;
+nav .tab > a {
+ padding: var(--padding-big);
+ display: block;
+ color: inherit;
text-decoration: none;
+ z-index: 3;
+ position: relative;
}
-a.anchor:link, a.anchor:visited {
- color: var(--fg-low);
-}
-
-a.anchor:focus,
-a.anchor:hover {
- color: var(--yellow-bright);
-}
-
-a.anchor:active {
- color: var(--yellow);
+nav .tab > a:focus-visible {
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+ outline: var(--blue) solid calc(var(--border-radius) + 1px);
+ outline-offset: 0;
}
-.anchor::after {
- content: "#";
+footer {
+ text-align: center;
+ color: var(--fg);
+ border-radius: var(--border-radius-big) var(--border-radius-big) 0 0;
+ padding: var(--padding-big);
font-size: 0.8em;
+ position: relative;
+ background-color: var(--bg-lowest);
+ z-index: 3;
}
-h1, h2 {
- line-height: 1;
- display: flex;
- align-items: center;
- gap: var(--padding-big);
-}
-
-.anchor::before {
- content: "";
- height: var(--border-width);
- background-color: var(--border);
-}
-
-h1::after, h2::after {
- content: "";
- height: var(--border-width);
- background-color: var(--border);
- flex-grow: 1;
-}
-
-h1 {
- font-size: 1.5em;
-}
-
-h2 {
- font-size: 1.25em;
-}
-
-main li {
- margin-left: var(--padding-big);
- list-style-type: "- ";
- list-style-position: inside;
-}
-
-main li::marker {
- color: var(--border);
-}
-
-main ol,
-main ul {
- padding-top: var(--padding);
- gap: var(--padding);
+footer > div {
display: flex;
flex-direction: column;
+ gap: var(--padding);
}
-p,
-pre,
-h1, h2
-{
- margin-top: 0.8em;
-}
-
-main > :last-child {
- margin-bottom: 0;
-}
-
-strong {
- font-weight: bold;
-}
-
-code {
- border-radius: var(--border-radius);
- padding-inline: calc(var(--padding) / 2);
- font-family: "Aporetic Mono", monospace;
- border: var(--border-width) solid var(--border);
- overflow-wrap: anywhere;
-}
-
-pre {
- overflow: hidden;
+footer > div > div {
+ line-height: 1.5;
}
-pre > code {
- display: block;
- padding: calc(var(--padding) * 2);
- position: relative;
- line-height: 1.3;
- overflow-wrap: break-word;
- background: transparent;
- overflow-x: scroll;
+footer > div > div > span:not(:last-of-type)::after {
+ content: "";
+ border-left: calc(var(--border-width) * 1) solid var(--border);
+ margin-left: var(--padding);
+ margin-right: var(--padding);
+ display: inline-block;
+ vertical-align: baseline;
+ height: 1cap;
}
-pre > code[data-lang]::after {
- content: attr(data-lang);
- position: absolute;
- top: 0;
- right: 0;
- padding: var(--padding);
- border-radius: 0 var(--border-radius);
- border-bottom: var(--border-width) solid var(--border);
- border-left: var(--border-width) solid var(--border);
- background-color: var(--bg-high);
- transition: transform 0.2s var(--easing);
+footer a {
+ color: var(--fg);
}
-pre > code[data-lang]:hover::after {
- transform: translateX(100%);
+footer a:hover,
+footer a:focus {
+ color: var(--yellow);
}
-@media (max-width: 130ch) {
- aside {
- padding: var(--padding-big);
- font-size: 0.9em;
- box-sizing: border-box;
- border: var(--border-width) solid var(--border);
- border-radius: var(--border-radius);
- background-color: var(--bg-high);
- position: relative;
- margin-bottom: var(--padding-big);
- margin-top: calc(var(--padding-big) + var(--arrow-size) / 2);
- }
-
- aside::after,
- aside::before {
- content: "";
- border-right: var(--arrow-size) solid transparent;
- border-left: var(--arrow-size) solid transparent;
- position: absolute;
- width: 0;
- height: 0;
- left: 50%;
- transform: translateX(-50%);
- }
-
- aside::before {
- border-bottom: var(--arrow-size) solid var(--border);
- top: calc(var(--arrow-size) * -1);
- }
-
- aside::after {
- border-bottom: var(--arrow-size) solid var(--bg-high);
- top: calc(var(--arrow-size) * -1 + var(--border-width));
- }
+main a {
+ color: inherit;
}
-@media (min-width: 130ch) {
- aside {
- position: absolute;
- right: var(--padding-big);
- max-width: calc(10vw - var(--padding-big));
- padding: var(--padding-big);
- font-size: 0.9em;
- box-sizing: border-box;
- border: var(--border-width) solid var(--border);
- border-radius: var(--border-radius);
- background-color: var(--bg-high);
- transform: translateY(calc(-50% - 1lh));
- }
-
- aside::after,
- aside::before {
- content: "";
- border-top: var(--arrow-size) solid transparent;
- border-bottom: var(--arrow-size) solid transparent;
- position: absolute;
- width: 0;
- height: 0;
- top: 50%;
- transform: translateY(-50%);
- }
-
- aside::before {
- border-right: var(--arrow-size) solid var(--border);
- left: calc(var(--arrow-size) * -1);
- }
-
- aside::after {
- border-right: var(--arrow-size) solid var(--bg-high);
- left: calc(var(--arrow-size) * -1 + var(--border-width));
- }
+.wavy {
+ font-size: 3em;
}
diff --git a/assets/css/posts.css b/assets/css/posts.page.css
index 50ca347..50ca347 100644
--- a/assets/css/posts.css
+++ b/assets/css/posts.page.css
diff --git a/assets/css/prismite.css b/assets/css/prismite.page.css
index 8c082c6..2eb7b9c 100644
--- a/assets/css/prismite.css
+++ b/assets/css/prismite.page.css
@@ -1,3 +1,21 @@
+main {
+ background-color: var(--bg);
+ color: var(--fg);
+}
+
+nav .tab {
+ --color: var(--bg-low);
+}
+
+nav .tab.active {
+ --color: var(--bg);
+ color: var(--fg);
+}
+
+#triangles {
+ opacity: 0.5;
+}
+
#logo {
display: flex;
justify-content: center;
@@ -14,10 +32,9 @@
#color_showcase {
color: var(--bg);
- /* writing-mode: sideways-lr; */
+ margin-top: var(--padding-big);
max-width: 100%;
display: flex;
- /* flex-direction: column; */
flex-wrap: wrap;
gap: var(--padding-big);
}
@@ -60,11 +77,6 @@
flex-direction: column;
}
-/* #color_showcase > div > div:hover { */
-/* color: transparent; */
-/* user-select: none; */
-/* } */
-
.fg-light {
color: var(--fg);
}
diff --git a/assets/svg/external.svg b/assets/svg/external.svg
new file mode 100644
index 0000000..ab0224d
--- /dev/null
+++ b/assets/svg/external.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#c8ced7" viewBox="0 0 256 256"><path d="M192,136v72a16,16,0,0,1-16,16H48a16,16,0,0,1-16-16V80A16,16,0,0,1,48,64h72a8,8,0,0,1,0,16H48V208H176V136a8,8,0,0,1,16,0Zm32-96a8,8,0,0,0-8-8H152a8,8,0,0,0-5.66,13.66L172.69,72l-42.35,42.34a8,8,0,0,0,11.32,11.32L184,83.31l26.34,26.35A8,8,0,0,0,224,104Z"></path></svg>
diff --git a/assets/svg/mask_bottom_left.svg b/assets/svg/mask_bottom_left.svg
new file mode 100644
index 0000000..255090d
--- /dev/null
+++ b/assets/svg/mask_bottom_left.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="128"
+ height="128"
+ viewBox="0 0 33.866668 33.866668"
+ version="1.1"
+ id="svg1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <g
+ id="layer1">
+ <path
+ id="rect2"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+ d="M 33.866668,33.866668 A 33.866665,33.866665 0 0 1 0,0 v 33.866668 z" />
+ </g>
+</svg>
diff --git a/assets/svg/mask_bottom_right.svg b/assets/svg/mask_bottom_right.svg
new file mode 100644
index 0000000..e99bc40
--- /dev/null
+++ b/assets/svg/mask_bottom_right.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="128"
+ height="128"
+ viewBox="0 0 33.866668 33.866668"
+ version="1.1"
+ id="svg1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <g
+ id="layer1">
+ <path
+ id="rect2"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+ d="M 33.866668,0 A 33.866665,33.866665 0 0 1 0,33.866668 h 33.866668 z" />
+ </g>
+</svg>
diff --git a/assets/svg/mask_top_left.svg b/assets/svg/mask_top_left.svg
new file mode 100644
index 0000000..41f8d41
--- /dev/null
+++ b/assets/svg/mask_top_left.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="128"
+ height="128"
+ viewBox="0 0 33.866668 33.866668"
+ version="1.1"
+ id="svg1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <g
+ id="layer1">
+ <path
+ id="rect2"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+ d="M 0,33.866668 A 33.866665,33.866665 0 0 1 33.866668,0 H 0 Z" />
+ </g>
+</svg>
diff --git a/assets/svg/mask_top_right.svg b/assets/svg/mask_top_right.svg
new file mode 100644
index 0000000..ab0c7e7
--- /dev/null
+++ b/assets/svg/mask_top_right.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ width="128"
+ height="128"
+ viewBox="0 0 33.866668 33.866668"
+ version="1.1"
+ id="svg1"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:svg="http://www.w3.org/2000/svg">
+ <defs
+ id="defs1" />
+ <g
+ id="layer1">
+ <path
+ id="rect2"
+ style="fill:#ffffff;fill-opacity:1;stroke-width:6.78397;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:16"
+ d="M 0,0 A 33.866665,33.866665 0 0 1 33.866668,33.866668 V 0 Z" />
+ </g>
+</svg>
diff --git a/assets/triangle.svg b/assets/triangle.svg
index 7e960f6..3ce502b 100644
--- a/assets/triangle.svg
+++ b/assets/triangle.svg
@@ -14,9 +14,9 @@
<g
id="layer1"
transform="matrix(0.33333334,0,0,0.33333332,4.2333331,4.2333329)"
- style="fill:#0c1116;fill-opacity:1">
+ style="fill:#070c11;fill-opacity:1">
<path
- style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
+ style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
id="path1"
d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z"
transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" />
@@ -24,18 +24,18 @@
<g
id="layer1-5"
transform="matrix(0.33333334,0,0,-0.33333332,15.08125,8.9958329)"
- style="fill:#171c22;fill-opacity:1">
+ style="fill:#070c11;fill-opacity:1">
<path
- style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
+ style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
id="path1-3"
d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" />
</g>
<g
id="layer1-3"
transform="matrix(0.33333334,0,0,0.33333332,16.933333,16.933335)"
- style="fill:#0c1116;fill-opacity:1">
+ style="fill:#070c11;fill-opacity:1">
<path
- style="fill:#0c1116;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
+ style="fill:#070c11;fill-opacity:1;stroke-width:0.661458;stroke-linecap:round;stroke-miterlimit:16"
id="path1-7"
d="M 5.6178411,3.720292 H 1.7436973 L 3.6807692,0.36518502 Z"
transform="matrix(1.6390718,0,0,1.8926372,0.3169551,2.4838372)" />
@@ -43,9 +43,9 @@
<g
id="layer1-5-5"
transform="matrix(0.33333334,0,0,-0.33333332,2.3812497,21.695833)"
- style="fill:#171c22;fill-opacity:1">
+ style="fill:#070c11;fill-opacity:1">
<path
- style="fill:#171c22;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
+ style="fill:#070c11;fill-opacity:1;stroke-width:1.16502;stroke-linecap:round;stroke-miterlimit:16"
id="path1-3-9"
d="M 15.08125,11.1125 H 8.7312506 L 11.906251,4.7624993 Z" />
</g>
generated by cgit v1.2.3 (git 2.51.0) at 2026-08-15 11:51:33 +0000