flow/datamad2017
1
0
Fork 0
mirror of https://github.com/medialab-prado/datamad2017.git synced 2025-06-07 22:11:29 +02:00
Code Issues Projects Releases Wiki Activity

Static map on small screens, ability to change background image/color of top-section, finalised hackathon page

Browse source
This commit is contained in:
Oleh Zasadnyy 2014-08-31 21:52:35 +03:00
parent 05b66f6e7c
commit fbaeb935bb
63 changed files with 224 additions and 362 deletions
Download patch file Download diff file Expand all files Collapse all files

26
_sass/partials/_about-hackathon.scss
View file

@ -3,15 +3,9 @@ $small-hackathon-img-width: 150px;
.hackathon-row {
margin-bottom: 90px;
&.float-left {
.hackathon-img-wrapper {
float: left;
}
.hackathon-details {
text-align: left;
margin-right: 0;
}
}
@media (max-width: 767px) {
margin-bottom: 50px;
}
&.float-right {
.hackathon-img-wrapper {
float: right;
@ -19,10 +13,19 @@ $small-hackathon-img-width: 150px;
.hackathon-details {
text-align: right;
margin-left: 0;
margin-right: $hackathon-img-width + 50px;
@media (max-width: 767px) {
text-align: left;
margin-right: 0;
}
}
}
}
.hackathon-img-wrapper {
float: left;
@media (max-width: 767px) {
float: right;
}
img {
max-width: $hackathon-img-width;
margin: 0 auto;
@ -32,11 +35,10 @@ $small-hackathon-img-width: 150px;
}
}
.hackathon-details {
text-align: left;
margin-left: $hackathon-img-width + 50px;
margin-right: $hackathon-img-width + 50px;
@media (max-width: 767px) {
margin-left: $small-hackathon-img-width + 20px;
margin-right: $small-hackathon-img-width + 20px;
margin-left: 0;
}
p {
font-size: 16px;

2
_sass/partials/_base.scss
View file

@ -40,6 +40,8 @@ $icon-fill-color: #8b8b8b;
$min-section-height: 350px;
$section-padding-top: 50px;
$section-padding-bottom: 60px;
$small-section-padding-top: 20px;
$small-section-padding-bottom: 40px;
// Global variables
$base-transition: all .3s;

17
_sass/partials/_find-way.scss
View file

@ -18,6 +18,13 @@ $location-card-highlight-color: #333;
left: 0;
}
}
&.location-active {
.content-wrapper {
@media (max-width: 767px) {
z-index: initial;
}
}
}
}
.map-card {
font-size: 16px;
@ -39,7 +46,7 @@ $location-card-highlight-color: #333;
.location-active & {
transform: translateY(-135px);
@media (max-width: 767px) {
transform: translateY(-140px);
transform: translateY(-165px);
}
}
.location-input-icon {
@ -59,6 +66,10 @@ $location-card-highlight-color: #333;
width: 19px;
height: 19px;
}
.view-on-map {
font-size: 14px;
margin-bottom: 5px;
}
}
.location-input {
width: 85%;
@ -85,7 +96,7 @@ $location-card-highlight-color: #333;
.location-details {
clear: both;
height: 100%;
padding: 8px 20px;
padding: 8px 18px 15px;
transition: $location-card-transition;
transform: translateY(140px);
@media (max-width: 767px) {
@ -94,7 +105,7 @@ $location-card-highlight-color: #333;
.location-active & {
transform: translateY(-125px);
@media (max-width: 767px) {
transform: translateY(-135px);
transform: translateY(-160px);
}
}
ul {

7
_sass/partials/_global.scss
View file

@ -18,8 +18,15 @@ section {
padding-top: $section-padding-top;
padding-bottom: $section-padding-bottom;
text-align: center;
@media (max-width: 767px) {
padding-top: $small-section-padding-top;
padding-bottom: $small-section-padding-bottom;
}
h3 {
margin-bottom: 50px;
@media (max-width: 767px) {
padding-bottom: 30px;
}
}
}
p {

4
_sass/partials/_hackathon-location.scss
View file

@ -24,4 +24,8 @@ $hackathon-map-height: 450px;
color: $main-color;
}
}
.view-on-map {
margin-top: 8px;
display: block;
}
}

2
_sass/partials/_hero.scss
View file

@ -7,7 +7,7 @@
top: 50%;
margin: 0;
left: 0;
transform: translateY(-50%);
transform: translateY(-60%);
@media (max-width: 767px) {
margin: 0;
padding: 0;

14
_sass/partials/_judges.scss
View file

@ -1,16 +1,24 @@
$judge-image-size: 160px;
$judge-image-size: 140px;
$small-judge-image-size: 120px;
.judge {
margin-bottom: 45px;
.name {
margin: 8px 0 4px;
font-size: 25px;
@media (max-width: 767px) {
font-size: 20px;
}
}
.company {
margin-top: 6px;
display: block;
font-size: 18px;
line-height: 1.1;
@media (max-width: 767px) {
margin-top: 0;
font-size: 16px;
}
}
}
.judge-img {
@ -19,4 +27,8 @@ $judge-image-size: 160px;
margin: 0 auto;
border: 3px solid #fff;
box-shadow: 0 3px 0 rgba(0, 0, 0, .15), 0 3px 4px rgba(0, 0, 0, .2);
@media (max-width: 767px) {
width: $small-judge-image-size;
height: $small-judge-image-size;
}
}

12
_sass/partials/_lily-effect.scss
View file

@ -117,18 +117,12 @@
.title {
font-size: 16px;
line-height: 1.5;
display: block;
display: -webkit-box;
overflow: hidden;
height: 50px;
text-overflow: ellipsis;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@include trimText(16px, 1.5, 2);
}
.slider-next-item {
position: absolute;
right: 15px;
bottom: 10px;
right: 25px;
bottom: 30px;
}
}
}

2
_sass/partials/_partners.scss
View file

@ -6,12 +6,10 @@
margin-bottom: 65px;
li {
width: 16%;
min-width: 160px;
max-width: 180px;
margin: 13px 7px;
@media (max-width: 767px) {
width: 40%;
min-width: 120px;
max-width: 160px;
}
}

5
_sass/partials/_prizes.scss
View file

@ -1,6 +1,11 @@
$prize-img-width: 250px;
$small-prize-img-width: 110px;
.prizes {
h3 {
margin-bottom: 20px;
}
}
.prize {
margin-top: 50px;
&:nth-child(3) {

8
_sass/partials/_ribbon.scss
View file

@ -1,6 +1,8 @@
$ribbon-color: #999;
$gdg-ribbon-border-color: #427fed;
$gdgw-ribbon-border-color: #ed2c82;
$gde-ribbon-border-color: #db4437;
$wt-ribbon-border-color: #72e1b3;
.ribbon-wrapper {
position: absolute;
z-index: 5;
@ -20,9 +22,15 @@ $gde-ribbon-border-color: #db4437;
.gdg {
border-right: 4px solid $gdg-ribbon-border-color;
}
.gdgw {
border-right: 4px solid $gdgw-ribbon-border-color;
}
.gde {
border-right: 4px solid $gde-ribbon-border-color;
}
.wt {
border-right: 4px solid $wt-ribbon-border-color;
}
.ribbon {
font-size: 13px;
font-weight: 300;

31
_sass/partials/_rockstar-speakers.scss
View file

@ -1,20 +1,33 @@
$rockstar-image-size: 140px;
$small-rockstar-image-size: 120px;
.rockstar-speakers {
.rockstar-speaker {
padding-bottom: 13px;
}
.rockstar-speaker-img {
width: 140px;
height: 140px;
margin: 0 auto;
}
.name {
font-size: $base-font-size * 2;
font-size: 26px;
line-height: 1.1;
margin: 10px 0 2px;
@media (max-width: 767px) {
font-size: 20px;
}
}
.sub {
font-size: $base-font-size * 1.4;
margin: 0 0 15px;
color: $link-color;
@media (max-width: 767px) {
font-size: 16px;
}
}
}
.rockstar-speaker {
padding-bottom: 13px;
}
.rockstar-speaker-img {
width: $rockstar-image-size;
height: $rockstar-image-size;
margin: 0 auto;
@media (max-width: 767px) {
width: $small-rockstar-image-size;
height: $small-rockstar-image-size;
}
}

23
_sass/partials/_twitter-feed.scss
View file

@ -5,23 +5,34 @@
fill: #fff;
}
}
.tweets {
max-width: 850px;
margin: 0 auto;
}
.tweet {
height: 130px;
height: 130px;
transition: $long-transition;
@media (max-width: 767px) {
height: 200px;
height: 180px;
}
&.hidden-tweet {
opacity: 0;
transform: translateY(180px);
}
p {
font-weight: $light;
}
}
.tweets {
max-width: 850px;
margin: 0 auto;
}
.tweet-text {
font-size: 26px;
line-height: 1.3;
@media (max-width: 767px) {
font-size: 24px;
}
}
.tweet-meta {
font-size: 20px;
@media (max-width: 767px) {
font-size: 18px;
}
}

16
_sass/partials/_zoe-effect.scss
View file

@ -110,13 +110,7 @@ $figcaption-color: #3c4a50;
}
.position {
font-size: 12px;
display: block;
display: -webkit-box;
overflow: hidden;
height: 15px;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@include trimText(12px, 1, 1);
}
}
.bio {
@ -125,18 +119,12 @@ $figcaption-color: #3c4a50;
position: relative;
top: 50%;
left: 0;
display: block;
display: -webkit-box;
overflow: hidden;
height: 110px;
padding: 1.4em;
transition: $base-transition;
transform: translateY(0);
text-overflow: ellipsis;
opacity: 0;
color: #fff;
background: none;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
@include trimText(14px, 1.3, 5);
}
}