updated footer & banner bg
parent
8cfd01b95d
commit
7bd3ec0b74
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,8 +1,50 @@
|
|||
.footer {
|
||||
padding: 2rem 0 0 0;
|
||||
|
||||
.top {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 2.5fr ;
|
||||
max-width: 60rem;
|
||||
height: 2rem;
|
||||
margin: .5rem auto;
|
||||
padding: 0 4rem;
|
||||
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;
|
||||
}
|
||||
|
||||
li h5 { font-size: 1rem }
|
||||
li h6 {
|
||||
font-size: .895rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $link;
|
||||
&:hover { text-decoration: underline }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
border: none;
|
||||
color: $t-color;
|
||||
background-color: $t-color;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
max-width: 60rem;
|
||||
height: 5.5rem;
|
||||
padding: 2rem 4rem;
|
||||
margin: 0 auto;
|
||||
|
||||
.who {
|
||||
float: left;
|
||||
|
|
@ -23,7 +65,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
ul {
|
||||
float: right;
|
||||
list-style-type: none;
|
||||
white-space:nowrap;
|
||||
|
|
@ -52,6 +94,7 @@
|
|||
opacity: .9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.lost {
|
||||
position: relative;
|
||||
top: calc(50vh - 280px);
|
||||
top: calc(50vh - 320px);
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,36 @@
|
|||
<template>
|
||||
<div class="footer">
|
||||
<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 class="links">
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -1,13 +1,8 @@
|
|||
<template>
|
||||
<div class="banner">
|
||||
<div class="msg">
|
||||
<h4>Get Involved</h4>
|
||||
<div class="msg">
|
||||
<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>
|
||||
Loading…
Reference in New Issue