file management: clean up src folder

Signed-off-by: Jess Chitas <[email protected]>

Author: jessicachitas

src/App.jsx

@@ -3,7 +3,6 @@
 /* -------------------------------------------------------------------------- */
 
 /* --------------------------------- Imports -------------------------------- */
-import "./App.css";
 import installIcon from "./assets/gravity-ui--arrow-shape-down-to-line.svg";
 import githubIcon from "./assets/octicon--mark-github-24.svg";
 import communityIcon from "./assets/gravity-ui--persons.svg";

src/Nav.css

@@ -2,7 +2,6 @@
 /*                   JavaScript file for building the navbar                  */
 /* -------------------------------------------------------------------------- */
 
-import "./Nav.css";
 import ramalamaText from "./assets/ramalama-logo-text-only.svg";
 import ramalamaLogo from "./assets/ramalama-logo-llama-only.svg";
 

src/Nav.jsx

@@ -1,18 +1,122 @@
 /* -------------------------------------------------------------------------- */
-/*                            Style Sheet for App.jsx                            */
+/*                         Style Sheet for index.html                         */
 /* -------------------------------------------------------------------------- */
 
-/* ----------------------------- Global Styles ----------------------------- */
+@font-face {
+  font-family: "Red Hat Display";
+  src: url(assets/RedHatDisplay-VariableFont_wght.ttf);
+}
 
 @font-face {
   font-family: "Red Hat Mono";
   src: url(assets/RedHatMono-VariableFont_wght.ttf);
 }
 
+:root {
+  font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
+  line-height: 1.2;
+  font-weight: normal;
+  font-size: 1.2rem;
+
+  color-scheme: light dark;
+  color: black;
+  background-color: #ececec;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
 * {
   box-sizing: border-box;
 }
 
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+/* ----------------------------- Navbar Section ---------------------------- */
+
+.logo-text {
+  width: 20%;
+  margin: 1.25rem 2rem;
+
+  @media screen and (max-width: 1024px) {
+    width: 30%;
+    @media screen and (max-width: 768px) {
+      display: none;
+    }
+  }
+}
+
+.logo-mascot {
+  display: none;
+  width: 20%;
+  margin: 1.25rem 2rem;
+  
+  @media screen and (max-width: 768px) {
+    display: flex;
+    @media screen and (max-width: 500px) {
+      width: 50%;
+    }
+  }
+}
+
+.navbar {
+  position: fixed;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: #000;
+  background-color: #ffffffcc;
+  width: 100%;
+}
+
+.navbar-left {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #000;
+  text-decoration: none;
+}
+
+.navbar-right .nav-links {
+  margin: 0 1rem;
+  list-style-type: none;
+  display: flex;
+}
+
+.navbar-right .nav-links li {
+  padding: 0 1rem;
+}
+
+.navbar-right .nav-links a {
+  color: #000;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.github-stars-badge {
+  height: 28px;
+  @media screen and (max-width: 768px) {
+    align-content: center;
+    height: 20px;
+  }
+}
+
 .viewport {
   width: 100vw;
   height: 100vh;

src/App.css renamed to src/css/index.css

@@ -4,7 +4,7 @@
 
 import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
-import "./index.css";
+import "./css/index.css";
 import Nav from "./Nav.jsx";
 import App from "./App.jsx";