Implement new footer with the Resin.io logo

Fixes: https://github.com/resin-io/resin-etcher/issues/68
This commit is contained in:
Juan Cruz Viotti 2016-01-18 10:34:46 -04:00
parent 0a8e89c782
commit da4748a1a1
6 changed files with 76 additions and 8 deletions

View File

@ -5905,7 +5905,7 @@ body {
margin: 0 30px; }
.space-bottom-large {
margin-bottom: 30px; }
margin-bottom: 45px; }
.space-right-tiny {
margin-right: 5px; }
@ -5961,10 +5961,17 @@ body {
.section-footer {
position: fixed;
bottom: 30px;
bottom: 20px;
left: 0;
right: 0;
color: #333333; }
color: #787c7f;
margin: 0 60px;
padding-top: 15px;
border-top: 2px solid #64686a; }
.section-footer .col-xs {
padding: 0; }
.section-footer hero-icon .icon {
margin: 0; }
.step-border, .step-border-left, .step-border-right {
height: 2px;

37
lib/images/resin.svg Normal file
View File

@ -0,0 +1,37 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg viewBox="0 0 837 244" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Group + resin_text</title>
<desc>Created with Sketch.</desc>
<defs>
<path id="path-1" d="M0.246338028,0.51912 L581.907901,0.51912 L581.907901,102.74868 L0.246338028,102.74868 L0.246338028,0.51912 Z"></path>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Group-+-resin_text" sketch:type="MSLayerGroup">
<g id="Group" transform="translate(0.500000, 0.000000)" sketch:type="MSShapeGroup">
<g id="Shape">
<path d="M105.67438,0 L0,61 L105.67438,122 L211,61 L105.67438,0 Z" fill="#E0A800"></path>
<path d="M0,61 L0,183 L105.67438,244 L105.67438,122 L0,61 Z" fill="#FFEC52"></path>
<path d="M105.67438,244 L211,183 L211,61 L105.67438,122 L105.67438,244 Z" fill="#F7C30F"></path>
</g>
<g transform="translate(105.789471, 122.000000) rotate(180.000000) translate(-105.789471, -122.000000) translate(36.159471, 41.480000)" id="Shape">
<path d="M69.7450909,0 L0,40.26 L69.7450909,80.52 L139.26,40.26 L69.7450909,0 Z" fill="#E0A800"></path>
<path d="M0,40.26 L0,120.78 L69.7450909,161.04 L69.7450909,80.52 L0,40.26 Z" fill="#FFEC52"></path>
<path d="M69.7450909,161.04 L139.26,120.78 L139.26,40.26 L69.7450909,80.52 L69.7450909,161.04 Z" fill="#F7C30F"></path>
</g>
<g transform="translate(52.837190, 61.000000)" id="Shape">
<path d="M52.8371901,0 L0,30.5 L52.8371901,61 L105.5,30.5 L52.8371901,0 Z" fill="#E0A800"></path>
<path d="M0,30.5 L0,91.5 L52.8371901,122 L52.8371901,61 L0,30.5 Z" fill="#FFEC52"></path>
<path d="M52.8371901,122 L105.5,91.5 L105.5,30.5 L52.8371901,61 L52.8371901,122 Z" fill="#F7C30F"></path>
</g>
</g>
<g id="resin_text" transform="translate(254.500000, 70.000000)">
<mask id="mask-2" sketch:name="Clip 2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M530.14407,81.44416 C514.30043,81.44416 501.80288,68.19424 501.80288,51.40524 C501.80288,35.329 514.653514,22.07496 529.971634,22.07496 C545.638732,22.07496 558.31693,35.50204 558.31693,51.76368 C558.31693,68.19424 545.638732,81.44416 530.14407,81.44416 L530.14407,81.44416 Z M529.790986,0.51912 C501.449796,0.51912 478.199592,23.66528 478.199592,51.76368 C478.199592,80.031 501.449796,103 529.971634,103 C558.31693,103 581.907901,80.031 581.907901,52.46408 C581.907901,23.31508 559.199641,0.51912 529.790986,0.51912 L529.790986,0.51912 Z M440.173211,100.70516 L463.591746,100.70516 L463.591746,2.81396 L440.173211,2.81396 L440.173211,100.70516 Z M394.046415,100.70516 L417.460845,100.70516 L417.460845,78.08636 L394.046415,78.08636 L394.046415,100.70516 Z M334.358711,0.51912 C323.265289,0.51912 315.517958,3.87692 306.892021,12.17872 L306.892021,2.81808 L285.234803,2.81808 L285.234803,100.70516 L308.653338,100.70516 L308.653338,54.59 C308.653338,41.51312 309.531944,35.85636 312.524951,31.08952 C316.220021,25.25972 322.382577,22.07496 329.776824,22.07496 C341.399873,22.07496 348.445141,26.67288 348.445141,52.8184 L348.445141,100.70516 L371.855465,100.70516 L371.855465,48.2246 C371.855465,30.7352 370.102359,22.25212 364.818408,14.65484 C358.47931,5.46724 347.915514,0.51912 334.358711,0.51912 L334.358711,0.51912 Z M242.97962,100.70516 L266.394049,100.70516 L266.394049,2.81396 L242.97962,2.81396 L242.97962,100.70516 Z M202.830627,40.98164 C186.810444,35.85636 186.284923,35.50204 186.284923,30.37676 C186.284923,25.60992 190.156535,22.07496 195.268049,22.07496 C200.19481,22.07496 203.364359,24.72824 204.423613,29.8494 L227.312521,29.8494 C226.42981,11.4742 211.813754,0.51912 195.268049,0.51912 C177.129359,0.51912 162.866387,13.59188 162.866387,30.37676 C162.866387,44.69376 170.613718,52.8184 189.984099,59.35684 C205.651197,64.65928 206.533908,66.24548 206.533908,71.90636 C206.533908,77.3736 201.956127,81.44416 195.966007,81.44416 C189.105493,81.44416 185.229775,77.91332 182.938831,69.6074 L159.347859,69.6074 C161.811239,92.40336 175.721127,103 195.091507,103 C214.634324,103 229.952444,88.33692 229.952444,69.6074 C229.952444,55.11324 223.260261,47.3388 202.830627,40.98164 L202.830627,40.98164 Z M73.2486127,41.51312 C76.9477887,28.9636 86.452331,22.07496 100.362218,22.07496 C114.801732,22.07496 124.306275,28.9636 127.299282,41.51312 L73.2486127,41.51312 L73.2486127,41.51312 Z M100.009134,0.51912 C71.3107535,0.51912 48.5942817,23.31508 48.5942817,52.10976 C48.5942817,80.7314 71.6597324,103 101.421472,103 C121.136725,103 141.385711,91.86776 147.897246,71.72096 L122.368415,71.72096 C116.386507,78.795 110.57293,81.44416 100.887739,81.44416 C86.9860634,81.44416 76.7671408,74.01992 73.9506761,62.18728 L149.490232,62.18728 C150.192296,58.82536 150.368838,56.70768 150.368838,53.17272 C150.368838,22.7836 129.064704,0.51912 100.009134,0.51912 L100.009134,0.51912 Z M21.4806761,12.35588 L21.4806761,2.81808 L0,2.81808 L0,100.70516 L23.4185352,100.70516 L23.4185352,46.27996 C23.4185352,31.08952 30.2831549,23.48812 44.3736901,23.13792 L44.3736901,0.51912 L42.6082676,0.51912 C32.5740986,0.51912 27.6432324,3.34544 21.4806761,12.35588 L21.4806761,12.35588 Z" id="Fill-1" fill="#FFFFFF" sketch:type="MSShapeGroup" mask="url(#mask-2)"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 5.7 KiB

View File

@ -108,8 +108,18 @@
</div>
</div>
<div class="text-center section-footer">
<hero-caption><span ng-click="app.open('https://github.com/resin-io/resin-etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="app.open('https://resin.io')">RESIN.IO</span></hero-caption>
<div class="section-footer row between-xs middle-xs">
<div class="col-xs">
<div class="box text-left">
<hero-icon path="images/resin.svg" width="85px" height="auto" ng-click="app.open('https://resin.io')"></hero-icon>
</div>
</div>
<div class="col-xs">
<div class="box text-right">
<hero-caption><span ng-click="app.open('https://github.com/resin-io/resin-etcher')">AN OPEN SOURCE PROJECT</span> BY <span ng-click="app.open('https://resin.io')">RESIN.IO</span></hero-caption>
</div>
</div>
</div>
</body>
</html>

View File

@ -103,10 +103,24 @@ body {
.section-footer {
position: fixed;
bottom: 30px;
bottom: 20px;
left: 0;
right: 0;
color: $gray-dark;
color: $color-disabled;
margin: 0 60px;
padding-top: 15px;
border-top: 2px solid darken($color-disabled, 8%);
// Override default column padding
// set by flexboxgrid.
.col-xs {
padding: 0;
}
// Align icon to the left
hero-icon .icon {
margin: 0;
}
}
.step-border {

View File

@ -31,7 +31,7 @@ $spacing-tiny: 5px;
}
.space-bottom-large {
margin-bottom: $spacing-large;
margin-bottom: $spacing-large * 1.5;
}
.space-right-tiny {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 113 KiB