From 1bad453ddaa821149d447e0f0573ab8acb7ed3e5 Mon Sep 17 00:00:00 2001 From: Furkan MT <49978011+furcan@users.noreply.github.com> Date: Mon, 19 Jul 2021 23:53:51 +0300 Subject: [PATCH] Global styles. Layout changes. Header beta. --- .eslintrc.json | 1 + .stylelintrc.json | 1 - next.config.js | 6 ++ src/_database/database.i.ts | 2 +- src/_database/settings/settings.md | 2 +- src/components/header/Header.module.scss | 16 ++++ src/components/header/Header.tsx | 19 +++++ src/components/layout/Layout.module.scss | 10 +++ src/components/layout/Layout.tsx | 23 +++--- src/components/layout/partials/NoScript.tsx | 39 +++++++++ src/components/logo/Logo.tsx | 19 +++++ src/components/meta/MetaTags.tsx | 4 + src/pages/_app.tsx | 2 + src/pages/about/about.module.scss | 4 +- src/pages/about/index.tsx | 25 ++---- src/pages/home/index.tsx | 2 +- src/styles/_variables.scss | 29 +++++++ src/styles/styles.global.scss | 90 +++++++++++++++++++++ tsconfig.json | 3 + 19 files changed, 263 insertions(+), 34 deletions(-) create mode 100644 src/components/header/Header.module.scss create mode 100644 src/components/header/Header.tsx create mode 100644 src/components/layout/Layout.module.scss create mode 100644 src/components/layout/partials/NoScript.tsx create mode 100644 src/components/logo/Logo.tsx create mode 100644 src/styles/_variables.scss create mode 100644 src/styles/styles.global.scss diff --git a/.eslintrc.json b/.eslintrc.json index 42476e0..49143ea 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -23,6 +23,7 @@ "react-hooks/exhaustive-deps": "warn", "react/prop-types": "off", "@next/next/no-img-element": "off", + "@next/next/no-page-custom-font": "off", "@typescript-eslint/explicit-module-boundary-types": "warn", "comma-dangle": [ "error", diff --git a/.stylelintrc.json b/.stylelintrc.json index e2a0674..163fca0 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -10,7 +10,6 @@ "indentation": 2, "string-quotes": "double", "unit-allowed-list": [ - "px", "rem", "%", "s", diff --git a/next.config.js b/next.config.js index bca74a7..86533bc 100644 --- a/next.config.js +++ b/next.config.js @@ -7,6 +7,7 @@ */ // Dependencies +const path = require('path'); const StylelintPlugin = require('stylelint-webpack-plugin'); const package = require('./package.json'); @@ -53,6 +54,11 @@ const nextConfig = { // dist directory distDir: '.build', + // sass + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, + // TODO: redirects: async () => { return [ diff --git a/src/_database/database.i.ts b/src/_database/database.i.ts index e20e008..9d3d1c5 100644 --- a/src/_database/database.i.ts +++ b/src/_database/database.i.ts @@ -10,7 +10,7 @@ interface IDatabaseSettings { metaOgImage: string; metaTwitterUser: string; metaTwitterDomain: string; - bodyNoScript: string; + bodyNoScriptMessage: string; } interface IDatabaseSocialMedia { diff --git a/src/_database/settings/settings.md b/src/_database/settings/settings.md index 5e8e8c3..bd2b81c 100644 --- a/src/_database/settings/settings.md +++ b/src/_database/settings/settings.md @@ -11,6 +11,6 @@ _dbSettings: metaOgImage: /webapp/notiflix-og.jpg metaTwitterUser: "@notiflixjs" metaTwitterDomain: notiflix.github.io - bodyNoScript: You have to enable JavaScript in your browser to use Notiflix. + bodyNoScriptMessage: You have to enable JavaScript in your browser to use Notiflix. --- diff --git a/src/components/header/Header.module.scss b/src/components/header/Header.module.scss new file mode 100644 index 0000000..7af5d0c --- /dev/null +++ b/src/components/header/Header.module.scss @@ -0,0 +1,16 @@ +.header { + width: 100%; + + &--home { + background: yellowgreen; + } + + &--about { + background: greenyellow; + } + + &__logo { + width: 11.25rem; + height: 3.75rem; + } +} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx new file mode 100644 index 0000000..56d6ef4 --- /dev/null +++ b/src/components/header/Header.tsx @@ -0,0 +1,19 @@ +import Logo from '@components/logo/Logo'; + +import styles from '@components/header/Header.module.scss'; + +interface IHeader { + classNamePrefix: string; +} + +function Header({ classNamePrefix }: IHeader): JSX.Element { + return ( +
+
+ +
+
+ ); +} + +export default Header; diff --git a/src/components/layout/Layout.module.scss b/src/components/layout/Layout.module.scss new file mode 100644 index 0000000..5c58930 --- /dev/null +++ b/src/components/layout/Layout.module.scss @@ -0,0 +1,10 @@ +@import "@styles/variables"; + +.layout { + width: 100%; + display: flex; + flex-wrap: wrap; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 0031c36..fbbcbdf 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -1,8 +1,12 @@ -import { attributes as _settings } from '@database/settings/settings.md'; import { IDatabaseMeta } from '@database/database.i'; -import Schema from '@components/meta/Schema'; import MetaTags from '@components/meta/MetaTags'; +import Header from '@components/header/Header'; +import Schema from '@components/meta/Schema'; + +import NoScript from '@components/layout/partials/NoScript'; + +import styles from '@components/layout/Layout.module.scss'; type TChildren = React.ReactNode | JSX.Element @@ -14,22 +18,19 @@ type TChildren = React.ReactNode interface ILayout { meta: IDatabaseMeta; + classNamePrefix: string; children?: TChildren; } -function Layout({ meta, children }: ILayout): JSX.Element { - const { _dbSettings } = _settings; - +function Layout({ meta, classNamePrefix, children }: ILayout): JSX.Element { return ( <> - {/* TODO: Header */} - -
+
+ {/* TODO: Footer */} diff --git a/src/components/layout/partials/NoScript.tsx b/src/components/layout/partials/NoScript.tsx new file mode 100644 index 0000000..c8fbe63 --- /dev/null +++ b/src/components/layout/partials/NoScript.tsx @@ -0,0 +1,39 @@ +import { attributes as _settings } from '@database/settings/settings.md'; + +function NoScript(): JSX.Element { + const { _dbSettings } = _settings; + + return ( + + ); +} + +export default NoScript; diff --git a/src/components/logo/Logo.tsx b/src/components/logo/Logo.tsx new file mode 100644 index 0000000..c03bb22 --- /dev/null +++ b/src/components/logo/Logo.tsx @@ -0,0 +1,19 @@ +interface ILogo { + width?: number; + height?: number; + colorNoti?: string; + colorFlix?: string; +} + +function Logo({ width, height, colorNoti, colorFlix }: ILogo): JSX.Element { + return ( + + + + + + + ); +} + +export default Logo; diff --git a/src/components/meta/MetaTags.tsx b/src/components/meta/MetaTags.tsx index e296d50..a298557 100644 --- a/src/components/meta/MetaTags.tsx +++ b/src/components/meta/MetaTags.tsx @@ -48,6 +48,10 @@ function MetaTags({ meta }: IMetaTags): JSX.Element { {/* TODO: SEO */} + + + + ); } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 6875297..a074b4d 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { AppProps } from 'next/app'; +import '@styles/styles.global.scss'; + function App({ Component, pageProps }: AppProps): React.ReactNode { return ; } diff --git a/src/pages/about/about.module.scss b/src/pages/about/about.module.scss index 7726338..e5d9cf2 100644 --- a/src/pages/about/about.module.scss +++ b/src/pages/about/about.module.scss @@ -1,6 +1,6 @@ .temp { width: 100%; - height: 200px; + height: 12.5rem; background: yellowgreen; display: flex; flex-wrap: wrap; @@ -9,7 +9,7 @@ justify-content: center; &__title { - font-size: 22px; + font-size: 1.375rem; color: gray; &.state--active { diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx index 9cd8d79..8e7a844 100644 --- a/src/pages/about/index.tsx +++ b/src/pages/about/index.tsx @@ -1,11 +1,12 @@ -import Head from 'next/head'; import Link from 'next/link'; import { withRouter } from 'next/router'; import { Marked } from '@ts-stack/markdown'; import { attributes as _about } from '@database/pages/about.md'; -import aboutStyles from '@pages/about/about.module.scss'; +import Layout from '@components/layout/Layout'; + +import styles from '@pages/about/about.module.scss'; // TODO: function About(): JSX.Element { @@ -45,20 +46,10 @@ function About(): JSX.Element { }; return ( - <> - - - - - - - ABOUT US - - - - -
-

ABOUT

+ + +
+

ABOUT

@@ -75,7 +66,7 @@ function About(): JSX.Element {

NATURE - + ); } diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 0379d33..a66f7b6 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -9,7 +9,7 @@ function Home(): JSX.Element { const { _dbMeta } = _home; return ( - +

HOME

diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss new file mode 100644 index 0000000..3fce69a --- /dev/null +++ b/src/styles/_variables.scss @@ -0,0 +1,29 @@ +// breakpoints +$breakpoint_min: 20rem; +$breakpoint_mobile: 33.75rem; +$breakpoint_tablet: 48rem; +$breakpoint_minibook: 64rem; +$breakpoint_laptop: 75rem; +$breakpoint_pc: 83.125rem; +$breakpoint_max: 120rem; + +// colors +$color_white: #fff; +$color_black: #000; +$color_light: #f8f8f8; +$color_dark: #1e1e1e; + +// transitions +$transition_delay_base: 0.25s; +$transition_base: all 0.25s ease-in-out; +$transition_transform: transform 0.25s linear; +$transition_opacity: opacity 0.25s ease-in-out; +$transition_visibility: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; +$transition_background: background 0.25s ease-in-out; +$transition_color: color 0.25s ease-in-out; + +// typography +$font_family_base: "Red Hat Display", sans-serif; +$font_size_base: 0.9rem; +$font_lineheight_base: 1.3; +$font_weight_base: 400; diff --git a/src/styles/styles.global.scss b/src/styles/styles.global.scss new file mode 100644 index 0000000..3e7e34c --- /dev/null +++ b/src/styles/styles.global.scss @@ -0,0 +1,90 @@ +@import "variables"; + +*, +*::before, +*::after { + box-sizing: border-box; + outline: none; +} + +body { + width: 100%; + max-width: $breakpoint_max; + overflow-x: hidden; + margin: 0 auto; + padding: 0; + color: $color_dark; + background: $color_white; + font-family: $font_family_base; + font-size: $font_size_base; + line-height: $font_lineheight_base; + font-weight: $font_weight_base; +} + +button, +a { + cursor: pointer; + color: inherit; + font-family: inherit; + font-size: inherit; + line-height: inherit; + outline: none; + text-decoration: none; + background: transparent; + padding: 0; + border: none; +} + +a[disabled], +button[disabled] { + pointer-events: none; +} + +img { + font-size: 0.5rem; + max-width: 100%; + height: auto; + vertical-align: middle; + image-rendering: -webkit-optimize-contrast; +} + +ul { + margin: 0; + padding: 0; + list-style: none; +} + +input, +select, +option { + font-family: inherit; +} + +h1, +h2, +h3, +h4, +h5, +h6, +p { + margin: 0; +} + +*::-webkit-scrollbar { + height: 0.25rem; + width: 0.25rem; +} + +*::-webkit-scrollbar-track { + background: rgba($color_black, 0.05); +} + +*::-webkit-scrollbar-thumb { + background: rgba($color_black, 0.2); + cursor: pointer; +} + +* { + scrollbar-color: rgba($color_black, 0.2) rgba($color_black, 0.05); + scrollbar-width: thin; +} diff --git a/tsconfig.json b/tsconfig.json index 141adac..97d97fe 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,6 +14,9 @@ "@pages/*": [ "pages/*" ], + "@styles/*": [ + "styles/*" + ], }, "target": "es5", "lib": [