Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-09-11 18:37:33 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add Bandwidth

Browse Source
This commit is contained in:
Ash Monty
2022-09-08 17:52:59 +02:00
parent 653136c7ed
commit 19e711fc8e
3 changed files with 55 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/assets/css/partials/footer.css
View File

@@ -45,11 +45,15 @@ footer a:hover {
color: var(--text-shade-3);
text-decoration: underline;
}
footer div.discord-server-card-wrapper {
z-index: 2;
justify-self: end;
}
footer div.discord-server-card {
position: relative;
background: var(--bg-shade-2);
border-radius: 12px;
padding: 30px 90px 30px 36px;
justify-self: end;
}
footer div.discord-server-card h1 {
font-size: 25px;
@@ -78,6 +82,17 @@ footer div.discord-server-card svg {
stroke-width: 3px;
margin-right: 4px;
}
footer div.discord-server-card::after {
content: "";
position: absolute;
top: -120px;
right: 0px;
width: 192px;
height: 192px;
background: no-repeat center/cover url(/assets/images/bandwidth.png);
transform: rotate(-19deg);
z-index: -1;
}
@media screen and (max-width: 900px) {
footer {
@@ -88,11 +103,21 @@ footer div.discord-server-card svg {
footer div {
justify-self: center;
}
footer div.discord-server-card {
footer div.discord-server-card-wrapper {
grid-column: 1 / span 4;
width: calc(100% - 126px);
width: 100%;
justify-self: normal;
}
footer div.discord-server-card::after {
bottom: -72px;
top: unset;
z-index: 0;
}
footer div.discord-server-card {
box-sizing: border-box;
width: 100%;
overflow: hidden;
}
}
@media screen and (max-width: 580px) {
@@ -103,9 +128,22 @@ footer div.discord-server-card svg {
footer div {
justify-self: start;
}
footer div.discord-server-card {
footer div.discord-server-card-wrapper {
grid-column: 1 / span 1;
}
footer div.discord-server-card {
padding: 30px;
width: calc(100% - 60px);
overflow: visible;
}
footer div.discord-server-card::after {
bottom: unset;
top: -120px;
z-index: -1;
}
}
@media screen and (max-width: 320px) {
footer div.discord-server-card::after {
display: none;
}
}

BIN
public/assets/images/bandwidth.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

22
views/partials/footer.handlebars
View File

@@ -41,15 +41,17 @@
<a href="/blog">{{ localeHelper locale "nav.blog" }}</a>
<a href="/account">{{ localeHelper locale "nav.account" }}</a>
</div>
<div class="discord-server-card">
<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
<a href="https://invite.gg/pretendo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
{{ localeHelper locale "footer.widget.button" }}
</a>
<div class="discord-server-card-wrapper">
<div class="discord-server-card">
<h1>{{ localeHelper locale "footer.widget.captions.0" }}</h1>
<h2>{{ localeHelper locale "footer.widget.captions.1" }}</h2>
<a href="https://invite.gg/pretendo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
{{ localeHelper locale "footer.widget.button" }}
</a>
</div>
</div>
</footer>