Add: CSS tweaks

- Add blinking cursor after prompt string
- Add thin scrollbar to sidebar

css/main.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 .sidebar {
   width: 300px;
   height: calc(100vh - 60px);
@@ -8,6 +9,9 @@
   top: 0;
   overflow-y: auto;
   color: #e0e0e0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #0c7a57 transparent;
 }
 .sidebar h2 {
   font-size: 1.1rem;
@@ -19,15 +23,21 @@
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
+@keyframes cursor-blink {
+  50% {
+    opacity: 0;
+  }
+}
 .preview {
   margin-left: 300px;
   padding: 2rem;
   min-height: calc(100vh - 60px);
   width: 100%;
   background: #2d2d2d;
+  padding-bottom: calc(60px + 2rem);
 }
 .preview .terminal-preview {
-  font-family: "IosevkaTermSlab Nerd Font Mono", "Fira Code", "Courier New", monospace;
+  font-family: monospace;
   color: #e0e0e0;
   background: #1a1a1a;
   font-size: 14px;
@@ -36,6 +46,13 @@
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
+.preview .terminal-preview::after {
+  content: "█";
+  color: #0c7a57;
+  display: inline-block;
+  margin-left: 2px;
+  animation: cursor-blink 1s step-start infinite;
+}
 
 .footer {
   position: fixed;

index.html

@@ -15,7 +15,7 @@
     <main class="preview">
       <div class="terminal-preview">
         <!-- Prompt preview will be rendered here -->
-         user@host:~/Works/shell_styler$
+         user@host:~/Works/shell_styler$  <!-- temp placeholder -->
       </div>
     </main>
   </div>

scss/_preview.scss

@@ -1,5 +1,9 @@
 @use 'vars' as *;
 
+@keyframes cursor-blink {
+  50% { opacity: 0; }
+}
+
 .preview {
   margin-left: $sidebar-width;
   padding: 2rem;
@@ -8,7 +12,7 @@
   background: $bg-light;
 
   .terminal-preview {
-    font-family: 'IosevkaTermSlab Nerd Font Mono', 'Fira Code', 'Courier New', monospace;
+    font-family: monospace;
     color: $text-color;
     background: $bg-dark;
     font-size: 14px;
@@ -17,5 +21,13 @@
     border-radius: 8px;
     //width: 100%;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    &::after {
+      content: "█";
+      color: $cursor-color;
+      display: inline-block;
+      margin-left: 2px;
+      animation: cursor-blink 1s step-start infinite;
+    }
   }
+  padding-bottom: calc($footer-height + 2rem);
 }

scss/_sidebar.scss

@@ -10,6 +10,12 @@
   top: 0;
   overflow-y: auto;
   color: $text-color;
+  
+  // Scrollbar
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: $accent-color transparent;
+
 
   h2 {
     font-size: 1.1rem;

scss/_vars.scss

@@ -7,6 +7,8 @@ $accent-color: #0c7a57;
 $text-color: #e0e0e0;
 $text-muted: #888;
 
+$cursor-color: $accent-color;
+
 // Sizes
 $sidebar-width: 300px;
 $footer-height: 60px;