LaconicNetwork/laconic-dot-com
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve Blog (#41)

Browse Source
This commit is contained in:
Fede Álvarez 2022-04-13 21:04:05 +02:00 committed by GitHub
parent 47667660a2
commit d7fe498841
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 118 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/card/card.module.scss
View File

@ -240,7 +240,7 @@
p {
line-height: 134%;
letter-spacing: -0.02em;
font-size: tovw(24px, 'default', 24px);
font-size: tovw(24px, 'default', 18px);
}
}

23
src/components/icons/socials.tsx
View File

@ -275,7 +275,30 @@ const Discourse = ({
)
}
const Discord = ({
className,
fill
}: {
className?: string
fill?: string
}) => {
return (
<svg
className={className}
viewBox="0 0 33 26"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M27.936 2.155A26.571 26.571 0 0 0 21.219.002a.1.1 0 0 0-.108.053c-.29.533-.611 1.229-.837 1.775a24.314 24.314 0 0 0-7.544 0 18.232 18.232 0 0 0-.85-1.775.105.105 0 0 0-.107-.053 26.497 26.497 0 0 0-6.717 2.153.097.097 0 0 0-.044.04C.733 8.8-.438 15.245.136 21.61c.003.03.02.06.043.08 2.823 2.142 5.557 3.443 8.24 4.305a.105.105 0 0 0 .116-.039c.635-.896 1.2-1.84 1.686-2.834a.11.11 0 0 0-.057-.15 17.773 17.773 0 0 1-2.574-1.269.111.111 0 0 1-.01-.181c.172-.134.345-.274.51-.414a.1.1 0 0 1 .107-.015c5.4 2.549 11.248 2.549 16.585 0a.099.099 0 0 1 .108.013c.165.141.338.282.512.416a.111.111 0 0 1-.01.181c-.821.497-1.676.916-2.575 1.267a.11.11 0 0 0-.055.152 22.854 22.854 0 0 0 1.684 2.833.103.103 0 0 0 .116.04c2.696-.862 5.43-2.163 8.253-4.305a.11.11 0 0 0 .043-.079c.688-7.358-1.153-13.75-4.88-19.415a.085.085 0 0 0-.042-.04Zm-16.909 15.58c-1.625 0-2.965-1.543-2.965-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.991 1.556 2.965 3.438 0 1.895-1.314 3.438-2.966 3.438Zm10.966 0c-1.626 0-2.966-1.543-2.966-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.992 1.556 2.966 3.438 0 1.895-1.301 3.438-2.966 3.438Z"
fill={fill || 'var(--color-white)'}
/>
</svg>
)
}
export {
Discord,
Discourse,
Facebook,
Github,

5
src/components/sections/blog/hero/hero.module.scss
View File

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

13
src/components/sections/blog/post-content/content.module.scss
View File

@ -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 {

3
src/components/sections/blog/post-hero/hero.module.scss
View File

@ -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;

11
src/components/sections/blog/posts-grid/posts-grid.module.scss
View File

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

2
src/components/sections/blog/search/index.tsx
View File

@ -36,7 +36,7 @@ type ContainerProps = {
export const SearchContainer = ({ children }: ContainerProps) => {
return (
<Section>
<Container>
<Container className={s.search__container}>
<div className={s.container}>{children}</div>
</Container>
</Section>

9
src/components/sections/blog/search/search.module.scss
View File

@ -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;

16
src/components/sections/blog/shares/icons/discord.js
View File

@ -1,16 +0,0 @@
const Discord = (props) => (
<svg
width={33}
height={26}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M27.936 2.155A26.571 26.571 0 0 0 21.219.002a.1.1 0 0 0-.108.053c-.29.533-.611 1.229-.837 1.775a24.314 24.314 0 0 0-7.544 0 18.232 18.232 0 0 0-.85-1.775.105.105 0 0 0-.107-.053 26.497 26.497 0 0 0-6.717 2.153.097.097 0 0 0-.044.04C.733 8.8-.438 15.245.136 21.61c.003.03.02.06.043.08 2.823 2.142 5.557 3.443 8.24 4.305a.105.105 0 0 0 .116-.039c.635-.896 1.2-1.84 1.686-2.834a.11.11 0 0 0-.057-.15 17.773 17.773 0 0 1-2.574-1.269.111.111 0 0 1-.01-.181c.172-.134.345-.274.51-.414a.1.1 0 0 1 .107-.015c5.4 2.549 11.248 2.549 16.585 0a.099.099 0 0 1 .108.013c.165.141.338.282.512.416a.111.111 0 0 1-.01.181c-.821.497-1.676.916-2.575 1.267a.11.11 0 0 0-.055.152 22.854 22.854 0 0 0 1.684 2.833.103.103 0 0 0 .116.04c2.696-.862 5.43-2.163 8.253-4.305a.11.11 0 0 0 .043-.079c.688-7.358-1.153-13.75-4.88-19.415a.085.085 0 0 0-.042-.04Zm-16.909 15.58c-1.625 0-2.965-1.543-2.965-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.991 1.556 2.965 3.438 0 1.895-1.314 3.438-2.966 3.438Zm10.966 0c-1.626 0-2.966-1.543-2.966-3.438 0-1.895 1.314-3.438 2.966-3.438 1.665 0 2.992 1.556 2.966 3.438 0 1.895-1.301 3.438-2.966 3.438Z"
fill="currentColor"
/>
</svg>
)
export default Discord

16
src/components/sections/blog/shares/icons/facebook.js
View File

@ -1,16 +0,0 @@
const Facebook = (props) => (
<svg
width={28}
height={28}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M28 14c0-7.732-6.268-14-14-14S0 6.268 0 14c0 6.988 5.12 12.78 11.813 13.83v-9.783H8.258V14h3.555v-3.084c0-3.51 2.09-5.447 5.287-5.447 1.532 0 3.134.273 3.134.273v3.446H18.47c-1.739 0-2.282 1.079-2.282 2.187V14h3.883l-.62 4.047h-3.262v9.783C22.88 26.78 28 20.988 28 14Z"
fill="currentColor"
/>
</svg>
)
export default Facebook

20
src/components/sections/blog/shares/icons/instagram.js
View File

@ -1,20 +0,0 @@
const Instagram = (props) => (
<svg
width={26}
height={26}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M13 2.341c3.473 0 3.885.015 5.25.076 1.27.056 1.956.27 2.413.447a4.02 4.02 0 0 1 1.493.97 4 4 0 0 1 .97 1.493c.177.457.39 1.148.447 2.412.06 1.371.076 1.782.076 5.25 0 3.474-.015 3.886-.076 5.252-.056 1.27-.27 1.955-.447 2.412a4.02 4.02 0 0 1-.97 1.493 4 4 0 0 1-1.493.97c-.457.177-1.148.39-2.412.447-1.371.06-1.783.076-5.251.076-3.473 0-3.885-.016-5.25-.076-1.27-.056-1.956-.27-2.413-.447a4.02 4.02 0 0 1-1.493-.97 3.998 3.998 0 0 1-.97-1.493c-.178-.457-.39-1.148-.447-2.412-.06-1.372-.076-1.783-.076-5.251 0-3.474.015-3.885.076-5.25.056-1.27.27-1.956.447-2.413a4.02 4.02 0 0 1 .97-1.493 3.999 3.999 0 0 1 1.493-.97c.457-.178 1.148-.39 2.412-.447 1.366-.06 1.778-.076 5.251-.076ZM13 0C9.47 0 9.029.015 7.643.076 6.26.137 5.312.361 4.489.68a6.345 6.345 0 0 0-2.305 1.504 6.37 6.37 0 0 0-1.504 2.3C.36 5.312.137 6.256.076 7.638.016 9.027 0 9.47 0 13c0 3.53.015 3.971.076 5.357.061 1.382.285 2.331.604 3.154a6.345 6.345 0 0 0 1.504 2.305 6.355 6.355 0 0 0 2.3 1.498c.828.32 1.772.544 3.154.605 1.386.06 1.828.076 5.357.076 3.53 0 3.971-.015 5.357-.076 1.382-.061 2.331-.285 3.154-.605a6.355 6.355 0 0 0 2.3-1.498 6.356 6.356 0 0 0 1.498-2.3c.32-.828.544-1.772.605-3.153.06-1.387.076-1.829.076-5.358 0-3.53-.015-3.971-.076-5.357-.061-1.382-.285-2.331-.605-3.154a6.088 6.088 0 0 0-1.488-2.31 6.355 6.355 0 0 0-2.3-1.498c-.828-.32-1.772-.544-3.153-.605C16.97.015 16.529 0 13 0Z"
fill="currentColor"
/>
<path
d="M13 6.322A6.68 6.68 0 0 0 6.322 13 6.68 6.68 0 0 0 13 19.678 6.68 6.68 0 0 0 19.678 13 6.68 6.68 0 0 0 13 6.322Zm0 11.01a4.332 4.332 0 1 1 .001-8.665A4.332 4.332 0 0 1 13 17.332ZM21.5 6.058a1.56 1.56 0 1 1-3.118 0 1.56 1.56 0 0 1 3.119 0Z"
fill="currentColor"
/>
</svg>
)
export default Instagram

18
src/components/sections/blog/shares/icons/reddit.js
View File

@ -1,18 +0,0 @@
const Reddit = (props) => (
<svg
width={28}
height={28}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14Zm-6.713-2.047c1.13 0 2.046.917 2.046 2.047 0 .835-.507 1.556-1.179 1.883.033.197.05.393.05.606 0 3.144-3.652 5.682-8.171 5.682-4.52 0-8.171-2.538-8.171-5.682 0-.213.016-.426.05-.622A2.04 2.04 0 0 1 4.698 14c0-1.13.917-2.047 2.047-2.047.54 0 1.048.23 1.408.573 1.409-1.031 3.357-1.67 5.535-1.735l1.031-4.88a.398.398 0 0 1 .164-.23.408.408 0 0 1 .279-.048l3.39.72c.228-.491.72-.819 1.293-.819a1.46 1.46 0 0 1 1.457 1.458 1.46 1.46 0 0 1-2.915.065L15.36 6.42l-.933 4.372c2.128.082 4.06.736 5.452 1.735.36-.36.852-.573 1.409-.573ZM10.79 14a1.46 1.46 0 0 0-1.458 1.457 1.46 1.46 0 0 0 1.458 1.458 1.46 1.46 0 0 0 1.457-1.458A1.46 1.46 0 0 0 10.791 14Zm3.225 6.37c.557 0 2.457-.066 3.455-1.065a.421.421 0 0 0 .033-.54.385.385 0 0 0-.54 0c-.639.622-1.965.851-2.931.851s-2.309-.229-2.931-.851a.385.385 0 0 0-.54 0 .385.385 0 0 0 0 .54c.982.983 2.898 1.065 3.454 1.065Zm1.736-4.913a1.46 1.46 0 0 0 1.457 1.458 1.46 1.46 0 0 0 1.458-1.458A1.46 1.46 0 0 0 17.209 14a1.46 1.46 0 0 0-1.457 1.457Z"
fill="currentColor"
/>
</svg>
)
export default Reddit

18
src/components/sections/blog/shares/icons/telegram.js
View File

@ -1,18 +0,0 @@
const Telegram = (props) => (
<svg
width={28}
height={28}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M28 14c0 7.732-6.268 14-14 14S0 21.732 0 14 6.268 0 14 0s14 6.268 14 14Zm-13.498-3.665c-1.362.567-4.084 1.74-8.165 3.517-.663.264-1.01.522-1.041.774-.054.426.48.594 1.206.822l.307.097c.714.233 1.676.505 2.176.515.453.01.96-.177 1.518-.56 3.813-2.575 5.782-3.876 5.905-3.904.088-.02.208-.044.29.028.082.073.074.211.065.248-.053.225-2.147 2.172-3.23 3.18-.339.314-.578.537-.627.588-.11.114-.222.222-.33.325-.663.64-1.161 1.12.028 1.905.572.376 1.03.688 1.486.999.498.34.995.678 1.639 1.1.163.107.32.218.472.327.58.413 1.101.785 1.745.726.374-.035.76-.386.957-1.436.464-2.479 1.376-7.851 1.586-10.065a2.469 2.469 0 0 0-.023-.551.59.59 0 0 0-.2-.38c-.167-.135-.426-.164-.542-.162-.526.01-1.334.29-5.222 1.907Z"
fill="currentColor"
/>
</svg>
)
export default Telegram

16
src/components/sections/blog/shares/icons/twitter.js
View File

@ -1,16 +0,0 @@
const Twitter = (props) => (
<svg
width={31}
height={25}
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M9.752 25c11.696 0 18.094-9.62 18.094-17.958 0-.27-.006-.547-.018-.818 1.245-.893 2.319-2 3.172-3.268-1.16.512-2.39.847-3.65.992A6.355 6.355 0 0 0 30.146.457a12.843 12.843 0 0 1-4.037 1.532A6.383 6.383 0 0 0 22.5.083a6.41 6.41 0 0 0-4.032.664 6.34 6.34 0 0 0-2.795 2.96 6.277 6.277 0 0 0-.406 4.038 18.17 18.17 0 0 1-7.259-1.913 18.039 18.039 0 0 1-5.847-4.678 6.279 6.279 0 0 0-.695 4.598A6.32 6.32 0 0 0 4.13 9.577a6.404 6.404 0 0 1-2.882-.787v.078a6.28 6.28 0 0 0 1.437 4 6.367 6.367 0 0 0 3.666 2.19 6.368 6.368 0 0 1-2.87.108 6.327 6.327 0 0 0 2.262 3.137 6.404 6.404 0 0 0 3.677 1.25A12.817 12.817 0 0 1 0 22.165 18.142 18.142 0 0 0 9.752 25Z"
fill="currentColor"
/>
</svg>
)
export default Twitter

14
src/components/sections/blog/shares/index.tsx
View File

@ -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 {

20
src/components/sections/blog/shares/shares.module.scss
View File

@ -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 {

58
src/components/sections/community/socials/index.tsx
View File

@ -1,3 +1,5 @@
import Link from 'next/link'
import Line from '~/components/icons/line'
import {
Discourse,
@ -38,27 +40,41 @@ const Socials = () => {
<div className={s['icons__container']}>
<span>GET IN TOUCH</span>
<div className={s['grid']}>
<button aria-label="instagram">
<Instagram />
</button>
<button aria-label="facebook">
<Facebook />
</button>
<button aria-label="linkedin">
<Linkedin />
</button>
<button aria-label="reddit">
<Reddit />
</button>
<button aria-label="telegram">
<Telegram />
</button>
<button aria-label="twitter">
<Twitter />
</button>
<button aria-label="discourse">
<Discourse />
</button>
<Link href={`https://twitter.com/laconicnetwork`}>
<a target="_blank">
<Twitter />
</a>
</Link>
<Link href={`https://www.reddit.com/r/LaconicNetwork/`}>
<a target="_blank">
<Reddit />
</a>
</Link>
<Link href={`https://instagram.com/laconicnetwork`}>
<a target="_blank">
<Instagram />
</a>
</Link>
<Link href={`https://www.facebook.com/laconicnetwork`}>
<a target="_blank">
<Facebook />
</a>
</Link>
<Link href={`https://t.me/laconicnetwork`}>
<a target="_blank">
<Telegram />
</a>
</Link>
<Link href={`https://www.linkedin.com/company/laconic-network/`}>
<a target="_blank">
<Linkedin />
</a>
</Link>
<Link href={`https://laconic.community/`}>
<a target="_blank">
<Discourse />
</a>
</Link>
</div>
</div>
</Container>

2
src/components/sections/community/socials/socials.module.scss
View File

@ -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;

5
src/lib/renderer/blog.module.scss
View File

@ -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);