Dev #1
@@ -1,7 +1,17 @@
|
|||||||
import type { NextConfig } from "next";
|
import type { NextConfig } from 'next';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
const nextConfig: NextConfig = {
|
||||||
/* config options here */
|
/* 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;
|
export default nextConfig;
|
||||||
|
|||||||
@@ -1,15 +1,13 @@
|
|||||||
import type { Metadata } from 'next';
|
import type { Metadata } from 'next';
|
||||||
import { Geist, Geist_Mono } from 'next/font/google';
|
import { ReactNode } from 'react';
|
||||||
import './globals.css';
|
import { Roboto } from 'next/font/google';
|
||||||
|
import '@core/styles/globals.scss';
|
||||||
|
import '@core/styles/reset.scss';
|
||||||
|
|
||||||
const geistSans = Geist({
|
const roboto = Roboto({
|
||||||
variable: '--font-geist-sans',
|
subsets: ['cyrillic'],
|
||||||
subsets: ['latin'],
|
weight: ['300', '400', '500', '600', '700'],
|
||||||
});
|
variable: '--font-roboto',
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
|
||||||
variable: '--font-geist-mono',
|
|
||||||
subsets: ['latin'],
|
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
@@ -20,14 +18,10 @@ export const metadata: Metadata = {
|
|||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: Readonly<{ children: ReactNode }>) {
|
||||||
children: React.ReactNode;
|
|
||||||
}>) {
|
|
||||||
return (
|
return (
|
||||||
<html lang='en'>
|
<html lang='en'>
|
||||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
<body className={`${roboto.variable}`}>{children}</body>
|
||||||
{children}
|
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
6
src/core/styles/functions.scss
Normal file
6
src/core/styles/functions.scss
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
@use 'sass:math';
|
||||||
|
|
||||||
|
@function rem($size) {
|
||||||
|
$remSize: math.div($size, $base-font-size);
|
||||||
|
@return $remSize * 1rem;
|
||||||
|
}
|
||||||
@@ -1,13 +1,6 @@
|
|||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
--background: #ffffff;
|
||||||
--foreground: #171717;
|
--foreground: #333333;
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background: #0a0a0a;
|
|
||||||
--foreground: #ededed;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html,
|
html,
|
||||||
@@ -34,9 +27,3 @@ a {
|
|||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
html {
|
|
||||||
color-scheme: dark;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
3
src/core/styles/index.scss
Normal file
3
src/core/styles/index.scss
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
@import './variables.scss';
|
||||||
|
@import './mixins.scss';
|
||||||
|
@import './functions.scss';
|
||||||
23
src/core/styles/mixins.scss
Normal file
23
src/core/styles/mixins.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
106
src/core/styles/reset.scss
Normal file
106
src/core/styles/reset.scss
Normal file
@@ -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;
|
||||||
|
}
|
||||||
30
src/core/styles/variables.scss
Normal file
30
src/core/styles/variables.scss
Normal file
@@ -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;
|
||||||
Reference in New Issue
Block a user