sd/site
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

woaw corners

Browse source
This commit is contained in:
Ruben 2023-11-03 13:09:04 -05:00
commit 89a62f4ceb
No known key found for this signature in database
2 changed files with 205 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

11
index.html
View file

@ -9,11 +9,14 @@
<body>
<div class="main">
<div class="intro-box">
<h1>hey, i'm ruben.</h1>
<h2>welcome to my site.</h2>
<p>i'm your "average" 17 year old gay foss enjoyer.</p>
<div class="pixel-corners">
<div class="intro-box">
<h1>hey, i'm ruben.</h1>
<h2>welcome to my site.</h2>
<p>i'm your "average" 17 year old gay foss enjoyer.</p>
</div>
</div>
</div>

203
style.css
View file

@ -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 {