refactor: update layout community icons
This commit is contained in:
parent
220398093e
commit
9fe05aa832
|
@ -11,6 +11,12 @@ import './JoinCommunity.scss';
|
|||
Web3 gives people control over their data, privacy, and ownership.
|
||||
</p>
|
||||
</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>
|
||||
<a href="#" title="GitHub" class="github-logo">
|
||||
<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
|
||||
|
@ -32,12 +38,4 @@ import './JoinCommunity.scss';
|
|||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
|
|
|
@ -2,79 +2,83 @@
|
|||
@import "/src/styles/vars.scss";
|
||||
|
||||
#join-community {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2em;
|
||||
padding: 5em 7.5%;
|
||||
background: $color-aquamarine;
|
||||
color: $color-blue-charcoal-2;
|
||||
@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;
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 2em;
|
||||
padding: 5em 7.5%;
|
||||
background: $color-aquamarine;
|
||||
color: $color-blue-charcoal-2;
|
||||
@include fluid-font-size(0.625rem);
|
||||
|
||||
div {
|
||||
flex-grow: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
&:first-child {
|
||||
flex-grow: 10;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.25em;
|
||||
@include fluid-font-size(2rem);
|
||||
font-weight: 700;
|
||||
line-height: 153%;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
@media screen and (max-width: 56rem) {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
div:first-child {
|
||||
flex-basis: 100%;
|
||||
margin-bottom: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #0B3F48;
|
||||
|
||||
&:hover {
|
||||
color: inherit;
|
||||
div {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.github-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
h2 {
|
||||
margin-bottom: 0.25em;
|
||||
@include fluid-font-size(2rem);
|
||||
font-weight: 700;
|
||||
line-height: 153%;
|
||||
text-transform: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.discord-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
p {
|
||||
font-family: $font-family-jaldi;
|
||||
@include fluid-font-size(1.5rem);
|
||||
line-height: 157%;
|
||||
}
|
||||
|
||||
.twitter-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
color: #0B3F48;
|
||||
|
||||
.facebook-logo svg {
|
||||
@include fluid-width(3.625rem);
|
||||
}
|
||||
&:hover {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue