test

2023-01-15 16:32:15 -05:00 · 2023-01-15 16:32:15 -05:00 · fa787960fa
commit fa787960fa
5 changed files with 196 additions and 0 deletions
--- a/css/global.css
+++ b/css/global.css
@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+:root
+{
+    --dark-color: #1E1E1E;
+    --light-dark-color: #252525;
+    --lighter-dark-color: #2D2D2D;
+    --flair-color: #E65632;
+}
+
+*
+{
+    font-family: "Outfit";
+    margin: 0;
+}
+
+{
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+}
+a::after
+{
+    background-color: var(--flair-color);
+    bottom: 0;
+    content: "";
+    height: 100%;
+    left: 0;
+    mix-blend-mode: darken;
+    position: absolute;
+    transform: scale(0, 1);
+    transform-origin: right;
+    width: 100%;
+
+    transition: transform 0.25s;
+}
+a:hover::after
+{
+    transform: scale(1, 1);
+    transform-origin: left;
+}
+
+html
+{
+    background-color: var(--dark-color);
+    color: white;
+    font-size: 1.25vw;
+}
+
+header
+{
+    background-color: var(--lighter-dark-color);
+    align-items: center;
+    display: flex;
+    height: fit-content;
+}
+
+header img
+{
+    margin: 0.75vw 1vw 0.75vw 2vw;
+    height: 2.5vw;
+}
+header h3
+{
+    color: var(--flair-color);
+    width: 20%;
+}
+header .items
+{
+    text-align: left;
+    width: 100%;
+}
+header .items *
+{
+    margin: 0 1vw;
+}
+
+h2
+{
+    color: var(--flair-color);
+}
+
+main
+{
+    margin: 5vw 15vw;
+}
+main h1, main h2
+{
+    margin-left: -5vw;
+    margin-top: 3vw;
+}
+main h3, main h4, main h5, main h6
+{
+    margin-left: -3vw;
+    margin-top: 1.5vw;
+}
+
+main .para
+{
+    margin-top: 7.5vw;
+}
+
+.title
+{
+    background-color: var(--light-dark-color);
+    font-size: 2.5vw;
+    padding: 10vw 2.5vw;
+    text-align: center;
+}
--- a/images/logo.webp
+++ b/images/logo.webp
--- a/index.html
+++ b/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+
+<html>
+    <head>
+        <link type="text/css" rel="stylesheet" href="/css/global.css">
+
+        <title>Welcome to SuperNOVA!</title>
+    </head>
+
+    <!--HEADER-->
+
+    <body>
+        <div class="title">
+            <h1>Welcome to SuperNOVA!</h1>
+        </div>
+
+        <!--TABLE OF CONTENTS-->
+
+        <main>
+            <p>
+                SuperNOVA is the name for the First Robotics Competition team 4472.
+                This is the online documentation website for SuperNOVA. This website will include
+                everything documented by the SuperNOVA team, including parts of WPILib, methods of
+                programming certain things, and more!
+            </p>
+
+            <div class="para">
+                <h2 id="title">Something</h2>
+                <p>
+                    Put something here. I don't care what.
+                </p>
+            </div>
+        </main>
+    </body>
+
+    <!--FOOTER-->
+
+    <script src="/js/global.js"></script>
+</html>
--- a/js/global.js
+++ b/js/global.js
@ -0,0 +1,39 @@
+// Initialize some global variables
+const internet = new XMLHttpRequest();
+var htmlStr = document.documentElement.innerHTML;
+
+// Insert site parts
+insertHeader();
+insertFooter();
+
+// Update page
+document.documentElement.innerHTML = htmlStr;
+
+// ----- Begin function declarations
+
+function insertHeader()
+{
+    const headerUrl = "/partial/header.html";
+    const headerReplace = "<!--HEADER-->";
+
+    internet.open("GET", headerUrl, false);
+    internet.send(null);
+    if (internet.status == 200)
+    {
+        const header = internet.responseText;
+        while (htmlStr.includes(headerReplace)) htmlStr = htmlStr.replace(headerReplace, header);
+    }
+}
+function insertFooter()
+{
+    const footerUrl = "/partial/footer.html"
+    const footerReplace = "<!--FOOTER-->";
+    
+    internet.open("GET", footerUrl, false);
+    internet.send(null);
+    if (internet.status == 200)
+    {
+        const footer = internet.responseText;
+        while (htmlStr.includes(footerReplace)) htmlStr = htmlStr.replace(footerReplace, footer);
+    }
+}
--- a/partial/header.html
+++ b/partial/header.html
@ -0,0 +1,9 @@
+<header>
+    <img src="/images/logo.webp">
+    <h3>4472 SuperNOVA</h3>
+
+    <div class="items">
+        <a>Home</a>
+        <a>Another</a>
+    </div>
+</header>