suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix some layout bugs in error and maintenance

Browse Source
This commit is contained in:
Lisa Passing 2015-02-09 15:56:37 +01:00
parent b09fbdcabe
commit 7e1a943a80
1 changed files with 21 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
app/styles/app/layouts/error.sass
View File

@ -33,12 +33,14 @@
font-size: 40px font-size: 40px
line-height: 1 line-height: 1
text-align: center text-align: center
@media #{$medium-up}
margin: 1.5em 0 .4em
font-size: 70px
p p
padding: 0 1em padding: 0 1em
color: $error-copy-color color: $error-copy-color
font-size: 18px font-size: 18px
text-align: center text-align: center
a a
color: $error-copy-color color: $error-copy-color
&:hover, &:hover,
@ -46,11 +48,6 @@
color: $error-copy-color color: $error-copy-color
text-decoration: underline text-decoration: underline
@media #{$medium-up}
h1
margin: 1.5em 0 .4em
font-size: 70px
.icon-twitter .icon-twitter
display: inline-block display: inline-block
width: 1.1em width: 1.1em
@ -77,9 +74,8 @@
background-size: 58vw auto background-size: 58vw auto
background-position: 0 62% background-position: 0 62%
@media #{$large-up} @media #{$large-up}
background-size: 49vw auto background-size: 50vw auto
background-position: 0 60% background-position: 0 61%
.hill-right .hill-right
display: none display: none
background: background:
@ -88,16 +84,11 @@
position: 99% 63% position: 99% 63%
@media #{$medium-up} @media #{$medium-up}
display: block display: block
@media #{$large-up}
.shadow-left .shadow-left
background: background:
image: url(../images/error/maintenance-grass-shade-left.svg) image: url(../images/error/maintenance-grass-shade-left.svg)
size: 24vw auto size: 24vw auto
position: 6% 82% position: 6% 82%
.shadow-right .shadow-right
background: background:
image: url(../images/error/maintenance-grass-shade-right.svg) image: url(../images/error/maintenance-grass-shade-right.svg)
@ -110,10 +101,10 @@
size: 87vw auto size: 87vw auto
position: 63% 87% position: 63% 87%
@media #{$medium-up} @media #{$medium-up}
// background-size: 60vw auto
background-size: auto 40vh background-size: auto 40vh
@media #{$large-up} @media #{$large-up}
background-size: auto 40vh background-size: auto 40vh
/* /*
* 404 * 404
*/ */
@ -121,30 +112,38 @@
background: linear-gradient(0deg, $error-hill-grey, $error-hill-grey 34.9%, $error-bg-gradient 35%, $white 60%, $white) background: linear-gradient(0deg, $error-hill-grey, $error-hill-grey 34.9%, $error-bg-gradient 35%, $white 60%, $white)
.error-hill-left .error-hill-left
display: none
background: background:
image: url(../images/error/404-hills-left.svg) image: url(../images/error/404-hills-left.svg)
size: 30vw auto size: 30vw auto
position: 0 (100% - 37%) position: 0 (100% - 37%)
@media #{$medium-up}
display: block
.error-hill-right .error-hill-right
background: background:
image: url(../images/error/404-hills-right.svg) image: url(../images/error/404-hills-right.svg)
size: 50vw auto size: auto 20vw
position: 99% (100% - 38%) position: 99% 63%
@media #{$medium-up}
background-size: 50vw auto
background-position: 99% 63%
@media #{$large-up}
background-position: 99% 61%
.error-excavator .error-excavator
background: background:
image: url(../images/error/excavator.svg) image: url(../images/error/excavator.svg)
size: 32vw auto size: auto 25vh
position: 71% 83% position: 71% 83%
.error-travis .error-travis
background: background:
image: url(../images/error/pensive-travis.svg) image: url(../images/error/pensive-travis.svg)
size: 77vw auto size: auto 60vh
position: 34% 100% position: 34% 92%
@media #{$medium-up} @media #{$medium-up}
background-size: 45vw auto background-size: auto 50vh
@media #{$large-up} @media #{$large-up}
background-size: 30vw auto background-size: auto 60vh