LumeWeb
/
lumeweb.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

-> tailwind

This commit is contained in:
roryjshelton 2023-05-05 08:28:04 +02:00
parent 67d490c385
commit f422b72ffb
7 changed files with 27 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/P1/CTO/CTO.astro
View File

@ -2,11 +2,13 @@
import "./CtoStyles.css";
---
<div class="cto-container">
<div class="cto-container w-full transition-[0.5s];">
<div class="cto-geometric-bg">
<div class="cto-shadow">
<div class="cto-shadow w-full transition-[0.5s] rounded-[72.5px];">
<span id="cto"></span>
<div class="shadowdrop">
<div
class="shadowdrop shadow-[0px_4px_4px_#00000040] w-full transition-[0.5s] rounded-[72.5px];"
>
<h2
class="text-[calc(15px_+_(25_-_10)_*_((100vw_-_300px)_/_(1600_-_300)))] text-[color:var(--aquamarine)] uppercase font-bold"
>
@ -27,8 +29,8 @@ import "./CtoStyles.css";
</h4>
<div class="cto-mini-bio">
<div class="cto-info">
<h5 class="cto-name">Derrick Hammer</h5>
<h6 class="cto-title">CTO</h6>
<h5>Derrick Hammer</h5>
<h6>CTO</h6>
</div>
</div>
</div>

33
src/components/P1/CTO/CTOStyles.css
View File

@ -1,15 +1,5 @@
.cto-container {
width: 100%;
transition: 0.5s;
}
.cto-bp {
padding-right: 0%;
transition: 0.5s;
}
.cto-geometric-bg {
background-image: url(../../../assets/geometric-bg.webp);
background-image: url('../../../assets/geometric-bg.webp');
background-position: 75vh -2vh;
background-size: contain;
background-repeat: no-repeat;
@ -19,19 +9,6 @@
transition: 0.5s;
}
.cto-shadow {
border-radius: 72.5px;
width: 100%;
transition: 0.5s;
}
.shadowdrop {
border-radius: 72.5px;
box-shadow: 0px 4px 4px #00000040;
width: 100%;
transition: 0.5s;
}
.cto-mini-bio {
height: 96px;
width: 100%;
@ -40,7 +17,7 @@
justify-content: center;
flex-direction: column;
background-repeat: no-repeat;
background-image: url(../../../assets/cto-avatar.webp);
background-image: url('../../../assets/cto-avatar.webp');
margin-top: 3vh;
z-index: 999 !important;
}
@ -56,7 +33,7 @@
transition: 0.5s;
}
@media screen and (min-width: 0px) and (max-width: 600px) {
@media screen and (width >0px) and (width <=600px) {
.cto-container {
margin-left: -3em;
background-position: 100px 50px;
@ -74,7 +51,7 @@
.shadowdrop {
border-radius: 72.5px;
box-shadow: 0px 4px 4px #00000040;
box-shadow: 4px 4px #00000040;
margin-left: 12%;
transition: 0.5s;
justify-content: center;
@ -88,7 +65,7 @@
}
}
@media screen and (min-width: 601px) {
@media screen and (width >=601px) {
.cto-container {
background-position: 100px 50px;
background-size: cover;

4
src/components/P1/Footer/FooterStyles.css
View File

@ -1,5 +1,5 @@
.footer-logo {
background-image: url(../../../assets/lume-logo.webp);
background-image: url('../../../assets/lume-logo.webp');
background-repeat: no-repeat;
background-size: contain;
margin-left: 5px;
@ -13,7 +13,7 @@
}
.footer-email {
background-image: url(../../../assets/email-icon.webp);
background-image: url('../../../assets/email-icon.webp');
background-repeat: no-repeat;
background-size: contain;
background-position: center;

2
src/components/P1/Grid/Grid.astro
View File

@ -1,6 +1,4 @@
---
import React from "react";
import Grid from "dynamic-react-grid";
import "./GridStyles.css";
---

2
src/components/P1/Message/MessageStyles.css
View File

@ -12,7 +12,7 @@
.message-header {
color: var(--blue-charcoal-2);
font-family: var(--font-family-jetbrains_mono);
font-family: var(--font-family-jetbrains-mono);
font-size: calc(25px + (32 - 24) * ((100vw - 300px) / (1600 - 300)));
font-weight: 700;
line-height: 2em;

12
src/components/P1/Socials/Socials.astro
View File

@ -2,12 +2,14 @@
import "./SocialsStyles.css";
---
<div class="centered">
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
<div>
<h2 class="centered">get in touch</h2>
<div class="centered">
<div class="socials-wrapper">
<div class="gitHub"></div>
<h2 class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
get in touch
</h2>
<div class="grid place-items-center overflow-hidden h-auto mb-[1.5vh];">
<div class="flex ml-[-5%] mb-[5vh] pb-[5vh]">
<div class="github"></div>
<div class="discord"></div>
<div class="twitter"></div>
<div class="fb"></div>

10
src/components/P1/Socials/SocialsStyles.css
View File

@ -5,8 +5,8 @@
margin-bottom: 5vh;
}
.gitHub {
background-image: url(../../../assets/github-logo.webp);
.github {
background-image: url('../../../assets/github-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
@ -15,7 +15,7 @@
}
.discord {
background-image: url(../../../assets/discord-logo.webp);
background-image: url('../../../assets/discord-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
@ -26,7 +26,7 @@
}
.twitter {
background-image: url(../../../assets/twitter-logo.webp);
background-image: url('../../../assets/twitter-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;
@ -36,7 +36,7 @@
}
.fb {
background-image: url(../../../assets/fb-logo.webp);
background-image: url('../../../assets/fb-logo.webp');
background-position: 50% 50%;
background-size: contain;
background-repeat: no-repeat;