diff --git a/app.vue b/app.vue index 4b0f522..5acf3c1 100644 --- a/app.vue +++ b/app.vue @@ -1,11 +1,7 @@ - - diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..7c95c6f --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,2 @@ +@import "tailwindcss"; +@import "@nuxt/ui"; diff --git a/assets/scss/_breakpoints.scss b/assets/scss/_breakpoints.scss deleted file mode 100644 index ceaa4b1..0000000 --- a/assets/scss/_breakpoints.scss +++ /dev/null @@ -1,6 +0,0 @@ -// Breakpoints -$breakpoint-sm: 576px; -$breakpoint-md: 768px; -$breakpoint-lg: 992px; -$breakpoint-xl: 1200px; -$breakpoint-xxl: 1400px; diff --git a/assets/scss/_reset.scss b/assets/scss/_reset.scss deleted file mode 100644 index c9c2a69..0000000 --- a/assets/scss/_reset.scss +++ /dev/null @@ -1,70 +0,0 @@ -/* Modern CSS Reset */ -*, -*::before, -*::after { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* Remove default margin and padding */ -body, -h1, -h2, -h3, -h4, -h5, -h6, -p, -figure, -blockquote, -dl, -dd { - margin: 0; -} - -/* Set core body defaults */ -body { - min-height: 100vh; - scroll-behavior: smooth; - text-rendering: optimizeSpeed; - line-height: 1.5; -} - -/* Remove list styles on ul, ol elements */ -ul, -ol { - list-style: none; -} - -/* A elements that don't have a class get default styles */ -a:not([class]) { - text-decoration-skip-ink: auto; -} - -/* Make images easier to work with */ -img, -picture { - max-width: 100%; - display: block; -} - -/* Inherit fonts for inputs and buttons */ -input, -button, -textarea, -select { - font: inherit; -} - -/* Remove all animations and transitions for people that prefer not to see them */ -@media (prefers-reduced-motion: reduce) { - *, - *::before, - *::after { - animation-duration: 0.01ms !important; - animation-iteration-count: 1 !important; - transition-duration: 0.01ms !important; - scroll-behavior: auto !important; - } -} diff --git a/assets/scss/colors.scss b/assets/scss/colors.scss deleted file mode 100644 index c78aca5..0000000 --- a/assets/scss/colors.scss +++ /dev/null @@ -1,88 +0,0 @@ -// Brand Colors -$brand-primary: #4f46e5; // Основной цвет бренда -$brand-secondary: #10b981; // Вторичный цвет бренда - -// Neutral Colors -$neutral-50: #f9fafb; // Самый светлый оттенок -$neutral-100: #f3f4f6; // Светлый фон -$neutral-200: #e5e7eb; // Светлая граница -$neutral-300: #d1d5db; // Светлый текст -$neutral-400: #9ca3af; // Неактивный текст -$neutral-500: #6b7280; // Средний текст -$neutral-600: #4b5563; // Основной текст -$neutral-700: #374151; // Темный текст -$neutral-800: #1f2937; // Очень темный текст -$neutral-900: #111827; // Самый темный оттенок - -// Semantic Colors -$text-primary: $neutral-900; // Основной текст -$text-secondary: $neutral-600; // Вторичный текст -$text-muted: $neutral-400; // Неактивный текст -$background-primary: $neutral-50; // Основной фон -$background-secondary: $neutral-100; // Вторичный фон -$border-color: $neutral-200; // Цвет границ - -// Status Colors -$success: #10b981; // Успех -$warning: #f59e0b; // Предупреждение -$error: #ef4444; // Ошибка -$info: #3b82f6; // Информация - -// Basic Colors -$black: #000000; -$dark-background: #13141c; -$dark-grey: #171821; -$grey-selector: #1b1b24; -$grey-blocks: #1e1f2b; -$grey-text-highlight: #23242c; -$grey-blocks-hover: #262736; -$grey-menu: #292a32; -$grey-stroke: #323442; -$grey-paginator: #323442; -$grey-icons: #5b5e6d; -$grey-text: #7f808b; -$grey-text2: #9A9BAB; -$white: #ffffff; -$greeen: #9fff00; -$greeen-dark: #43611b; -$red: #ff4141; -$red-dark: #3e232c; -$green: #20b26c; -$green-dark: #133324; -$gold: #ffc35c; - -// Form Elements -$grey-form: #1c1d26; -$grey-form-stroke: #323442; -$grey-button: #21222d; -$grey-button-2: #32323c; -$grey-button-stroke: #5b5e6d; - -// Export colors for JavaScript -:export { - black: $black; - darkBackground: $dark-background; - darkGrey: $dark-grey; - greySelector: $grey-selector; - greyBlocks: $grey-blocks; - greyTextHighlight: $grey-text-highlight; - greyBlocksHover: $grey-blocks-hover; - greyMenu: $grey-menu; - greyStroke: $grey-stroke; - greyPaginator: $grey-paginator; - greyIcons: $grey-icons; - greyText: $grey-text; - white: $white; - greeen: $greeen; - greeenDark: $greeen-dark; - red: $red; - redDark: $red-dark; - green: $green; - greenDark: $green-dark; - greyForm: $grey-form; - greyFormStroke: $grey-form-stroke; - greyButton: $grey-button; - greyButton2: $grey-button-2; - greyButtonStroke: $grey-button-stroke; - gold: $gold; -} diff --git a/assets/scss/global.scss b/assets/scss/global.scss deleted file mode 100644 index 553eaae..0000000 --- a/assets/scss/global.scss +++ /dev/null @@ -1,12 +0,0 @@ -@use 'main' as *; - -body { - font-family: 'Inter', sans-serif; - color: $text-color; - margin: 0; - padding: 0; -} - -.container { - @include container; -} diff --git a/assets/scss/main.scss b/assets/scss/main.scss deleted file mode 100644 index 28cf440..0000000 --- a/assets/scss/main.scss +++ /dev/null @@ -1,78 +0,0 @@ -@use 'reset'; -@use 'colors' as *; -@use 'typography' as *; -@use 'utils' as *; - -// Base styles -html { - font-size: 16px; - line-height: 1.5; - scroll-behavior: smooth; -} - -body { - font-family: $font-family-base; - color: white; - background-color: black; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -// Typography -h1, -h2, -h3, -h4, -h5, -h6 { - font-weight: $font-weight-semibold; - line-height: 100%; - color: #ffffff; -} - -h1 { - @include h1('h1'); -} - -h2 { - @include h2('h2'); -} - -h3 { - @include h3('h3'); -} - -a { - color: inherit; - text-decoration: none; - transition: all 0.2s ease; -} - -// Buttons -button { - cursor: pointer; - font-family: inherit; - font-size: inherit; - line-height: inherit; - border: none; - background: none; - padding: 0; -} - -// Forms -input, -textarea, -select { - font-family: inherit; - font-size: inherit; - line-height: inherit; - color: inherit; - border-radius: 0.25rem; - padding: 0.5rem 1rem; - transition: all 0.2s ease; - - &:focus { - outline: none; - border-color: $brand-primary; - } -} \ No newline at end of file diff --git a/assets/scss/typography.scss b/assets/scss/typography.scss deleted file mode 100644 index 32bd58e..0000000 --- a/assets/scss/typography.scss +++ /dev/null @@ -1,121 +0,0 @@ -@use 'utils' as *; - -// Font Face Declarations -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-Regular.woff2') format('woff2'), - url('/fonts/Inter-Regular.woff') format('woff'); - font-weight: 400; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-Medium.woff2') format('woff2'), - url('/fonts/Inter-Medium.woff') format('woff'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Inter'; - src: - url('/fonts/Inter-SemiBold.woff2') format('woff2'), - url('/fonts/Inter-SemiBold.woff') format('woff'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -// Font Variables -$font-family-base: - 'Inter', - -apple-system, - BlinkMacSystemFont, - 'Segoe UI', - Roboto, - sans-serif; - -// Font Weights -$font-weight-regular: 400; -$font-weight-medium: 500; -$font-weight-semibold: 600; - -// Custom type -@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) { - @if ($namespace) { - @if ($onlyVars) { - --#{$namespace}-font-size: #{$size}; - --#{$namespace}-font-weight: #{$weight}; - --#{$namespace}-line-height: #{$lineHeight}; - } @else { - font-size: var(--#{$namespace}-font-size, $size); - font-weight: var(--#{$namespace}-font-weight, $weight); - line-height: var(--#{$namespace}-line-height, $lineHeight); - } - } @else { - font-size: $size; - font-weight: $weight; - line-height: $lineHeight; - } -} - -/* Headline */ -@mixin h1($namespace: null, $onlyVars: false) { - @include font(32px, $font-weight-semibold, 100%, $namespace, $onlyVars); - @include mobile { - font-size: 24px; - } -} -@mixin h2($namespace: null, $onlyVars: false) { - @include font(24px, $font-weight-semibold, 100%, $namespace, $onlyVars); - @include mobile { - font-size: 20px; - } -} -@mixin h3($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-semibold, 140%, $namespace, $onlyVars); -} - -/* Text */ -// 16 medium-(medium/bold) -@mixin txt-m($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-regular, 100%, $namespace, $onlyVars); -} -@mixin txt-m-m($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-medium, 100%, $namespace, $onlyVars); -} -@mixin txt-m-b($namespace: null, $onlyVars: false) { - @include font(16px, $font-weight-semibold, 100%, $namespace, $onlyVars); -} - -// 14 regular-(medium/bold) -@mixin txt-r($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-regular, 20px, $namespace, $onlyVars); -} -@mixin txt-r-m($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-medium, 20px, $namespace, $onlyVars); -} -@mixin txt-r-b($namespace: null, $onlyVars: false) { - @include font(14px, $font-weight-semibold, 20px, $namespace, $onlyVars); -} - -// 12 text small-(medium/bold) -@mixin txt-s($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-regular, 18px, $namespace, $onlyVars); -} -@mixin txt-s-m($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-medium, 18px, $namespace, $onlyVars); -} -@mixin txt-s-b($namespace: null, $onlyVars: false) { - @include font(12px, $font-weight-semibold, 18px, $namespace, $onlyVars); -} - -// 10 text-tiny -@mixin txt-t($namespace: null, $onlyVars: false) { - @include font(10px, $font-weight-medium, 15px, $namespace, $onlyVars); -} diff --git a/assets/scss/utils.scss b/assets/scss/utils.scss deleted file mode 100644 index a940566..0000000 --- a/assets/scss/utils.scss +++ /dev/null @@ -1,153 +0,0 @@ -@use 'sass:color'; -@use 'sass:math'; -@use 'breakpoints' as *; - -// Mixins -@mixin responsive($breakpoint) { - @media (min-width: $breakpoint) { - @content; - } -} - -@mixin mobile { - @media (max-width: $breakpoint-md) { - @content; - } -} - -$indents: 0 2 4 5 6 8 10 12 15 16 18 20 24 25 28 30 32 36 40 48 50 52 60 64; - -@each $i in $indents { - .m#{$i} { - margin: #{$i}px; - } - - .mx#{$i} { - margin-left: #{$i}px; - margin-right: #{$i}px; - } - - .my#{$i} { - margin-top: #{$i}px; - margin-bottom: #{$i}px; - } - - .mt#{$i} { - margin-top: #{$i}px; - } - - .mb#{$i} { - margin-bottom: #{$i}px; - } - - .ml#{$i} { - margin-left: #{$i}px; - } - - .mr#{$i} { - margin-right: #{$i}px; - } - - .p#{$i} { - padding: #{$i}px; - } - - .px#{$i} { - padding-left: #{$i}px; - padding-right: #{$i}px; - } - - .py#{$i} { - padding-top: #{$i}px; - padding-bottom: #{$i}px; - } - - .pt#{$i} { - padding-top: #{$i}px; - } - - .pb#{$i} { - padding-bottom: #{$i}px; - } - - .pl#{$i} { - padding-left: #{$i}px; - } - - .pr#{$i} { - padding-right: #{$i}px; - } -} - -.mla { - margin-left: auto; -} - -.mra { - margin-left: auto; -} - -.mx-auto { - margin-left: auto; - margin-right: auto; -} - -@each $align in ('left', 'right', 'center') { - .text-align-#{$align} { - text-align: #{$align}; - } -} - -.w-25 { width: 25% !important; } -.w-50 { width: 50% !important; } -.w-75 { width: 75% !important; } -.w-100 { width: 100% !important; } - -.d-none { display: none !important; } -.d-inline { display: inline !important; } -.d-inline-block { display: inline-block !important; } -.d-block { display: block !important; } -.d-table { display: table !important; } -.d-table-row { display: table-row !important; } -.d-table-cell { display: table-cell !important; } -.d-flex { display: flex !important; } -.d-inline-flex { display: inline-flex !important; } - -.flex-row { flex-direction: row !important; } -.flex-column { flex-direction: column !important; } -.flex-row-reverse { flex-direction: row-reverse !important; } -.flex-column-reverse { flex-direction: column-reverse !important; } - -.flex-wrap { flex-wrap: wrap !important; } -.flex-nowrap { flex-wrap: nowrap !important; } -.flex-wrap-reverse { flex-wrap: wrap-reverse !important; } - -.justify-content-start { justify-content: flex-start !important; } -.justify-content-end { justify-content: flex-end !important; } -.justify-content-center { justify-content: center !important; } -.justify-content-between { justify-content: space-between !important; } -.justify-content-around { justify-content: space-around !important; } - -.align-items-start { align-items: flex-start !important; } -.align-items-end { align-items: flex-end !important; } -.align-items-center { align-items: center !important; } -.align-items-baseline { align-items: baseline !important; } -.align-items-stretch { align-items: stretch !important; } - -.align-content-start { align-content: flex-start !important; } -.align-content-end { align-content: flex-end !important; } -.align-content-center { align-content: center !important; } -.align-content-between { align-content: space-between !important; } -.align-content-around { align-content: space-around !important; } -.align-content-stretch { align-content: stretch !important; } - -.align-self-auto { align-self: auto !important; } -.align-self-start { align-self: flex-start !important; } -.align-self-end { align-self: flex-end !important; } -.align-self-center { align-self: center !important; } -.align-self-baseline { align-self: baseline !important; } -.align-self-stretch { align-self: stretch !important; } - -.text-align-center { text-align: center !important; } -.text-align-left { text-align: left !important; } -.text-align-right { text-align: right !important; } \ No newline at end of file diff --git a/layouts/default.vue b/layouts/default.vue index 293c54e..0d5e758 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -17,18 +17,14 @@