[WIP] Prototype Layout for RMT site

3 years ago · e34bb969c2
parent bbc87e3fa6
commit e34bb969c2
2 changed files with 117 additions and 7 deletions
--- a/index.php
+++ b/index.php
@ -1,9 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Rocknarok Multiverse Time Clock</title>
+<link rel="stylesheet" href="style.css" />
 <script type= "text/javascript" src="jquery-3.6.0.min.js"> </script>

+<section>
 <!-- Request Rocknarok Universe datetime from API -->
 <script type= "text/javascript">
 $(document).ready(function() {
@ -60,18 +64,35 @@ $(document).ready(function() {
     update();
 });
 </script>
+</section>
 </head>
 <body>
-<h1>Rocknarok Multiverse Time Clock</h1>
+<div class="mainlayout container">

-<p>Rocknarok Universe Current time:<p>
-<div id="ruclock"> </div> <br/>
+   <header class="item">
+      <h1>Rocknarok Multiverse Time Clock</h1>
+   </header>

-<p>St. Sky Universe Current time:</p>
-<div id="ssuclock"> </div> <br/>
+   <main class="item">
+      <p>Rocknarok Universe Current time:<p>
+      <div id="ruclock"> </div> <br/>

-<p>Kocharion Universe Current time:</p>
-<div id="kuclock"> </div> <br/>
+      <p>St. Sky Universe Current time:</p>
+      <div id="ssuclock"> </div> <br/>
+
+      <p>Kocharion Universe Current time:</p>
+      <div id="kuclock"> </div> <br/>
+   </main>
+
+   <footer class="item">
+      <ul class="bottom">
+         <li><span>&copy Yandols Zeon X</span></li>
+         <li>The clocks displayed on this page is content part of the Rocknarok Multiverse, which you can check out <a href="https://lore.yandols.xyz">here</a>.</li>
+         <li><a href="https://git.yandols.xyz/YandolsZX/RMT-Clock-PHP">Clock Project Repo</a></li>
+      </ul>
+   </footer>
+
+</div>

 </body>
 </html>
--- a/style.css
+++ b/style.css
@ -0,0 +1,89 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
+
+* {
+    box-sizing: border-box;
+    font: inherit;
+    color: inherit;
+}
+
+/* All */
+
+body {
+    font-family: "Poppins", sans-serif;
+    color: #333;
+    background-color: snow;
+    margin: 0 auto;
+    /* max-width: 1000px; */
+}
+
+/* Header */
+
+header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+}
+
+h1 {
+    font-weight: 800;
+    font-size: 3em;
+    padding: 18px;
+}
+
+/* Footer */
+
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    flex-grow: 1;
+    text-align: center;
+}
+
+footer .bottom {
+    margin: 2em 0;
+    padding: 0;
+    text-align: center;
+}
+
+footer .bottom li {
+    border-left: solid 1px rgba(144, 144, 144, 0.25);
+    display: inline-block;
+    list-style: none;
+    margin-left: 1.5em;
+    padding-left: 1.5em;
+}
+
+footer .bottom li:first-child {
+    border-left: 0;
+    margin-left: 0;
+    padding-left: 0;
+}
+
+/* Othe Style Elements */
+
+ul {
+    padding-left: 1.5rem;
+}
+
+.item {
+    padding: 8px;
+    background-color: white;
+    border: 4px solid tomato;
+    border-radius: 6px;
+    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+.height-50 {
+    height: 50vh;
+}
+
+/* Main Layout Container */
+
+.mainlayout.container {
+    display: grid;
+    height: 100vh;
+
+    grid-template-rows: auto 1fr auto;
+}