From 4cc46f177d77f311ebe9cc1c72583c7e2d1b12f4 Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Sat, 20 Mar 2021 21:53:16 -0300 Subject: [PATCH 1/7] added Sass dependecies --- next.config.js | 4 ++++ package.json | 1 + yarn.lock | 37 ++++++++++++++++++++++--------------- 3 files changed, 27 insertions(+), 15 deletions(-) diff --git a/next.config.js b/next.config.js index 329b8f6..7ad4c19 100644 --- a/next.config.js +++ b/next.config.js @@ -1,8 +1,12 @@ // eslint-disable-next-line @typescript-eslint/no-var-requires const withPWA = require('next-pwa') +const path = require('path') module.exports = withPWA({ pwa: { dest: 'public' + }, + sassOptions: { + includePaths: [path.join(__dirname, 'styles')] } }) diff --git a/package.json b/package.json index 58703f9..ceb81b7 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "17.0.1", "react-dom": "17.0.1", "react-highlight": "^0.13.0", + "sass": "^1.32.8", "styled-components": "^5.2.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 552f990..dccfa14 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2850,6 +2850,21 @@ chokidar@3.4.3: optionalDependencies: fsevents "~2.1.2" +"chokidar@>=2.0.0 <4.0.0", chokidar@^3.4.1: + version "3.5.1" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" + integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== + dependencies: + anymatch "~3.1.1" + braces "~3.0.2" + glob-parent "~5.1.0" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.5.0" + optionalDependencies: + fsevents "~2.3.1" + chokidar@^2.1.8: version "2.1.8" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" @@ -2869,21 +2884,6 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.4.1: - version "3.5.1" - resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" - integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== - dependencies: - anymatch "~3.1.1" - braces "~3.0.2" - glob-parent "~5.1.0" - is-binary-path "~2.1.0" - is-glob "~4.0.1" - normalize-path "~3.0.0" - readdirp "~3.5.0" - optionalDependencies: - fsevents "~2.3.1" - chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -7674,6 +7674,13 @@ sass-loader@10.0.5: schema-utils "^3.0.0" semver "^7.3.2" +sass@^1.32.8: + version "1.32.8" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.32.8.tgz#f16a9abd8dc530add8834e506878a2808c037bdc" + integrity sha512-Sl6mIeGpzjIUZqvKnKETfMf0iDAswD9TNlv13A7aAF3XZlRPMq4VvJWBC2N2DXbp94MQVdNSFG6LfF/iOXrPHQ== + dependencies: + chokidar ">=2.0.0 <4.0.0" + saxes@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/saxes/-/saxes-5.0.1.tgz#eebab953fa3b7608dbe94e5dadb15c888fa6696d" From 70bda5ed82bf3d024ebd6c0d281f351eee91f34f Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Sat, 20 Mar 2021 21:54:23 -0300 Subject: [PATCH 2/7] added base Sass styling --- styles/base/_colors.scss | 4 ++ styles/base/_index.scss | 3 ++ styles/base/_mixins.scss | 44 ++++++++++++++++++++ styles/base/_reset.scss | 77 +++++++++++++++++++++++++++++++++++ styles/components/_index.scss | 2 + styles/main.scss | 1 + 6 files changed, 131 insertions(+) create mode 100644 styles/base/_colors.scss create mode 100644 styles/base/_index.scss create mode 100644 styles/base/_mixins.scss create mode 100644 styles/base/_reset.scss create mode 100644 styles/components/_index.scss create mode 100644 styles/main.scss diff --git a/styles/base/_colors.scss b/styles/base/_colors.scss new file mode 100644 index 0000000..e5c7d24 --- /dev/null +++ b/styles/base/_colors.scss @@ -0,0 +1,4 @@ +$black: #1a1a1a; +$white: #ffffff; +$lilac: #543DC9; +$blue: #4E7CFC; \ No newline at end of file diff --git a/styles/base/_index.scss b/styles/base/_index.scss new file mode 100644 index 0000000..41a019f --- /dev/null +++ b/styles/base/_index.scss @@ -0,0 +1,3 @@ +@forward './colors.scss'; +@forward './mixins.scss'; +@forward './reset.scss'; diff --git a/styles/base/_mixins.scss b/styles/base/_mixins.scss new file mode 100644 index 0000000..470b73f --- /dev/null +++ b/styles/base/_mixins.scss @@ -0,0 +1,44 @@ +@use './colors' as *; + +@mixin sidebar-template($direction) { + content: ''; + position: absolute; + left: 0; + transition: transform 0.2s ease-in; + + // Se for usado como @include sidebar-template(top) + @if $direction == top { + width: 16px; + height: 100%; + bottom: -16px; + background-image: linear-gradient( + to top, + $lilac 50%, + $blue + ); + + transform-origin: bottom; + transform: scaleY(.2); + + // Se for usado como @include sidebar-template(bottom) + } @else if $direction == bottom { + width: 50%; + height: 16px; + bottom: -16px; + background-image: linear-gradient( + 90deg, + #543DC9 50%, + #4E7CFC + ); + + transform-origin: left; + transform: scaleX(.15); + } +} + +@mixin touch-support($width: 320px) { + // Se for maior que largura $width e tiver suporte a hover + @media (min-width: $width) and (hover: hover) { + @content; + } +} \ No newline at end of file diff --git a/styles/base/_reset.scss b/styles/base/_reset.scss new file mode 100644 index 0000000..f423582 --- /dev/null +++ b/styles/base/_reset.scss @@ -0,0 +1,77 @@ +// From Picalli modern CSS reset +// https://piccalil.li/blog/a-modern-css-reset + +/* Box sizing rules */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Remove default margin */ +body, +h1, +h2, +h3, +h4, +p, +figure, +blockquote, +dl, +dd { + margin: 0; +} + +/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* Set core root defaults */ +html:focus-within { + scroll-behavior: smooth; +} + +/* Set core body defaults */ +body { + min-height: 100vh; + text-rendering: optimizeSpeed; + line-height: 1.5; +} + +/* 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, transitions and smooth scroll for people that prefer not to see them */ +@media (prefers-reduced-motion: reduce) { + html:focus-within { + scroll-behavior: auto; + } + + *, + *::before, + *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/styles/components/_index.scss b/styles/components/_index.scss new file mode 100644 index 0000000..732a7ee --- /dev/null +++ b/styles/components/_index.scss @@ -0,0 +1,2 @@ +@forward './PostTemplate'; +@forward './PostContainer'; \ No newline at end of file diff --git a/styles/main.scss b/styles/main.scss new file mode 100644 index 0000000..0556091 --- /dev/null +++ b/styles/main.scss @@ -0,0 +1 @@ +@use './components/' as *; \ No newline at end of file From 495f2611abbfe367cf1339d10815b47fc7cf1814 Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Sat, 20 Mar 2021 21:55:09 -0300 Subject: [PATCH 3/7] added post and post container components and styling --- components/PostContainer/index.jsx | 21 ++++++++++++ components/PostTemplate/index.jsx | 19 +++++++++++ pages/_app.js | 1 + pages/index.js | 21 ++---------- public/postList.js | 15 ++++++++ public/sw.js.map | 2 +- styles/components/_PostContainer.scss | 8 +++++ styles/components/_PostTemplate.scss | 49 +++++++++++++++++++++++++++ 8 files changed, 116 insertions(+), 20 deletions(-) create mode 100644 components/PostContainer/index.jsx create mode 100644 components/PostTemplate/index.jsx create mode 100644 public/postList.js create mode 100644 styles/components/_PostContainer.scss create mode 100644 styles/components/_PostTemplate.scss diff --git a/components/PostContainer/index.jsx b/components/PostContainer/index.jsx new file mode 100644 index 0000000..08c99ab --- /dev/null +++ b/components/PostContainer/index.jsx @@ -0,0 +1,21 @@ +import React from 'react' +import postList from '../../public/postList' +import PostTemplate from '../PostTemplate' + +function PostContainer() { + return ( +
    + {postList && + postList.map((post, ind) => ( + + ))} +
