diff --git a/source/2015/components-legacy.html.lsg b/source/2015/components-legacy.html.lsg index be83cc9..286ff94 100644 --- a/source/2015/components-legacy.html.lsg +++ b/source/2015/components-legacy.html.lsg @@ -15,4 +15,5 @@ Those components need to be updated to the style guide API. For now, copy’n’ @import components-legacy/guide @import components-legacy/concept-page @import components-legacy/team-page +@import components-legacy/sponsors-detail-page @import components-legacy/schedule diff --git a/source/2015/components-legacy/_sponsors-detail-page.lsg b/source/2015/components-legacy/_sponsors-detail-page.lsg new file mode 100644 index 0000000..e69de29 diff --git a/source/2015/components-legacy/_sponsors-detail-page.sass b/source/2015/components-legacy/_sponsors-detail-page.sass new file mode 100644 index 0000000..a70be2f --- /dev/null +++ b/source/2015/components-legacy/_sponsors-detail-page.sass @@ -0,0 +1,261 @@ +.sponsors-detail + display: block + + +.sponsors-detail--container + @extend %container + padding-bottom: 0px + margin-bottom: 0px + + +.sponsors-detail--title + @extend %headline + + &:before + content: inline-svg("sponsors--icon.svg") + display: block + margin: auto + width: 20px + + +.sponsors-detail--section-title + @extend %pie-clearfix + font-size: 1.5rem + text-transform: uppercase + @include grid(12, 8, 6) + text-align: center + font-weight: bold + color: $red + padding-bottom: 50px + +.sponsors-detail--list + display: block + margin-top: 100px + @media all and (max-width: 800px) + margin-top: 100px + +.sponsors-detail--list-item-label, .sponsors-detail--page-list-item-label + display: block + background: $red + color: $white + opacity: 1 + text-align: right + padding-right: 1% + padding-top: 3px + margin: -1% 65% 0 130% + margin-top: -0% + margin-left: -20% + font-weight: bold + text-transform: uppercase + @include transform(rotate(-90deg)) + +.sponsors-detail--list-item-label + margin: -1% 70% 0 70% + margin-top: -30% + margin-left: -20% + +.-nickel + .sponsors-detail--page-list-item-label + margin-top: -30% + +.sponsors-detail--list-item + @include grid(4, 4, 6) + margin-top: 0px + margin-bottom: 50px + height: 200px + max-width: 350px + + +.sponsors-detail--list-item-image + padding: 0 20px 0 20px + display: inline-block + width: 100% + +.sponsors-detail--buttons + @extend %pie-clearfix + + +.sponsors-detail--show-more + @extend %show-more + background: $dark-red + &:hover + background: $red + +.sponsors-detail.-home + padding-bottom: 50px + + +.sponsors-detail-page + @extend %page + background: #212C2B + color: $white + +.sponsors-detail-page--container + @extend %page--container + +.sponsors-detail-page--title + @extend %page--title + font-size: 6rem + margin: 170px + color: white + @include transform-origin(100px, 250px) + @media all and (max-width: 600px) + font-size: 4rem + @include transform-origin(150px, 150px) + margin: 40px + +.sponsors-detail-page--companies + .sponsors-detail--section + @extend %page--section + + .sponsors-detail--section-title + @extend %page--section-title + color: $white + margin-top: 200px + margin-left: 200px + margin-bottom: -200px + &:before + background: $white + @media all and (max-width: 800px) + color: $black + margin-top: 100px + margin-left: 0px + text-align: left + margin-bottom: -50px + .sponsors-detail--list + @extend %pie-clearfix + + .sponsors-detail--section.-gold + margin-top: 200px + .sponsors-detail--section-title:before + background: #c4af70 + .sponsors-detail--section-title + @media all and (max-width: 800px) + margin-top: 300px + margin-bottom: 10px + @media all and (max-width: 600px) + margin-top: 150px + + .sponsors-detail--list-item + @include grid(12, 8, 6) + height: 100% + max-width: 100% + margin-top: 100px + margin-bottom: 0 + padding-bottom: 100px + img + max-height: 100% + padding: 0 10% 0 10% + @media all and (max-width: 800px) + margin-top: 100px + margin-bottom: 0 + .sponsors-detail--list-item-name + @include grid(8, 4, 6) + .sponsors-detail--section-item-text + color: white + @include grid(4, 4, 6) + @media all and (max-width: 600px) + padding: 30px 10% 30px 10% + font-size: 18px + + .sponsors-detail--section.-silver + margin-top: -100px + .sponsors-detail--section-title:before + background: $gray + .sponsors-detail--section-title + @media all and (max-width: 800px) + margin-top: 300px + margin-bottom: 10px + @media all and (max-width: 600px) + margin-top: 150px + + .sponsors-detail--list-item + @include grid(12, 8, 6) + height: 100% + max-width: 100% + margin-top: 100px + margin-bottom: 0 + img + max-height: 100% + padding: 0 10% 0 10% + @media all and (max-width: 800px) + margin-top: 100px + margin-bottom: 0 + .sponsors-detail--list-item-name + @include grid(6, 4, 6) + .sponsors-detail--section-item-text + @include grid(6, 4, 6) + @media all and (max-width: 600px) + padding: 30px 10% 30px 10% + font-size: 18px + + .sponsors-detail--section.-nickel + margin-top: 150px + margin-bottom: 100px + .sponsors-detail--section-title:before + background: #c49570 + .sponsors-detail--section-title + @media all and (max-width: 800px) + margin-bottom: 10px + .sponsors-detail--list + @include grid(12, 8, 6) + .sponsors-detail--list-item + @include grid(4, 4, 6) + height: 150px + margin-top: 25px + @media all and (max-width: 800px) + margin-top: 25px + margin-bottom: 0 + .sponsors-detail--list-item-name + //@include grid(12, 8, 6) + .sponsors-detail--section-item-text + display: none + +.sponsors-detail--section-item-text + font-size: 17px + a + color: $red + + +.sponsors-detail-page--info + .sponsors-detail--section + @extend %page--section + .sponsors-detail--section-title + @extend %page--section-title + color: $white + margin-top: 200px + margin-left: 200px + margin-bottom: -200px + &:before + background: $fuchsia + @media all and (max-width: 800px) + color: $black + margin-top: 100px + margin-left: 0px + text-align: left + margin-bottom: 50px + @media all and (max-width: 600px) + margin-bottom: -50px + +.sponsors-detail-page--info-text + @extend %pie-clearfix + @include grid(6, 4, 4) + color: white + margin-left: 33% + margin-top: 100px + font-size: 1.5rem + @media all and (max-width: 800px) + margin-top: 150px + margin-left: 10% + +.sponsors-detail-page--buttons + @extend %pie-clearfix + @include grid(6, 4, 6) + margin-top: 50px + text-align: center + +.sponsors-detail-page--show-more + @extend %show-more + background: $dark-red + &:hover + background: $red diff --git a/source/2015/components/_sponsor.sass b/source/2015/components/_sponsor.sass index 06fa505..963b837 100644 --- a/source/2015/components/_sponsor.sass +++ b/source/2015/components/_sponsor.sass @@ -17,266 +17,3 @@ .sponsor--image height: auto width: 100% - - -.sponsors-detail - display: block - - -.sponsors-detail--container - @extend %container - padding-bottom: 0px - margin-bottom: 0px - - -.sponsors-detail--title - @extend %headline - - &:before - content: inline-svg("sponsors--icon.svg") - display: block - margin: auto - width: 20px - - -.sponsors-detail--section-title - @extend %pie-clearfix - font-size: 1.5rem - text-transform: uppercase - @include grid(12, 8, 6) - text-align: center - font-weight: bold - color: $red - padding-bottom: 50px - -.sponsors-detail--list - display: block - margin-top: 100px - @media all and (max-width: 800px) - margin-top: 100px - -.sponsors-detail--list-item-label, .sponsors-detail--page-list-item-label - display: block - background: $red - color: $white - opacity: 1 - text-align: right - padding-right: 1% - padding-top: 3px - margin: -1% 65% 0 130% - margin-top: -0% - margin-left: -20% - font-weight: bold - text-transform: uppercase - @include transform(rotate(-90deg)) - -.sponsors-detail--list-item-label - margin: -1% 70% 0 70% - margin-top: -30% - margin-left: -20% - -.-nickel - .sponsors-detail--page-list-item-label - margin-top: -30% - -.sponsors-detail--list-item - @include grid(4, 4, 6) - margin-top: 0px - margin-bottom: 50px - height: 200px - max-width: 350px - - -.sponsors-detail--list-item-image - padding: 0 20px 0 20px - display: inline-block - width: 100% - -.sponsors-detail--buttons - @extend %pie-clearfix - - -.sponsors-detail--show-more - @extend %show-more - background: $dark-red - &:hover - background: $red - -.sponsors-detail.-home - padding-bottom: 50px - - -.sponsors-detail-page - @extend %page - background: #212C2B - color: $white - -.sponsors-detail-page--container - @extend %page--container - -.sponsors-detail-page--title - @extend %page--title - font-size: 6rem - margin: 170px - color: white - @include transform-origin(100px, 250px) - @media all and (max-width: 600px) - font-size: 4rem - @include transform-origin(150px, 150px) - margin: 40px - -.sponsors-detail-page--companies - .sponsors-detail--section - @extend %page--section - - .sponsors-detail--section-title - @extend %page--section-title - color: $white - margin-top: 200px - margin-left: 200px - margin-bottom: -200px - &:before - background: $white - @media all and (max-width: 800px) - color: $black - margin-top: 100px - margin-left: 0px - text-align: left - margin-bottom: -50px - .sponsors-detail--list - @extend %pie-clearfix - - .sponsors-detail--section.-gold - margin-top: 200px - .sponsors-detail--section-title:before - background: #c4af70 - .sponsors-detail--section-title - @media all and (max-width: 800px) - margin-top: 300px - margin-bottom: 10px - @media all and (max-width: 600px) - margin-top: 150px - - .sponsors-detail--list-item - @include grid(12, 8, 6) - height: 100% - max-width: 100% - margin-top: 100px - margin-bottom: 0 - padding-bottom: 100px - img - max-height: 100% - padding: 0 10% 0 10% - @media all and (max-width: 800px) - margin-top: 100px - margin-bottom: 0 - .sponsors-detail--list-item-name - @include grid(8, 4, 6) - .sponsors-detail--section-item-text - color: white - @include grid(4, 4, 6) - @media all and (max-width: 600px) - padding: 30px 10% 30px 10% - font-size: 18px - - .sponsors-detail--section.-silver - margin-top: -100px - .sponsors-detail--section-title:before - background: $gray - .sponsors-detail--section-title - @media all and (max-width: 800px) - margin-top: 300px - margin-bottom: 10px - @media all and (max-width: 600px) - margin-top: 150px - - .sponsors-detail--list-item - @include grid(12, 8, 6) - height: 100% - max-width: 100% - margin-top: 100px - margin-bottom: 0 - img - max-height: 100% - padding: 0 10% 0 10% - @media all and (max-width: 800px) - margin-top: 100px - margin-bottom: 0 - .sponsors-detail--list-item-name - @include grid(6, 4, 6) - .sponsors-detail--section-item-text - @include grid(6, 4, 6) - @media all and (max-width: 600px) - padding: 30px 10% 30px 10% - font-size: 18px - - .sponsors-detail--section.-nickel - margin-top: 150px - margin-bottom: 100px - .sponsors-detail--section-title:before - background: #c49570 - .sponsors-detail--section-title - @media all and (max-width: 800px) - margin-bottom: 10px - .sponsors-detail--list - @include grid(12, 8, 6) - .sponsors-detail--list-item - @include grid(4, 4, 6) - height: 150px - margin-top: 25px - @media all and (max-width: 800px) - margin-top: 25px - margin-bottom: 0 - .sponsors-detail--list-item-name - //@include grid(12, 8, 6) - .sponsors-detail--section-item-text - display: none - -.sponsors-detail--section-item-text - font-size: 17px - a - color: $red - - -.sponsors-detail-page--info - .sponsors-detail--section - @extend %page--section - .sponsors-detail--section-title - @extend %page--section-title - color: $white - margin-top: 200px - margin-left: 200px - margin-bottom: -200px - &:before - background: $fuchsia - @media all and (max-width: 800px) - color: $black - margin-top: 100px - margin-left: 0px - text-align: left - margin-bottom: 50px - @media all and (max-width: 600px) - margin-bottom: -50px - -.sponsors-detail-page--info-text - @extend %pie-clearfix - @include grid(6, 4, 4) - color: white - margin-left: 33% - margin-top: 100px - font-size: 1.5rem - @media all and (max-width: 800px) - margin-top: 150px - margin-left: 10% - -.sponsors-detail-page--buttons - @extend %pie-clearfix - @include grid(6, 4, 6) - margin-top: 50px - text-align: center - -.sponsors-detail-page--show-more - @extend %show-more - background: $dark-red - &:hover - background: $red diff --git a/source/2015/eurucamp.css.sass b/source/2015/eurucamp.css.sass index dc6d5c9..233f64f 100644 --- a/source/2015/eurucamp.css.sass +++ b/source/2015/eurucamp.css.sass @@ -32,4 +32,5 @@ @import "components-legacy/guide" @import "components-legacy/concept-page" @import "components-legacy/team-page" +@import "components-legacy/sponsors-detail-page" @import "components-legacy/schedule"