Astro app

src/styles/colors.scss

@@ -0,0 +1,33 @@
+:root {
+  --primary: #9fef00;
+  --primary-lighter: #cff97a;
+  --text-color: #ffffff;
+  --text-color-secondary: #a4b1cd;
+  --background: #141d2b;
+  --background-darker: #111927;
+  --background-lighter: #1a2332;
+  --bg-shadow-color: #0f1620;
+  --fg-shadow-color: #456602;
+  --primary-transparent: #9fef0030;
+
+  // Action Colors
+  --info: #04e4f4;
+  --success: #20e253;
+  --warning: #f6f000;
+  --error: #fca016;
+  --danger: #f80363;
+  --neutral: #272f4d;
+}
+
+html[data-theme="light"] {
+  --primary: #4a7700;
+  --primary-lighter: #a4cf50;
+  --text-color: #333333;
+  --text-color-secondary: #57667e;
+  --background: #ffffff;
+  --background-darker: #f0f0f0;
+  --background-lighter: #fafafa;
+  --bg-shadow-color: #e0e0e0;
+  --fg-shadow-color: #678800;
+  --primary-transparent: #4a770033;
+}

src/styles/global.scss

@@ -0,0 +1,123 @@
+/* Global Stylesheet */
+
+@import './media-queries.scss';
+
+/* CSS Reset - Normalize dimensions and spacing across browsers */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/* HTML and body basic setup */
+html {
+  font-size: 16px; // Default text size; consider accessibility and user preferences
+  scroll-behavior: smooth; // Smooth scrolling on click to hash links
+}
+
+body {
+  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+  line-height: 1;
+  color: var(--text-color);
+  background: var(--background);
+  overflow-x: hidden;
+  font-weight: 400;
+}
+
+/* Links */
+a {
+  color: inherit;
+  text-decoration: none;
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+/* Images */
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: inherit;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: normal;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+ul, ol {
+  margin-top: 0;
+  margin-bottom: 1em;
+  padding-left: 20px;
+}
+
+/* Forms */
+input, button, textarea, select {
+  font: inherit;
+  &:focus {
+    outline: 1px solid var(--primary);
+  }
+}
+
+/* Utility Classes */
+.text-center {
+  text-align: center;
+}
+.hidden {
+  display: none;
+}
+
+/* Responsive Design - Example of a simple breakpoint */
+@media (max-width: 768px) {
+  html {
+    font-size: 14px; // Smaller font size on smaller screens
+  }
+}
+
+
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5em;
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+h1 { font-size: 2.25rem; }
+h2 { font-size: 1.8rem; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.2rem; }
+h5 { font-size: 1rem; }
+h6 { font-size: 0.85rem; }
+
+p {
+  margin-top: 0;
+  margin-bottom: 1em;
+}
+
+a {
+  color: var(--primary);
+  text-decoration: none;
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// Responsive font sizes
+@media (max-width: 768px) {
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.6rem; }
+  h3 { font-size: 1.4rem; }
+  // Adjust more as necessary
+}
+

src/styles/media-queries.scss

@@ -0,0 +1,79 @@
+// Breakpoints
+$breakpoint-xs: 599px;  // Max width for mobile only
+$breakpoint-sm: 600px;  // Min width for tablet portrait
+$breakpoint-md: 768px;  // Min width for tablet landscape
+$breakpoint-lg: 1024px; // Min width for desktop
+$breakpoint-xl: 1440px; // Min width for large desktop
+
+// Mixins for specific breakpoints
+@mixin for-mobile-only {
+  @media (max-width: $breakpoint-xs) {
+    @content;
+  }
+}
+
+@mixin mobile-up {
+  @media (min-width: calc($breakpoint-xs + 1px)) {
+    @content;
+  }
+}
+
+@mixin for-tablet-portrait {
+  @media (min-width: $breakpoint-sm) and (max-width: calc($breakpoint-md - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-portrait-down {
+  @media (max-width: calc($breakpoint-md - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-up {
+  @media (min-width: $breakpoint-sm) {
+    @content;
+  }
+}
+
+@mixin for-tablet-landscape {
+  @media (min-width: $breakpoint-md) and (max-width: calc($breakpoint-lg - 1px)) {
+    @content;
+  }
+}
+
+@mixin tablet-landscape-down {
+  @media (max-width: calc($breakpoint-lg - 1px)) {
+    @content;
+  }
+}
+
+@mixin for-desktop {
+  @media (min-width: $breakpoint-lg) and (max-width: calc($breakpoint-xl - 1px)) {
+    @content;
+  }
+}
+
+@mixin desktop-down {
+  @media (max-width: calc($breakpoint-xl - 1px)) {
+    @content;
+  }
+}
+
+@mixin for-large-desktop {
+  @media (min-width: $breakpoint-xl) {
+    @content;
+  }
+}
+
+@mixin large-desktop-up {
+  @media (min-width: $breakpoint-xl) {
+    @content;
+  }
+}
+
+@mixin mobile-down {
+  @media (max-width: $breakpoint-xs) {
+    @content;
+  }
+}

src/styles/typography.scss

@@ -0,0 +1,62 @@
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('../assets/fonts/Inter-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}