updated footer & banner bg

main
Ryan Moon 2023-09-02 02:22:13 -04:00
parent 8cfd01b95d
commit 7bd3ec0b74
7 changed files with 128 additions and 64 deletions

View File

@ -5,11 +5,11 @@ $p-font: 'Titillium Web', sans-serif;
// Primary Colors // Primary Colors
$b-color: #000000; // background $b-color: #000000; // background
$s-color: #f7931a; // secondary $s-color: #f7931a; // secondary
$t-color: #242424; // ternary
$w-color: #ffffff; // white $w-color: #ffffff; // white
$bl-color: #000000; // black $bl-color: #000000; // black
$error: #d30012; // error $error: #d30012; // error
$hr: #d30012; // hr
$btn-color: #faf1e5; // button $btn-color: #faf1e5; // button
$btnh-color: #f5ece0; // button hover $btnh-color: #f5ece0; // button hover

View File

@ -1,55 +1,98 @@
.footer { .footer {
max-width: 60rem; padding: 2rem 0 0 0;
height: 2rem;
margin: .5rem auto;
padding: 0 4rem;
.who { .top {
float: left; display: grid;
color: $f-color; grid-template-columns: 1fr 1fr 1fr 2.5fr ;
font-size: .895rem; max-width: 60rem;
padding: 2rem 4rem;
margin: 0 auto;
ul {
list-style-type: none;
white-space:nowrap;
padding: 0;
margin: 0;
li {
font-size: .895rem;
margin: .25rem 0;
}
a { li h5 { font-size: 1rem }
color: $link; li h6 {
margin: 0 2px; font-size: .895rem;
font-weight: 400;
}
&:hover { text-decoration: underline } a {
} color: $link;
&:hover { text-decoration: underline }
.icon-btc-b { }
position: relative;
top: .25rem;
font-size: 1.1rem;
} }
} }
.links { hr {
float: right; height: 1px;
list-style-type: none; border: none;
white-space:nowrap; color: $t-color;
padding: 0; background-color: $t-color;
margin: 0; margin: 0;
}
li, li p { .bottom {
display:inline; max-width: 60rem;
font-size: .895rem; height: 5.5rem;
} padding: 2rem 4rem;
margin: 0 auto;
a { .who {
color: $link; float: left;
margin: 0 .5rem;
&:hover { text-decoration: underline }
}
p {
color: $f-color; color: $f-color;
margin: 0 0 0 .5rem; font-size: .895rem;
a {
color: $link;
margin: 0 2px;
&:hover { text-decoration: underline }
}
.icon-btc-b {
position: relative;
top: .25rem;
font-size: 1.1rem;
}
} }
.copy .icon-copyright { ul {
font-size: .7rem; float: right;
opacity: .9; list-style-type: none;
white-space:nowrap;
padding: 0;
margin: 0;
li, li p {
display:inline;
font-size: .895rem;
}
a {
color: $link;
margin: 0 .5rem;
&:hover { text-decoration: underline }
}
p {
color: $f-color;
margin: 0 0 0 .5rem;
}
.copy .icon-copyright {
font-size: .7rem;
opacity: .9;
}
} }
} }
} }

View File

@ -8,7 +8,7 @@ body {
main { main {
max-width: 60rem; max-width: 60rem;
min-height: calc(100vh - 224px); min-height: calc(100vh - 438px);
margin: 0 auto; margin: 0 auto;
padding: 0 4rem; padding: 0 4rem;
} }

View File

@ -1,6 +1,6 @@
.lost { .lost {
position: relative; position: relative;
top: calc(50vh - 280px); top: calc(50vh - 320px);
margin: auto; margin: auto;
text-align: center; text-align: center;

View File

@ -1,19 +1,21 @@
.banner { .banner {
display: grid; display: grid;
grid-template-columns: 2.5fr 1fr 1fr; grid-template-columns: 1fr 2fr;
max-width: 60rem; max-width: 60rem;
margin: 0 auto; background: $t-color;
padding: 2rem 0 8rem 0; margin: 2rem auto 6rem auto;
padding: 2rem 2rem 2.25rem 2rem;
h4 { h4 {
margin: 1.5rem 0; margin: 0 0 1.5rem 0;
} }
h6 { h6 {
color: $f-color; color: $f-color;
font-size: 1rem; font-size: 1.1rem;
font-weight: 500; font-weight: 400;
line-height: 1.4rem; line-height: 1.65rem;
padding: .5rem 2rem 0 0;
} }
} }

View File

@ -1,12 +1,36 @@
<template> <template>
<div class="footer"> <div class="footer">
<div class="who"> <div class="top">
<p>Made with <span class="icon-btc-b"></span> by <NuxtLink to="https://ryanmoon.com" target="_blank">Ryan Moon</NuxtLink></p> <ul class="info">
<li><h5>Resources</h5></li>
<li><NuxtLink to="/about">About Us</NuxtLink></li>
<li><NuxtLink to="/#guides">Bitcoin Guides</NuxtLink></li>
</ul>
<ul class="community">
<li><h5>Community</h5></li>
<li><NuxtLink to="/workshop">Workshops</NuxtLink></li>
<li><NuxtLink to="/forms">Suggestions</NuxtLink></li>
</ul>
<ul class="social">
<li><h5>Follow Us</h5></li>
<li><NuxtLink to="https://twitter.com/UpstateNYBTC" target="_BLANK">Twitter</NuxtLink></li>
<li><NuxtLink to="https://www.meetup.com/capitalregionbitcoinnetwork" target="_BLANK">Meetup</NuxtLink></li>
</ul>
<ul class="donate">
<li><h5>Donate</h5></li>
<li><h6>Bitcoin: bc1qtw78x248kzq547w0zkm790u0yhgjkerxahpm9e</h6></li>
</ul>
</div>
<hr/>
<div class="bottom">
<div class="who">
<p>Made with <span class="icon-btc-b"></span> by <NuxtLink to="https://ryanmoon.com" target="_blank">Ryan Moon</NuxtLink></p>
</div>
<ul>
<li><NuxtLink to="/privacy">Privacy Policy</NuxtLink></li>
<li><NuxtLink to="/terms">Terms of Service</NuxtLink></li>
<li><NuxtLink to="https://git.inspin.co/ryan/crbtc.org" target="_blank">Source Code</NuxtLink></li>
</ul>
</div> </div>
<ul class="links">
<li><NuxtLink to="/privacy">Privacy Policy</NuxtLink></li>
<li><NuxtLink to="/terms">Terms of Service</NuxtLink></li>
<li><NuxtLink to="https://git.inspin.co/ryan/crbtc.org" target="_blank">Source Code</NuxtLink></li>
</ul>
</div> </div>
</template> </template>

View File

@ -1,13 +1,8 @@
<template> <template>
<div class="banner"> <div class="banner">
<h4>Get Involved</h4>
<div class="msg"> <div class="msg">
<h4>Get Involved</h4>
<h6>Come learn and talk about Bitcoin. Meet new people, ask questions, suggest topics, or just come and hang out.</h6> <h6>Come learn and talk about Bitcoin. Meet new people, ask questions, suggest topics, or just come and hang out.</h6>
<br/>
<h6 class="donate">Bitcoin (<a href="/img/btc.png" target="_BLANK">QR</a>): bc1qtw78x248kzq547w0zkm790u0yhgjkerxahpm9e</h6>
</div>
<div class="social">
</div> </div>
</div> </div>
</template> </template>