+ ) +} + +export default PostContainer diff --git a/components/PostTemplate/index.jsx b/components/PostTemplate/index.jsx new file mode 100644 index 0000000..8639577 --- /dev/null +++ b/components/PostTemplate/index.jsx @@ -0,0 +1,19 @@ +import Link from 'next/link' +import React from 'react' + +function PostTemplate(props) { + return ( + +
  • +

    + + {props.title} + +

    +

    {props.description}

    +
    • + + ) +} + +export default PostTemplate diff --git a/pages/_app.js b/pages/_app.js index 1e1cec9..4e0281f 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -1,4 +1,5 @@ import '../styles/globals.css' +import '../styles/main.scss' function MyApp({ Component, pageProps }) { return diff --git a/pages/index.js b/pages/index.js index f95b2ab..28ab217 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,7 +1,7 @@ import Head from 'next/head' import styles from '../styles/Home.module.css' -import Link from 'next/link' import Image from 'next/image' +import PostContainer from '../components/PostContainer' export default function Home() { return ( @@ -27,24 +27,7 @@ export default function Home() { Artigos em inglês traduzidos para pt-BR.

    -
    - - - 17 dicas de otimização de Javascript para conhecer em 2021 - - - - - Lazy-loading nativo de imagens (sem Javascript) - - -
    +
    Tecla SAP - 2021
    diff --git a/public/postList.js b/public/postList.js new file mode 100644 index 0000000..67189c0 --- /dev/null +++ b/public/postList.js @@ -0,0 +1,15 @@ +const postList = [ + { + link:"/posts/17-dicas-otimizacao-javascript", + title:"17 dicas de otimização de Javascript para conhecer em 2021", + description:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus impedit vero eveniet adipisci dicta alias." + }, + { + link:"/posts/lazy-loading-nativo-de-imagens-sem-javascript", + title:"Lazy-loading nativo de imagens sem Javascript", + description:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus impedit vero eveniet adipisci dicta alias." + } + +] + +export default postList \ No newline at end of file diff --git a/public/sw.js.map b/public/sw.js.map index 6396669..9b50969 100644 --- a/public/sw.js.map +++ b/public/sw.js.map @@ -1 +1 @@ -{"version":3,"file":"sw.js","sources":["../../../../private/var/folders/1z/01j8x05d1w76z8d6rxdlrvpc0000gn/T/c4157e06c49d23f57cd3848be714340d/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/diego.griep/Projects/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG2I;EAC3I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file +{"version":3,"file":"sw.js","sources":["../../../../../tmp/3cc71c213fd971de3d83cecb25ec32e9/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file diff --git a/styles/components/_PostContainer.scss b/styles/components/_PostContainer.scss new file mode 100644 index 0000000..5fcb1ad --- /dev/null +++ b/styles/components/_PostContainer.scss @@ -0,0 +1,8 @@ +@use '../base/' as *; + +.posts { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + gap: 30px; + place-items: start center; +} \ No newline at end of file diff --git a/styles/components/_PostTemplate.scss b/styles/components/_PostTemplate.scss new file mode 100644 index 0000000..ccad6ba --- /dev/null +++ b/styles/components/_PostTemplate.scss @@ -0,0 +1,49 @@ +@use '../base' as *; + +.card { + display: grid; + gap: 2ch; + width: clamp(310px, 90%, 600px); + padding: 0 0 1ch 3ch; + + position: relative; + + color: $black; + font-family: 'Inter', sans-serif; + line-height: 1.4; + + cursor: pointer; + + @media (max-width: 420px) { + padding: 0 0 1ch 1ch; + } + + &__link { + transition: color 0.3s ease-in; + &:hover { + color: $lilac; + } + } + + &:hover { + /* Ao fazer o hover sobre o elemento as bordas irão reagir + mas só se não houver configuração de reduced motion*/ + @media (prefers-reduced-motion: no-preference) { + &::before { + transform: scaleY(1); + } + &::after { + transform: scaleX(1); + } + } + } + /* Estilos da borda não aparecerão em dispositivos de toque*/ + @include touch-support() { + &::after { + @include sidebar-template(bottom); + } + &::before { + @include sidebar-template(top); + } + } +} From 2372bd1adc2da9df4ae52d0466bf47df9e0b91cf Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Mon, 22 Mar 2021 14:17:29 -0300 Subject: [PATCH 4/7] updated caniuse local dependencies --- yarn.lock | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/yarn.lock b/yarn.lock index dccfa14..94f4137 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2775,15 +2775,10 @@ camelize@^1.0.0: resolved "https://registry.yarnpkg.com/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= -caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154: - version "1.0.30001190" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001190.tgz#acc6d4a53c68be16cfc314d55c9cab637e558cba" - integrity sha512-62KVw474IK8E+bACBYhRS0/L6o/1oeAVkpF2WetjV58S5vkzNh0/Rz3lD8D4YCbOTqi0/aD4X3LtoP7V5xnuAg== - -caniuse-lite@^1.0.30001181: - version "1.0.30001191" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001191.tgz#bacb432b6701f690c8c5f7c680166b9a9f0843d9" - integrity sha512-xJJqzyd+7GCJXkcoBiQ1GuxEiOBCLQ0aVW9HMekifZsAVGdj5eJ4mFB9fEhSHipq9IOk/QXFJUiIr9lZT+EsGw== +caniuse-lite@^1.0.30001093, caniuse-lite@^1.0.30001113, caniuse-lite@^1.0.30001154, caniuse-lite@^1.0.30001181: + version "1.0.30001203" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001203.tgz" + integrity sha512-/I9tvnzU/PHMH7wBPrfDMSuecDeUKerjCPX7D0xBbaJZPxoT9m+yYxt0zCTkcijCkjTdim3H56Zm0i5Adxch4w== capture-exit@^2.0.0: version "2.0.0" From 63146f98766c68e415e68502788da9c3a30512c6 Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Mon, 22 Mar 2021 14:19:04 -0300 Subject: [PATCH 5/7] componentized landing page and added to the index --- components/LandingLayout/index.jsx | 7 +++++ components/MainFooter/index.jsx | 14 +++++++++ components/MainHeader/index.jsx | 19 ++++++++++++ components/MainLogo/index.jsx | 50 ++++++++++++++++++++++++++++++ components/PostTemplate/index.jsx | 8 +++-- pages/index.js | 39 +++++++---------------- public/sw.js.map | 2 +- 7 files changed, 109 insertions(+), 30 deletions(-) create mode 100644 components/LandingLayout/index.jsx create mode 100644 components/MainFooter/index.jsx create mode 100644 components/MainHeader/index.jsx create mode 100644 components/MainLogo/index.jsx diff --git a/components/LandingLayout/index.jsx b/components/LandingLayout/index.jsx new file mode 100644 index 0000000..8192372 --- /dev/null +++ b/components/LandingLayout/index.jsx @@ -0,0 +1,7 @@ +import React from 'react' + +function LandingLayout(props) { + return
    {props.children}
    +} + +export default LandingLayout diff --git a/components/MainFooter/index.jsx b/components/MainFooter/index.jsx new file mode 100644 index 0000000..79cab94 --- /dev/null +++ b/components/MainFooter/index.jsx @@ -0,0 +1,14 @@ +import React from 'react' + +function MainFooter() { + const getYears = () => { + const creationYear = '2021' + const actualYear = new Date().getFullYear() + return actualYear > creationYear + ? `${creationYear} - ${actualYear}` + : `${creationYear}` + } + return
    Tecla SAP - {getYears()}
    +} + +export default MainFooter diff --git a/components/MainHeader/index.jsx b/components/MainHeader/index.jsx new file mode 100644 index 0000000..ecfb277 --- /dev/null +++ b/components/MainHeader/index.jsx @@ -0,0 +1,19 @@ +import Image from 'next/image' +import React from 'react' +import MainLogo from '../MainLogo' + +function MainHeader() { + return ( +
    +
    + +

    Tecla SAP

    +

    + Artigos em inglês traduzidos para pt-BR. +

    +
    +
    + ) +} + +export default MainHeader diff --git a/components/MainLogo/index.jsx b/components/MainLogo/index.jsx new file mode 100644 index 0000000..bc6f55b --- /dev/null +++ b/components/MainLogo/index.jsx @@ -0,0 +1,50 @@ +import React from 'react' + +function MainLogo() { + // return

    Tecla Sap

    + return ( + + + + + + TECLA SAP + + + + + + + ) +} + +export default MainLogo diff --git a/components/PostTemplate/index.jsx b/components/PostTemplate/index.jsx index 8639577..9fd67a7 100644 --- a/components/PostTemplate/index.jsx +++ b/components/PostTemplate/index.jsx @@ -6,11 +6,15 @@ function PostTemplate(props) {

  • - + {props.title}

    -

    {props.description}

    +

    {props.description}

    • ) diff --git a/pages/index.js b/pages/index.js index 28ab217..1bc1c22 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,36 +1,21 @@ import Head from 'next/head' -import styles from '../styles/Home.module.css' -import Image from 'next/image' import PostContainer from '../components/PostContainer' +import MainFooter from '../components/MainFooter/MainFooter' +import LandingLayout from '../components/LandingLayout' +import MainHeader from '../components/MainHeader' export default function Home() { return ( <> -
    - - Tecla SAP - - -
    -
    -
    - Logotipo do projeto -

    Tecla SAP

    - -

    - Artigos em inglês traduzidos para pt-BR. -

    - - -
    -
    Tecla SAP - 2021
    -
    + + Tecla SAP + + + + + + + ) } diff --git a/public/sw.js.map b/public/sw.js.map index 9b50969..8104ab0 100644 --- a/public/sw.js.map +++ b/public/sw.js.map @@ -1 +1 @@ -{"version":3,"file":"sw.js","sources":["../../../../../tmp/3cc71c213fd971de3d83cecb25ec32e9/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file +{"version":3,"file":"sw.js","sources":["../../../../../tmp/ba0e9132f7f8993abf56abcf50936c91/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file From bdae273e0943cfc9e44ff10ac07f6e3f884c1615 Mon Sep 17 00:00:00 2001 From: camilo micheletto Date: Mon, 22 Mar 2021 14:21:19 -0300 Subject: [PATCH 6/7] styled the new components and updated the base styling --- public/logo.svg | 1 + styles/base/_colors.scss | 15 ++++++++--- styles/base/_fonts.scss | 36 +++++++++++++++++++++++++ styles/base/_index.scss | 3 +++ styles/base/_mixins.scss | 33 +++++++++++++++++++---- styles/components/_LandingLayout.scss | 15 +++++++++++ styles/components/_MainFooter.scss | 8 ++++++ styles/components/_MainHeader.scss | 24 +++++++++++++++++ styles/components/_MainLogo.scss | 38 +++++++++++++++++++++++++++ styles/components/_PostContainer.scss | 3 +++ styles/components/_PostTemplate.scss | 23 +++++++++++----- styles/components/_index.scss | 7 ++++- styles/main.scss | 3 ++- styles/utilities/_fonts.scss | 8 ++++++ styles/utilities/_index.scss | 1 + 15 files changed, 201 insertions(+), 17 deletions(-) create mode 100644 public/logo.svg create mode 100644 styles/base/_fonts.scss create mode 100644 styles/components/_LandingLayout.scss create mode 100644 styles/components/_MainFooter.scss create mode 100644 styles/components/_MainHeader.scss create mode 100644 styles/components/_MainLogo.scss create mode 100644 styles/utilities/_fonts.scss create mode 100644 styles/utilities/_index.scss diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + diff --git a/styles/base/_colors.scss b/styles/base/_colors.scss index e5c7d24..b7007de 100644 --- a/styles/base/_colors.scss +++ b/styles/base/_colors.scss @@ -1,4 +1,11 @@ -$black: #1a1a1a; -$white: #ffffff; -$lilac: #543DC9; -$blue: #4E7CFC; \ No newline at end of file +$black: #1a1a1a !default; +$white: #ffffff !default; +$lilac: #543DC9 !default; +$blue: #4E7CFC !default; +$green: #B9F2E7 !default; + +$color-map: + "white" $white, + "black" $black; + +body { color: $black; } \ No newline at end of file diff --git a/styles/base/_fonts.scss b/styles/base/_fonts.scss new file mode 100644 index 0000000..ec125d7 --- /dev/null +++ b/styles/base/_fonts.scss @@ -0,0 +1,36 @@ +$main-font: "Inter", sans-serif; + + +$font-map: ( + "heading-1": ( + $main-font, + 2.9rem, + bold + ), + "heading-2": ( + $main-font, + 1.8rem, + bold + ), + "subheading": ( + $main-font, + 1.375rem, + 200 + ), + "title": ( + $main-font, + 1.05rem, + bold + ), + "text": ( + $main-font, + 1rem, + 200 + ), + "text-small": ( + $main-font, + 0.75rem, + 200 + ) +); + diff --git a/styles/base/_index.scss b/styles/base/_index.scss index 41a019f..0595fef 100644 --- a/styles/base/_index.scss +++ b/styles/base/_index.scss @@ -1,3 +1,6 @@ @forward './colors.scss'; @forward './mixins.scss'; @forward './reset.scss'; +@forward './fonts.scss'; + + diff --git a/styles/base/_mixins.scss b/styles/base/_mixins.scss index 470b73f..74fe2f7 100644 --- a/styles/base/_mixins.scss +++ b/styles/base/_mixins.scss @@ -1,12 +1,14 @@ @use './colors' as *; +@use './fonts' as *; -@mixin sidebar-template($direction) { +// Mixin da animação lateral dos posts +@mixin post-animation-template($direction) { content: ''; position: absolute; left: 0; transition: transform 0.2s ease-in; - // Se for usado como @include sidebar-template(top) + // Se for usado como @include post-animation-template(top) @if $direction == top { width: 16px; height: 100%; @@ -20,7 +22,7 @@ transform-origin: bottom; transform: scaleY(.2); - // Se for usado como @include sidebar-template(bottom) + // Se for usado como @include post-animation-template(bottom) } @else if $direction == bottom { width: 50%; height: 16px; @@ -36,9 +38,30 @@ } } -@mixin touch-support($width: 320px) { +// Mixin que identifica telas com suporte p/ hover > que tamanho x +@mixin touch-support($width: 460px) { // Se for maior que largura $width e tiver suporte a hover @media (min-width: $width) and (hover: hover) { @content; } -} \ No newline at end of file +} + +// Pega um mapa de fontes e retorna em forma de propriedades css +@mixin font-generator($font-name) { + $font: map-get($font-map, $font-name); + @if $font == null { + @error "Fonte #{$font-name} não disponível"; + } + $family: nth($font, 1); + $size: nth($font, 2); + $weight: nth($font, 3); + + font: { + family: $family; + size: $size; + weight: $weight; + } + line-height: 1.4; +} + + diff --git a/styles/components/_LandingLayout.scss b/styles/components/_LandingLayout.scss new file mode 100644 index 0000000..b193f98 --- /dev/null +++ b/styles/components/_LandingLayout.scss @@ -0,0 +1,15 @@ +.main-container { + display: flex; + flex-direction: column; + align-items: center; + + inline-size: 100%; + min-block-size: 100vh; + gap: 20px; + + // Melhoria contínua, as propriedades acima não tem suporte > 95% + @supports not ((inline-size: test) or (min-block-size: test)) { + width: 100%; + min-height: 100vh; + } +} \ No newline at end of file diff --git a/styles/components/_MainFooter.scss b/styles/components/_MainFooter.scss new file mode 100644 index 0000000..e7e5c43 --- /dev/null +++ b/styles/components/_MainFooter.scss @@ -0,0 +1,8 @@ +.footer { + height: 60px; + width: 100%; + + display: grid; + place-items: center; + margin-top: auto; +} \ No newline at end of file diff --git a/styles/components/_MainHeader.scss b/styles/components/_MainHeader.scss new file mode 100644 index 0000000..77f831b --- /dev/null +++ b/styles/components/_MainHeader.scss @@ -0,0 +1,24 @@ +@use '../base/' as *; + +.header { + display: grid; + place-items: center; + gap: 1ch 0; + + height: clamp(210px, 60%, 320px); + padding-block: 2ch; + + @supports not(padding-block: 2ch) { + padding: 2ch 0; + } + + // background: $lilac; + + text-align: center; + &__logo { + object-fit: contain; + } + &__title { + color: $lilac; + } +} \ No newline at end of file diff --git a/styles/components/_MainLogo.scss b/styles/components/_MainLogo.scss new file mode 100644 index 0000000..046696f --- /dev/null +++ b/styles/components/_MainLogo.scss @@ -0,0 +1,38 @@ +@use '../base/' as *; + +#Path_26 { + stroke-dasharray: 1250; + stroke-dashoffset: 0; + animation: animate-stroke 1s forwards ease-in 1.2s; +} + +#Path_27 { + stroke-dasharray: 1250; + stroke-dashoffset: 0; + animation: animate-stroke 1s forwards ease-in 1s; +} + +:is(#Path_26, #Path_27):hover { + animation: animate-stroke 1s forwards ease-in 1s; +} + + +#TECLA_SAP { + text-transform: uppercase; +} + +@keyframes animate-stroke { + 0% { + stroke-dashoffset: 0; + } + 40% { + stroke-dashoffset: 1250; + } + 80% { + stroke-dashoffset: 2500; + } + 100% { + stroke-dashoffset: 2500; + } + +} diff --git a/styles/components/_PostContainer.scss b/styles/components/_PostContainer.scss index 5fcb1ad..d346068 100644 --- a/styles/components/_PostContainer.scss +++ b/styles/components/_PostContainer.scss @@ -1,6 +1,9 @@ @use '../base/' as *; .posts { + margin: 0; + padding: 0; + display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; diff --git a/styles/components/_PostTemplate.scss b/styles/components/_PostTemplate.scss index ccad6ba..a95e81c 100644 --- a/styles/components/_PostTemplate.scss +++ b/styles/components/_PostTemplate.scss @@ -8,10 +8,6 @@ position: relative; - color: $black; - font-family: 'Inter', sans-serif; - line-height: 1.4; - cursor: pointer; @media (max-width: 420px) { @@ -40,10 +36,25 @@ /* Estilos da borda não aparecerão em dispositivos de toque*/ @include touch-support() { &::after { - @include sidebar-template(bottom); + @include post-animation-template(bottom); + } + &::before { + @include post-animation-template(top); } + } + @media (max-width: 460px) { &::before { - @include sidebar-template(top); + content: ''; + position: absolute; + left: 0; + top: 0; + + transform: translateX(-10px); + + height: 100%; + width: 10px; + + background-image: linear-gradient(to top, #543dc9 50%, #4e7cfc); } } } diff --git a/styles/components/_index.scss b/styles/components/_index.scss index 732a7ee..9863bdc 100644 --- a/styles/components/_index.scss +++ b/styles/components/_index.scss @@ -1,2 +1,7 @@ @forward './PostTemplate'; -@forward './PostContainer'; \ No newline at end of file +@forward './PostContainer'; +@forward './MainFooter'; +@forward './LandingLayout'; +@forward './MainHeader'; +@forward './MainLogo'; + diff --git a/styles/main.scss b/styles/main.scss index 0556091..f9ad3ca 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -1 +1,2 @@ -@use './components/' as *; \ No newline at end of file +@use './components/' as *; +@use './utilities/fonts' as *; diff --git a/styles/utilities/_fonts.scss b/styles/utilities/_fonts.scss new file mode 100644 index 0000000..0866180 --- /dev/null +++ b/styles/utilities/_fonts.scss @@ -0,0 +1,8 @@ +@use '../base' as *; + +// Pega cada fonte no mapa de fontes e cria uma classe utilitária com essa fonte, para ver todos os itens da classe basta ir no mapa de base/fonts +@each $font in map-keys($font-map) { + .#{unquote($font)} { + @include font-generator($font); + } +} \ No newline at end of file diff --git a/styles/utilities/_index.scss b/styles/utilities/_index.scss new file mode 100644 index 0000000..f7bc2fd --- /dev/null +++ b/styles/utilities/_index.scss @@ -0,0 +1 @@ +@forward './fonts'; \ No newline at end of file From ba3116ede3d94bcdd903f5b87fe9cc4338c04bfa Mon Sep 17 00:00:00 2001 From: cs-camilo-micheletto Date: Mon, 22 Mar 2021 14:46:25 -0300 Subject: [PATCH 7/7] corrected element link in index --- pages/index.js | 2 +- public/sw.js.map | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/index.js b/pages/index.js index 1bc1c22..20578c5 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,6 @@ import Head from 'next/head' import PostContainer from '../components/PostContainer' -import MainFooter from '../components/MainFooter/MainFooter' +import MainFooter from '../components/MainFooter' import LandingLayout from '../components/LandingLayout' import MainHeader from '../components/MainHeader' diff --git a/public/sw.js.map b/public/sw.js.map index 8104ab0..d48d626 100644 --- a/public/sw.js.map +++ b/public/sw.js.map @@ -1 +1 @@ -{"version":3,"file":"sw.js","sources":["../../../../../tmp/ba0e9132f7f8993abf56abcf50936c91/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file +{"version":3,"file":"sw.js","sources":["../../../../../tmp/cba07910852e3f0303829779880b7f34/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {skipWaiting as workbox_core_skipWaiting} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/skipWaiting.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/home/camilo/code/Allyhere/tecla-sap/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n \n);\n\n\n\n\n\n\n\nworkbox_core_skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","workbox_core_skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkOnly","plugins"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAG0I;EAC1I;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;AAUbC,qBAAwB;AAExBC,sBAAyB;AAIzBC,uBAA6B,CAAC,KAAD,EAAQ,IAAIC,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBC,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"} \ No newline at end of file