Agile611/the-example-app-nodejs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style header

Browse Source
This commit is contained in:
Benedikt Rötsch
2017-10-05 11:39:32 +02:00
committed by Benedikt Rötsch
parent 64f59e203d
commit 2652d7bf23
6 changed files with 129 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/images/icon-github.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 33 33">
<path fill="#abc6e5" fill-rule="evenodd" d="M16.608.455C7.614.455.32 7.748.32 16.745c0 7.197 4.667 13.302 11.14 15.456.815.15 1.112-.352 1.112-.784 0-.386-.014-1.41-.022-2.77-4.53.984-5.487-2.184-5.487-2.184-.74-1.882-1.81-2.383-1.81-2.383-1.478-1.01.113-.99.113-.99C7 23.203 7.86 24.767 7.86 24.767c1.454 2.49 3.814 1.77 4.742 1.353.148-1.05.57-1.77 1.034-2.176-3.617-.41-7.42-1.81-7.42-8.05 0-1.78.635-3.234 1.677-4.372-.168-.412-.727-2.07.16-4.31 0 0 1.367-.44 4.48 1.67 1.298-.363 2.692-.543 4.077-.55 1.384.007 2.777.187 4.078.55 3.11-2.11 4.475-1.67 4.475-1.67.89 2.24.33 3.898.163 4.31C26.37 12.66 27 14.115 27 15.892c0 6.26-3.81 7.636-7.437 8.04.584.502 1.105 1.496 1.105 3.016 0 2.177-.02 3.934-.02 4.468 0 .436.294.943 1.12.784 6.468-2.16 11.13-8.26 11.13-15.455 0-8.997-7.293-16.29-16.29-16.29"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 878 B

56
public/stylesheets/style.css
View File

@@ -828,6 +828,8 @@ input[type="reset"]:focus,
}
.layout-centered {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 980px;
margin: 0 auto;
@@ -835,6 +837,8 @@ input[type="reset"]:focus,
}
.layout-centered-small {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
max-width: 620px;
margin: 0 auto;
@@ -948,7 +952,7 @@ display: flex;
.header__upper-wrapper {
background: #3072be;
padding: 11px 0;
color: #fff;
color: #abc6e5;
}
.header__upper {
@@ -976,6 +980,54 @@ display: flex;
}
}
.header__upper-first {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 700px) {
.header__upper-first div + div {
margin-left: 22px;
}
}
.header__upper-second {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
@media (min-width: 700px) {
.header__upper-second div + div {
margin-left: 22px;
}
}
.header__upper-link {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__upper-copy {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
}
.header__upper-icon {
display: inline-block;
width: 20px;
height: 20px;
margin-right: 5.5px;
}
.header__lower-wrapper {}
.header__lower {
@@ -1001,6 +1053,7 @@ display: flex;
font-family: 'roboto', Helvetica, sans-serif;
letter-spacing: 3px;
text-transform: uppercase;
color: #fff;
}
.header__title img {
@@ -1050,6 +1103,7 @@ display: flex;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
color: #fff;
}
@media (min-width: 700px) {