fix: change ui to look better

It uses rose pine moon

This was created by ai :D

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "themes/terminal"]
-  path = themes/terminal
-  url = https://github.com/panr/hugo-theme-terminal.git

archetypes/default.md

@@ -2,5 +2,5 @@
 title: "{{ replace .Name "-" " " | title }}"
 date: {{ .Date }}
 draft: true
+tags: []
 ---
-

assets/css/base.css

@@ -0,0 +1,33 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "SF Mono", Monaco, Menlo, Consolas, "Ubuntu Mono", monospace;
+}
+
+body {
+  background-color: var(--base);
+  color: var(--text);
+  line-height: 1.5;
+  padding: 1.5rem;
+  min-height: 100vh;
+  font-size: 16px;
+}
+
+::selection {
+  background-color: var(--iris);
+  color: var(--base);
+}
+
+@media (min-width: 1400px) {
+  body {
+    font-size: 18px;
+  }
+}
+
+@media (max-width: 768px) {
+  body {
+    padding: 0.75rem;
+    font-size: 15px;
+  }
+}

assets/css/code.css

@@ -0,0 +1,34 @@
+/* Hugo syntax highlighting overrides */
+.highlight {
+  background-color: var(--base) !important;
+  padding: 1rem;
+  border-radius: 5px;
+  overflow-x: auto;
+  margin: 1rem 0;
+  border: 1px solid var(--overlay);
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .highlight {
+    padding: 0.75rem;
+    font-size: 0.9em;
+  }
+}
+
+.highlight pre {
+  margin: 0;
+}
+
+.highlight code {
+  background: none;
+  padding: 0;
+}
+
+/* Inline code */
+code {
+  background-color: var(--base);
+  padding: 0.2em 0.4em;
+  border-radius: 3px;
+  color: var(--rose);
+}

assets/css/images.css

@@ -0,0 +1,82 @@
+.terminal-image {
+  margin: 2rem 0;
+  width: 100%;
+}
+
+.image-frame {
+  background-color: var(--surface);
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--overlay);
+}
+
+.image-header {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem;
+  background-color: var(--overlay);
+  border-bottom: 1px solid var(--overlay);
+}
+
+.image-title {
+  color: var(--subtle);
+  font-size: 0.9em;
+  margin-left: 1rem;
+}
+
+.terminal-img {
+  display: block;
+  width: 100%;
+  height: auto;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  filter: brightness(0.97);
+  transition: filter 0.3s ease;
+  animation: imageLoad 0.3s ease-in;
+}
+
+.terminal-img:hover {
+  filter: brightness(1);
+}
+
+.image-caption {
+  margin-top: 0.5rem;
+  color: var(--subtle);
+  font-size: 0.9em;
+  padding: 0.5rem;
+}
+
+.image-caption .prompt {
+  color: var(--pine);
+  margin-right: 0.5rem;
+}
+
+.image-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1.5rem;
+  margin: 2rem 0;
+  width: 100%;
+}
+
+@media (min-width: 1200px) {
+  .image-grid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .image-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@keyframes imageLoad {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

assets/css/main.css

@@ -0,0 +1,9 @@
+/* Import all CSS modules */
+@import "variables.css";
+@import "base.css";
+@import "terminal.css";
+@import "typography.css";
+@import "posts.css";
+@import "code.css";
+@import "tables.css";
+@import "images.css";

assets/css/posts.css

@@ -0,0 +1,39 @@
+.post {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  padding: 1.5rem;
+  border-radius: 4px;
+}
+
+.post-title {
+  color: var(--foam);
+  margin-bottom: 0.5rem;
+}
+
+.post-title a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.post-title a:hover {
+  text-decoration: underline;
+  color: var(--rose);
+}
+
+.post-meta {
+  color: var(--muted);
+  font-size: 0.9em;
+  margin-bottom: 1rem;
+}
+
+.post-content {
+  max-width: 100%;
+  padding: 1rem;
+}
+
+/* Improve content readability on larger screens */
+@media (min-width: 768px) {
+  .post {
+    padding: 2rem;
+  }
+}

assets/css/tables.css

@@ -0,0 +1,16 @@
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+}
+
+th,
+td {
+  padding: 0.5rem;
+  border: 1px solid var(--overlay);
+}
+
+th {
+  background-color: var(--overlay);
+  color: var(--foam);
+}

assets/css/terminal.css

@@ -0,0 +1,83 @@
+#terminal {
+  width: 95%;
+  max-width: 1200px; /* Increased from 900px */
+  margin: 0 auto;
+  padding: 1.5rem;
+  background-color: var(--surface);
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  #terminal {
+    width: 100%;
+    padding: 1rem;
+  }
+
+  body {
+    padding: 1rem;
+  }
+}
+
+@media (min-width: 1400px) {
+  #terminal {
+    max-width: 1400px;
+  }
+}
+
+.window-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  padding: 0.5rem;
+  border-bottom: 1px solid var(--overlay);
+}
+
+.window-button {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  margin-right: 6px;
+}
+
+.close {
+  background-color: var(--love);
+}
+.minimize {
+  background-color: var(--gold);
+}
+.maximize {
+  background-color: var(--foam);
+}
+
+.prompt {
+  color: var(--pine);
+  margin-right: 0.5rem;
+}
+
+.command {
+  color: var(--iris);
+  margin-bottom: 1rem;
+}
+
+.output {
+  margin-bottom: 2rem;
+}
+
+.cursor {
+  display: inline-block;
+  width: 0.6em;
+  height: 1.2em;
+  background-color: var(--rose);
+  animation: blink 1s step-end infinite;
+  vertical-align: middle;
+  margin-left: 0.2em;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
+}

assets/css/typography.css

@@ -0,0 +1,83 @@
+/* Headers */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--iris);
+  margin: 1.5rem 0 1rem 0;
+}
+
+/* Responsive typography */
+h1 {
+  font-size: 2.25rem;
+}
+h2 {
+  font-size: 1.85rem;
+}
+h3 {
+  font-size: 1.5rem;
+}
+h4 {
+  font-size: 1.25rem;
+}
+h5 {
+  font-size: 1.1rem;
+}
+h6 {
+  font-size: 1rem;
+}
+
+@media (max-width: 768px) {
+  h1 {
+    font-size: 2rem;
+  }
+  h2 {
+    font-size: 1.65rem;
+  }
+  h3 {
+    font-size: 1.35rem;
+  }
+  h4 {
+    font-size: 1.15rem;
+  }
+  h5,
+  h6 {
+    font-size: 1rem;
+  }
+}
+
+/* Links */
+a {
+  color: var(--foam);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--rose);
+}
+
+/* Blockquotes */
+blockquote {
+  margin: 1.5rem 0;
+  padding: 1rem 1.5rem;
+  border-left: 3px solid var(--pine);
+  background-color: var(--overlay);
+  border-radius: 0 4px 4px 0;
+}
+
+/* Lists */
+ul,
+ol {
+  padding-left: 1.5rem;
+  margin: 1rem 0;
+}
+
+p,
+ul,
+ol {
+  max-width: 100%;
+  margin-bottom: 1.5rem;
+}