Skip to content

Commit

Permalink
New footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@mojowen
mojowen committed Oct 12, 2023
1 parent 49df74b commit eb4aa7a
Show file tree
Hide file tree
Showing 8 changed files with 140 additions and 84 deletions.
2 changes: 1 addition & 1 deletion public/images/icons/facebook.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/images/icons/instagram.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/images/icons/twitter.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
79 changes: 55 additions & 24 deletions src/components/app-root/app-root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,48 +166,65 @@
}

footer {
background: $blue;
border-top: 5px solid $red;
color: $white;
padding: 20px 0;
background: $light-red;
color: $red;

ui-main-content .container {
padding-top: 0;
}
a:not(.button) {
color: $white;
color: $red;
border-color: transparent;

&:hover,
&:active,
&:focus {
color: darken($white, 10%);
color: darken($red, 10%);
border-color: transparent;
}
}

.disclaimer {
font-size: 14px;
font-style: italic;
border-bottom: 3px solid #fff;
padding-bottom: 50px;
font-size: 12px;
color: $gray4;
}

.footer-nav {
padding: 20px 0 40px 0;
display: flex;
flex-direction: column;
border-top: 3px solid $white;

@media ($tablet) {
flex-direction: row;
display: flex;
.right {
width: 30%;
}
.left {
width: 70%;
}
}

padding: 20px 16px;

ul {
width: 100%;
display: flex;
list-style-type: none;
padding: 0 40px 0 0;
flex-grow: 1;
flex-direction: row;
justify-content: left;
padding: 0;
margin: 0;

li {
font-size: 18px;

&:before {
content: "|";
padding-right: 6px;
font-weight: lighter;
opacity: 0.25;
}
&:first-child:before {
content: "";
display: none;
}
padding-right: 6px;
font-size: 12px;
a:not(.button) {
text-decoration: none;
border-color: transparent;
Expand All @@ -217,23 +234,37 @@ footer {
}
}
}
&.major {
margin-bottom: 30px;
li {
font-size: 16px;
}
}
}

.social {
margin: 30px 0;
padding: 0;
text-align: left;
text-align: right;

@media ($tablet) {
margin: 0;
justify-content: right;
}

@media ($tablet) {
text-align: right;
}

li {
display: inline-block;
margin: 0 10px;

margin: 0 4px;
&:before {
content: "";
}
.icon {
height: 40px;
width: 40px;
height: 32px;
width: 32px;
}
}
}
Expand Down
108 changes: 56 additions & 52 deletions src/components/app-root/app-root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,59 +92,63 @@ export class AppRoot {

<footer>
<ui-main-content background="none">
<p class="disclaimer">
Pizza to the Polls is a nonpartisan, nonprofit organization whose purposes are (i) to educate individuals about America's institutions, citizens' civic duties and
opportunities, and (ii) to increase turnout and ensure all people are well-informed about their civic obligations.
</p>
<div class="footer-nav">
<ul>
<li>
<stencil-route-link url="/about">About</stencil-route-link>
</li>
<li>
<stencil-route-link url="/partners">Partners</stencil-route-link>
</li>
<li>
<stencil-route-link url="/press">Press</stencil-route-link>
</li>
<li>
<stencil-route-link url="/contact">Contact Us</stencil-route-link>
</li>
</ul>
<ul>
<li>
<stencil-route-link url="/trucks">Food Trucks</stencil-route-link>
</li>
<li>
<stencil-route-link url="/on-demand">On Demand</stencil-route-link>
</li>
<li>
<stencil-route-link url="/vax-and-snacks">Vax and Snacks</stencil-route-link>
</li>
<li>
<stencil-route-link url="/covid">COVID safety</stencil-route-link>
</li>
<li>
<stencil-route-link url="/privacy">Privacy Policy</stencil-route-link>
</li>
</ul>
<ul class="social">
<li>
<a class="twitter" href="https://twitter.com/pizzatothepolls" target="blank">
<img class="icon" alt="Twitter" src="/images/icons/twitter.svg" />
</a>
</li>
<li>
<a class="facebook" href="https://facebook.com/pizzatothepolls" target="blank">
<img class="icon" alt="Facebook" src="/images/icons/facebook.svg" />
</a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com/pizzatothepolls/" target="blank">
<img class="icon" alt="Instagram" src="/images/icons/instagram.svg" />
</a>
</li>
</ul>
<div class="left">
<ul>
<li>
<stencil-route-link url="/about">About</stencil-route-link>
</li>
<li>
<stencil-route-link url="/partners">Partners</stencil-route-link>
</li>
<li>
<stencil-route-link url="/press">Press</stencil-route-link>
</li>
<li>
<stencil-route-link url="/contact">Contact Us</stencil-route-link>
</li>
</ul>
<ul>
<li>
<stencil-route-link url="/trucks">Food Trucks</stencil-route-link>
</li>
<li>
<stencil-route-link url="/on-demand">On Demand</stencil-route-link>
</li>
<li>
<stencil-route-link url="/vax-and-snacks">Vax and Snacks</stencil-route-link>
</li>
<li>
<stencil-route-link url="/covid">COVID safety</stencil-route-link>
</li>
<li>
<stencil-route-link url="/privacy">Privacy Policy</stencil-route-link>
</li>
</ul>
<p class="disclaimer">
Pizza to the Polls is a nonpartisan, nonprofit organization whose purposes are (i) to educate individuals about America's institutions, citizens' civic duties and
opportunities, and (ii) to increase turnout and ensure all people are well-informed about their civic obligations.
</p>
</div>
<div class="right">
<ul class="social">
<li>
<a class="twitter" href="https://twitter.com/pizzatothepolls" target="blank">
<img class="icon" alt="Twitter" src="/images/icons/twitter.svg" />
</a>
</li>
<li>
<a class="facebook" href="https://facebook.com/pizzatothepolls" target="blank">
<img class="icon" alt="Facebook" src="/images/icons/facebook.svg" />
</a>
</li>
<li>
<a class="instagram" href="https://www.instagram.com/pizzatothepolls/" target="blank">
<img class="icon" alt="Instagram" src="/images/icons/instagram.svg" />
</a>
</li>
</ul>
</div>
</div>
</ui-main-content>
</footer>
Expand Down
26 changes: 22 additions & 4 deletions src/components/page-home/page-home.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,6 +210,11 @@ page-home {
}

.donate {
display: none;
@media ($tablet) {
display: none;
}

.container {
background: $light-red;
display: flex;
Expand Down Expand Up @@ -278,20 +283,33 @@ page-home {
.container {
background-color: $red;
display: flex;
@media ($tablet) {
text-align: left;
}
flex-wrap: wrap;
text-align: center;
align-items: center;
justify-content: space-around;
padding: 30px;
}
h1 {
text-transform: uppercase;
margin: -4px 0 0 0;
font-size: 42px;
@media ($tablet) {
font-size: 42px;
}
}
.newsletter-text {
width: 50%;

form {
width: 84%;
}
.newsletter-text,
form {
width: 50%;
margin: 4px 0;
@media ($tablet) {
width: 50%;
margin: 0;
}
}

.email-signup-input {
Expand Down
1 change: 0 additions & 1 deletion src/components/ui-main-content/ui-main-content.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ ui-main-content {
}

.container {
max-width: 800px;
padding: 30px 20px 0 20px;
&.full-bleed {
padding: 0;
Expand Down
4 changes: 4 additions & 0 deletions styles/include/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,10 @@ $button-colors: (
$white,
$red,
),
"light-red": (
$red,
$light-red,
),
"yellow": (
$blue,
$yellow,
Expand Down

0 comments on commit eb4aa7a

Please sign in to comment.