Little bit of styling

ProgrammingParadox · ProgrammingParadox · commit c25737d0ec7d · 2022-10-14T02:46:14.000Z
diff --git a/index.html b/index.html
@@ -4,12 +4,20 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
   
+    <link rel="stylesheet/less" type="text/css" href="style.less" />
     <link rel="stylesheet" href="style.css">
+
+    <script src="https://cdn.jsdelivr.net/npm/less"></script>
   
     <title>GB Coding CLub</title>
 </head>
 <body>
+  
   <div id="nav">
     <div id="nav-title">GBHS Coding Club</div>
 
@@ -20,6 +28,8 @@
     </div>
   </div>
 
+  <div id="nav-space"></div>
+
   <h1>Hello, World!</h1>
   
 </body>
diff --git a/notes.md b/notes.md
@@ -0,0 +1,3 @@
+The webpage has a cool thing called "LessCss" added to it, which allows you to write better CSS files easier.
+
+If you don't want to use it, you don't have to! It works with vanilla CSS so you won't even notice the difference.
diff --git a/style.css b/style.css
@@ -1,11 +1,2 @@
 
-#nav {
-  display: flex;
-  justify-content: space-between;
-}
-#nav-options {
-  display: flex;
-  justify-content: space-between;
-
-  flex-grow: 2;
-}
+/* Styles here still get used */
diff --git a/style.less b/style.less
@@ -0,0 +1,57 @@
+
+// I don't know what style the 
+// website should be so I figured
+// why not make everything a variable!
+
+// also https://lesscss.org/
+
+@font-family: "Ubuntu", sans-serif;
+
+@colors: {
+  main     : #EEE;
+  secondary: #DDD;
+}
+
+@padding: 20px;
+
+html, body {
+  width: 100%;
+  height: 100%;
+
+  margin: 0px;
+  padding: 0px;
+
+  font-family: @font-family;
+}
+
+#nav {
+  background-color: @colors[main];
+
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+}
+#nav-title {
+  padding: @padding;
+}
+#nav-options {
+  display: flex;
+  justify-content: space-between;
+
+  padding: @padding;
+
+  .nav-option{
+    &:not(:last-child) {
+      margin-right: 10px;
+    }
+  }
+}
+
+#nav-space {
+  height: 50px;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+The webpage has a cool thing called "LessCss" added to it, which allows you to write better CSS files easier.`
	`2`	`+`
	`3`	`+If you don't want to use it, you don't have to! It works with vanilla CSS so you won't even notice the difference.`