bterkuile/mozo-backend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Main website responsiveness

Browse Source
This commit is contained in:
Benjamin ter Kuile
2015-01-13 18:08:21 +01:00
parent 2f812ad52e
commit 9674a8155e
24 changed files with 428 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/stylesheets/theme1/_mixins.css.sass
+20
View File
@@ -0,0 +1,20 @@
=content-top-background
.left
position: absolute
bottom: 0
left: 0
background-image: image-url('theme1/floor-left.jpg')
background-position: right
height: $cth-height
width: 50%
.right
position: absolute
bottom: 0
right: 0
background-image: image-url('theme1/floor-right.jpg')
background-position: left
height: $cth-height
width: 50%
.content-container
position: relative
max-width: $content-max-width
app/assets/stylesheets/theme1/_structure.css.sass
+107 -3
View File
@@ -1,3 +1,107 @@
.container
margin-left: auto
margin-right: auto
=linear-gradient($pos, $G1, $G2: null, $G3: null, $G4: null, $G5: null, $G6: null, $G7: null, $G8: null, $G9: null, $G10: null, $fallback: null)
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1))
$pos-spec: null
$pos-degree: null
// If $pos is missing from mixin, reassign vars and add default position
@if $pos-type == color or nth($pos, 1) == "transparent"
$G10: $G9
$G9: $G8
$G8: $G7
$G7: $G6
$G6: $G5
$G5: $G4
$G4: $G3
$G3: $G2
$G2: $G1
$G1: $pos
$pos: null
@if $pos
$positions: _linear-positions-parser($pos)
$pos-degree: nth($positions, 1)
$pos-spec: nth($positions, 2)
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1)
// If $fallback is a color use that color as the fallback color
@if type-of($fallback) == color or $fallback == "transparent"
$fallback-color: $fallback
background-color: $fallback-color
background-image: -webkit-linear-gradient($pos-degree $full)
// Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})")
body
background-color: #333
margin: 0
padding: 0
background-image: image-url('theme1/footer-bg.jpg')
background-position: center top
.header-nav-banner
background-image: image-url('theme1/header.jpg')
background-position: center 25px
#content-header
position: relative
height: $cth-height
+content-top-background
.container
height: $cth-height
margin: 0 auto
background-image: image-url("theme1/no-banner-bg-left.png"), image-url('theme1/no-banner-bg-right.png')
background-repeat: no-repeat, no-repeat
background-position: left bottom, right bottom
.top-ribbon
background-image: image-url("theme1/no-banner-bg-middle.png")
height: $cth-height
background-repeat: repeat-x
background-position: bottom
margin: 0 68px 0 42px
#main-wrap
font-size: 14px
font-family: $font-family-content
line-height: 1.5
color: #848585
position: relative
h1
font-size: 28px
padding: 0.5em 0 0.2em 0
line-height: 1.4
font-family: $font-family-headers
color: #AE571F
h2
font-size: 24px
padding: 0.5em 0 0.2em 0
line-height: 1.2
font-family: $font-family-headers
color: #AE571F
background-image: image-url('theme1/wall-bg.jpg')
background-position: center top
overflow: visible
position: relative
.container
margin: 0 auto
max-width: $content-max-width
.main-inner
+linear-gradient(#d6d6d6 0, white 70px)
position: relative
padding: 10px 40px 30px 40px
margin-left: 2px
margin-right: 2px
min-height: 400px
@media (max-width: 680px)
padding: 8px 15px
h1.page-title
margin: 0
padding: 0
margin-bottom: 12px
a
color: $green
text-decoration: none
&:hover
color: darken($green, 20%)
.right
float: right
.left
float: left
.clearing
clear: both
app/assets/stylesheets/theme1/application.css.sass
+11 -2
View File
@@ -1,5 +1,14 @@
//= require_self
//= require_directory .
@import constants
$font-family-navigation: Verdana,serif
$font-family-headers: Verdana,serif //'Pacifico', serif
$content-max-width: 962px
$cth-height: 48px
$green-original: #99CB23
$green: #7BB459 //Heineken
$font-family-content: Georgia, serif
@import font-awesome
@import ./mixins
@import ./foundation_and_overrides
@import ./elements/*
@import ./pages/*
@import ./structure
app/assets/stylesheets/theme1/elements/_footer.css.sass
+30
View File
@@ -0,0 +1,30 @@
#footer-wrap
color: white
background-image: image-url('theme1/footer-bg.jpg')
background-position: center
overflow: visible
position: relative
.footer-shadow
height: 1px
//+box-shadow(0px 4px 10px #000)
.footer-content-container
max-width: 838px
margin: 0 auto
.footer-content
background-color: #420F03
text-align: right
padding: 72px 30px 20px 10px
overflow: visible
margin: 0 auto
a
margin-left: 20px
.footer-bottom
background-image: image-url('theme1/footer-bottom.png')
position: relative
height: 35px
padding-left: 30px
padding-right: 30px
max-width: 838px
position: relative
overflow: visible
margin: 0 auto
app/assets/stylesheets/theme1/elements/_header.css.sass
+76
View File
@@ -0,0 +1,76 @@
#header-wrap
#ceiling
position: relative
width: 100%
background-image: image-url('theme1/ceiling-center.jpg')
background-position: top center
background-repeat: no-repeat
overflow: hidden
.left
background-image: image-url('theme1/ceiling-left.jpg')
background-position: right top
background-repeat: repeat-x
height: 25px
position: absolute
left: 0
width: 50%
.right
background-image: image-url('theme1/ceiling-right.jpg')
background-position: left top
background-repeat: repeat-x
height: 25px
position: absolute
right: 0
width: 50%
.lights
position: absolute
height: 140px
width: 990px
left: 50%
margin-left: -495px
div
position: relative
background-repeat: no-repeat
width: 315px
height: 140px
float: left
&.light1
background-image: image-url('theme1/light-1.jpg')
margin-left: 15px
margin-right: 2px
&.light2
background-image: image-url('theme1/light-2.jpg')
margin-right: 3px
&.light3
background-image: image-url('theme1/light-3.jpg')
.container
max-width: 960px
padding-top: 40px
position: relative
margin: 0 auto
#header
margin-bottom: 10px
#logo
max-width: 80%
a
margin: 20px
#header-right
padding-right: 30px
.social
float: right
width: 222px
text-align: right
a
background-image: image-url('theme1/social.png')
margin: 0 0 0 3px
width: 32px
height: 56px
display: inline-block
&.wsite-social-facebook
background-position: 0 0
&.wsite-social-twitter
background-position: -35px 0
&.wsite-social-linkedin
background-position: -70px 0
&.wsite-social-rss
background-position: -141px 0
app/assets/stylesheets/theme1/elements/_nav.css.sass
+68
View File
@@ -0,0 +1,68 @@
#nav-wrap
max-width: 960px
position: relative
margin: 0 auto
.navbar-inner
height: 48px
background-color: transparent
background-image: image-url('theme1/nav-bar-left.png'), image-url('theme1/nav-bar-right.png'), image-url('theme1/nav-bar-middle.png')
background-repeat: no-repeat, no-repeat, repeat-x
background-position: left center, right center, center center
border: 0
-ms-filter: ''
.nav-collapse
&.in.collapse
background-color: rgba(0,0,0,0.4)
z-index: 400
ul.nav
margin: 0
padding: 0
list-style: none
li
position: relative
list-style: none
float: left
a
border: 0
color: white
display: block
font-family: $font-family-navigation
text-decoration: none
font-size: 18px
height: 46px
line-height: 46px
margin: 0 10px
padding: 0 20px
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5)
&:hover
color: $green
@media (max-width: 480px)
font-size: 12px
margin: 0 5px
padding: 0 10px
&.active
a
color: $green
background-color: inherit
&.secondary
@media (max-width: 924px)
position: absolute
background-color: #555
z-index: 5487
top: 48px
width: 100%
opacity: 0.8
display: none
li
float: none
&.active
display: block
.menu-secondary-toggle
float: right
display: none
margin-top: 8px
margin-right: 1em
span
@extend .fa, .fa-lg, .fa-bars
@media (max-width: 924px)
display: inline-block
app/assets/stylesheets/theme1/home.css.sass
-10
View File
@@ -1,10 +0,0 @@
.home-tablet-phone
right: 0
top: -200px
position: absolute
z-index: 120
.introduction
padding-top: 20px
.home-qr
float: left
margin: 0 20px 20px 0
app/assets/stylesheets/theme1/cartoon.css.sass → app/assets/stylesheets/theme1/pages/_cartoon.css.sass
View File
app/assets/stylesheets/theme1/pages/_home.css.sass
+58
View File
@@ -0,0 +1,58 @@
.home-tablet-phone
right: 0
top: -200px
position: absolute
z-index: 120
.introduction
padding-top: 20px
.home-qr
float: left
margin: 0 20px 20px 0
#home-splash
height: 318px - 10px
position: relative
#home-splash-content
z-index: 12
height: 318px - 61px - 10px
max-width: $content-max-width
margin: 0 auto
#home-splash-content-inner
background-color: white
height: 260px
margin-left: 49px
margin-right: 53px
position: relative
overflow: hidden
#home-splash-content-inner-bar
position: absolute
height: 260px
left: 10px
right: 10px
top: 10px
z-index: 20
background-image: image-url("theme1/home_qwaiter_den_haag.png")
background-repeat: no-repeat
background-position: center top
#home-splash-footer
+content-top-background
#home-splash-footer-inner
background-color: transparent
background-repeat: no-repeat, no-repeat
margin: 0 auto
height: 61px
max-width: $content-max-width
background-position: left bottom, right bottom
background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
color: $green
border-width: 0
border-radius: 0
height: 61px
#home-splash-footer-inner-bar
margin-left: 49px
margin-right: 53px
background-color: white
background-repeat: repeat-x
background-position: center bottom
background-image: image-url('theme1/button-bar-middle.png')
//min-height: 61px
height: 61px
app/assets/stylesheets/theme1/theme1.css.sass
-330
View File
@@ -1,330 +0,0 @@
$cth-height: 48px
$green-original: #99CB23
$green: #7BB459 //Heineken
$font-family-content: Georgia, serif
$font-family-navigation: Verdana,serif
$font-family-headers: Verdana,serif //'Pacifico', serif
$content-max-width: 962px
=linear-gradient($pos, $G1, $G2: null, $G3: null, $G4: null, $G5: null, $G6: null, $G7: null, $G8: null, $G9: null, $G10: null, $fallback: null)
// Detect what type of value exists in $pos
$pos-type: type-of(nth($pos, 1))
$pos-spec: null
$pos-degree: null
// If $pos is missing from mixin, reassign vars and add default position
@if $pos-type == color or nth($pos, 1) == "transparent"
$G10: $G9
$G9: $G8
$G8: $G7
$G7: $G6
$G6: $G5
$G5: $G4
$G4: $G3
$G3: $G2
$G2: $G1
$G1: $pos
$pos: null
@if $pos
$positions: _linear-positions-parser($pos)
$pos-degree: nth($positions, 1)
$pos-spec: nth($positions, 2)
$full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10
// Set $G1 as the default fallback color
$fallback-color: nth($G1, 1)
// If $fallback is a color use that color as the fallback color
@if type-of($fallback) == color or $fallback == "transparent"
$fallback-color: $fallback
background-color: $fallback-color
background-image: -webkit-linear-gradient($pos-degree $full)
// Safari 5.1+, Chrome
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})")
=content-top-background
.left
position: absolute
bottom: 0
left: 0
background-image: image-url('theme1/floor-left.jpg')
background-position: right
height: $cth-height
width: 50%
.right
position: absolute
bottom: 0
right: 0
background-image: image-url('theme1/floor-right.jpg')
background-position: left
height: $cth-height
width: 50%
.container
position: relative
max-width: $content-max-width
body
background-color: #333
margin: 0
padding: 0
background-image: image-url('theme1/footer-bg.jpg')
background-position: center top
.header-nav-banner
background-image: image-url('theme1/header.jpg')
background-position: center 25px
#header-wrap
#ceiling
position: relative
width: 100%
background-image: image-url('theme1/ceiling-center.jpg')
background-position: top center
background-repeat: no-repeat
overflow: hidden
.left
background-image: image-url('theme1/ceiling-left.jpg')
background-position: right top
background-repeat: repeat-x
height: 25px
position: absolute
left: 0
width: 50%
.right
background-image: image-url('theme1/ceiling-right.jpg')
background-position: left top
background-repeat: repeat-x
height: 25px
position: absolute
right: 0
width: 50%
.lights
position: absolute
height: 140px
width: 990px
left: 50%
margin-left: -495px
div
position: relative
background-repeat: no-repeat
width: 315px
height: 140px
float: left
&.light1
background-image: image-url('theme1/light-1.jpg')
margin-left: 15px
margin-right: 2px
&.light2
background-image: image-url('theme1/light-2.jpg')
margin-right: 3px
&.light3
background-image: image-url('theme1/light-3.jpg')
.container
max-width: 960px
padding-top: 40px
position: relative
margin: 0 auto
#header
margin-bottom: 10px
#logo
max-width: 80%
a
margin: 20px
#header-right
padding-right: 30px
.social
float: right
width: 222px
text-align: right
a
background-image: image-url('theme1/social.png')
margin: 0 0 0 3px
width: 32px
height: 56px
display: inline-block
&.wsite-social-facebook
background-position: 0 0
&.wsite-social-twitter
background-position: -35px 0
&.wsite-social-linkedin
background-position: -70px 0
&.wsite-social-rss
background-position: -141px 0
#nav-wrap
max-width: 960px
position: relative
.navbar-inner
height: 48px
background-color: transparent
background-image: image-url('theme1/nav-bar-left.png'), image-url('theme1/nav-bar-right.png'), image-url('theme1/nav-bar-middle.png')
background-repeat: no-repeat, no-repeat, repeat-x
background-position: left center, right center, center center
border: 0
-ms-filter: ''
.nav-collapse
&.in.collapse
background-color: rgba(0,0,0,0.4)
z-index: 400
ul.nav
margin: 0
padding: 0
list-style: none
li
position: relative
list-style: none
float: left
a
border: 0
color: white
display: block
font-family: $font-family-navigation
text-decoration: none
font-size: 18px
height: 46px
line-height: 46px
margin: 0 10px
padding: 0 20px
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5)
&:hover
color: $green
@media (max-width: 480px)
font-size: 12px
margin: 0 5px
padding: 0 10px
&.active
a
color: $green
background-color: inherit
#home-splash
height: 318px - 10px
position: relative
#home-splash-content
z-index: 12
height: 318px - 61px - 10px
max-width: $content-max-width
#home-splash-content-inner
background-color: white
height: 260px
margin-left: 49px
margin-right: 53px
position: relative
overflow: hidden
#home-splash-content-inner-bar
position: absolute
height: 260px
left: 10px
right: 10px
top: 10px
z-index: 20
background-image: image-url("theme1/home_qwaiter_den_haag.png")
background-repeat: no-repeat
background-position: center top
#home-splash-footer
+content-top-background
#home-splash-footer-inner
background-color: transparent
background-repeat: no-repeat, no-repeat
height: 61px
max-width: $content-max-width
background-position: left bottom, right bottom
background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
color: $green
border-width: 0
border-radius: 0
height: 61px
#home-splash-footer-inner-bar
margin-left: 49px
margin-right: 53px
background-color: white
background-repeat: repeat-x
background-position: center bottom
background-image: image-url('theme1/button-bar-middle.png')
//min-height: 61px
height: 61px
#content-header
position: relative
height: $cth-height
+content-top-background
.container
height: $cth-height
margin: 0 auto
background-image: image-url("theme1/no-banner-bg-left.png"), image-url('theme1/no-banner-bg-right.png')
background-repeat: no-repeat, no-repeat
background-position: left bottom, right bottom
.top-ribbon
background-image: image-url("theme1/no-banner-bg-middle.png")
height: $cth-height
background-repeat: repeat-x
background-position: bottom
margin: 0 68px 0 42px
#main-wrap
font-size: 14px
font-family: $font-family-content
line-height: 1.5
color: #848585
position: relative
h1
font-size: 28px
padding: 0.5em 0 0.2em 0
line-height: 1.4
font-family: $font-family-headers
color: #AE571F
h2
font-size: 24px
padding: 0.5em 0 0.2em 0
line-height: 1.2
font-family: $font-family-headers
color: #AE571F
background-image: image-url('theme1/wall-bg.jpg')
background-position: center top
overflow: visible
position: relative
.container
margin: 0 auto
max-width: $content-max-width
.main-inner
+linear-gradient(#d6d6d6 0, white 70px)
position: relative
padding: 10px 40px 30px 40px
margin-left: 2px
margin-right: 2px
min-height: 400px
@media (max-width: 680px)
padding: 8px 15px
h1.page-title
margin: 0
padding: 0
margin-bottom: 12px
#footer-wrap
color: white
background-image: image-url('theme1/footer-bg.jpg')
background-position: center
overflow: visible
position: relative
.footer-shadow
height: 1px
//+box-shadow(0px 4px 10px #000)
.container
max-width: 838px
.footer-content
background-color: #420F03
text-align: right
padding: 72px 30px 20px 10px
overflow: visible
margin: 0 auto
a
margin-left: 20px
.footer-bottom
background-image: image-url('theme1/footer-bottom.png')
position: relative
height: 35px
padding-left: 30px
padding-right: 30px
max-width: 838px
position: relative
overflow: visible
margin: 0 auto
a
color: $green
text-decoration: none
&:hover
color: darken($green, 20%)
.right
float: right
.left
float: left
.clearing
clear: both