Skip to content

Commit 278a10a

Browse files
author
Salma Alam-Naylor
committed
Adding lovely things to the footer
1 parent 2addfde commit 278a10a

File tree

4 files changed

+153
-69
lines changed

4 files changed

+153
-69
lines changed

‎apps/fretonator-web/src/app/common/footer/footer.component.html

Lines changed: 67 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,75 @@
11
<footer class="footer">
2-
<h6 class="footer__creditsTitle">Fretonator is open source</h6>
3-
<p class="footer__thanksCopy">
4-
Thank you to the following generous contributors:
5-
</p>
6-
<ul class="footer__creditsList">
7-
<li class="footer__creditsListItem">
8-
<a
9-
href="http://drozar.io"
10-
rel="nofollow noopener noreferrer"
11-
target="_blank"
12-
class="footer__creditsListItemLink"
13-
>
14-
Jacob D'Rozario
15-
</a>
16-
- design & UX
17-
</li>
18-
<li class="footer__creditsListItem">
19-
<a
20-
href="https://github.com/geometricpanda"
21-
rel="nofollow noopener noreferrer"
22-
target="_blank"
23-
class="footer__creditsListItemLink"
24-
>Jim Drury</a
25-
>
26-
- all things Angular
27-
</li>
28-
<li class="footer__creditsListItem">
2+
<div class="footer__inner">
3+
4+
<div class="footer__leftColumn">
5+
6+
<h6 class="footer__sectionTitle">
7+
Fretonator is open source
8+
</h6>
9+
<p class="footer__copy">
10+
Thank you to the following generous contributors:
11+
</p>
12+
<ul class="footer__list">
13+
<li class="footer__listItem">
14+
<a
15+
href="http://drozar.io"
16+
rel="nofollow noopener noreferrer"
17+
target="_blank"
18+
class="footer__listItemLink"
19+
>
20+
Jacob D'Rozario
21+
</a>
22+
- design & UX
23+
</li>
24+
<li class="footer__listItem">
25+
<a
26+
href="https://github.com/geometricpanda"
27+
rel="nofollow noopener noreferrer"
28+
target="_blank"
29+
class="footer__listItemLink"
30+
>Jim Drury</a
31+
>
32+
- all things Angular
33+
</li>
34+
<li class="footer__listItem">
35+
<a
36+
href="https://ell.io.tt/"
37+
rel="nofollow noopener noreferrer"
38+
target="_blank"
39+
class="footer__listItemLink"
40+
>Elliot Brooks</a
41+
>
42+
- audio playback
43+
</li>
44+
</ul>
2945
<a
30-
href="https://ell.io.tt/"
46+
class="footer__bigButton"
47+
href="https://github.com/ishythefishy/fretonator"
3148
rel="nofollow noopener noreferrer"
3249
target="_blank"
33-
class="footer__creditsListItemLink"
34-
>Elliot Brooks</a
35-
>
36-
- audio playback
37-
</li>
38-
</ul>
39-
<a
40-
class="footer__viewGithub"
41-
href="https://github.com/ishythefishy/fretonator"
42-
rel="nofollow noopener noreferrer"
43-
target="_blank"
44-
>View on GitHub</a>
50+
>View on GitHub</a>
51+
</div>
4552

46-
<a href="https://www.buymeacoffee.com/fretonator"
47-
rel="nofollow noopener noreferrer"
48-
target="_blank"
49-
class="footer__support">
50-
<span class="footer__support__svg">
51-
<app-coffee-svg></app-coffee-svg>
52-
</span>
53-
Buy me a coffee
54-
</a>
53+
<div class="footer__rightColumn">
54+
<h6 class="footer__sectionTitle">Who made this?</h6>
55+
<p class="footer__copy footer__copy--right">
56+
Hey there, I'm Salma.
57+
</p>
58+
<p class="footer__copy footer__copy--right">I'm a musician and software engineer in Manchester, UK. My goal with
59+
the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
60+
easy and enjoyable to use.</p>
61+
<p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
62+
<a href="https://www.buymeacoffee.com/fretonator"
63+
rel="nofollow noopener noreferrer"
64+
target="_blank"
65+
class="footer__smallButton">
66+
<span class="footer__support__svg">
67+
<app-coffee-svg></app-coffee-svg>
68+
</span>
69+
Buy me a coffee
70+
</a>
71+
</div>
72+
</div>
5573

5674
<p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>
57-
5875
</footer>

‎apps/fretonator-web/src/app/common/footer/footer.component.scss

