diff --git a/Assets/FSEX302.ttf b/Assets/FSEX302.ttf new file mode 100755 index 0000000..cb06d40 Binary files /dev/null and b/Assets/FSEX302.ttf differ diff --git a/Assets/Img/Tile.png b/Assets/Img/Tile.png new file mode 100644 index 0000000..22ced34 Binary files /dev/null and b/Assets/Img/Tile.png differ diff --git a/CSS/Style.css b/CSS/Style.css new file mode 100644 index 0000000..8514d84 --- /dev/null +++ b/CSS/Style.css @@ -0,0 +1,184 @@ +@font-face { + font-family: "FSEX302"; + src: url("../Assets/FSEX302.ttf") format("truetype"); + font-style: normal; + font-weight: normal; +} + +:root, +:root[data-palette="CatppuccinMocha"] { + --Rosewater: #f5e0dc; + --Flamingo: #f2cdcd; + --Pink: #f5c2e7; + --Mauve: #cba6f7; + --Red: #f38ba8; + --Maroon: #eba0ac; + --Peach: #fab387; + --Yellow: #f9e2af; + --Green: #a6e3a1; + --Teal: #94e2d5; + --Sky: #89dceb; + --Sapphire: #74c7ec; + --Blue: #89b4fa; + --Lavender: #b4befe; + + --Text: #cdd6f4; + --Subtext1: #bac2de; + --Subtext0: #a6adc8; + --Overlay2: #9399b2; + --Overlay1: #7f849c; + --Overlay0: #6c7086; + --Surface2: #585b70; + --Surface1: #45475a; + --Surface0: #313244; + --Base: #1e1e2e; + --Mantle: #181825; + --Crust: #11111b; +} + +html { + font-family: "FSEX302"; + color: var(--Text); + + background-image: url("../Assets/Img/Tile.png"); + background-repeat: repeat; +} + +body { + margin: 0; + padding: 2rem; + + font-family: inherit; + color: inherit; +} + +* { + box-sizing: border-box; + font-family: inherit; +} + +.MainContainer { + max-width: 800px; + margin: 0 auto; + padding: 2rem; + + color: var(--Text); + background-color: var(--Base); + + border: 4px solid var(--Mauve); +} + +h1, h2, h3, h4, h5, h6 { + margin-top: 0; + margin-bottom: 1rem; + + color: var(--Mauve); +} + +h1 { + font-size: 2.5rem; + + padding-bottom: 0.5rem; + border-bottom: 3px solid var(--Mauve); +} + +h2 { + font-size: 2rem; + color: var(--Blue); +} + +h3 { + font-size: 1.5rem; + color: var(--Green); +} + +h4 { + font-size: 1.25rem; + color: var(--Peach); +} + +h5 { + font-size: 1rem; + color: var(--Yellow); +} + +h6 { + font-size: 0.9rem; + color: var(--Rosewater); +} + +p { + margin-top: 0; + margin-bottom: 1rem; + + color: var(--Text); + + font-size: 1rem; + line-height: 1.5; +} + +a { + color: var(--Blue); +} + +a:hover { + color: var(--Sky); +} + +strong { + color: var(--Peach); +} + +em { + color: var(--Lavender); +} + +ul, ol { + color: var(--Text); +} + +li { + margin-bottom: 0.5rem; +} + +blockquote { + margin-left: 0; + padding: 1rem; + + color: var(--Subtext1); + background-color: var(--Mantle); + + border-left: 4px solid var(--Mauve); +} + +code { + padding: 0.2rem 0.4rem; + + color: var(--Green); + background-color: var(--Mantle); +} + +pre { + padding: 1rem; + overflow-x: auto; + + color: var(--Text); + background-color: var(--Crust); + + border: 2px solid var(--Surface2); +} + +pre code { + padding: 0; + background-color: transparent; +} + +hr { + border: 0; + border-top: 2px solid var(--Surface2); +} + +input, button, textarea, select { + font-family: inherit; + color: inherit; +} diff --git a/HTML/Bits/Head.html b/HTML/Bits/Head.html new file mode 100644 index 0000000..5d0351e --- /dev/null +++ b/HTML/Bits/Head.html @@ -0,0 +1,8 @@ + + + + + My Webpage + + + diff --git a/HTML/Bits/Navbar.html b/HTML/Bits/Navbar.html new file mode 100644 index 0000000..e69de29 diff --git a/HTML/Sarahtonin.html b/HTML/Sarahtonin.html new file mode 100644 index 0000000..0c1a3b2 --- /dev/null +++ b/HTML/Sarahtonin.html @@ -0,0 +1,16 @@ + + + +
+ +
+

Welcome

+ +

+ Hi. There's nothing here yet, sorry. +

+
+ + + + diff --git a/JS/Script.js b/JS/Script.js new file mode 100644 index 0000000..6b37b99 --- /dev/null +++ b/JS/Script.js @@ -0,0 +1,26 @@ +function includeHTML() { + var z, i, elmnt, file, xhttp; + + console.log("Including HTML.") + + z = document.getElementsByTagName("*"); + for (i = 0; i < z.length; i++) { + elmnt = z[i]; + + file = elmnt.getAttribute("include"); + if (file) { + xhttp = new XMLHttpRequest(); + xhttp.onreadystatechange = function() { + if (this.readyState == 4) { + if (this.status == 200) {elmnt.innerHTML = this.responseText;} + if (this.status == 404) {elmnt.innerHTML = "Page not found.";} + elmnt.removeAttribute("include"); + includeHTML(); + } + } + xhttp.open("GET", file, true); + xhttp.send(); + return; + } + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..4a5acc1 --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + +
+ +
+

Welcome

+ +

+ You've arrived at Sarahtonin's homepage. + Feel free to browse around as much as you want. +

+

+ If you want to access other links, you probably need to join my tailscale network. +
+ Also, this is simply the homepage. You can use the navbar to the right to navigate around. +

+

+ + Have fun snooping! + +

+ +

About Sarahtonin

+ +

+ I'm Sarahtonin. The creator of this very website. + It's a bit strange for me to write in first-person, I suppose. No matter, though. +

+

+ I made this website because I'd prefer an easier way to share my socials, + and to just introduce myself in a better way. +

+

+ Speaking of introducing myself, you should probably visit the page about me. +

+ +

Credits

+ + +
+ + + +