Global styles. Layout changes. Header beta.

.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",

.stylelintrc.json

@@ -10,7 +10,6 @@
     "indentation": 2,
     "string-quotes": "double",
     "unit-allowed-list": [
-      "px",
       "rem",
       "%",
       "s",

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 [

src/_database/database.i.ts

@@ -10,7 +10,7 @@ interface IDatabaseSettings {
   metaOgImage: string;
   metaTwitterUser: string;
   metaTwitterDomain: string;
-  bodyNoScript: string;
+  bodyNoScriptMessage: string;
 }
 
 interface IDatabaseSocialMedia {

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.
 
 ---

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;
+  }
+}

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 (
+    <header className={`${styles.header} ${styles[`header--${classNamePrefix}`] || ''}`}>
+      <div className={styles.header__logo}>
+        <Logo />
+      </div>
+    </header>
+  );
+}
+
+export default Header;

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;
+}

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 (
     <>
       <MetaTags meta={meta} />
-      {/* TODO: Header */}
-      <noscript>
-        <p className="noscript">{_dbSettings.bodyNoScript}</p>
-      </noscript>
-      <section className={`section ${'todo'}`}>
+      <NoScript />
+      <Header classNamePrefix={classNamePrefix} />
+      <main className={`${styles.layout} ${styles[`layout--${classNamePrefix}`] || ''}`}>
         {children}
-      </section>
+      </main>
       {/* TODO: Footer */}
       <Schema />
     </>

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 (
+    <noscript className="noscript">
+      <style>
+        {`
+        .noscript__message {
+          box-sizing: border-box;
+          outline: none;
+          position: fixed;
+          z-index: 9999;
+          left: 0;
+          top: 0;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          margin: 0;
+          padding: 1.25rem;
+          font-family: sans-serif;
+          font-size: 1rem;
+          color: #f8f8f8;
+          background: #1e1e1e;
+        }
+      `}
+      </style>
+      <p className="noscript__message">{_dbSettings.bodyNoScriptMessage}</p>
+    </noscript>
+  );
+}
+
+export default NoScript;

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 (
+    <svg xmlns="http://www.w3.org/2000/svg" width={width || 180} height={height || 60} viewBox="0 0 180 60">
+      <g>
+        <path fill={colorNoti || '#32c682'} d="M69.64 36.61c0,-8.06 -6.53,-14.58 -14.58,-14.58 -8.06,0 -14.58,6.52 -14.58,14.58 0,8.05 6.52,14.58 14.58,14.58 8.05,0 14.58,-6.53 14.58,-14.58zm-31.63 0c0,-9.42 7.63,-17.05 17.05,-17.05 9.41,0 17.04,7.63 17.04,17.05 0,9.41 -7.63,17.04 -17.04,17.04 -9.42,0 -17.05,-7.63 -17.05,-17.04zm41.92 9.45l0 -23.25 -5.33 0c-0.3,0 -0.59,-0.13 -0.85,-0.39 -0.25,-0.26 -0.38,-0.55 -0.38,-0.85 0,-0.35 0.11,-0.64 0.35,-0.88 0.24,-0.23 0.53,-0.35 0.88,-0.35l5.33 0 0 -8.25c0,-0.35 0.12,-0.65 0.38,-0.91 0.26,-0.26 0.57,-0.39 0.91,-0.39 0.39,0 0.71,0.13 0.95,0.39 0.23,0.26 0.35,0.56 0.35,0.91l0 8.25 7.15 0c0.3,0 0.58,0.13 0.84,0.39 0.26,0.26 0.39,0.54 0.39,0.84 0,0.35 -0.12,0.64 -0.36,0.88 -0.24,0.24 -0.53,0.36 -0.87,0.36l-7.15 0 0 23.12c0,1.9 0.34,3.17 1.01,3.79 0.67,0.63 1.52,0.95 2.56,0.95 0.18,0 0.43,-0.05 0.75,-0.13 0.33,-0.09 0.6,-0.13 0.81,-0.13 0.31,0 0.57,0.11 0.78,0.35 0.22,0.24 0.33,0.51 0.33,0.81 0,0.39 -0.26,0.73 -0.78,1.01 -0.52,0.28 -1.13,0.42 -1.82,0.42 -1.08,0 -1.99,-0.07 -2.73,-0.22 -0.74,-0.16 -1.5,-0.74 -2.3,-1.76 -0.8,-1.02 -1.2,-2.67 -1.2,-4.96zm16.19 5.64l0 -30.84c0,-0.35 0.13,-0.65 0.39,-0.91 0.26,-0.26 0.57,-0.39 0.91,-0.39 0.39,0 0.71,0.13 0.94,0.39 0.24,0.26 0.36,0.56 0.36,0.91l0 30.84c0,0.35 -0.13,0.65 -0.39,0.91 -0.26,0.26 -0.56,0.39 -0.91,0.39 -0.39,0 -0.7,-0.13 -0.94,-0.39 -0.24,-0.26 -0.36,-0.56 -0.36,-0.91zm-75.22 -32.14c3.85,0 6.75,1.13 8.7,3.41 1.95,2.27 2.93,5.23 2.93,8.86l0 19.87c0,0.35 -0.13,0.65 -0.39,0.91 -0.26,0.26 -0.57,0.39 -0.91,0.39 -0.39,0 -0.71,-0.13 -0.94,-0.39 -0.24,-0.26 -0.36,-0.56 -0.36,-0.91l0 -19.61c0,-2.94 -0.77,-5.36 -2.31,-7.24 -1.54,-1.88 -3.86,-2.82 -6.98,-2.82 -0.87,0 -1.73,0 -2.6,0 -3.11,0 -5.44,0.94 -6.98,2.82 -1.54,1.88 -2.3,4.3 -2.3,7.24l0 19.61c0,0.35 -0.12,0.65 -0.36,0.91 -0.24,0.26 -0.55,0.39 -0.94,0.39 -0.35,0 -0.65,-0.13 -0.91,-0.39 -0.26,-0.26 -0.39,-0.56 -0.39,-0.91l0 -19.87c0,-3.63 0.97,-6.59 2.92,-8.86 1.95,-2.28 4.85,-3.41 8.7,-3.41 1.05,0 2.08,0 3.12,0zm-1.56 28.34c1.41,0 2.55,1.15 2.55,2.55 0,1.41 -1.14,2.55 -2.55,2.55 -1.41,0 -2.55,-1.14 -2.55,-2.55 0,-1.4 1.14,-2.55 2.55,-2.55zm75.84 -35.23c0,-1.22 0.99,-2.21 2.21,-2.21 1.22,0 2.21,0.99 2.21,2.21 0,1.23 -0.99,2.22 -2.21,2.22 -1.22,0 -2.21,-0.99 -2.21,-2.22z"></path>
+        <path fill={colorFlix || '#2b3b42'} d="M138.19 12.67c0,-1.22 0.99,-2.21 2.21,-2.21 1.22,0 2.21,0.99 2.21,2.21 0,1.23 -0.99,2.22 -2.21,2.22 -1.22,0 -2.21,-0.99 -2.21,-2.22zm-27.82 39.03l0 -28.25 -5.19 0c-0.31,0 -0.59,-0.13 -0.85,-0.39 -0.26,-0.25 -0.39,-0.54 -0.39,-0.84 0,-0.39 0.12,-0.69 0.36,-0.91 0.24,-0.22 0.53,-0.32 0.88,-0.32l5.19 0 0 -7.93c0,-2.55 0.69,-4.49 2.05,-5.81 1.36,-1.32 3.11,-1.98 5.23,-1.98 1.08,0 2.11,0.14 3.08,0.42 0.98,0.28 1.46,0.75 1.46,1.4 0,0.35 -0.13,0.65 -0.39,0.91 -0.26,0.26 -0.54,0.39 -0.84,0.39 -0.35,0 -0.8,-0.11 -1.36,-0.33 -1,-0.3 -1.74,-0.45 -2.21,-0.45 -1.34,0 -2.42,0.45 -3.22,1.36 -0.8,0.91 -1.2,2.28 -1.2,4.09l0 7.93 7.66 0c0.35,0 0.64,0.12 0.88,0.35 0.24,0.24 0.36,0.53 0.36,0.88 0,0.35 -0.12,0.64 -0.36,0.88 -0.24,0.24 -0.53,0.35 -0.88,0.35l-7.66 0 0 28.25c0,0.35 -0.13,0.65 -0.39,0.91 -0.26,0.26 -0.56,0.39 -0.91,0.39 -0.39,0 -0.7,-0.13 -0.94,-0.39 -0.24,-0.26 -0.36,-0.56 -0.36,-0.91zm17.05 0l0 -45.46c0,-0.34 0.13,-0.65 0.39,-0.9 0.26,-0.26 0.56,-0.39 0.9,-0.39 0.39,0 0.71,0.13 0.95,0.39 0.23,0.25 0.35,0.56 0.35,0.9l0 45.46c0,0.35 -0.13,0.65 -0.39,0.91 -0.25,0.26 -0.56,0.39 -0.91,0.39 -0.38,0 -0.7,-0.13 -0.94,-0.39 -0.23,-0.26 -0.35,-0.56 -0.35,-0.91zm11.71 0l0 -30.84c0,-0.35 0.13,-0.65 0.39,-0.91 0.26,-0.26 0.57,-0.39 0.91,-0.39 0.39,0 0.71,0.13 0.94,0.39 0.24,0.26 0.36,0.56 0.36,0.91l0 30.84c0,0.35 -0.13,0.65 -0.39,0.91 -0.26,0.26 -0.56,0.39 -0.91,0.39 -0.39,0 -0.7,-0.13 -0.94,-0.39 -0.24,-0.26 -0.36,-0.56 -0.36,-0.91zm8.99 -0.45l11.17 -14.48 -11.3 -14.74c-0.17,-0.22 -0.26,-0.48 -0.26,-0.78 0,-0.39 0.14,-0.72 0.43,-0.98 0.28,-0.26 0.59,-0.39 0.94,-0.39 0.43,0 0.78,0.2 1.04,0.59l10.78 14.09 10.58 -14.09c0.35,-0.39 0.72,-0.59 1.11,-0.59 0.39,0 0.69,0.11 0.91,0.33 0.21,0.21 0.32,0.47 0.32,0.78 0,0.26 -0.11,0.54 -0.32,0.84l-11.04 14.81 11.1 14.54c0.17,0.22 0.26,0.48 0.26,0.78 0,0.35 -0.12,0.65 -0.36,0.91 -0.23,0.26 -0.53,0.39 -0.87,0.39 -0.39,0 -0.76,-0.19 -1.11,-0.58l-10.65 -13.9 -10.71 13.96c-0.26,0.35 -0.61,0.52 -1.04,0.52 -0.35,0 -0.64,-0.1 -0.88,-0.32 -0.24,-0.22 -0.36,-0.52 -0.36,-0.91 0,-0.3 0.09,-0.56 0.26,-0.78z"></path>
+      </g>
+    </svg>
+  );
+}
+
+export default Logo;

