Init

rss/css/variables.scss

@@ -0,0 +1,165 @@
+/* Grid system */
+$container-padding: 1rem;
+$grid-columns: 12;
+
+/* Breakpoints */
+$breakpoints: (
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xxxl: 1520px
+);
+
+/* Display types */
+$display-types: block, flex, inline, inline-block, inline-flex, grid, none;
+
+/* Color palette */
+$colors: (
+  primary: #0981b1,
+  primary-alt: #0981b1b6,
+  alt: #0981b1b6,
+  secondary: #333,
+  success: #34b97b,
+  warning: #ffc107,
+  danger: #dc3545,
+  info: #0dcaf0,
+  light: #e5e5e5,
+  dark: #212529,
+  white: #ffffff,
+  black: #000000,
+  muted: #C7C7C7,
+  accent-white: #f7f7f7,
+  accent: #0ed884,
+  transparent: transparent
+);
+
+/* Spacing scale */
+$spacing-scale: 0, 0.25rem, 0.5rem, 1rem, 1.5rem, 3rem;
+
+/* Shadows (soft shadows) */
+$shadows: (
+  1: 0 1px 3px rgba(0, 0, 0, 0.12),
+  2: 0 2px 6px rgba(0, 0, 0, 0.16),
+  3: 0 4px 10px rgba(0, 0, 0, 0.18),
+  4: 0 6px 15px rgba(0, 0, 0, 0.20),
+  5: 0 10px 24px rgba(0, 0, 0, 0.22)
+);
+
+$drop-shadows: (
+  1: 0 2px 4px rgba(0, 0, 0, 0.14),
+  2: 0 4px 8px rgba(0, 0, 0, 0.18),
+  3: 0 8px 16px rgba(0, 0, 0, 0.20),
+  4: 0 12px 24px rgba(0, 0, 0, 0.22),
+  5: 0 20px 40px rgba(0, 0, 0, 0.24)
+);
+
+
+
+
+/* Flex utilities */
+$flex-directions: (
+  row: row,
+  row-reverse: row-reverse,
+  column: column,
+  column-reverse: column-reverse
+);
+
+$justify-content-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly
+);
+
+$align-items-values: (
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch
+);
+
+/* Button component variables */
+$btn-padding-y: 0.375rem;
+$btn-padding-x: 0.75rem;
+$btn-font-size: 1rem;
+$btn-border-radius: 0.25rem;
+$btn-border-width: 1px;
+$btn-hover-brightness: 0.9;
+
+/* Typography */
+$font-family-base: "Nunito", sans-serif;
+$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+
+$font-sizes: (
+  xs: 0.75rem,
+  sm: 0.875rem,
+  base: 1.1rem,
+  lg: 1.35rem,
+  xl: 1.8rem,
+  xxl: 2.2rem
+);
+
+$font-weights: (
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+);
+
+$line-heights: (
+    tight: 1,
+    normal: 1.3,
+    heading: 1.5
+
+);
+
+
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  3: 3px
+);
+
+$border-radius-sizes: (
+  none: 0,
+  sm: 0.125rem,
+  md: 0.25rem,
+  lg: 0.5rem,
+  xl: 1rem,
+  full: 9999px
+);
+
+$spacer: 1rem;
+$spacing: (
+    "0": 0,
+    "1": $spacer * 0.25,
+    "2": $spacer * 0.5,
+    "3": $spacer,
+    "4": $spacer * 1.5,
+    "5": $spacer * 3
+);
+
+$gutters: (
+  0: 0,
+  1: map-get($spacing, "1"),
+  2: map-get($spacing, "2"),
+  3: map-get($spacing, "3"),
+  4: map-get($spacing, "4"),
+  5: map-get($spacing, "5") 
+);