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

Merge pull request #104 from LaconicNetwork/styling-fixes

Browse Source 
Styling fixes
This commit is contained in:
olive kimoto 2022-07-30 02:42:02 +02:00 committed by GitHub
commit 6f980189e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 113 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/gradient_line_dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/images/gradient_line_lite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 475 B

BIN
public/images/products/watchers-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

BIN
public/videos/banner-about-light.mp4
View File

Binary file not shown.

BIN
public/videos/banner-about-light.webm
View File

Binary file not shown.

BIN
public/videos/banner-about.mp4
View File

Binary file not shown.

BIN
public/videos/banner-about.webm
View File

Binary file not shown.

BIN
public/videos/banner-partners-light.mp4
View File

Binary file not shown.

BIN
public/videos/banner-partners-light.webm
View File

Binary file not shown.

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

@ -314,10 +314,10 @@
border-top: tovw(1px, 'default', 1px) solid var(--color-white);
border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
width: 100%;
height: calc(12.6vw);
aspect-ratio: 16 / 9;
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
@supports not (aspect-ratio: 16 / 9) {
height: calc(12.6vw);
}
img {

48
src/components/common/footer/footer.module.scss
View File

@ -2,7 +2,8 @@
.pre__footer {
@include respond-to('mobile') {
padding-bottom: tovw(50px, 'tablet', 30px);
margin-top: tovw(140px, 'mobile', 140px);
padding-bottom: tovw(20px, 'tablet', 30px);
}
max-width: tovw(753px, 'default', 375px);
@ -15,7 +16,14 @@
}
&--section {
background-image: url('/images/laconic_newsletter_dark.png');
background-image: linear-gradient(
to bottom,
var(--color-black),
rgb(0 0 0 / 0) 25%,
rgb(0 0 0 / 0) 75%,
var(--color-black)
),
url('/images/laconic_newsletter_dark.png');
background-position: 50%;
background-size: contain;
display: flex;
@ -23,6 +31,13 @@
align-items: center;
justify-content: center;
height: calc(var(--vw) * 60);
width: 100%;
@include respond-to('mobile') {
background-size: 190%;
height: calc(var(--vw) * 100);
margin-top: tovw(100px, 'mobile', 100px);
}
&::after,
&::before {
@ -33,12 +48,16 @@
h2 {
text-shadow: 0 0 tovw(40px, 'default', 40px) rgb(255 255 255 / 0.4);
@include respond-to('mobile') {
font-size: 1.7rem;
}
}
}
.form {
@include respond-to('mobile') {
width: 100%;
margin: tovw(100px, 'default', 100px) auto 0;
}
position: relative;
@ -103,7 +122,7 @@
.line {
@include respond-to('mobile') {
display: none;
display: block;
}
position: absolute;
@ -343,6 +362,21 @@
}
}
.gradient_line {
position: absolute;
right: calc(50% - 5px);
top: -90px;
background-image: url('/images/gradient_line_dark.png');
background-size: contain;
width: 10px;
height: 88px;
display: none;
@include respond-to('mobile') {
top: -90px;
display: block;
}
}
[data-theme='light'] {
.pre__footer {
&--section {
@ -351,6 +385,14 @@
}
}
.gradient_line {
background-image: url('/images/gradient_line_lite.png');
right: calc(50% - 1.5px);
width: 3px;
height: 88px;
mix-blend-mode: darken;
}
.footer {
a {
color: var(--color-white);

1
src/components/common/footer/index.tsx
View File

@ -158,6 +158,7 @@ export const Footer = ({ data }: Props) => {
<>
{show && (
<Section className={s['pre__footer--section']}>
<div className={s['gradient_line']}></div>
<Container className={s['pre__footer']}>
<Isotype className={s['isotype']} />
<Heading

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

@ -193,7 +193,7 @@
all: unset;
position: relative;
display: flex;
flex-flow: row wrap;
flex-flow: column wrap;
gap: tovw(14px, 'mobile') tovw(20px, 'mobile');
background-color: unset;
border: unset;

7
src/components/sections/about/hero/hero.module.scss
View File

@ -4,6 +4,7 @@
@include respond-to('mobile') {
padding: 0 0 tovw(18px, 'mobile') 0;
width: 100vw;
min-height: calc(var(--vh) * 10);
}
display: flex;
@ -18,7 +19,7 @@
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(380px, 'mobile', 415px);
min-height: tovw(200px, 'mobile', 195px);
}
display: none;
@ -26,8 +27,8 @@
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: 0 0 tovw(-75px, 'mobile') tovw(10px, 'mobile', 10px);
width: 300%;
margin: 0; // 0 tovw(-75px, 'mobile') tovw(10px, 'mobile', 10px);
width: 100%;
mix-blend-mode: screen;
place-self: center;
}

2
src/components/sections/about/related/index.tsx
View File

@ -49,7 +49,7 @@ const Related = ({ data, blogData, isInPost, isFeatured, reduced }: Props) => {
<Heading as="h2" variant="lg">
{isInPost && !isFeatured && 'Related articles'}
{isFeatured && !isInPost && data?.featuredHeading}
{!isFeatured && !isInPost && 'Learn more'}
{!isFeatured && !isInPost && 'Learn More'}
</Heading>
</Container>
<div className={s['slider__container']}>

1
src/components/sections/about/roadmap/roadmap.module.scss
View File

@ -4,6 +4,7 @@
@include respond-to('mobile') {
margin-top: 0;
padding-top: 0;
padding-bottom: 50px;
}
position: relative;

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

@ -15,7 +15,7 @@
gap: tovw(12px, 'default', 12px);
@media screen and (max-width: 800px) {
padding: 0 8px;
padding: 1px 8px;
width: 100%;
overflow-x: auto;
padding-left: 0;

9
src/components/sections/careers/hero/hero.module.scss
View File

@ -6,6 +6,7 @@
padding: 0;
width: 100vw;
justify-content: flex-start;
min-height: calc(var(--vh) * 10);
}
display: flex;
@ -66,8 +67,8 @@
display: flex;
place-content: center;
min-height: tovw(750px, 'default', 366px);
min-height: tovw(400px, 'mobile', 510px);
margin-top: tovw(-80px, 'mobile', -30px);
min-height: tovw(200px, 'mobile', 210px);
margin-top: tovw(0px, 'mobile', -30px);
}
display: none;
@ -75,9 +76,9 @@
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
margin: tovw(30px, 'mobile', 40px) 0 tovw(10px, 'mobile', 10px)
tovw(-30px, 'mobile', -30px);
width: 140%;
width: 100%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(

3
src/components/sections/careers/values/values.module.scss
View File

@ -37,8 +37,7 @@
.features {
@include respond-to('mobile') {
display: flex;
flex-direction: column;
display: block;
margin: unset;
margin-top: tovw(95px, 'default', 50px);
}

6
src/components/sections/community/hero/hero.module.scss
View File

@ -26,7 +26,7 @@
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(460px, 'mobile', 495px);
min-height: tovw(260px, 'mobile', 305px);
}
display: none;
@ -34,9 +34,9 @@
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin-right: tovw(190px, 'mobile');
margin-right: tovw(65px, 'mobile');
padding-top: tovw(50px, 'mobile');
width: 280%;
width: 100%;
mix-blend-mode: lighten;
place-self: center;
}

10
src/components/sections/contact/hero/hero.module.scss
View File

@ -6,6 +6,7 @@
padding: 0;
padding-bottom: tovw(10px, 'mobile');
width: 100vw;
min-height: calc(var(--vh) * 10);
}
display: flex;
@ -61,9 +62,9 @@
@include respond-to('mobile') {
display: flex;
place-content: center;
margin-top: tovw(-270px, 'mobile', -280px);
margin-top: tovw(-200px, 'mobile', -210px);
margin-bottom: tovw(-60px, 'mobile');
min-height: tovw(660px, 'mobile', 660px);
min-height: tovw(260px, 'mobile', 260px);
}
display: none;
@ -80,9 +81,8 @@
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
width: 100%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(

2
src/components/sections/homepage/benefits/benefits.module.scss
View File

@ -18,7 +18,7 @@
}
@media screen and (max-width: 1400px) {
padding-bottom: tovw(200px, 'default', 200px);
padding-bottom: tovw(75px, 'default', 75px);
}
position: relative;

6
src/components/sections/homepage/hero/hero.module.scss
View File

@ -27,6 +27,12 @@
@media screen and (max-width: 422px) {
font-size: tovw(42px, 'mobile');
}
color: var(--color-accent);
span {
color: var(--color-white);
}
}
&::after,

4
src/components/sections/homepage/what-others-say/item/item.module.scss
View File

@ -8,8 +8,8 @@
transform: none;
margin: 0;
width: max-content;
height: max-content !important;
min-height: auto !important;
height: tovw(280px, 'mobile', 290px);
min-height: 20% !important;
}
position: absolute;

2
src/components/sections/homepage/what-others-say/what-others-say.module.scss
View File

@ -101,7 +101,7 @@
}
align-items: center;
height: tovw(636px, 'mobile');
height: tovw(480px, 'mobile');
.image {
position: absolute;

9
src/components/sections/newsroom/hero/hero.module.scss
View File

@ -7,6 +7,7 @@
margin-bottom: tovw(18px, 'mobile');
width: 100vw;
justify-content: center;
min-height: calc(var(--vh) * 1);
}
display: flex;
@ -56,10 +57,10 @@
.hero__container {
@include respond-to('mobile') {
min-height: tovw(420px, 'mobile', 480px);
min-height: tovw(240px, 'mobile', 290px);
display: flex;
place-content: center;
margin-top: tovw(-80px, 'mobile', -90px);
margin-top: tovw(0, 'mobile', -10px);
}
display: none;
@ -75,8 +76,8 @@
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
width: 135%;
margin: auto;
width: 100%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(

7
src/components/sections/newsroom/media/media.module.scss
View File

@ -3,6 +3,7 @@
.section {
@include respond-to('mobile') {
padding: 0;
padding-top: tovw(35px, 'mobile');
margin-bottom: tovw(25px, 'mobile');
}
@ -112,11 +113,11 @@
img {
width: 100%;
height: calc(15.4vw);
object-fit: cover;
aspect-ratio: 16 / 9;
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
@supports not (aspect-ratio: 16 / 9) {
height: calc(15.4vw);
}
}

10
src/components/sections/partners/hero/hero.module.scss
View File

@ -57,11 +57,7 @@
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(350px, 'mobile', 310px);
img {
width: 115% !important;
}
min-height: tovw(150px, 'mobile', 110px);
}
display: none;
@ -79,8 +75,8 @@
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 100px) 0 tovw(40px, 'mobile', 50px) 0;
width: 185%;
margin: tovw(10px, 'mobile', 30px) 0 tovw(20px, 'mobile', 30px) 0;
width: 100%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(

5
src/components/sections/products/app/app.module.scss
View File

@ -6,7 +6,7 @@
height: unset;
padding: 0;
margin-bottom: 0;
padding-bottom: tovw(60px, 'mobile');
padding-top: tovw(60px, 'mobile');
}
display: flex;
@ -26,6 +26,8 @@
z-index: 2;
div:nth-child(2) {
order: 1;
h2 {
text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
}
@ -51,6 +53,7 @@
@include respond-to('mobile') {
width: 100%;
min-height: tovw(190px, 'mobile', 340px);
order: 2;
}
position: relative;

7
src/components/sections/products/hero/hero.module.scss
View File

@ -45,12 +45,11 @@
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(30px, 'mobile', 70px) 0 tovw(30px, 'mobile', 40px)
tovw(16px, 'mobile', 20px);
width: 200%;
margin: tovw(30px, 'mobile', 70px) 0 tovw(30px, 'mobile', 40px) 0;
width: 100%;
mix-blend-mode: screen;
place-self: center;
min-height: tovw(308px, 'mobile', 310px);
min-height: tovw(88px, 'mobile', 90px);
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,

1
src/components/sections/products/network/network.module.scss
View File

@ -4,6 +4,7 @@
@include respond-to('mobile') {
padding: 0;
padding-bottom: tovw(14px, 'mobile');
padding-top: tovw(44px, 'mobile');
}
position: relative;

12
src/css/global.scss
View File

@ -103,6 +103,18 @@ body:not(.user-is-tabbing) textarea:focus {
outline: none;
}
// Hack to get around a bug in mobile chrome that renders font black on a black
// background when in dark mode
[data-theme='dark'] {
input,
textarea {
color: var(--color-white) !important;
-webkit-text-fill-color: var(--color-white) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
}
}
:focus-visible {
outline: tovw(2px, 'default', 2px) dashed var(--color-accent);
}