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

refactor: home page is fully tailwind

This commit is contained in:
Juan Di Toro 2023-08-14 12:41:07 +02:00
parent 9d2d563139
commit 994278f77d
6 changed files with 66 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/Home/PoweredBy/PoweredBy.astro
View File

@ -1,21 +1,38 @@
---
import './PoweredBy.scss';
import svgSia from '/src/assets/icons/sia.svg?raw';
import svgHns from '/src/assets/icons/hns.svg?raw';
import svgOsi from '/src/assets/icons/osi.svg?raw';
import svgSia from "/src/assets/icons/sia.svg?raw";
import svgHns from "/src/assets/icons/hns.svg?raw";
import svgOsi from "/src/assets/icons/osi.svg?raw";
---
<section id="powered-by">
<h2>Powered By</h2>
<div>
<a href="https://sia.tech" title="Sia" class="sia-logo">
<section
id="powered-by"
class="flex flex-col md:flex-row gap-16 items-center justify-center"
>
<h2
class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
>
Powered By
</h2>
<div class="flex flex-row items-center gap-x-10">
<a
href="https://sia.tech"
title="Sia"
class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
>
<Fragment set:html={svgSia} />
</a>
<a href="https://handshake.org" title="Handshake" class="hns-logo">
<a
href="https://handshake.org"
title="Handshake"
class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
>
<Fragment set:html={svgHns} />
</a>
<a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
<a
href="https://opensource.org/osd/"
title="Open Source Initiative"
class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
>
<Fragment set:html={svgOsi} />
</a>
</div>

54
src/components/Home/PoweredBy/PoweredBy.scss
View File

@ -1,54 +0,0 @@
@import "/src/styles/mixins.scss";
@import "/src/styles/vars.scss";
#powered-by {
display: flex;
align-items: center;
justify-content: center;
gap: 4em;
margin: 12em 7.5%;
@media screen and (max-width: 47.99999rem) {
flex-direction: column;
gap: 2.5em;
}
div {
display: flex;
align-items: center;
gap: 2.5em;
}
h2 {
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: $color-aquamarine;
@media screen and (min-width: 48rem) {
margin-top: 0.75em;
}
}
a {
padding: 0.5em;
color: $color-alto;
&:hover {
color: $color-white;
}
}
.sia-logo svg {
@include fluid-width(5.5rem);
}
.hns-logo svg {
@include fluid-width(4.5rem);
}
.osi-logo svg {
@include fluid-width(4.5rem);
}
}

42
src/components/Home/Socials/Socials.astro
View File

@ -1,25 +1,41 @@
---
import './Socials.scss';
import svgGit from '/src/assets/icons/git.svg?raw';
import svgGithub from '/src/assets/icons/github.svg?raw';
import svgDiscord from '/src/assets/icons/discord.svg?raw';
import svgTwitter from '/src/assets/icons/twitter.svg?raw';
import svgGit from "/src/assets/icons/git.svg?raw";
import svgGithub from "/src/assets/icons/github.svg?raw";
import svgDiscord from "/src/assets/icons/discord.svg?raw";
import svgTwitter from "/src/assets/icons/twitter.svg?raw";
---
<section id="socials">
<h2>Get in touch</h2>
<div>
<a href="https://git.lumeweb.com" title="Git" class="git-logo">
<section id="socials" class="flex flex-col items-center">
<h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
Get in touch
</h2>
<div class="flex flex-row items-center justify-center gap-8 mt-10">
<a
href="https://git.lumeweb.com"
title="Git"
class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
>
<Fragment set:html={svgGit} />
</a>
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
<a
href="https://github.com/LumeWeb"
title="GitHub"
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
>
<Fragment set:html={svgGithub} />
</a>
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
<a
href="https://discord.gg/qpC8ADp3rS"
title="Discord"
class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
>
<Fragment set:html={svgDiscord} />
</a>
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
<a
href="https://twitter.com/lumeweb3"
title="Twitter"
class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
>
<Fragment set:html={svgTwitter} />
</a>
</div>

50
src/components/Home/Socials/Socials.scss
View File

@ -1,50 +0,0 @@
@import "/src/styles/mixins.scss";
@import "/src/styles/vars.scss";
#socials {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3em;
margin: 12em 7.5% 8em;
div {
display: flex;
align-items: center;
gap: 2.5em;
}
h2 {
@include fluid-font-size(1.5625rem);
font-weight: 700;
line-height: 100%;
text-transform: uppercase;
color: $color-aquamarine;
}
a {
padding: 0.5em;
color: $color-alto;
&:hover {
color: $color-white;
}
}
.github-logo svg {
@include fluid-width(3.5rem);
}
.git-logo svg {
@include fluid-width(3.5rem);
}
.discord-logo svg {
@include fluid-width(3.5rem);
}
.twitter-logo svg {
@include fluid-width(3.5rem);
}
}

17
src/styles/global.scss
View File

@ -25,14 +25,6 @@
src: url("/fonts/JetBrainsMono-Bold.woff2") format('woff2');
}
@font-face {
font-family: 'IBM Plex Sans Devanagari';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/fonts/ibm-plex-sans-devanagari.woff2") format('woff2');
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@ -66,15 +58,6 @@ body {
}
}
main {
@include fluid-font-size(0.625rem);
flex-grow: 1;
}
a, button {
transition: color $transition-duration;
}
.tilted-bg {
position: relative;

1
src/styles/vars.scss
View File

@ -6,7 +6,6 @@ $color-aquamarine: #7afcbb;
$color-cloud: #c7c7c7;
$color-alto: #d9d9d9;
$font-family-ibm-plex-sans-devanagari: "IBM Plex Sans Devanagari", sans-serif;
$font-family-jaldi: "Jaldi", sans-serif;
$font-family-jetbrains-mono: "JetBrains Mono", monospace;