Lines changed: 84 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,104 @@
66
.footer {
77
background-color: var(--black);
88
box-sizing: border-box;
9+
padding: pxToRem($grid-unit * 6);
10+
}
11+
12+
.footer__inner {
913
display: flex;
1014
flex-direction: column;
1115
justify-content: center;
1216
align-items: center;
13-
padding: pxToRem($grid-unit * 2);
17+
max-width: 1280px;
18+
margin-left: auto;
19+
margin-right: auto;
20+
21+
@media screen and (min-width: $screen-med) {
22+
flex-direction: row;
23+
align-items: flex-start;
24+
justify-content: space-between;
25+
}
26+
}
27+
28+
.footer__leftColumn {
29+
justify-content: center;
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
34+
@media screen and (min-width: $screen-med) {
35+
justify-content: flex-start;
36+
align-items: flex-start;
37+
flex-basis: 40%;
38+
}
39+
}
40+
41+
.footer__rightColumn {
42+
justify-content: center;
43+
display: flex;
44+
flex-direction: column;
45+
align-items: center;
46+
47+
@media screen and (min-width: $screen-med) {
48+
justify-content: flex-end;
49+
align-items: flex-end;
50+
flex-basis: 40%;
51+
}
1452
}
1553

16-
.footer__thanksCopy {
54+
.footer__copy {
1755
@include font_bodyCopy();
56+
font-size: pxToRem(15);
57+
line-height: pxToRem(22);
1858
color: var(--offwhite);
59+
display: flex;
60+
flex-direction: column;
61+
justify-content: center;
1962
text-align: center;
63+
64+
@media screen and (min-width: $screen-med) {
65+
justify-content: flex-start;
66+
text-align: left;
67+
}
2068
}
2169

22-
.footer__creditsTitle {
70+
.footer__copy--right {
71+
@media screen and (min-width: $screen-med) {
72+
justify-content: flex-end;
73+
align-self: flex-end;
74+
text-align: right;
75+
}
76+
}
77+
78+
.footer__sectionTitle {
2379
@include font_medium();
80+
font-size: pxToRem(18);
2481
margin-top: pxToRem($grid-unit);
2582
margin-bottom: pxToRem($grid-unit);
2683
color: var(--peach);
2784
font-weight: var(--font-weight-bold);
28-
text-align: center;
85+
display: flex;
2986
}
3087

31-
.footer__creditsList {
88+
.footer__list {
3289
list-style: none;
3390
text-align: center;
3491
padding: 0;
3592
margin-bottom: pxToRem($grid-unit * 4);
93+
94+
@media screen and (min-width: $screen-med) {
95+
text-align: left;
96+
}
3697
}
3798

38-
.footer__creditsListItem {
99+
.footer__listItem {
39100
@include font_bodyCopy();
101+
font-size: pxToRem(15);
102+
line-height: pxToRem(26);
40103
color: var(--offwhite);
41104
}
42105

43-
.footer__creditsListItemLink {
106+
.footer__listItemLink {
44107
@include text_link();
45108
color: var(--yellow);
46109
border-color: var(--yellow);
@@ -55,19 +118,23 @@
55118
font-weight: var(--font-weight-bold);
56119
text-transform: uppercase;
57120
display: block;
58-
margin-top: pxToRem($grid-unit * 4);
59-
margin-bottom: pxToRem($grid-unit * 2);
121+
margin-top: pxToRem($grid-unit * 6);
122+
text-align: center;
60123
}
61124

62-
.footer__viewGithub {
125+
.footer__bigButton {
63126
@include hard_button_base();
64-
margin-bottom: pxToRem($grid-unit * 2);
127+
display: inline-flex;
128+
align-self: center;
129+
margin-bottom: pxToRem($grid-unit * 6);
130+
131+
@media screen and (min-width: $screen-med) {
132+
align-self: flex-start;
133+
}
65134
}
66135

67-
.footer__support {
136+
.footer__smallButton {
68137
@include chip_button_base();
69-
margin-left: auto;
70-
margin-right: auto;
71138
display: flex;
72139
flex-direction: row;
73140
justify-content: center;
@@ -84,7 +151,7 @@
84151
}
85152

86153
.footer__support__svg {
87-
height: pxToRem(24);
88-
width: pxToRem(24);
89-
display: inline-flex;
154+
height: pxToRem(20);
155+
width: pxToRem(20);
156+
margin-right: pxToRem($grid-unit / 2);
90157
}

‎apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,4 +230,6 @@
230230

231231
.actionButton {
232232
@include hard_button_base();
233+
margin-left: auto;
234+
margin-right: auto;
233235
}

‎apps/fretonator-web/src/styles/_mixins.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@
6161
text-transform: uppercase;
6262
font-family: var(--font-family-main);
6363
font-size: pxToRem(18);
64-
margin-left: auto;
65-
margin-right: auto;
6664
display: inline-block;
6765
background-color: $backgroundColor;
6866
padding: pxToRem($grid-unit) pxToRem($grid-unit * 2);

0 commit comments

Comments
 (0)