src/components/meta/MetaTags.tsx

@@ -48,6 +48,10 @@ function MetaTags({ meta }: IMetaTags): JSX.Element {
       <meta name="copyright" content={`© ${yearInit}-${yearCurrent} ${appName}. ${_dbSettings.metaCopyright}`} />
 
       {/* TODO: SEO */}
+
+      <link rel="preconnect" href="https://fonts.googleapis.com" />
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+      <link href="https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@400;500;700;900&display=swap" rel="stylesheet" />
     </Head>
   );
 }

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 <Component {...pageProps} />;
 }

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 {

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 (
-    <>
-      <Head>
-        <meta name="content-language" content="en" />
-        <meta name="language" content="English" />
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
-        <meta name="robots" content="noindex, nofollow, noodp, noydir" />
-        <meta name="googlebot" content="noindex, nofollow, noodp, noydir" />
-        <title>ABOUT US</title>
-        <meta name="description" content="ABOUT Description" />
-        <link rel="shortcut icon" href={`${process.env.publicUrl}${'/favicon.png'}`} />
-      </Head>
-
-      <div className={aboutStyles.temp}>
-        <h1 className={`${aboutStyles.temp__title} ${aboutStyles['state--active']}`}>ABOUT</h1>
+    <Layout meta={_dbMeta} classNamePrefix="about">
+
+      <div className={styles.temp}>
+        <h1 className={`${styles.temp__title} ${styles['state--active']}`}>ABOUT</h1>
       </div>
 
       <Link href={'/'} as={`${process.env.publicUrl}${'/'}`} passHref>
@@ -75,7 +66,7 @@ function About(): JSX.Element {
       <br />
       <br />
       <img src={process.env.publicUrl + '/content/images/nature.jpeg'} alt="NATURE" />
-    </>
+    </Layout>
   );
 }
 

src/pages/home/index.tsx

@@ -9,7 +9,7 @@ function Home(): JSX.Element {
   const { _dbMeta } = _home;
 
   return (
-    <Layout meta={_dbMeta}>
+    <Layout meta={_dbMeta} classNamePrefix="home">
 
       <h1>HOME</h1>
 

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;