From d7fe4988418e2282d6fe3fe0169e4600b8756697 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fede=20=C3=81lvarez?= <78366796+fedealvarezcampos@users.noreply.github.com> Date: Wed, 13 Apr 2022 21:04:05 +0200 Subject: [PATCH] Improve Blog (#41) --- src/components/common/card/card.module.scss | 2 +- src/components/icons/socials.tsx | 23 ++++++++ .../sections/blog/hero/hero.module.scss | 5 ++ .../blog/post-content/content.module.scss | 13 +++-- .../sections/blog/post-hero/hero.module.scss | 3 +- .../blog/posts-grid/posts-grid.module.scss | 11 +++- src/components/sections/blog/search/index.tsx | 2 +- .../sections/blog/search/search.module.scss | 9 ++- .../sections/blog/shares/icons/discord.js | 16 ----- .../sections/blog/shares/icons/facebook.js | 16 ----- .../sections/blog/shares/icons/instagram.js | 20 ------- .../sections/blog/shares/icons/reddit.js | 18 ------ .../sections/blog/shares/icons/telegram.js | 18 ------ .../sections/blog/shares/icons/twitter.js | 16 ----- src/components/sections/blog/shares/index.tsx | 14 +++-- .../sections/blog/shares/shares.module.scss | 20 +++---- .../sections/community/socials/index.tsx | 58 ++++++++++++------- .../community/socials/socials.module.scss | 2 +- src/lib/renderer/blog.module.scss | 5 ++ 19 files changed, 118 insertions(+), 153 deletions(-) delete mode 100644 src/components/sections/blog/shares/icons/discord.js delete mode 100644 src/components/sections/blog/shares/icons/facebook.js delete mode 100644 src/components/sections/blog/shares/icons/instagram.js delete mode 100644 src/components/sections/blog/shares/icons/reddit.js delete mode 100644 src/components/sections/blog/shares/icons/telegram.js delete mode 100644 src/components/sections/blog/shares/icons/twitter.js diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss index a85f67b..c7c9014 100644 --- a/src/components/common/card/card.module.scss +++ b/src/components/common/card/card.module.scss @@ -240,7 +240,7 @@ p { line-height: 134%; letter-spacing: -0.02em; - font-size: tovw(24px, 'default', 24px); + font-size: tovw(24px, 'default', 18px); } } diff --git a/src/components/icons/socials.tsx b/src/components/icons/socials.tsx index 3131eec..8f07af3 100644 --- a/src/components/icons/socials.tsx +++ b/src/components/icons/socials.tsx @@ -275,7 +275,30 @@ const Discourse = ({ ) } +const Discord = ({ + className, + fill +}: { + className?: string + fill?: string +}) => { + return ( + + + + ) +} + export { + Discord, Discourse, Facebook, Github, diff --git a/src/components/sections/blog/hero/hero.module.scss b/src/components/sections/blog/hero/hero.module.scss index 62bb73d..ccb682c 100644 --- a/src/components/sections/blog/hero/hero.module.scss +++ b/src/components/sections/blog/hero/hero.module.scss @@ -23,5 +23,10 @@ .container { z-index: 10; padding-top: tovw(156px, 'default', 159px); + + @media screen and (max-width: 800px) { + padding-left: 0; + padding-right: 0; + } } } diff --git a/src/components/sections/blog/post-content/content.module.scss b/src/components/sections/blog/post-content/content.module.scss index 05d0bab..502bb45 100644 --- a/src/components/sections/blog/post-content/content.module.scss +++ b/src/components/sections/blog/post-content/content.module.scss @@ -4,13 +4,18 @@ $img-height: 590px; $img-height-mobile: 200px; .section { - transform: translateY( - calc(tovw($img-height, 'default', $img-height-mobile) * -1 / 2) - ); + margin-top: tovw(108px, 'default', 90px); + padding-bottom: tovw(147px, 'default', 56px); @media screen and (max-width: 800px) { transform: none; - padding-bottom: tovw(56px, 'default', 56px); + } + + .container { + @include respond-to('mobile') { + padding-left: 0; + padding-right: 0; + } } .image__container { diff --git a/src/components/sections/blog/post-hero/hero.module.scss b/src/components/sections/blog/post-hero/hero.module.scss index 95c7d4e..71ce816 100644 --- a/src/components/sections/blog/post-hero/hero.module.scss +++ b/src/components/sections/blog/post-hero/hero.module.scss @@ -12,7 +12,8 @@ ); padding-top: tovw(220px, 'default', 150px); max-width: 100%; - min-height: calc(var(--vh) * 100); + + // min-height: calc(var(--vh) * 100); overflow: visible; text-align: center; diff --git a/src/components/sections/blog/posts-grid/posts-grid.module.scss b/src/components/sections/blog/posts-grid/posts-grid.module.scss index a0aa6fc..e51c337 100644 --- a/src/components/sections/blog/posts-grid/posts-grid.module.scss +++ b/src/components/sections/blog/posts-grid/posts-grid.module.scss @@ -3,15 +3,21 @@ .container { display: grid; column-gap: tovw(24px, 'default', 24px); - padding-top: tovw(96px, 'default', 88px); + padding-top: tovw(90px, 'default', 44px); padding-bottom: tovw(80px, 'default', 80px); grid-template-columns: repeat(3, 1fr); row-gap: tovw(104px, 'default', 81px); + @media screen and (max-width: 1300px) { + grid-template-columns: repeat(2, 1fr); + } + @media screen and (max-width: 800px) { display: flex; flex-direction: column; gap: tovw(80px, 'default', 80px); + padding-left: 0; + padding-right: 0; } } @@ -21,10 +27,11 @@ font-weight: 400; line-height: tovw(84px, 'default', 48px); margin-top: 0; - margin-bottom: tovw(88px, 'default', 44px); + margin-bottom: 0; text-align: center; @media screen and (max-width: 800px) { letter-spacing: -0.02em; + text-align: start; } } diff --git a/src/components/sections/blog/search/index.tsx b/src/components/sections/blog/search/index.tsx index 2c1af2b..a73ede2 100644 --- a/src/components/sections/blog/search/index.tsx +++ b/src/components/sections/blog/search/index.tsx @@ -36,7 +36,7 @@ type ContainerProps = { export const SearchContainer = ({ children }: ContainerProps) => { return (
- +
{children}
diff --git a/src/components/sections/blog/search/search.module.scss b/src/components/sections/blog/search/search.module.scss index c10390b..77978e7 100644 --- a/src/components/sections/blog/search/search.module.scss +++ b/src/components/sections/blog/search/search.module.scss @@ -15,10 +15,11 @@ gap: tovw(12px, 'default', 12px); @media screen and (max-width: 800px) { - margin-right: -42px; padding: 0 8px; - width: 100vw; + width: 100%; overflow-x: scroll; + padding-left: 0; + padding-right: 0; } a { @@ -54,6 +55,10 @@ width: 100%; } + &__container { + padding: 0; + } + > svg { position: absolute; right: 0; diff --git a/src/components/sections/blog/shares/icons/discord.js b/src/components/sections/blog/shares/icons/discord.js deleted file mode 100644 index ec0b4d2..0000000 --- a/src/components/sections/blog/shares/icons/discord.js +++ /dev/null @@ -1,16 +0,0 @@ -const Discord = (props) => ( - - - -) - -export default Discord diff --git a/src/components/sections/blog/shares/icons/facebook.js b/src/components/sections/blog/shares/icons/facebook.js deleted file mode 100644 index 933dcd0..0000000 --- a/src/components/sections/blog/shares/icons/facebook.js +++ /dev/null @@ -1,16 +0,0 @@ -const Facebook = (props) => ( - - - -) - -export default Facebook diff --git a/src/components/sections/blog/shares/icons/instagram.js b/src/components/sections/blog/shares/icons/instagram.js deleted file mode 100644 index bd10f76..0000000 --- a/src/components/sections/blog/shares/icons/instagram.js +++ /dev/null @@ -1,20 +0,0 @@ -const Instagram = (props) => ( - - - - -) - -export default Instagram diff --git a/src/components/sections/blog/shares/icons/reddit.js b/src/components/sections/blog/shares/icons/reddit.js deleted file mode 100644 index fa6daf3..0000000 --- a/src/components/sections/blog/shares/icons/reddit.js +++ /dev/null @@ -1,18 +0,0 @@ -const Reddit = (props) => ( - - - -) - -export default Reddit diff --git a/src/components/sections/blog/shares/icons/telegram.js b/src/components/sections/blog/shares/icons/telegram.js deleted file mode 100644 index c3f36fc..0000000 --- a/src/components/sections/blog/shares/icons/telegram.js +++ /dev/null @@ -1,18 +0,0 @@ -const Telegram = (props) => ( - - - -) - -export default Telegram diff --git a/src/components/sections/blog/shares/icons/twitter.js b/src/components/sections/blog/shares/icons/twitter.js deleted file mode 100644 index b85f613..0000000 --- a/src/components/sections/blog/shares/icons/twitter.js +++ /dev/null @@ -1,16 +0,0 @@ -const Twitter = (props) => ( - - - -) - -export default Twitter diff --git a/src/components/sections/blog/shares/index.tsx b/src/components/sections/blog/shares/index.tsx index 981f135..da867d1 100644 --- a/src/components/sections/blog/shares/index.tsx +++ b/src/components/sections/blog/shares/index.tsx @@ -1,14 +1,16 @@ import Link from 'next/link' +import { + Discord, + Facebook, + Instagram, + Reddit, + Telegram, + Twitter +} from '~/components/icons/socials' import { Container } from '~/components/layout/container' import Section from '~/components/layout/section' -import Discord from './icons/discord' -import Facebook from './icons/facebook' -import Instagram from './icons/instagram' -import Reddit from './icons/reddit' -import Telegram from './icons/telegram' -import Twitter from './icons/twitter' import s from './shares.module.scss' interface SharesProps { diff --git a/src/components/sections/blog/shares/shares.module.scss b/src/components/sections/blog/shares/shares.module.scss index 189d301..b4eb403 100644 --- a/src/components/sections/blog/shares/shares.module.scss +++ b/src/components/sections/blog/shares/shares.module.scss @@ -24,19 +24,19 @@ flex-wrap: wrap; a { - align-items: center; - background-color: var(--color-black); - border: 1px solid var(--color-white); - border-radius: 30px; - color: var(--color-white); display: flex; - height: tovw(56px, 'default', 48px); - justify-content: center; - transition: filter 0.2s, filter 0.2s; - width: tovw(72px, 'default', 64px); + transition: filter 200ms; + border: tovw(1px, 'default', 1px) solid #fff; + border-radius: tovw(30px, 'default', 20px); + background-color: var(--color-black); + cursor: pointer; + padding: tovw(13px, 'default', 8px); + width: tovw(72px, 'default', 54px); + height: tovw(55px, 'default', 38px); + place-content: center; svg { - height: 28px; + width: tovw(27px, 'default', 20px); } &:hover { diff --git a/src/components/sections/community/socials/index.tsx b/src/components/sections/community/socials/index.tsx index 1721401..564bc93 100644 --- a/src/components/sections/community/socials/index.tsx +++ b/src/components/sections/community/socials/index.tsx @@ -1,3 +1,5 @@ +import Link from 'next/link' + import Line from '~/components/icons/line' import { Discourse, @@ -38,27 +40,41 @@ const Socials = () => {
GET IN TOUCH
- - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/components/sections/community/socials/socials.module.scss b/src/components/sections/community/socials/socials.module.scss index 81162ed..b0e5ceb 100644 --- a/src/components/sections/community/socials/socials.module.scss +++ b/src/components/sections/community/socials/socials.module.scss @@ -123,7 +123,7 @@ width: tovw(400px, 'default', 255px); gap: tovw(20px, 'default', 12px); - button { + a { display: flex; transition: filter 200ms; border: tovw(1px, 'default', 1px) solid #fff; diff --git a/src/lib/renderer/blog.module.scss b/src/lib/renderer/blog.module.scss index 446ab1f..f3cf148 100644 --- a/src/lib/renderer/blog.module.scss +++ b/src/lib/renderer/blog.module.scss @@ -4,6 +4,11 @@ font-family: var(--font-tt-hoves); max-width: tovw(856px, 'default', 856px); + @include respond-to('mobile') { + padding-left: 0; + padding-right: 0; + } + h1 { margin-top: tovw(124px, 'default', 72px); font-family: var(--font-arthemys);