adding css for horizontal navbar

oceanbluesky · Nov 14, 2024 · 88900f1 · 88900f1
1 parent 5734855
commit 88900f1
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 13 deletions.
diff --git a/__about_these_files.md b/__about_these_files.md
@@ -4,6 +4,14 @@ run this to build tailwind.css and dx serve index.html:
  npm run serve   
 
 
+It will be necessary to handcode this css link in the dist/assets/index.html file:
+<link rel="stylesheet" href="assets/styles/tailwind.css">
+
+
+
+ _____
+
+
 the 'npm commands' are in package.json (if files are moved update the package.json file as well): 
 
 {

diff --git a/dist/assets/styles/tailwind.css b/dist/assets/styles/tailwind.css
@@ -1,3 +1,5 @@
+/* Tailwind base styles */
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -106,9 +108,7 @@
   --tw-contain-style:  ;
 }
 
-/*
-! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
-*/
+/* ! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com */
 
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
@@ -152,7 +152,7 @@ html,
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-  tab-size: 4;
+     tab-size: 4;
   /* 3 */
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
@@ -197,7 +197,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
+          text-decoration: underline dotted;
 }
 
 /*
@@ -554,6 +554,8 @@ video {
   display: none;
 }
 
+/* Import custom styles */
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -708,7 +710,7 @@ html,
   -moz-tab-size: 4;
   /* 3 */
   -o-tab-size: 4;
-     tab-size: 4;
+  tab-size: 4;
   /* 3 */
   font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
@@ -753,7 +755,7 @@ Add the correct text decoration in Chrome, Edge, and Safari.
 
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 /*
@@ -1108,4 +1110,5 @@ video {
 
 [hidden]:where(:not([hidden="until-found"])) {
   display: none;
-}
+}
+
diff --git a/dist/index.html b/dist/index.html
@@ -5,6 +5,8 @@
   <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="UTF-8" />
+  <link rel="stylesheet" href="assets/styles/tailwind.css">
+
 
 </head>
 <body>

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -0,0 +1,25 @@
+/* Set nav-list to display items in a row */
+.navbar-list {
+    list-style: none;
+    /* Remove bullet points */
+    padding: 0;
+    margin: 0;
+    display: flex;
+    gap: 1rem;
+    /* Space between items */
+}
+
+/* Style each navigation item */
+.navbar-item a {
+    text-decoration: none;
+    color: inherit;
+    /* Use the default text color */
+    padding: 0.5rem 1rem;
+}
+
+/* Optional: Add some styling for hover effect */
+.navbar-item a:hover {
+    background-color: #ddd;
+    /* Light background on hover */
+    border-radius: 4px;
+}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -1,3 +1,11 @@
+/* Tailwind base styles */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Import custom styles */
+@import './styles.css';
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -554,6 +562,3 @@ video {
   display: none;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,7 @@
 /** @type {import('tailwindcss').Config} */
-
 module.exports = {
   content: [
     "./src/**/*.{rs,html}",  // Includes Rust and HTML files in src
-    "./public/**/*.html",     // Includes HTML files in public directory
   ],
   theme: {
     extend: {},