the fancy black borders
This commit is contained in:
9
README
9
README
@@ -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?
|
||||||
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user