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

refactor: update layout community icons

This commit is contained in:
Derrick Hammer 2023-06-17 21:38:56 -04:00
parent 220398093e
commit 9fe05aa832
2 changed files with 74 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Layout/JoinCommunity/JoinCommunity.astro
View File

@ -11,6 +11,12 @@ import './JoinCommunity.scss';
Web3 gives people control over their data, privacy, and ownership. Web3 gives people control over their data, privacy, and ownership.
</p> </p>
</div> </div>
<div>
<a href="#" title="GitHub" class="git-logo">
<svg xmlns="http://www.w3.org/2000/svg" width="92pt" height="92pt" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#100f0d;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg>
</a>
</div>
<div> <div>
<a href="#" title="GitHub" class="github-logo"> <a href="#" title="GitHub" class="github-logo">
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"> <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
@ -32,12 +38,4 @@ import './JoinCommunity.scss';
</svg> </svg>
</a> </a>
</div> </div>
<div>
<a href="#" title="Facebook" class="facebook-logo">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<path fill="currentcolor" d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"/>
<path fill="#7afcbb" d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"/>
</svg>
</a>
</div>
</section> </section>

132
src/components/Layout/JoinCommunity/JoinCommunity.scss
View File

@ -2,79 +2,83 @@
@import "/src/styles/vars.scss"; @import "/src/styles/vars.scss";
#join-community { #join-community {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 2em; gap: 2em;
padding: 5em 7.5%; padding: 5em 7.5%;
background: $color-aquamarine; background: $color-aquamarine;
color: $color-blue-charcoal-2; color: $color-blue-charcoal-2;
@include fluid-font-size(0.625rem); @include fluid-font-size(0.625rem);
div {
flex-grow: 1;
&:first-child {
flex-grow: 10;
}
&:last-child {
flex-grow: 0;
}
}
@media screen and (max-width: 56rem) {
flex-wrap: wrap;
justify-content: center;
div:first-child {
flex-basis: 100%;
margin-bottom: 2em;
text-align: center;
}
div { div {
flex-grow: 0; flex-grow: 1;
&:first-child {
flex-grow: 10;
}
&:last-child {
flex-grow: 0;
}
} }
}
h2 { @media screen and (max-width: 56rem) {
margin-bottom: 0.25em; flex-wrap: wrap;
@include fluid-font-size(2rem); justify-content: center;
font-weight: 700;
line-height: 153%;
text-transform: none;
color: inherit;
}
p { div:first-child {
font-family: $font-family-jaldi; flex-basis: 100%;
@include fluid-font-size(1.5rem); margin-bottom: 2em;
line-height: 157%; text-align: center;
} }
a { div {
display: block; flex-grow: 0;
color: #0B3F48; }
&:hover {
color: inherit;
} }
}
.github-logo svg { h2 {
@include fluid-width(3.625rem); margin-bottom: 0.25em;
} @include fluid-font-size(2rem);
font-weight: 700;
line-height: 153%;
text-transform: none;
color: inherit;
}
.discord-logo svg { p {
@include fluid-width(3.625rem); font-family: $font-family-jaldi;
} @include fluid-font-size(1.5rem);
line-height: 157%;
}
.twitter-logo svg { a {
@include fluid-width(3.625rem); display: block;
} color: #0B3F48;
.facebook-logo svg { &:hover {
@include fluid-width(3.625rem); color: inherit;
} }
}
.github-logo svg {
@include fluid-width(3.625rem);
}
.git-logo svg {
@include fluid-width(3.625rem);
}
.discord-logo svg {
@include fluid-width(3.625rem);
}
.twitter-logo svg {
@include fluid-width(3.625rem);
}
.facebook-logo svg {
@include fluid-width(3.625rem);
}
} }