move stylesheet to it's own file

RoturTW · Aug 27, 2024 · 30e9a27 · 30e9a27
1 parent fff92a8
commit 30e9a27
Show file tree

Hide file tree

Showing 3 changed files with 218 additions and 437 deletions.
diff --git a/index.html b/index.html
@@ -16,224 +16,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
-
-  <style>
-    body {
-      font-family: 'Poppins';
-      font-size: 22px;
-      user-select: none;
-      color: aliceblue;
-      background: rgb(63, 47, 60);
-      background: linear-gradient(45deg, rgba(63, 47, 60, 1) 0%, rgba(17, 17, 17, 1) 10%, rgba(17, 17, 17, 1) 90%, rgba(53, 59, 100, 1) 100%);
-      height: max(100vh, 100%);
-    }
-
-    .hero {
-      max-width: 2000px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .hero .headings {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .hero img {
-      border-radius: 50%;
-      user-select: none;
-      float: right;
-      width: 500px;
-      height: 500px;
-      margin-right: 50px;
-      box-shadow: 20px 20px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav {
-      max-width: 2000px;
-      margin: auto;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-    }
-
-    .nav .left {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-left: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: left;
-      text-decoration: none;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav .right {
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      background-color: #222;
-      overflow: hidden;
-      float: right;
-      border-radius: 20px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .nav a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .nav a:hover {
-      background-color: #111;
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      border-radius: 10px;
-    }
-
-    .about {
-      max-width: 1500px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      margin: 200px auto;
-    }
-
-    .about h1 {
-      font-size: 50px;
-      float: left;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-      top: 50px;
-    }
-
-    .about img {
-      border-radius: 50%;
-      user-select: none;
-      width: 140px;
-      height: 140px;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-    }
-
-    .about .devs {
-      text-align: center;
-      display: flex;
-      justify-content: space-around;
-      align-items: center;
-      padding: 10px;
-      margin-top: 20px;
-      margin-right: 20px;
-      align-self: auto;
-      margin: auto;
-      transition: 0.2s;
-    }
-
-    .about .devs a {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .about .devs:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .about .devs p {
-      color: white;
-      text-align: center;
-      padding: 4px 15px;
-      text-decoration: none;
-    }
-
-    .features {
-      max-width: 1500px;
-      padding: 10px;
-      margin: 200px auto;
-      display: flex;
-      flex-wrap: wrap;
-      gap: 20px;
-    }
-
-    .features h1 {
-      width: 100%;
-      font-size: 50px;
-      padding-left: 10px;
-      padding-right: 50px;
-      margin-left: 50px;
-    }
-
-    .features .feature {
-      flex: 1 1 calc(50% - 40px);
-      /* Two columns */
-      margin-top: 20px;
-      padding: 10px;
-      background-color: #222;
-      border-radius: 10px;
-      color: white;
-      text-decoration: none;
-      box-sizing: border-box;
-      box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
-      transition: 0.2s;
-    }
-
-    .features .feature:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      scale: 1.03;
-      cursor: pointer;
-    }
-
-    .features .feature h1 {
-      font-size: 30px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature p {
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    .features .feature i {
-      font-size: 50px;
-      padding: 5px;
-      margin-left: 10px;
-    }
-
-    /* Styles for the tilt block */
-    #tilt {
-      display: block;
-      width: 500px;
-      height: 500px;
-      background-color: grey;
-      transition: box-shadow 0.1s, transform 0.1s;
-    }
-
-    #tilt:hover {
-      box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.6);
-      cursor: pointer;
-    }
-  </style>
+  <link rel="stylesheet" href="/styles.css">
 </head>
 <div class="nav">
   <div class="left">
@@ -251,7 +34,7 @@
     <h1>Rotur</h1>
     <p>A networking standard<br>over websockets</p>
   </div>
-  <img src="./Rotur Logo.png" id="tilt" alt="Rotur Logo" draggable="false">
+  <img src="/Rotur Logo.png" id="tilt" alt="Rotur Logo" draggable="false">
 </div>
 <div class="about">
   <h1>About</h1>