init commit

2026-01-14 22:38:44 +01:00
parent 4e0c415f0b
commit e25d53d054
124 changed files with 21653 additions and 1 deletions
--- a/resources/sass/base/_base.scss
+++ b/resources/sass/base/_base.scss
@@ -0,0 +1,231 @@
+/**
+ * Base Styles - Enterprise SCSS Architecture
+ * Professional Resume Builder
+ * 
+ * @author David Valera Melendez <david@valera-melendez.de>
+ * @created 2025-08-08
+ * @location Made in Germany 🇩🇪
+ */
+
+// ==========================================================================
+// CSS Reset & Base Styles
+// ==========================================================================
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: $font-family-primary;
+  font-size: $font-size-base;
+  line-height: $line-height-normal;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba($black, 0);
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-primary;
+  font-size: $font-size-base;
+  font-weight: $font-weight-normal;
+  line-height: $line-height-normal;
+  color: $text-primary;
+  background-color: $bg-secondary;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba($black, 0);
+}
+
+// ==========================================================================
+// Typography Base
+// ==========================================================================
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: $spacing-md;
+  font-weight: $font-weight-semibold;
+  line-height: $line-height-tight;
+  color: $text-primary;
+}
+
+h1 { font-size: $font-size-4xl; }
+h2 { font-size: $font-size-3xl; }
+h3 { font-size: $font-size-2xl; }
+h4 { font-size: $font-size-xl; }
+h5 { font-size: $font-size-lg; }
+h6 { font-size: $font-size-base; }
+
+p {
+  margin-top: 0;
+  margin-bottom: $spacing-base;
+  
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+small,
+.small {
+  font-size: $font-size-sm;
+  font-weight: $font-weight-normal;
+}
+
+// ==========================================================================
+// Links
+// ==========================================================================
+a {
+  color: $primary-color;
+  text-decoration: underline;
+  transition: color $transition-base;
+  
+  &:hover,
+  &:focus {
+    color: darken($primary-color, 15%);
+  }
+  
+  &:focus {
+    outline: thin dotted;
+    outline-offset: 2px;
+  }
+}
+
+// ==========================================================================
+// Lists
+// ==========================================================================
+ul,
+ol {
+  margin-top: 0;
+  margin-bottom: $spacing-base;
+  padding-left: $spacing-xl;
+}
+
+li {
+  margin-bottom: $spacing-xs;
+}
+
+// ==========================================================================
+// Forms Base
+// ==========================================================================
+button,
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button:focus:not(:focus-visible) {
+  outline: 0;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+// ==========================================================================
+// Images & Media
+// ==========================================================================
+img {
+  border-style: none;
+  vertical-align: middle;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+// ==========================================================================
+// Tables
+// ==========================================================================
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: $spacing-sm;
+  padding-bottom: $spacing-sm;
+  color: $text-muted;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+}
+
+// ==========================================================================
+// Code
+// ==========================================================================
+pre,
+code,
+kbd,
+samp {
+  font-family: $font-family-mono;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: $spacing-base;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+// ==========================================================================
+// Accessibility
+// ==========================================================================
+.sr-only {
+  @include sr-only;
+}
+
+.sr-only-focusable {
+  &:active,
+  &:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+    border: 0;
+  }
+}
+
+// ==========================================================================
+// Focus States
+// ==========================================================================
+:focus {
+  outline: 2px solid $primary-color;
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid $primary-color;
+  outline-offset: 2px;
+}