the fancy black borders

This commit is contained in:
Lazy Hippopotamus
2024-03-05 12:31:37 -05:00
parent baf5c3f122
commit bd63034366
3 changed files with 61 additions and 8 deletions

9
README
View File

@@ -1,3 +1,6 @@
This is a Sitix (https://github.com/LinuxRocks2000/sitix-rewrite) project. To build it, run `sitix site` in the root directory. The output directory will contain the built site. This is a Sitix (https://github.com/LinuxRocks2000/sitix-rewrite) project. To
DO NOT RUN `sitix build site -o .`! I learned the hard way that recovering the files sitix will delete IS IMPOSSIBLE! And it'll even remove all your git stuff, which I was rather build it, run `sitix site` in the root directory. The output directory will
mad about. contain the built site. DO NOT RUN `sitix build site -o .`! I learned the hard
way that recovering the files sitix will delete IS IMPOSSIBLE! And it'll even
remove all your git stuff, which I was rather mad about. Yes, I wrote sitix and
should understand all of its implications. What, you *don't* get tired?

View File

@@ -90,17 +90,29 @@
#shape { #shape {
height: calc(10vh + 3px); height: calc(10vh + 3px);
width: 100vw; width: 100vw;
background-color: var(--cream); background-color: black;
clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%); clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%);
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
} }
#shape::after {
content: "";
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 3px;
left: 0px;
clip-path: inherit;
background-color: var(--cream);
}
#title { #title {
font-size: 4em; font-size: 4em;
font-family: Lobster; font-family: Lobster;
text-align: center; text-align: center;
background-color: var(--cream); background-color: black;
color: black; color: black;
padding-top: 52px; /* TODO: make this less worsely */ padding-top: 52px; /* TODO: make this less worsely */
position: sticky; position: sticky;
@@ -109,6 +121,19 @@
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%);
} }
#title::after {
display: inline-block;
content: "";
width: 100vw;
height: 100%;
position: absolute;
top: -3px;
left: 0px;
z-index: -1;
background-color: var(--cream);
clip-path: inherit;
}
div#nav { div#nav {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: Lobster; font-family: Lobster;
src: url(Lobster-Regular.ttf); src: url(res/Lobster-Regular.ttf);
} }
* { * {
@@ -90,17 +90,29 @@
#shape { #shape {
height: calc(10vh + 3px); height: calc(10vh + 3px);
width: 100vw; width: 100vw;
background-color: var(--cream); background-color: black;
clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%); clip-path: polygon(0% calc(100% - 3px), 0% 100%, 100% 100%, 100% calc(100% - 3px), 50% 0%);
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
} }
#shape::after {
content: "";
display: inline-block;
width: 100%;
height: 100%;
position: absolute;
top: 3px;
left: 0px;
clip-path: inherit;
background-color: var(--cream);
}
#title { #title {
font-size: 4em; font-size: 4em;
font-family: Lobster; font-family: Lobster;
text-align: center; text-align: center;
background-color: var(--cream); background-color: black;
color: black; color: black;
padding-top: 52px; /* TODO: make this less worsely */ padding-top: 52px; /* TODO: make this less worsely */
position: sticky; position: sticky;
@@ -109,6 +121,19 @@
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 10vh), 0% 100%);
} }
#title::after {
display: inline-block;
content: "";
width: 100vw;
height: 100%;
position: absolute;
top: -3px;
left: 0px;
z-index: -1;
background-color: var(--cream);
clip-path: inherit;
}
div#nav { div#nav {
display: flex; display: flex;
justify-content: center; justify-content: center;