diff --git a/app/assets/styles/main.scss b/app/assets/styles/main.scss index ab32d29..f913c50 100644 --- a/app/assets/styles/main.scss +++ b/app/assets/styles/main.scss @@ -1,11 +1,13 @@ @use "sass:color"; @use "bulma/sass/utilities/initial-variables.scss" as *; +@use "bulma/sass/utilities/derived-variables.scss" as *; @use "bulma/sass/utilities/mixins.scss" as *; - -@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900'); +@use "bulma/sass/components/card.scss" as *; +@use "utils.scss"; +@use "overrides-components.scss"; :root { - --bulma-family-primary: 'Inter', 'SF Pro', 'Helvetica', 'Arial', sans-serif; + font-size: 15px; } // ========================================== @@ -124,81 +126,15 @@ $size: ( // 4. CUSTOM CLASSES // ========================================== -.fullheight { height: 100vh; } - -.textsize { - @include mobile { font-size: 18px; } -} - .header-logo { background: url('/logo_dev.png') no-repeat center center; background-size: 40px; width: 50px; } -.border-bottom { border-bottom: 1px solid color.change($black-pure, $alpha: 0.15) } - -.carousel-height { - width: 100%; - height: 80vh; - @include mobile { height: 110vh; } -} - -// Mobile Spacing Utilities -.mobile-mt20 { @include mobile { margin-top: 20px; } } -.mobile-px10 { @include mobile { padding-left: 10px; padding-right: 10px; } } -.mobile-pt10 { @include mobile { padding-top: 10px; } } -.mobile-pt80 { padding-top: 120px; @include mobile { padding-top: 80px; } } - -.fullhd-pt30 { - padding-top: 30px; - @include until($fullhd) { padding-top: 0px; } -} - -.media-width { - width: 120px !important; - @include mobile { width: 112px !important; } -} - -.hideon-mobile { @include mobile { display: none; } } - -// Typography Classes -.maintext { - margin-top: 20px; - font-size: 40px; - line-height: 3rem; - font-weight: 600; - color: $blue-dianne; - @include mobile { font-size: 34px; } -} - -.subtext { - margin-top: 30px; - font-size: 1.2rem; - line-height: 2rem; - color: $cutty-sark; - @include mobile { line-height: 1.8rem; } -} - -.dotslide { - position: fixed; - bottom: 0; - position: absolute; - width: 100%; - text-align: center; - z-index: 999; -} - -.activetab { - border-radius: 8px; - color: $white-pure; - background-color: $blue-dianne; -} - // Block Layout .blockdiv { max-width: 1900px !important; - background-color: $white-pure; padding: 60px 15px 40px 15px; @include until($desktop) { padding: 65px 20px 30px 20px; } @@ -213,31 +149,6 @@ $size: ( } } -.padding-text { - padding-left: 15%; padding-right: 5%; - @include until($desktop) { padding-left: 0; padding-right: 0; } - @include until($fullhd) { padding-left: 0; padding-right: 0; } -} - -.padding-image { - padding-left: 5%; padding-right: 15%; - @include until($fullhd) { padding-left: 0; padding-right: 0; } - @include until($desktop) { padding-left: 15%; padding-right: 15%; } - @include mobile { padding-left: 0; padding-right: 0; } -} - -.imgcontainer { - position: relative; - width: 100% !important; - max-width: 500px; -} - -.centered { - position: absolute; - top: 80%; - text-align: center; -} - // Tooltip Styles .tooltip { position: relative; @@ -262,8 +173,6 @@ $size: ( pointer-events: none; } -.to-left { right: 30px; } - @mixin tooltipshow() { visibility: visible; opacity: 1; @@ -277,166 +186,3 @@ $size: ( .tooltip:hover .tooltiptext { @include tooltipshow() } .tooltip:hover .tooltiptext .to-left { @include tooltipshow() } - -// Dot Indicators -@mixin dot($background) { - height: 22px; - width: 22px; - text-align: center; - color: $white-pure; - font-weight: bold; - background-color: $background; - display: inline-block; - cursor: pointer; - font-size: 15px; - border-radius: 50%; -} - -@each $name, $hex in $color { - .dot-#{$name} { - @include dot($hex); - } -} - -// ========================================== -// 5. HELPER CLASSES GENERATOR -// ========================================== -@each $name, $hex in $color { - .bg-#{$name} { background-color: $hex !important; } - .text-#{$name} { color: $hex !important; } - .border-#{$name} { border-color: $hex !important; } - .icon-#{$name} { color: $hex !important; } - - .icon-bg-#{$name} { - background-color: $hex !important; - color: if(color.channel($hex, "lightness", $space: hsl) > 70, $blue-dianne, $white-pure) !important; - padding: 0.5rem; - border-radius: 4px; - } -} - -// ========================================== -// 6. BULMA OVERRIDES -// ========================================== - -// Backgrounds -.has-background-primary { background-color: $primary-color !important; } -.has-background-secondary { background-color: $secondary-color !important; } -.has-background-info { background-color: $info-color !important; } -.has-background-success { background-color: $success-color !important; } -.has-background-warning { background-color: $warning-color !important; } -.has-background-danger { background-color: $danger-color !important; } -.has-background-light { background-color: $light-color !important; } -.has-background-dark { background-color: $dark-color !important; } -.has-background-white { background-color: $white-pure !important; } - -// Text Colors -.has-text-primary { color: #086e71 !important; } -.has-text-secondary { color: $secondary-color !important; } -.has-text-info { color: $info-color !important; } -.has-text-success { color: $success-color !important; } -.has-text-warning { color: $warning-color !important; } -.has-text-danger { color: $danger-color !important; } -.has-text-light { color: $accent-color !important; } -.has-text-dark { color: $dark-color !important; } - -// Button/Element States (is-*) -.is-primary { - background-color: $primary-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-secondary { - background-color: $secondary-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-link { - background-color: $link-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-info { - background-color: $info-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-success { - background-color: $success-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-warning { - background-color: $warning-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-danger { - background-color: $danger-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -.is-light { - background-color: $light-color !important; - border-color: transparent !important; - color: $blue-dianne !important; -} - -.is-dark { - background-color: $dark-color !important; - border-color: transparent !important; - color: $white-pure !important; -} - -// Outlined Variants -.is-primary.is-outlined { - background-color: transparent !important; - border-color: $primary-color !important; - color: $primary-color !important; -} - -.is-link.is-outlined { - background-color: transparent !important; - border-color: $link-color !important; - color: $link-color !important; -} - -.is-info.is-outlined { - background-color: transparent !important; - border-color: $info-color !important; - color: $info-color !important; -} - -.is-success.is-outlined { - background-color: transparent !important; - border-color: $success-color !important; - color: $success-color !important; -} - -.is-warning.is-outlined { - background-color: transparent !important; - border-color: $warning-color !important; - color: $warning-color !important; -} - -.is-primary.is-light { - background-color: rgba($primary-color, 0.1) !important; - color: $primary-color !important; -} - -.is-info.is-light { - background-color: rgba($info-color, 0.2) !important; - color: color.adjust($info-color, $lightness: -10%) !important; -} - -.is-success.is-light { - background-color: rgba($success-color, 0.1) !important; - color: $success-color !important; -} \ No newline at end of file diff --git a/app/assets/styles/overrides-components.scss b/app/assets/styles/overrides-components.scss new file mode 100644 index 0000000..194b8a1 --- /dev/null +++ b/app/assets/styles/overrides-components.scss @@ -0,0 +1,6 @@ +@use "bulma/sass/utilities/initial-variables.scss" as *; + +.card { + --bulma-card-shadow: none; + border: 1px solid $grey-lighter; +} \ No newline at end of file diff --git a/app/assets/styles/utils.scss b/app/assets/styles/utils.scss new file mode 100644 index 0000000..cac4940 --- /dev/null +++ b/app/assets/styles/utils.scss @@ -0,0 +1,237 @@ +@use "sass:list"; + +.font-thin { + font-weight: 100; +} +.font-extralight { + font-weight: 200; +} +.font-light { + font-weight: 300; +} +.font-normal { + font-weight: 400; +} +.font-medium { + font-weight: 500; +} +.font-semibold { + font-weight: 600; +} +.font-bold { + font-weight: 700; +} +.font-extrabold { + font-weight: 800; +} +.font-black { + font-weight: 900; +} + +.rounded-xs { + border-radius: 0.125rem; +} +.rounded-sm { + border-radius: 0.25rem; +} +.rounded-md { + border-radius: 0.375rem; +} +.rounded-lg { + border-radius: 0.5rem; +} +.rounded-xl { + border-radius: 0.75rem; +} +.rounded-2xl { + border-radius: 1rem; +} +.rounded-3xl { + border-radius: 1.5rem; +} +.rounded-4xl { + border-radius: 2rem; +} +.rounded-none { + border-radius: 0; +} +.rounded-full { + border-radius: calc(infinity * 1px); +} + +$base: 0.25rem; + +@function spacing($step) { + @return $step * $base; +} + +$spacing-types: ( + "p": "padding", + "m": "margin", +); + +$spacing-variants: ( + "": (""), + "x": ("-left", "-right"), + "y": ("-top", "-bottom"), + "t": ("-top"), + "b": ("-bottom"), + "l": ("-left"), + "r": ("-right"), +); + +@each $type-prefix, $type in $spacing-types { + @each $dir-suffix, $sides in $spacing-variants { + @for $i from 0 through 48 { + // Whole step: p-0, p-1, p-2 ... + .#{$type-prefix}#{$dir-suffix}-#{$i} { + @each $side in $sides { + #{$type}#{$side}: spacing($i); + } + } + + // Half step: p-0\.5, p-1\.5, p-2\.5 ... + // Stop at 47.5 — 48.5 would exceed the scale + @if $i < 48 { + .#{$type-prefix}#{$dir-suffix}-#{$i}\.5 { + @each $side in $sides { + #{$type}#{$side}: spacing($i + 0.5); + } + } + } + + } + } +} + +// ─── CSS custom properties ───────────────────────────────────────────────── +:root { + --spacing: 0.25rem; + --container-3xs: 16rem; + --container-2xs: 18rem; + --container-xs: 20rem; + --container-sm: 24rem; + --container-md: 28rem; + --container-lg: 32rem; + --container-xl: 36rem; + --container-2xl: 42rem; + --container-3xl: 48rem; + --container-4xl: 56rem; + --container-5xl: 64rem; + --container-6xl: 72rem; + --container-7xl: 80rem; +} + +// ─── Shared mixin ────────────────────────────────────────────────────────── +@mixin set-props($props, $value) { + @each $prop in $props { + #{$prop}: $value; + } +} + +// ─── Class types ─────────────────────────────────────────────────────────── +$class-types: ( + "w": (width), + "h": (height), + "size": (width, height), +); + +// ─── Numeric: w-0 → w-48, h-0 → h-48, size-0 → size-48 ─────────────────── +@each $prefix, $props in $class-types { + @for $i from 0 through 48 { + .#{$prefix}-#{$i} { + @include set-props($props, calc(var(--spacing) * #{$i})); + } + } +} + +// ─── Fractions ───────────────────────────────────────────────────────────── +$fractions: ( + "1\\/2": (1, 2), + "1\\/3": (1, 3), + "2\\/3": (2, 3), + "1\\/4": (1, 4), + "2\\/4": (2, 4), + "3\\/4": (3, 4), + "1\\/5": (1, 5), + "2\\/5": (2, 5), + "3\\/5": (3, 5), + "4\\/5": (4, 5), + "1\\/6": (1, 6), + "2\\/6": (2, 6), + "3\\/6": (3, 6), + "4\\/6": (4, 6), + "5\\/6": (5, 6), + "1\\/12": (1, 12), + "2\\/12": (2, 12), + "3\\/12": (3, 12), + "4\\/12": (4, 12), + "5\\/12": (5, 12), + "6\\/12": (6, 12), + "7\\/12": (7, 12), + "8\\/12": (8, 12), + "9\\/12": (9, 12), + "10\\/12": (10, 12), + "11\\/12": (11, 12), +); + +@each $prefix, $props in $class-types { + @each $name, $pair in $fractions { + $num: list.nth($pair, 1); + $den: list.nth($pair, 2); + .#{$prefix}-#{$name} { + @include set-props($props, calc(#{$num} / #{$den} * 100%)); + } + } +} + +// ─── Container sizes (w- only) ───────────────────────────────────────────── +$containers: ( + "3xs", "2xs", "xs", "sm", "md", "lg", "xl", + "2xl", "3xl", "4xl", "5xl", "6xl", "7xl" +); + +@each $name in $containers { + .w-#{$name} { width: var(--container-#{$name}); } +} + +// ─── Shared keywords (auto, px, full, min, max, fit) ─────────────────────── +// These are identical in value across w-, h-, and size- +$shared-keywords: ( + "auto": auto, + "px": 1px, + "full": 100%, + "min": min-content, + "max": max-content, + "fit": fit-content, +); + +@each $prefix, $props in $class-types { + @each $name, $value in $shared-keywords { + .#{$prefix}-#{$name} { + @include set-props($props, $value); + } + } +} + +// ─── Viewport keywords ───────────────────────────────────────────────────── +// dvw/dvh/lvw/lvh/svw/svh apply equally to w-, h-, and size- +$viewport-keywords: ( + "dvw": 100dvw, + "dvh": 100dvh, + "lvw": 100lvw, + "lvh": 100lvh, + "svw": 100svw, + "svh": 100svh, +); + +@each $prefix, $props in $class-types { + @each $name, $value in $viewport-keywords { + .#{$prefix}-#{$name} { + @include set-props($props, $value); + } + } +} + +.w-screen { width: 100vw; } +.h-screen { height: 100vh; } \ No newline at end of file diff --git a/app/components/TopMenu.vue b/app/components/TopMenu.vue index ffeda9f..2be1a41 100644 --- a/app/components/TopMenu.vue +++ b/app/components/TopMenu.vue @@ -1,11 +1,20 @@