refactor: home page is fully tailwind
This commit is contained in:
Juan Di Toro
parent
9d2d563139
commit
994278f77d
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +1,42 @@
|
|||
---
|
||||
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">
|
||||
<Fragment set:html={svgGit} />
|
||||
</a>
|
||||
<a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
|
||||
<Fragment set:html={svgGithub} />
|
||||
</a>
|
||||
<a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
|
||||
<Fragment set:html={svgDiscord} />
|
||||
</a>
|
||||
<a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
|
||||
<Fragment set:html={svgTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
<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="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="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="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
|
||||
>
|
||||
<Fragment set:html={svgTwitter} />
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue