Refactor & Update Footer to Match V3 (#455)
This commit is contained in:
James Prado
Daniel Ternyak
parent
2d642f3dc7
commit
8d91979e26
31
README.md
31
README.md
|
|
@ -334,7 +334,36 @@ When working on a module that has styling in Less, try to do the following:
|
|||
* Convert as many `<br/>` tags or ` `s to margins
|
||||
* Ensure that there has been little to no deviation from screenshot
|
||||
|
||||
|
||||
#### Adding Icon-fonts
|
||||
1. Download chosen icon-font
|
||||
1. Declare css font-family:
|
||||
```
|
||||
@font-face {
|
||||
font-family: 'social-media';
|
||||
src: url('../assets/fonts/social-media.eot');
|
||||
src: url('../assets/fonts/social-media.eot') format('embedded-opentype'),
|
||||
url('../assets/fonts/social-media.woff2') format('woff2'),
|
||||
url('../assets/fonts/social-media.woff') format('woff'),
|
||||
url('../assets/fonts/social-media.ttf') format('truetype'),
|
||||
url('../assets/fonts/social-media.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
```
|
||||
1. Create classes for each icon using their unicode character
|
||||
```
|
||||
.sm-logo-facebook:before {
|
||||
content: '\ea02';
|
||||
}
|
||||
```
|
||||
* [How to get unicode icon values?](https://stackoverflow.com/questions/27247145/get-the-unicode-icon-value-from-a-custom-font)
|
||||
1. Write some markup:
|
||||
```
|
||||
<a href="/">
|
||||
<i className={`sm-icon sm-logo-${text} sm-24px`} />
|
||||
Hello World
|
||||
</a>
|
||||
```
|
||||
|
||||
## Thanks & Support
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -0,0 +1,36 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<font id="social-media" horiz-adv-x="256">
|
||||
<font-face font-family="social-media"
|
||||
units-per-em="256" ascent="256"
|
||||
descent="0" />
|
||||
<missing-glyph horiz-adv-x="0" />
|
||||
<glyph glyph-name="logo-facebook"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M234.6666666666667 256H21.3333333333333C9.5466666666667 256 0 246.4533333333333 0 234.6666666666667V21.3333333333333C0 9.5466666666667 9.5466666666667 0 21.3333333333333 0H138.6666666666667V96H106.6666666666667V138.6666666666667H138.6666666666667V166.2613333333334C138.6666666666667 199.328 158.8586666666667 217.3333333333334 188.3626666666667 217.3333333333334C202.496 217.3333333333334 214.6346666666667 216.2773333333333 218.176 215.808V181.248L197.7173333333333 181.2373333333334C181.6746666666667 181.2373333333334 178.5706666666667 173.6106666666667 178.5706666666667 162.432V138.6666666666667H225.9306666666667L215.264 96H178.5706666666667V0H234.6666666666667C246.4533333333333 0 256 9.5466666666667 256 21.3333333333333V234.6666666666667C256 246.4533333333333 246.4533333333333 256 234.6666666666667 256z" />
|
||||
<glyph glyph-name="logo-reddit"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M256 130.1333333333333C256 147.2 242.1333333333334 161.0666666666667 225.0666666666667 161.0666666666667C217.6 161.0666666666667 211.2 158.9333333333333 205.8666666666667 154.6666666666667C186.6666666666667 166.4 163.2 173.8666666666667 137.6 174.9333333333333L150.4 216.5333333333333L186.6666666666667 208C187.7333333333334 195.2 198.4 184.5333333333333 212.2666666666667 184.5333333333333C226.1333333333334 184.5333333333333 237.8666666666667 196.2666666666667 237.8666666666667 210.1333333333333C237.8666666666667 224 226.1333333333334 235.7333333333333 212.2666666666667 235.7333333333333C202.6666666666667 235.7333333333333 194.1333333333334 230.4 189.8666666666667 221.8666666666667L147.2 231.4666666666667C144 232.5333333333333 139.7333333333334 230.4 138.6666666666667 227.2L122.6666666666667 174.9333333333333C96 173.8666666666667 69.3333333333333 167.4666666666667 50.1333333333333 154.6666666666667C44.8 158.9333333333333 38.4 161.0666666666667 30.9333333333333 161.0666666666667C13.8666666666667 161.0666666666667 0 147.2 0 130.1333333333333C0 119.4666666666667 5.3333333333333 109.8666666666667 12.8 104.5333333333333C12.8 102.4 12.8 99.2 12.8 97.0666666666667C12.8 75.7333333333333 25.6 56.5333333333333 48 41.6C69.3333333333333 27.7333333333333 98.1333333333333 20.2666666666667 128 20.2666666666667C157.8666666666667 20.2666666666667 186.6666666666667 27.7333333333333 208 41.6C230.4 56.5333333333333 243.2 75.7333333333333 243.2 97.0666666666667C243.2 99.2 243.2 101.3333333333333 243.2 103.4666666666667C250.6666666666667 109.8666666666667 256 119.4666666666667 256 130.1333333333333zM213.3333333333333 221.8666666666667C219.7333333333333 221.8666666666667 225.0666666666667 216.5333333333333 225.0666666666667 210.1333333333333C225.0666666666667 203.7333333333334 219.7333333333333 198.4 213.3333333333333 198.4S201.6 203.7333333333334 201.6 210.1333333333333C201.6 216.5333333333333 206.9333333333333 221.8666666666667 213.3333333333333 221.8666666666667zM72.5333333333333 110.9333333333333C72.5333333333333 120.5333333333333 81.0666666666667 128 89.6 128C99.2 128 106.6666666666667 119.4666666666667 106.6666666666667 110.9333333333333S99.2 93.8666666666667 89.6 93.8666666666667C81.0666666666667 93.8666666666667 72.5333333333333 101.3333333333333 72.5333333333333 110.9333333333333zM170.6666666666667 60.8C162.1333333333333 52.2666666666667 148.2666666666667 48 129.0666666666667 48C129.0666666666667 48 129.0666666666667 48 129.0666666666667 48C129.0666666666667 48 129.0666666666667 48 129.0666666666667 48C109.8666666666667 48 96 52.2666666666667 87.4666666666667 60.8C84.2666666666667 64 84.2666666666667 68.2666666666667 87.4666666666667 70.4C90.6666666666667 73.6 94.9333333333333 73.6 97.0666666666667 70.4C103.4666666666667 64 114.1333333333333 60.8 129.0666666666667 60.8C129.0666666666667 60.8 129.0666666666667 60.8 129.0666666666667 60.8C129.0666666666667 60.8 129.0666666666667 60.8 129.0666666666667 60.8C144 60.8 154.6666666666667 64 161.0666666666667 70.4C164.2666666666667 73.6 168.5333333333333 73.6 170.6666666666667 70.4C172.8 67.2 172.8 62.9333333333333 170.6666666666667 60.8zM166.4 93.8666666666667C156.8 93.8666666666667 148.2666666666667 101.3333333333333 148.2666666666667 110.9333333333333S156.8 128 166.4 128C176 128 183.4666666666667 119.4666666666667 183.4666666666667 110.9333333333333S176 93.8666666666667 166.4 93.8666666666667z" />
|
||||
<glyph glyph-name="logo-github"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M128 252.8C57.6 252.8 0 195.2 0 124.8C0 68.2666666666667 36.2666666666667 20.2666666666667 87.4666666666667 3.2C93.8666666666667 2.1333333333333 96 6.4 96 9.6C96 12.8 96 20.2666666666667 96 30.9333333333333C60.8 23.4666666666667 53.3333333333333 48 53.3333333333333 48C48 62.9333333333333 39.4666666666667 67.2 39.4666666666667 67.2C26.6666666666667 74.6666666666667 39.4666666666667 74.6666666666667 39.4666666666667 74.6666666666667C52.2666666666667 73.6 58.6666666666667 61.8666666666667 58.6666666666667 61.8666666666667C70.4 42.6666666666667 88.5333333333333 48 96 51.2C97.0666666666667 59.7333333333334 100.2666666666667 65.0666666666667 104.5333333333333 68.2666666666667C75.7333333333333 71.4666666666667 45.8666666666667 82.1333333333334 45.8666666666667 131.2C45.8666666666667 145.0666666666667 51.2 156.8 58.6666666666667 165.3333333333334C58.6666666666667 169.6 53.3333333333333 182.4 60.8 199.4666666666667C60.8 199.4666666666667 71.4666666666667 202.6666666666667 96 186.6666666666667C106.6666666666667 189.8666666666667 117.3333333333333 190.9333333333333 128 190.9333333333333C138.6666666666667 190.9333333333333 149.3333333333334 189.8666666666667 160 186.6666666666667C184.5333333333333 203.7333333333334 195.2 199.4666666666667 195.2 199.4666666666667C202.6666666666667 181.3333333333334 197.3333333333333 168.5333333333333 196.2666666666667 165.3333333333334C204.8 156.8 209.0666666666667 145.0666666666667 209.0666666666667 131.2C209.0666666666667 82.1333333333334 179.2 71.4666666666667 150.4 68.2666666666667C154.6666666666667 64 158.9333333333333 56.5333333333334 158.9333333333333 44.8C158.9333333333333 27.7333333333334 158.9333333333333 13.8666666666667 158.9333333333333 9.6C158.9333333333333 6.4 161.0666666666667 2.1333333333334 167.4666666666667 3.2C218.6666666666667 20.2666666666667 254.9333333333334 68.2666666666667 254.9333333333334 124.8C256 195.2 198.4 252.8 128 252.8z" />
|
||||
<glyph glyph-name="logo-twitter"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M256 206.9333333333333C246.4 202.6666666666667 236.8 199.4666666666667 226.1333333333334 198.4C236.8 204.8 245.3333333333333 215.4666666666667 249.6 227.2C238.9333333333334 220.8 228.2666666666667 216.5333333333333 216.5333333333333 214.4C206.9333333333333 225.0666666666667 193.0666666666667 231.4666666666667 178.1333333333333 231.4666666666667C149.3333333333333 231.4666666666667 125.8666666666667 208 125.8666666666667 179.2C125.8666666666667 174.9333333333333 125.8666666666667 170.6666666666667 126.9333333333333 167.4666666666667C82.1333333333333 169.6 43.7333333333333 190.9333333333333 18.1333333333333 222.9333333333333C12.8 214.4 10.6666666666667 205.8666666666667 10.6666666666667 196.2666666666667C10.6666666666667 178.1333333333333 20.2666666666667 162.1333333333333 34.1333333333333 152.5333333333334C25.6 152.5333333333334 17.0666666666667 154.6666666666667 10.6666666666667 158.9333333333333C10.6666666666667 158.9333333333333 10.6666666666667 158.9333333333333 10.6666666666667 157.8666666666667C10.6666666666667 132.2666666666667 28.8 110.9333333333333 52.2666666666667 106.6666666666667C48 105.6 43.7333333333333 104.5333333333334 38.4 104.5333333333334C35.2 104.5333333333334 32 104.5333333333334 28.8 105.6C35.2 84.2666666666667 54.4 69.3333333333334 77.8666666666667 69.3333333333334C59.7333333333333 55.4666666666667 37.3333333333333 46.9333333333334 12.8 46.9333333333334C8.5333333333333 46.9333333333334 4.2666666666667 46.9333333333334 0 48C23.4666666666667 33.0666666666667 51.2 24.5333333333334 80 24.5333333333334C177.0666666666667 24.5333333333334 229.3333333333333 104.5333333333334 229.3333333333333 173.8666666666667C229.3333333333333 176 229.3333333333333 178.1333333333333 229.3333333333333 180.2666666666667C240 187.7333333333334 248.5333333333334 197.3333333333334 256 206.9333333333333z" />
|
||||
<glyph glyph-name="logo-linkedin"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M245.3333333333333 256H10.6666666666667C4.2666666666667 256 0 251.7333333333333 0 245.3333333333334V10.6666666666667C0 4.2666666666667 4.2666666666667 0 10.6666666666667 0H245.3333333333333C251.7333333333333 0 256 4.2666666666667 256 10.6666666666667V245.3333333333334C256 251.7333333333333 251.7333333333334 256 245.3333333333333 256zM75.7333333333333 37.3333333333333H38.4V160H76.8V37.3333333333333zM56.5333333333333 177.0666666666667C44.8 177.0666666666667 34.1333333333333 186.6666666666667 34.1333333333333 199.4666666666667C34.1333333333333 211.2 43.7333333333333 221.8666666666667 56.5333333333333 221.8666666666667C68.2666666666667 221.8666666666667 78.9333333333333 212.2666666666667 78.9333333333333 199.4666666666667C78.9333333333333 186.6666666666667 69.3333333333333 177.0666666666667 56.5333333333333 177.0666666666667zM218.6666666666667 37.3333333333333H180.2666666666667V97.0666666666667C180.2666666666667 110.9333333333333 180.2666666666667 129.0666666666667 161.0666666666667 129.0666666666667C140.8 129.0666666666667 138.6666666666667 114.1333333333333 138.6666666666667 98.1333333333333V37.3333333333333H100.2666666666667V160H136.5333333333333V142.9333333333333H136.5333333333333C141.8666666666667 152.5333333333333 153.6 162.1333333333333 172.8 162.1333333333333C211.2 162.1333333333333 218.6666666666667 136.5333333333334 218.6666666666667 103.4666666666667V37.3333333333333z" />
|
||||
<glyph glyph-name="logo-slack"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M116.2231466666667 106.05504L105.0436266666667 139.43168L139.43168 150.9499733333333L150.6112 117.5733333333334L116.2231466666667 106.05504zM116.2231466666667 106.05504L105.0436266666667 139.43168L139.43168 150.9499733333333L150.6112 117.5733333333334L116.2231466666667 106.05504zM245.3333333333333 163.2C218.6666666666667 250.6666666666667 180.2666666666667 272 92.8 245.3333333333334C5.3333333333333 218.6666666666667 -16 180.2666666666667 10.6666666666667 92.8C37.3333333333333 5.3333333333334 74.6666666666667 -16 163.2 10.6666666666667C250.6666666666667 37.3333333333333 272 75.7333333333334 245.3333333333333 163.2zM200.5333333333333 105.6L183.4666666666667 100.2666666666667L188.8 83.2C190.9333333333333 75.7333333333334 187.7333333333334 68.2666666666667 180.2666666666667 66.1333333333334C179.2 66.1333333333334 177.0666666666667 65.0666666666667 176 65.0666666666667C170.6666666666667 65.0666666666667 165.3333333333334 68.2666666666667 164.2666666666667 73.6L158.9333333333333 90.6666666666667L124.8 78.9333333333333L130.1333333333333 61.8666666666667C132.2666666666667 54.4 129.0666666666667 46.9333333333333 121.6 44.8C120.5333333333333 44.8 118.4 43.7333333333334 117.3333333333333 43.7333333333334C112 43.7333333333334 106.6666666666667 46.9333333333333 105.6 52.2666666666667L100.2666666666667 69.3333333333333L83.2 64C82.1333333333333 64 80 62.9333333333333 78.9333333333333 62.9333333333333C73.6 62.9333333333333 68.2666666666667 66.1333333333333 67.2 71.4666666666667C64 82.1333333333333 67.2 89.6 74.6666666666667 91.7333333333334L91.7333333333333 97.0666666666667L81.0666666666667 130.1333333333334L64 124.8C62.9333333333333 124.8 60.8 123.7333333333334 59.7333333333333 123.7333333333334C54.4 123.7333333333334 49.0666666666667 126.9333333333333 48 132.2666666666667C45.8666666666667 139.7333333333334 49.0666666666667 147.2 56.5333333333333 149.3333333333334L73.6 154.6666666666667L66.1333333333333 172.8C64 179.2 67.2 186.6666666666667 74.6666666666667 189.8666666666667C81.0666666666667 192 88.5333333333333 187.7333333333334 91.7333333333333 181.3333333333334L97.0666666666667 164.2666666666667L131.2 176L125.8666666666667 192C123.7333333333333 199.4666666666667 126.9333333333333 206.9333333333333 134.4 209.0666666666667C141.8666666666667 211.2 149.3333333333334 208 151.4666666666667 200.5333333333333L156.8 183.4666666666667L173.8666666666667 188.8C180.2666666666667 192 187.7333333333334 187.7333333333334 189.8666666666667 181.3333333333334C192 173.8666666666667 188.8 166.4 181.3333333333333 164.2666666666667L164.2666666666667 158.9333333333333L174.9333333333333 125.8666666666667L192 131.2C199.4666666666667 133.3333333333334 206.9333333333333 130.1333333333333 209.0666666666666 122.6666666666667C211.2 116.2666666666667 208 108.8 200.5333333333333 105.6z" />
|
||||
<glyph glyph-name="logo-medium"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M245.3333333333333 256H10.6666666666667A10.666666666666666 10.666666666666666 0 0 1 0 245.3333333333334V10.6666666666667A10.666666666666666 10.666666666666666 0 0 1 10.6666666666667 0H245.3333333333333A10.666666666666666 10.666666666666666 0 0 1 256 10.6666666666667V245.3333333333334A10.666666666666666 10.666666666666666 0 0 1 245.3333333333333 256zM212.672 195.3493333333333L198.944 182.1866666666667A4.010666666666666 4.010666666666666 0 0 1 197.4186666666667 178.336V81.6106666666667A4.010666666666666 4.010666666666666 0 0 1 198.944 77.76L212.352 64.5973333333334V61.7066666666667H144.9173333333333V64.5973333333334L158.784 78.08C160.1493333333333 79.4453333333333 160.1493333333333 79.8506666666667 160.1493333333333 81.9306666666667V160.1066666666667L121.5253333333333 61.9733333333334H116.3093333333333L71.3706666666667 160.1066666666667V94.368A9.066666666666666 9.066666666666666 0 0 1 73.856 86.8266666666667L91.9253333333333 64.9173333333333V62.0266666666666H40.7253333333333V64.9173333333333L58.7626666666667 86.8266666666667A8.746666666666666 8.746666666666666 0 0 1 61.088 94.368V170.3786666666667A6.666666666666666 6.666666666666666 0 0 1 58.9546666666667 176L42.8693333333333 195.3493333333333V198.24H92.7253333333333L131.264 113.7173333333333L165.1413333333333 198.24H212.672z" />
|
||||
<glyph glyph-name="logo-github-2"
|
||||
unicode=""
|
||||
horiz-adv-x="256" d="M128 252.8C57.6 252.8 0 195.2 0 124.8C0 68.2666666666667 36.2666666666667 20.2666666666667 87.4666666666667 3.2C93.8666666666667 2.1333333333333 96 6.4 96 9.6C96 12.8 96 20.2666666666667 96 30.9333333333333C60.8 23.4666666666667 53.3333333333333 48 53.3333333333333 48C48 62.9333333333333 39.4666666666667 67.2 39.4666666666667 67.2C26.6666666666667 74.6666666666667 39.4666666666667 74.6666666666667 39.4666666666667 74.6666666666667C52.2666666666667 73.6 58.6666666666667 61.8666666666667 58.6666666666667 61.8666666666667C70.4 42.6666666666667 88.5333333333333 48 96 51.2C97.0666666666667 59.7333333333334 100.2666666666667 65.0666666666667 104.5333333333333 68.2666666666667C75.7333333333333 71.4666666666667 45.8666666666667 82.1333333333334 45.8666666666667 131.2C45.8666666666667 145.0666666666667 51.2 156.8 58.6666666666667 165.3333333333334C58.6666666666667 169.6 53.3333333333333 182.4 60.8 199.4666666666667C60.8 199.4666666666667 71.4666666666667 202.6666666666667 96 186.6666666666667C106.6666666666667 189.8666666666667 117.3333333333333 190.9333333333333 128 190.9333333333333C138.6666666666667 190.9333333333333 149.3333333333334 189.8666666666667 160 186.6666666666667C184.5333333333333 203.7333333333334 195.2 199.4666666666667 195.2 199.4666666666667C202.6666666666667 181.3333333333334 197.3333333333333 168.5333333333333 196.2666666666667 165.3333333333334C204.8 156.8 209.0666666666667 145.0666666666667 209.0666666666667 131.2C209.0666666666667 82.1333333333334 179.2 71.4666666666667 150.4 68.2666666666667C154.6666666666667 64 158.9333333333333 56.5333333333334 158.9333333333333 44.8C158.9333333333333 27.7333333333334 158.9333333333333 13.8666666666667 158.9333333333333 9.6C158.9333333333333 6.4 161.0666666666667 2.1333333333334 167.4666666666667 3.2C218.6666666666667 20.2666666666667 254.9333333333334 68.2666666666667 254.9333333333334 124.8C256 195.2 198.4 252.8 128 252.8z" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,7 +1,7 @@
|
|||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('../fonts/Lato-Light.woff') format('woff'),
|
||||
url('../fonts/Lato-Light.ttf') format('truetype');
|
||||
url('../fonts/Lato-Light.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('../fonts/Lato-Regular.woff') format('woff'),
|
||||
url('../fonts/Lato-Regular.ttf') format('truetype');
|
||||
url('../fonts/Lato-Regular.ttf') format('truetype');
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
|
@ -17,8 +17,8 @@
|
|||
@font-face {
|
||||
font-family: 'Lato';
|
||||
src: url('../fonts/Lato-Bold.woff') format('woff'),
|
||||
url('../fonts/Lato-Bold.ttf') format('truetype');
|
||||
url('../fonts/Lato-Bold.ttf') format('truetype');
|
||||
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
padding-bottom: $space-sm;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -18,26 +18,74 @@
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
&-social-media-wrap {
|
||||
margin-top: 32px;
|
||||
& .Footer-social-media-link {
|
||||
transition: opacity 0.3s;
|
||||
color: white;
|
||||
margin: 1rem;
|
||||
margin-left: 0;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
color: white;
|
||||
}
|
||||
&:focus {
|
||||
opacity: 0.8;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-affiliate-wrap {
|
||||
& .Footer-affiliate-tag {
|
||||
background-color: #0e97c0;
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 30px;
|
||||
margin: 0rem 0.5rem 0.5rem 0px;
|
||||
transition: color 0.3s, background-color 0.3s;
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: #0e97c0;
|
||||
}
|
||||
& a {
|
||||
transition: color 0s;
|
||||
color: inherit;
|
||||
&:hover {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-column {
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
&-about {
|
||||
max-width: 22rem;
|
||||
|
||||
&-logo {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
max-width: 20rem;
|
||||
}
|
||||
&-text {
|
||||
max-width: 50ch;
|
||||
}
|
||||
}
|
||||
|
||||
&-about,
|
||||
&-links,
|
||||
&-info {
|
||||
max-width: 34rem;
|
||||
}
|
||||
|
||||
&-links {
|
||||
max-width: 28rem;
|
||||
& > a {
|
||||
display: block;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&-modal-button {
|
||||
|
|
@ -58,10 +106,14 @@
|
|||
margin: $space-xs 0 $space-sm;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #4ac8ed;
|
||||
a,
|
||||
.Footer-modal-button {
|
||||
color: #7fe5ff;
|
||||
font-weight: 400;
|
||||
transition: color 0.3s;
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
color: darken(#4ac8ed, 5%);
|
||||
}
|
||||
}
|
||||
|
|
@ -81,7 +133,7 @@
|
|||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: $space-sm;
|
||||
padding-left: 0;
|
||||
margin: 0 0 $space-xs 0;
|
||||
}
|
||||
|
||||
|
|
@ -101,4 +153,4 @@
|
|||
|
||||
.Modal {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,100 +1,105 @@
|
|||
import logo from 'assets/images/logo-myetherwallet.svg';
|
||||
import { bityReferralURL, donationAddressMap } from 'config/data';
|
||||
import {
|
||||
bityReferralURL,
|
||||
ledgerReferralURL,
|
||||
trezorReferralURL,
|
||||
bitboxReferralURL,
|
||||
donationAddressMap
|
||||
} from 'config/data';
|
||||
import React from 'react';
|
||||
import translate from 'translations';
|
||||
import './index.scss';
|
||||
import PreFooter from './PreFooter';
|
||||
import Modal, { IButton } from 'components/ui/Modal';
|
||||
import { NewTabLink } from 'components/ui';
|
||||
|
||||
const LINKS_LEFT = [
|
||||
const AffiliateTag = ({ link, text }) => {
|
||||
return (
|
||||
<li className="Footer-affiliate-tag" key={link}>
|
||||
<NewTabLink href={link}>{text}</NewTabLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
const SocialMediaLink = ({ link, text }) => {
|
||||
return (
|
||||
<NewTabLink className="Footer-social-media-link" key={link} href={link}>
|
||||
<i className={`sm-icon sm-logo-${text} sm-24px`} />
|
||||
</NewTabLink>
|
||||
);
|
||||
};
|
||||
|
||||
const SOCIAL_MEDIA: Link[] = [
|
||||
{
|
||||
text: 'Knowledge Base',
|
||||
href: 'https://myetherwallet.groovehq.com/help_center'
|
||||
link: 'https://myetherwallet.herokuapp.com/',
|
||||
text: 'slack'
|
||||
},
|
||||
|
||||
{
|
||||
text: 'Helpers & ENS Debugging',
|
||||
href: 'https://www.myetherwallet.com/helpers.html'
|
||||
link: 'https://www.reddit.com/r/MyEtherWallet/',
|
||||
text: 'reddit'
|
||||
},
|
||||
|
||||
{
|
||||
text: 'Sign Message',
|
||||
href: 'https://www.myetherwallet.com/signmsg.html'
|
||||
link: 'https://twitter.com/myetherwallet',
|
||||
text: 'twitter'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://www.facebook.com/MyEtherWallet',
|
||||
text: 'facebook'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://medium.com/@myetherwallet',
|
||||
text: 'medium'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://www.linkedin.com/company/myetherwallet/',
|
||||
text: 'linkedin'
|
||||
},
|
||||
|
||||
{
|
||||
link: 'https://github.com/MyEtherWallet',
|
||||
text: 'github'
|
||||
}
|
||||
];
|
||||
|
||||
const LINKS_SUPPORT = [
|
||||
const PRODUCT_INFO: Link[] = [
|
||||
{
|
||||
href: bityReferralURL,
|
||||
text: 'Swap ETH/BTC/EUR/CHF via Bity.com'
|
||||
},
|
||||
{
|
||||
href: 'https://www.ledgerwallet.com/r/fa4b?path=/products/',
|
||||
text: 'Buy a Ledger Nano S'
|
||||
},
|
||||
{
|
||||
href: 'https://trezor.io/?a=myetherwallet.com',
|
||||
text: 'Buy a TREZOR'
|
||||
},
|
||||
{
|
||||
href: 'https://digitalbitbox.com/?ref=mew',
|
||||
text: 'Buy a Digital Bitbox'
|
||||
}
|
||||
];
|
||||
|
||||
const LINKS_RIGHT = [
|
||||
{
|
||||
href: 'https://www.MyEtherWallet.com',
|
||||
text: 'MyEtherWallet.com'
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/MyEtherWallet/MyEtherWallet',
|
||||
link: 'https://github.com/MyEtherWallet/MyEtherWallet',
|
||||
text: 'Github: Current Site'
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/MyEtherWallet',
|
||||
link: 'https://github.com/MyEtherWallet',
|
||||
text: 'Github: MEW Org'
|
||||
},
|
||||
{
|
||||
href: 'https://github.com/MyEtherWallet/MyEtherWallet/releases/latest',
|
||||
link: 'https://github.com/MyEtherWallet/MyEtherWallet/releases/latest',
|
||||
text: 'Github: Latest Release'
|
||||
},
|
||||
|
||||
{
|
||||
href:
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/myetherwallet-cx/nlbmnnijcnlegkjjpcfjclmcfggfefdm?hl=en',
|
||||
text: 'MyEtherWallet CX'
|
||||
text: 'MyEtherWallet Extension'
|
||||
},
|
||||
{
|
||||
href:
|
||||
link:
|
||||
'https://chrome.google.com/webstore/detail/etheraddresslookup/pdknmigbbbhmllnmgdfalmedcmcefdfn',
|
||||
text: 'Anti-Phishing CX'
|
||||
text: 'Anti - Phishing Extension'
|
||||
}
|
||||
];
|
||||
|
||||
const LINKS_SOCIAL = [
|
||||
{
|
||||
href: 'https://myetherwallet.herokuapp.com/',
|
||||
text: 'Slack'
|
||||
},
|
||||
{
|
||||
href: 'https://www.reddit.com/r/MyEtherWallet/',
|
||||
text: 'Reddit'
|
||||
},
|
||||
{
|
||||
href: 'https://twitter.com/myetherwallet',
|
||||
text: 'Twitter'
|
||||
},
|
||||
{
|
||||
href: 'https://www.facebook.com/MyEtherWallet/',
|
||||
text: 'Facebook'
|
||||
},
|
||||
{
|
||||
href: 'https://medium.com/@myetherwallet',
|
||||
text: 'Medium'
|
||||
}
|
||||
];
|
||||
interface Link {
|
||||
link: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
latestBlock: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface State {
|
||||
isOpen: boolean;
|
||||
|
|
@ -122,9 +127,9 @@ export default class Footer extends React.Component<Props, State> {
|
|||
<div>
|
||||
<PreFooter />
|
||||
<footer className="Footer" role="contentinfo" aria-label="footer">
|
||||
<div className="Footer-column Footer-about">
|
||||
<div className="Footer-about">
|
||||
<p aria-hidden="true">
|
||||
<a href="/">
|
||||
<NewTabLink href="/">
|
||||
<img
|
||||
className="Footer-about-logo"
|
||||
src={logo}
|
||||
|
|
@ -132,22 +137,15 @@ export default class Footer extends React.Component<Props, State> {
|
|||
width="auto"
|
||||
alt="MyEtherWallet"
|
||||
/>
|
||||
</a>
|
||||
</NewTabLink>
|
||||
</p>
|
||||
<p className="Footer-about-text">
|
||||
<span>{translate('FOOTER_1')}</span>
|
||||
<span>{translate('FOOTER_1b')}</span>
|
||||
</p>
|
||||
|
||||
{LINKS_LEFT.map(link => {
|
||||
return (
|
||||
<p key={link.href}>
|
||||
<a href={link.href} target="_blank" rel="noopener">
|
||||
{link.text}
|
||||
</a>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
<p className="Footer-about-text">{translate('FOOTER_1')}</p>
|
||||
<NewTabLink href="https://myetherwallet.github.io/knowledge-base">
|
||||
Knowledge Base
|
||||
</NewTabLink>
|
||||
<NewTabLink href="https://www.myetherwallet.com/helpers.html">
|
||||
Helpers & ENS Debugging
|
||||
</NewTabLink>
|
||||
|
||||
<button className="Footer-modal-button" onClick={this.openModal}>
|
||||
Disclaimer
|
||||
|
|
@ -160,11 +158,11 @@ export default class Footer extends React.Component<Props, State> {
|
|||
>
|
||||
<p>
|
||||
<b>Be safe & secure: </b>
|
||||
<a href="https://myetherwallet.groovehq.com/knowledge_base/topics/protecting-yourself-and-your-funds">
|
||||
<NewTabLink href="https://myetherwallet.groovehq.com/knowledge_base/topics/protecting-yourself-and-your-funds">
|
||||
We highly recommend that you read our guide on How to Prevent
|
||||
Loss & Theft for some recommendations on how to be proactive
|
||||
about your security.
|
||||
</a>
|
||||
</NewTabLink>
|
||||
</p>
|
||||
<p>
|
||||
<b>Always backup your keys: </b>
|
||||
|
|
@ -220,36 +218,44 @@ export default class Footer extends React.Component<Props, State> {
|
|||
OTHER DEALINGS IN THE SOFTWARE.
|
||||
</b>
|
||||
</Modal>
|
||||
|
||||
<p>Latest Block#: {this.props.latestBlock}</p>
|
||||
<p>© 2017 MyEtherWallet, LLC</p>
|
||||
</div>
|
||||
|
||||
<div className="Footer-column Footer-info">
|
||||
<div className="Footer-info">
|
||||
<h5>
|
||||
<i aria-hidden="true">👫</i>
|
||||
You can support us by supporting our blockchain-family.
|
||||
</h5>
|
||||
<p>Consider using our affiliate links to...</p>
|
||||
<ul>
|
||||
{LINKS_SUPPORT.map(link => {
|
||||
return (
|
||||
<li key={link.href}>
|
||||
<a href={link.href} target="_blank">
|
||||
{link.text}
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
<p>Consider using our affiliate links to</p>
|
||||
<ul className="Footer-affiliate-wrap">
|
||||
<AffiliateTag
|
||||
link={bityReferralURL}
|
||||
text="Swap ETH/BTC/EUR/CHF via Bity.com"
|
||||
/>
|
||||
</ul>
|
||||
<p>Buy a</p>
|
||||
<ul className="Footer-affiliate-wrap">
|
||||
<AffiliateTag link={ledgerReferralURL} text="Ledger Nano S" />
|
||||
<AffiliateTag link={trezorReferralURL} text="TREZOR" />
|
||||
<AffiliateTag link={bitboxReferralURL} text="Digital Bitbox" />
|
||||
</ul>
|
||||
|
||||
<h5>
|
||||
<i aria-hidden="true">💝</i>
|
||||
{translate('FOOTER_2')}
|
||||
</h5>
|
||||
<ul>
|
||||
<li>
|
||||
{' '}
|
||||
ETH: <span className="mono wrap">{donationAddressMap.ETH}</span>
|
||||
ETH: mewtopia.eth{' '}
|
||||
<span className="mono wrap">
|
||||
<NewTabLink
|
||||
href={`https://etherscan.io/address/${
|
||||
donationAddressMap.ETH
|
||||
}`}
|
||||
>
|
||||
{donationAddressMap.ETH}
|
||||
</NewTabLink>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
{' '}
|
||||
|
|
@ -258,29 +264,22 @@ export default class Footer extends React.Component<Props, State> {
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="Footer-column Footer-links">
|
||||
{LINKS_RIGHT.map(link => {
|
||||
return (
|
||||
<p key={link.href}>
|
||||
<a href={link.href} target="_blank">
|
||||
{link.text}
|
||||
</a>
|
||||
</p>
|
||||
);
|
||||
})}
|
||||
<p>
|
||||
{LINKS_SOCIAL.map((link, i) => {
|
||||
return (
|
||||
<span key={link.href}>
|
||||
<a key={link.href} href={link.href} target="_blank">
|
||||
{link.text}
|
||||
</a>
|
||||
{i !== LINKS_SOCIAL.length - 1 && ' · '}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</p>
|
||||
<p>Latest Block#: {this.props.latestBlock}</p>
|
||||
<div className="Footer-links">
|
||||
{PRODUCT_INFO.map((productInfoItem, idx) => (
|
||||
<NewTabLink target="_blank" key={idx} href={productInfoItem.link}>
|
||||
{productInfoItem.text}
|
||||
</NewTabLink>
|
||||
))}
|
||||
|
||||
<div className="Footer-social-media-wrap">
|
||||
{SOCIAL_MEDIA.map((socialMediaItem, idx) => (
|
||||
<SocialMediaLink
|
||||
link={socialMediaItem.link}
|
||||
key={idx}
|
||||
text={socialMediaItem.text}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -40,6 +40,10 @@ export const gasPriceDefaults = {
|
|||
};
|
||||
|
||||
export const bityReferralURL = 'https://bity.com/af/jshkb37v';
|
||||
export const ledgerReferralURL =
|
||||
'https://www.ledgerwallet.com/r/fa4b?path=/products/';
|
||||
export const trezorReferralURL = 'https://trezor.io/?a=myetherwallet.com';
|
||||
export const bitboxReferralURL = 'https://digitalbitbox.com/?ref=mew';
|
||||
|
||||
export interface BlockExplorerConfig {
|
||||
name: string;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
@import './fonts/social-media'
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
@font-face {
|
||||
font-family: 'social-media';
|
||||
src: url('../assets/fonts/social-media.eot');
|
||||
src: url('../assets/fonts/social-media.eot') format('embedded-opentype'),
|
||||
url('../assets/fonts/social-media.woff2') format('woff2'),
|
||||
url('../assets/fonts/social-media.woff') format('woff'),
|
||||
url('../assets/fonts/social-media.ttf') format('truetype'),
|
||||
url('../assets/fonts/social-media.svg') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.sm-icon {
|
||||
display: inline-block;
|
||||
font: normal normal normal 32px/1 'social-media';
|
||||
text-transform: none;
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
&.sm-16px {
|
||||
font-size: 16px;
|
||||
}
|
||||
&.sm-24px {
|
||||
font-size: 24px;
|
||||
}
|
||||
&.sm-32px {
|
||||
font-size: 32px;
|
||||
}
|
||||
&.sm-48px {
|
||||
font-size: 48px;
|
||||
}
|
||||
// Refer to docs for updating icon-fonts
|
||||
&.sm-logo-facebook:before {
|
||||
content: '\ea02';
|
||||
}
|
||||
&.sm-logo-reddit:before {
|
||||
content: '\ea03';
|
||||
}
|
||||
&.sm-logo-github:before {
|
||||
content: '\ea04';
|
||||
}
|
||||
&.sm-logo-twitter:before {
|
||||
content: '\ea05';
|
||||
}
|
||||
&.sm-logo-linkedin:before {
|
||||
content: '\ea06';
|
||||
}
|
||||
&.sm-logo-slack:before {
|
||||
content: '\ea07';
|
||||
}
|
||||
&.sm-logo-medium:before {
|
||||
content: '\ea08';
|
||||
}
|
||||
}
|
||||
|
|
@ -27,3 +27,4 @@
|
|||
@import "./styles/overrides";
|
||||
@import "./styles/scaffolding";
|
||||
@import "./styles/tab";
|
||||
@import "./fonts";
|
||||
|
|
|
|||
Loading…
Reference in New Issue