From 89a62f4ceb60140da406511ce44b56b4ae9fdba5 Mon Sep 17 00:00:00 2001 From: Ruben Date: Fri, 3 Nov 2023 13:09:04 -0500 Subject: [PATCH] woaw corners --- index.html | 11 +-- style.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 205 insertions(+), 9 deletions(-) diff --git a/index.html b/index.html index c3f7eb8..0048efb 100644 --- a/index.html +++ b/index.html @@ -9,11 +9,14 @@ +
-
-

hey, i'm ruben.

-

welcome to my site.

-

i'm your "average" 17 year old gay foss enjoyer.

+
+
+

hey, i'm ruben.

+

welcome to my site.

+

i'm your "average" 17 year old gay foss enjoyer.

+
diff --git a/style.css b/style.css index 4856e3b..96ee95e 100644 --- a/style.css +++ b/style.css @@ -6,7 +6,7 @@ --header-2: #E3F5EA; --fg: #F4FFF7; --accent-1: #36FFC4; - --shadow: #000000; + --shadow: #36FFC4; } html { @@ -14,6 +14,203 @@ html { font-family: JetBrainsMono Nerd Font; } +/* -- pixelated border radius -- */ +.pixel-corners, +.pixel-corners--wrapper { + clip-path: polygon(0px calc(100% - 28px), + 4px calc(100% - 28px), + 4px calc(100% - 20px), + 8px calc(100% - 20px), + 8px calc(100% - 12px), + 12px calc(100% - 12px), + 12px calc(100% - 8px), + 20px calc(100% - 8px), + 20px calc(100% - 4px), + 28px calc(100% - 4px), + 28px 100%, + calc(100% - 28px) 100%, + calc(100% - 28px) calc(100% - 4px), + calc(100% - 20px) calc(100% - 4px), + calc(100% - 20px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 20px), + calc(100% - 4px) calc(100% - 20px), + calc(100% - 4px) calc(100% - 28px), + 100% calc(100% - 28px), + 100% 28px, + calc(100% - 4px) 28px, + calc(100% - 4px) 20px, + calc(100% - 8px) 20px, + calc(100% - 8px) 12px, + calc(100% - 12px) 12px, + calc(100% - 12px) 8px, + calc(100% - 20px) 8px, + calc(100% - 20px) 4px, + calc(100% - 28px) 4px, + calc(100% - 28px) 0px, + 28px 0px, + 28px 4px, + 20px 4px, + 20px 8px, + 12px 8px, + 12px 12px, + 8px 12px, + 8px 20px, + 4px 20px, + 4px 28px, + 0px 28px); + position: relative; +} +.pixel-corners { + border: 4px solid transparent; +} +.pixel-corners--wrapper { + width: fit-content; + height: fit-content; +} +.pixel-corners--wrapper .pixel-corners { + display: block; + clip-path: polygon(4px 28px, + 8px 28px, + 8px 20px, + 12px 20px, + 12px 12px, + 20px 12px, + 20px 8px, + 28px 8px, + 28px 4px, + calc(100% - 28px) 4px, + calc(100% - 28px) 8px, + calc(100% - 20px) 8px, + calc(100% - 20px) 12px, + calc(100% - 12px) 12px, + calc(100% - 12px) 20px, + calc(100% - 8px) 20px, + calc(100% - 8px) 28px, + calc(100% - 4px) 28px, + calc(100% - 4px) calc(100% - 28px), + calc(100% - 8px) calc(100% - 28px), + calc(100% - 8px) calc(100% - 20px), + calc(100% - 12px) calc(100% - 20px), + calc(100% - 12px) calc(100% - 12px), + calc(100% - 20px) calc(100% - 12px), + calc(100% - 20px) calc(100% - 8px), + calc(100% - 28px) calc(100% - 8px), + calc(100% - 28px) calc(100% - 4px), + 28px calc(100% - 4px), + 28px calc(100% - 8px), + 20px calc(100% - 8px), + 20px calc(100% - 12px), + 12px calc(100% - 12px), + 12px calc(100% - 20px), + 8px calc(100% - 20px), + 8px calc(100% - 28px), + 4px calc(100% - 28px)); +} +.pixel-corners::after, +.pixel-corners--wrapper::after { + content: ""; + position: absolute; + clip-path: polygon(0px calc(100% - 28px), + 4px calc(100% - 28px), + 4px calc(100% - 20px), + 8px calc(100% - 20px), + 8px calc(100% - 12px), + 12px calc(100% - 12px), + 12px calc(100% - 8px), + 20px calc(100% - 8px), + 20px calc(100% - 4px), + 28px calc(100% - 4px), + 28px 100%, + calc(100% - 28px) 100%, + calc(100% - 28px) calc(100% - 4px), + calc(100% - 20px) calc(100% - 4px), + calc(100% - 20px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 8px), + calc(100% - 12px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 12px), + calc(100% - 8px) calc(100% - 20px), + calc(100% - 4px) calc(100% - 20px), + calc(100% - 4px) calc(100% - 28px), + 100% calc(100% - 28px), + 100% 28px, + calc(100% - 4px) 28px, + calc(100% - 4px) 20px, + calc(100% - 8px) 20px, + calc(100% - 8px) 12px, + calc(100% - 12px) 12px, + calc(100% - 12px) 8px, + calc(100% - 20px) 8px, + calc(100% - 20px) 4px, + calc(100% - 28px) 4px, + calc(100% - 28px) 0px, + 28px 0px, + 28px 4px, + 20px 4px, + 20px 8px, + 12px 8px, + 12px 12px, + 8px 12px, + 8px 20px, + 4px 20px, + 4px 28px, + 0px 28px, + 0px 50%, + 4px 50%, + 4px 28px, + 8px 28px, + 8px 20px, + 12px 20px, + 12px 12px, + 20px 12px, + 20px 8px, + 28px 8px, + 28px 4px, + calc(100% - 28px) 4px, + calc(100% - 28px) 8px, + calc(100% - 20px) 8px, + calc(100% - 20px) 12px, + calc(100% - 12px) 12px, + calc(100% - 12px) 20px, + calc(100% - 8px) 20px, + calc(100% - 8px) 28px, + calc(100% - 4px) 28px, + calc(100% - 4px) calc(100% - 28px), + calc(100% - 8px) calc(100% - 28px), + calc(100% - 8px) calc(100% - 20px), + calc(100% - 12px) calc(100% - 20px), + calc(100% - 12px) calc(100% - 12px), + calc(100% - 20px) calc(100% - 12px), + calc(100% - 20px) calc(100% - 8px), + calc(100% - 28px) calc(100% - 8px), + calc(100% - 28px) calc(100% - 4px), + 28px calc(100% - 4px), + 28px calc(100% - 8px), + 20px calc(100% - 8px), + 20px calc(100% - 12px), + 12px calc(100% - 12px), + 12px calc(100% - 20px), + 8px calc(100% - 20px), + 8px calc(100% - 28px), + 4px calc(100% - 28px), + 4px 50%, + 0px 50%); + top: 0; + bottom: 0; + left: 0; + right: 0; + background: #36ffc4; + display: block; + pointer-events: none; +} +.pixel-corners::after { + margin: -4px; +} +/* -- end of pixelated borders -- */ + + .main { width: 100%; max-width: 80%; @@ -26,12 +223,8 @@ html { position: relative; display: flex; justify-content: space-evenly; - transform: translateY(10%); padding: 30px; - margin: 50px; - border-radius: 26px; background-color: var(--bg); - box-shadow: var(--shadow) 0px 5px 17px; } h1 {