diff --git a/next.config.ts b/next.config.ts index e9ffa30..1f7ea33 100644 --- a/next.config.ts +++ b/next.config.ts @@ -1,7 +1,17 @@ -import type { NextConfig } from "next"; +import type { NextConfig } from 'next'; +import path from 'path'; const nextConfig: NextConfig = { /* config options here */ + output: 'standalone', + sassOptions: { + includePaths: [path.resolve('./src/core/styles')], + prependData: `@import "index.scss";`, + }, + compiler: { + removeConsole: + process.env.NODE_ENV === 'production' ? { exclude: ['error'] } : false, + }, }; export default nextConfig; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index a915cba..ab5d140 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,15 +1,13 @@ import type { Metadata } from 'next'; -import { Geist, Geist_Mono } from 'next/font/google'; -import './globals.css'; +import { ReactNode } from 'react'; +import { Roboto } from 'next/font/google'; +import '@core/styles/globals.scss'; +import '@core/styles/reset.scss'; -const geistSans = Geist({ - variable: '--font-geist-sans', - subsets: ['latin'], -}); - -const geistMono = Geist_Mono({ - variable: '--font-geist-mono', - subsets: ['latin'], +const roboto = Roboto({ + subsets: ['cyrillic'], + weight: ['300', '400', '500', '600', '700'], + variable: '--font-roboto', }); export const metadata: Metadata = { @@ -20,14 +18,10 @@ export const metadata: Metadata = { export default function RootLayout({ children, -}: Readonly<{ - children: React.ReactNode; -}>) { +}: Readonly<{ children: ReactNode }>) { return ( - - {children} - + {children} ); } diff --git a/src/core/.gitkeep b/src/core/constants/.gitkeep similarity index 100% rename from src/core/.gitkeep rename to src/core/constants/.gitkeep diff --git a/src/core/styles/functions.scss b/src/core/styles/functions.scss new file mode 100644 index 0000000..26695ad --- /dev/null +++ b/src/core/styles/functions.scss @@ -0,0 +1,6 @@ +@use 'sass:math'; + +@function rem($size) { + $remSize: math.div($size, $base-font-size); + @return $remSize * 1rem; +} \ No newline at end of file diff --git a/src/app/globals.css b/src/core/styles/globals.scss similarity index 65% rename from src/app/globals.css rename to src/core/styles/globals.scss index e3734be..a252305 100644 --- a/src/app/globals.css +++ b/src/core/styles/globals.scss @@ -1,13 +1,6 @@ :root { --background: #ffffff; - --foreground: #171717; -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + --foreground: #333333; } html, @@ -34,9 +27,3 @@ a { color: inherit; text-decoration: none; } - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} diff --git a/src/core/styles/index.scss b/src/core/styles/index.scss new file mode 100644 index 0000000..2b78af2 --- /dev/null +++ b/src/core/styles/index.scss @@ -0,0 +1,3 @@ +@import './variables.scss'; +@import './mixins.scss'; +@import './functions.scss'; \ No newline at end of file diff --git a/src/core/styles/mixins.scss b/src/core/styles/mixins.scss new file mode 100644 index 0000000..ebe01bb --- /dev/null +++ b/src/core/styles/mixins.scss @@ -0,0 +1,23 @@ +@mixin onlymobile { + @media (min-width: 0px) and (max-width: calc($tablet - 1px)) { + @content; + } +} + +@mixin iftablet { + @media (min-width: $tablet) { + @content; + } +} + +@mixin iflaptop { + @media (min-width: $laptop) { + @content; + } +} + +@mixin ifdesktop { + @media (min-width: $desktop) { + @content; + } +} diff --git a/src/core/styles/reset.scss b/src/core/styles/reset.scss new file mode 100644 index 0000000..0fa9db3 --- /dev/null +++ b/src/core/styles/reset.scss @@ -0,0 +1,106 @@ +/* Reset and base styles */ +* { + padding: 0; + margin: 0; + border: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // stop highlights element blue when tapping +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Links */ + +a, +a:link, +a:visited { + text-decoration: none; + color: unset; +} + +a:hover { + text-decoration: none; +} + +/* Components */ + +aside, +nav, +footer, +header, +section, +main { + display: block; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + font-size: inherit; + font-weight: inherit; + margin: 0; + padding: 0; + //margin-block-start: 0; + //margin-block-end: 0; +} + +ul[role='list'], ol[role='list'] { + list-style: none; +} + +ul, +ul li { + list-style: none; +} + +/* Form */ + +input, +textarea, +button, +select { + font-family: inherit; + font-size: inherit; + color: inherit; + background-color: transparent; +} + +input::-ms-clear { + display: none; +} + +button, +input[type='submit'] { + display: inline-block; + box-shadow: none; + background-color: transparent; + background: none; +} + +input:focus, +input:active, +button:focus, +button:active { + outline: none; +} + +button::-moz-focus-inner { + padding: 0; + border: 0; +} + +legend { + display: block; +} + +img, picture, svg, video, canvas { + background-repeat: no-repeat; + background-size: cover; +} diff --git a/src/core/styles/variables.scss b/src/core/styles/variables.scss new file mode 100644 index 0000000..a08b916 --- /dev/null +++ b/src/core/styles/variables.scss @@ -0,0 +1,30 @@ +//frontend breakpoint +$mobile: 360px; +$tablet: 768px; +$laptop: 1024px; +$desktop: 1440px; + +//fonts +$font-open-sans: var(--font-roboto), sans-serif; + +$base-font-size: 16px; + +$font-light: 300; +$font-regular: 400; +$font-medium: 500; +$font-semi-bold: 600; +$font-bold: 700; + +// colors +$color-white: #FFFFFF; +$color-black: #000000; +$color-orange: #E96526; +$color-orange-hover: #ea4b05; +$color-lightgray: #E4E1E1; +$color-darkgray: #999999; +$color-text: #333333; +$color-text-light: #222222; +$color-mark: #E96526; +$color-error: #ff0000; +$color-error-light: #ff9191; +$color-gray-border: #555555; \ No newline at end of file