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
$b-color: #000000; // background
$s-color: #f7931a; // secondary
$t-color: #242424; // ternary
$w-color: #ffffff; // white
$bl-color: #000000; // black
$error: #d30012; // error
$hr: #d30012; // hr
$btn-color: #faf1e5; // button
$btnh-color: #f5ece0; // button hover

View File

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

View File

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

View File

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

View File

@ -1,12 +1,36 @@
<template>
<div class="footer">
<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 class="top">
<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>
<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>
</template>

View File

@ -1,13 +1,8 @@
<template>
<div class="banner">
<h4>Get Involved</h4>
<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>
<br/>
<h6 class="donate">Bitcoin (<a href="/img/btc.png" target="_BLANK">QR</a>): bc1qtw78x248kzq547w0zkm790u0yhgjkerxahpm9e</h6>
</div>
<div class="social">
</div>
</div>
</template>