LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-01-15 18:44:07 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

General styles

Browse Source
This commit is contained in:
Fede Álvarez 2022-05-24 18:37:19 +02:00
parent 570860e6f8
commit 293d900f05
9 changed files with 139 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/sections/careers/values/index.tsx
View File

@ -31,9 +31,9 @@ interface Props {
}
}
const Network = ({ data }: Props) => {
const Values = ({ data }: Props) => {
return (
<Section className={s['section']} id="laconicnetwork">
<Section className={s['section']}>
<Container className={s['container']}>
<div>
{/* <img
@ -96,4 +96,4 @@ const Network = ({ data }: Props) => {
)
}
export default Network
export default Values

17
src/components/sections/contact/form/form.module.scss
View File

@ -75,12 +75,18 @@
textarea,
select {
appearance: none;
background-color: unset;
font-size: tovw(24px, 'default', 18px);
padding-bottom: tovw(26px, 'default', 14px);
padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
margin-top: tovw(20px, 'default', 16px);
border: unset;
border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
background: rgb(142 142 142 / 0.1);
border: tovw(1px, 'default', 1px) solid transparent;
border-radius: tovw(8px, 'default', 8px);
&:focus {
border: tovw(1px, 'default', 1px) solid var(--color-accent);
background: rgb(0 0 244 / 0.1);
transition: all 250ms;
}
option {
background-color: black;
@ -95,7 +101,8 @@
}
select {
background: url('/images/dropdown.svg') no-repeat 98% 35%;
background: url('/images/dropdown.svg') no-repeat 95% 50%;
background-color: rgb(142 142 142 / 0.1);
background-size: tovw(20px, 'default', 16px);
&:invalid {

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

@ -24,70 +24,41 @@
justify-content: center;
}
// .video_container {
// @include respond-to('mobile') {
// margin-top: unset;
// }
// display: flex;
// align-self: center;
// position: relative;
// margin-top: tovw(-165px, 'default');
// margin-bottom: tovw(-140px, 'default');
// padding-top: tovw(30px, 'default', 20px);
// width: 82%;
// mix-blend-mode: lighten;
// video {
// @include respond-to('mobile') {
// display: none;
// }
// width: 100%;
// }
// &::after {
// position: absolute;
// top: 0;
// left: 0;
// z-index: 1;
// background: radial-gradient(
// ellipse,
// rgb(3 3 3 / 0) 60%,
// rgb(3 3 3 / 1) 75%,
// rgb(3 3 3 / 1) 100%
// );
// width: 100%;
// height: 100%;
// content: '';
// }
// }
.hero {
.hero__container {
@include respond-to('mobile') {
display: none;
min-height: unset;
}
place-self: center;
width: tovw(1516px, 'default', 800px);
mix-blend-mode: screen;
display: flex;
place-content: center;
min-height: tovw(600px, 'default', 315px);
&__mobile {
.hero {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
display: none;
}
display: none;
margin: auto;
width: tovw(1516px, 'default', 800px);
mix-blend-mode: screen;
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px)
tovw(16px, 'mobile', 20px);
width: 200%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
display: none;
}
}
}

42
src/components/sections/contact/hero/index.tsx
View File

@ -19,37 +19,23 @@ interface Props {
}
const Hero = ({ data }: Props) => {
// const heroVideoRef = useRef<HTMLVideoElement>(null)
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
{/* <div className={s.video_container}> */}
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/contact/contact.png"
/>
{/* <video
autoPlay
ref={heroVideoRef}
controls={false}
loop
muted
playsInline={true}
preload="true"
>
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
</video> */}
{/* </div> */}
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/contact/contact.png"
/>
<div className={s.hero__container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/contact/contact.png"
/>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/contact/contact.png"
/>
</div>
<Container className={s['container']}>
<div className={s.body}>
<div>

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

@ -21,64 +21,39 @@
}
}
// .video_container {
// align-self: center;
// position: relative;
// margin-top: tovw(-165px, 'default');
// margin-bottom: tovw(-140px, 'default');
// padding-top: tovw(30px, 'default', 20px);
// width: 82%;
// mix-blend-mode: lighten;
// video {
// @include respond-to('mobile') {
// display: none;
// }
// width: 100%;
// }
// &::after {
// position: absolute;
// top: 0;
// left: 0;
// z-index: 1;
// background: radial-gradient(
// ellipse,
// rgb(3 3 3 / 0) 60%,
// rgb(3 3 3 / 1) 75%,
// rgb(3 3 3 / 1) 100%
// );
// width: 100%;
// height: 100%;
// content: '';
// }
// }
.hero {
.hero__container {
@include respond-to('mobile') {
display: none;
min-height: unset;
}
place-self: center;
width: tovw(1300px, 'default', 700px);
mix-blend-mode: screen;
display: flex;
place-content: center;
min-height: tovw(650px, 'default', 350px);
&__mobile {
.hero {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
width: 135%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
display: none;
}
display: none;
width: tovw(1300px, 'default', 700px);
mix-blend-mode: screen;
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 130px) 0 tovw(50px, 'mobile', 70px) 0;
width: 135%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
display: none;
}
}
}

26
src/components/sections/newsroom/hero/index.tsx
View File

@ -20,18 +20,20 @@ const Hero = ({ data }: Props) => {
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
<div className={s.hero__container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
</div>
<Container className={s['container']}>
<div className={s.body}>
<div>

18
src/components/sections/partners/contact/contact.module.scss
View File

@ -136,14 +136,19 @@
input,
textarea,
select {
width: 100%;
appearance: none;
background-color: unset;
font-size: tovw(24px, 'default', 18px);
padding-bottom: tovw(26px, 'default', 14px);
padding: tovw(16px, 'default', 12px) tovw(12px, 'default', 10px);
margin-top: tovw(20px, 'default', 16px);
border: unset;
border-bottom: tovw(1px, 'default', 1px) solid var(--color-grey-light);
background: rgb(142 142 142 / 0.1);
border: tovw(1px, 'default', 1px) solid transparent;
border-radius: tovw(8px, 'default', 8px);
&:focus {
border: tovw(1px, 'default', 1px) solid var(--color-accent);
background: rgb(0 0 244 / 0.1);
transition: all 250ms;
}
option {
background-color: black;
@ -158,7 +163,8 @@
}
select {
background: url('/images/dropdown.svg') no-repeat 98% 35%;
background: url('/images/dropdown.svg') no-repeat 95% 50%;
background-color: rgb(142 142 142 / 0.1);
background-size: tovw(20px, 'default', 16px);
&:invalid {

22
src/components/sections/products/stack/index.tsx
View File

@ -52,16 +52,18 @@ const Stack = ({ data }: Props) => {
</ol>
</div>
<div>
<img
className={s.stack__img}
src={data?.stackImage?.url}
alt="stack"
/>
<img
className={`${s.stack__img} ${s.stack__img__small}`}
src={data?.stackSvgImg?.url}
alt="stack"
/>
<div className={s.image__container}>
<img
className={s.stack__img}
src={data?.stackImage?.url}
alt="stack"
/>
<img
className={`${s.stack__img} ${s.stack__img__small}`}
src={data?.stackSvgImg?.url}
alt="stack"
/>
</div>
<div className={s.gradient} />
</div>
</Container>

28
src/components/sections/products/stack/stack.module.scss
View File

@ -116,20 +116,28 @@
}
div:last-child {
.stack__img {
margin-top: tovw(293px, 'default', 88px);
width: 100%;
image-rendering: optimizequality;
.image__container {
@media screen and (max-width: 1450px) {
display: none;
min-height: unset;
}
}
.stack__img__small {
display: none;
min-height: tovw(1611px, 'default', 758px);
@media screen and (max-width: 1450px) {
display: unset;
.stack__img {
width: 100%;
margin-top: tovw(293px, 'default', 88px);
image-rendering: optimizequality;
@media screen and (max-width: 1450px) {
display: none;
}
}
.stack__img__small {
display: none;
@media screen and (max-width: 1450px) {
display: unset;
}
}
}