mirror of
https://github.com/medialab-prado/datamad2017.git
synced 2025-06-07 22:11:29 +02:00
Schedule page
This commit is contained in:
Oleh Zasadnyy
parent
e7d34d963f
commit
5c8e326daa
67 changed files with 1384 additions and 11890 deletions
|
|
@ -1,20 +1,18 @@
|
|||
.waves-button {
|
||||
padding: 5px 18px 7px;
|
||||
border-radius: 3px;
|
||||
a, a:hover, a:visited, a:link, button, input[type='submit'], input[type='button'] {
|
||||
position: relative;
|
||||
z-index: 9;
|
||||
color: #fff;
|
||||
&:hover, &:link, &:visited, .waves-button-input {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
font-weight: $bold;
|
||||
transition: all .28s cubic-bezier(.4, 0, .2, 1);
|
||||
transition: $base-cubic-transition;
|
||||
}
|
||||
.btn-primary {
|
||||
user-select: none;
|
||||
text-transform: uppercase;
|
||||
border: 0;
|
||||
background: $primary-color;
|
||||
background: $primary-color !important;
|
||||
&:hover, &:focus, &:active, &.active {
|
||||
outline: none;
|
||||
background: $primary-color-hover;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
@include web-fonts(($fixed-font-family: ($light,$regular,$bold)));
|
||||
body, html {
|
||||
@include web-fonts(($fixed-font-family:($light, $regular, $bold)));
|
||||
body, html {
|
||||
font-family: $fixed-font-family, $base-font-family;
|
||||
font-size: $base-font-size;
|
||||
font-weight: $regular;
|
||||
|
|
@ -27,6 +27,9 @@ p {
|
|||
font-weight: 300;
|
||||
line-height: $base-line-height;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: $bold;
|
||||
}
|
||||
|
|
@ -37,45 +40,48 @@ a {
|
|||
}
|
||||
}
|
||||
#{headings()} {
|
||||
font-weight: $light;
|
||||
display: block;
|
||||
font-weight: $light;
|
||||
display: block;
|
||||
}
|
||||
h1 {
|
||||
font-size: $h1-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h1-font-size * 60 / 100;
|
||||
font-size: $h1-font-size * 60 / 100;
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
font-size: $h2-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h2-font-size * 60 / 100;
|
||||
font-size: $h2-font-size * 60 / 100;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-size: $h3-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h3-font-size * 70 / 100;
|
||||
font-size: $h3-font-size * 70 / 100;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
font-size: $h4-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h4-font-size * 70 / 100;
|
||||
font-size: $h4-font-size * 70 / 100;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
font-size: $h5-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h5-font-size * 80 / 100;
|
||||
font-size: $h5-font-size * 80 / 100;
|
||||
}
|
||||
}
|
||||
h6 {
|
||||
font-size: $h6-font-size;
|
||||
@media (max-width: 767px) {
|
||||
font-size: $h6-font-size * 80 / 100;
|
||||
font-size: $h6-font-size * 80 / 100;
|
||||
}
|
||||
}
|
||||
time {
|
||||
display: block;
|
||||
}
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
|
@ -120,157 +126,110 @@ h6 {
|
|||
background-color: #fff;
|
||||
}
|
||||
.loader-gplus {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: calc(50% - 20px);
|
||||
left: calc(50% - 20px);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: rotate 2.4s linear infinite;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
&:before, &:after {
|
||||
animation: base 3s steps(1) 0s infinite;
|
||||
&::before, &::after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
border-radius: 0 20px 20px 0;
|
||||
transform-origin: 0 50%;
|
||||
}
|
||||
&::before {
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
content: '';
|
||||
animation: color-switch 2.4s linear infinite;
|
||||
border-radius: 40px 40px 0 0;
|
||||
transform-style: preserve-3d;
|
||||
animation: flip 3s linear 0s infinite;
|
||||
}
|
||||
&:after {
|
||||
transform-origin: 0 100%;
|
||||
animation-name: unfold, color-shift;
|
||||
animation-duration: .6s, 2.4s;
|
||||
animation-timing-function: linear, linear;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
&::after {
|
||||
animation: reveal 3s steps(1) 0s infinite;
|
||||
}
|
||||
}
|
||||
@keyframes rotate {
|
||||
0.0001% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg);
|
||||
background-color: rgb(58, 123, 247);
|
||||
@keyframes base {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
background-color: #21aa29;
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: rotateZ(0deg);
|
||||
transform: rotateZ(0deg);
|
||||
background-color: rgb(58, 123, 247);
|
||||
}
|
||||
25.0001% {
|
||||
-webkit-transform: rotateZ(90deg);
|
||||
transform: rotateZ(90deg);
|
||||
background-color: rgb(222, 74, 66);
|
||||
transform: rotate(90deg);
|
||||
background-color: #2159d6;
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: rotateZ(90deg);
|
||||
transform: rotateZ(90deg);
|
||||
background-color: rgb(222, 74, 66);
|
||||
}
|
||||
50.0001% {
|
||||
-webkit-transform: rotateZ(180deg);
|
||||
transform: rotateZ(180deg);
|
||||
background-color: rgb(255, 214, 74);
|
||||
transform: rotate(180deg);
|
||||
background-color: #d62408;
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: rotateZ(180deg);
|
||||
transform: rotateZ(180deg);
|
||||
background-color: rgb(255, 214, 74);
|
||||
}
|
||||
75.0001% {
|
||||
-webkit-transform: rotateZ(270deg);
|
||||
transform: rotateZ(270deg);
|
||||
background-color: rgb(33, 173, 100);
|
||||
transform: rotate(270deg);
|
||||
background-color: #ffcf00;
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: rotateZ(270deg);
|
||||
transform: rotateZ(270deg);
|
||||
background-color: rgb(33, 173, 100);
|
||||
transform: rotate(360deg);
|
||||
background-color: #21aa29;
|
||||
}
|
||||
}
|
||||
@keyframes unfold {
|
||||
to {
|
||||
-webkit-transform: rotateX(180deg) rotateZ(0deg);
|
||||
transform: rotateX(180deg) rotateZ(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes color-switch {
|
||||
0.0001% {
|
||||
background-color: rgb(222, 74, 66);
|
||||
@keyframes reveal {
|
||||
0% {
|
||||
background-color: #2159d6;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
background-color: rgb(222, 74, 66);
|
||||
}
|
||||
25.0001% {
|
||||
background-color: rgb(255, 214, 74);
|
||||
background-color: #d62408;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
50% {
|
||||
background-color: rgb(255, 214, 74);
|
||||
}
|
||||
50.0001% {
|
||||
background-color: rgb(33, 173, 100);
|
||||
background-color: #ffcf00;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
background-color: rgb(33, 173, 100);
|
||||
}
|
||||
75.0001% {
|
||||
background-color: rgb(58, 123, 247);
|
||||
background-color: #21aa29;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
100% {
|
||||
background-color: rgb(58, 123, 247);
|
||||
background-color: #2159d6;
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
@keyframes color-shift {
|
||||
0.0001% {
|
||||
border-bottom: 1px solid rgb(58, 123, 247);
|
||||
background-color: rgb(58, 123, 247);
|
||||
@keyframes flip {
|
||||
0% {
|
||||
background-color: #21aa29;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
12.5% {
|
||||
border-bottom: 1px solid rgb(45, 105, 200);
|
||||
background-color: rgb(40, 95, 195);
|
||||
12.5%, 87.56% {
|
||||
background-color: #105514;
|
||||
}
|
||||
12.5001% {
|
||||
border-bottom: 1px solid rgb(232, 120, 115);
|
||||
background-color: rgb(232, 120, 115);
|
||||
12.51%, 37.5% {
|
||||
background-color: #102c6b;
|
||||
}
|
||||
25% {
|
||||
border-bottom: 1px solid rgb(222, 74, 66);
|
||||
background-color: rgb(222, 74, 66);
|
||||
background-color: #2159d6;
|
||||
}
|
||||
37.5% {
|
||||
border-bottom: 1px solid rgb(230, 107, 99);
|
||||
background-color: rgb(230, 107, 99);
|
||||
}
|
||||
37.5001% {
|
||||
border-bottom: 1px solid rgb(255, 222, 123);
|
||||
background-color: rgb(255, 222, 123);
|
||||
37.51%, 62.5% {
|
||||
background-color: #6b1204;
|
||||
}
|
||||
50% {
|
||||
border-bottom: 1px solid rgb(255, 214, 90);
|
||||
background-color: rgb(255, 214, 90);
|
||||
background-color: #d62408;
|
||||
}
|
||||
62.5% {
|
||||
border-bottom: 1px solid rgb(255, 222, 123);
|
||||
background-color: rgb(255, 222, 123);
|
||||
62.51%, 87.5% {
|
||||
background-color: #7f6700;
|
||||
}
|
||||
62.5001% {
|
||||
border-bottom: 1px solid rgb(25, 140, 74);
|
||||
background-color: rgb(25, 140, 74);
|
||||
}
|
||||
75% {
|
||||
border-bottom: 1px solid rgb(33, 173, 100);
|
||||
background-color: rgb(33, 173, 100);
|
||||
}
|
||||
87.5% {
|
||||
border-bottom: 1px solid rgb(82, 189, 132);
|
||||
background-color: rgb(82, 189, 132);
|
||||
}
|
||||
87.5001% {
|
||||
border-bottom: 1px solid rgb(82, 148, 247);
|
||||
background-color: rgb(82, 148, 247);
|
||||
75%, 78% {
|
||||
background-color: #ffcf00;
|
||||
}
|
||||
100% {
|
||||
border-bottom: 1px solid rgb(58, 123, 247);
|
||||
background-color: rgb(58, 123, 247);
|
||||
background-color: #21aa29;
|
||||
transform: rotateY(-720deg);
|
||||
}
|
||||
}
|
||||
.social-links {
|
||||
|
|
@ -278,4 +237,4 @@ h6 {
|
|||
margin-right: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
.bordered {
|
||||
display: inline-block;
|
||||
color: rgba(255, 255, 255, .6);
|
||||
border: 1px solid rgba(255, 255, 255, .6);
|
||||
border-radius: 0;
|
||||
|
|
@ -23,6 +24,7 @@
|
|||
}
|
||||
.bottom-section-link {
|
||||
text-transform: uppercase;
|
||||
padding: 7px 17px;
|
||||
}
|
||||
.card {
|
||||
position: relative;
|
||||
|
|
@ -105,4 +107,13 @@
|
|||
&.visible {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.flexbox-wrapper {
|
||||
@include flexbox();
|
||||
}
|
||||
.flexbox-item-height {
|
||||
@include flex(1);
|
||||
}
|
||||
.reset-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -23,6 +23,9 @@
|
|||
font-size: 21px;
|
||||
margin-bottom: 9px;
|
||||
}
|
||||
time {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.canvas-map {
|
||||
position: absolute;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ $nav-scroll-color-hover: rgba(0, 0, 0, .8);
|
|||
z-index: 500;
|
||||
width: 100%;
|
||||
padding: 0 45px;
|
||||
background: rgba(255, 255, 255, 0);
|
||||
transition: $base-transition;
|
||||
@media (min-width: 768px) and (max-width: 991px) {
|
||||
padding: 13px 0 0 34px;
|
||||
|
|
@ -130,8 +131,8 @@ nav {
|
|||
}
|
||||
}
|
||||
}
|
||||
#right-nav-button {
|
||||
margin: 14px 65px 0 0;
|
||||
.right-nav-button {
|
||||
margin: 11px 65px 0 0;
|
||||
transition: $base-transition;
|
||||
opacity: 1;
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.sponsors {
|
||||
.partners {
|
||||
h5 {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
|
@ -6,13 +6,13 @@
|
|||
margin-bottom: 65px;
|
||||
li {
|
||||
width: 16%;
|
||||
min-width: 180px;
|
||||
max-width: 250px;
|
||||
min-width: 160px;
|
||||
max-width: 180px;
|
||||
margin: 13px 7px;
|
||||
@media (max-width: 767px) {
|
||||
width: 40%;
|
||||
min-width: 120px;
|
||||
max-width: 180px;
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
}
|
||||
173
_sass/partials/_schedule.scss
Normal file
173
_sass/partials/_schedule.scss
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
.schedule {
|
||||
.schedule-table {
|
||||
margin-bottom: 90px;
|
||||
@media (max-width: 767px) {
|
||||
margin-bottom: 60px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.schedule-table-heading {
|
||||
margin: 10px 0 20px;
|
||||
text-align: left;
|
||||
@media (max-width: 767px) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.timeslot {
|
||||
background: #fff;
|
||||
border-top: 1px solid #e7e7e7;
|
||||
border-left: 1px solid #e7e7e7;
|
||||
&:last-child {
|
||||
border-bottom: 1px solid #e7e7e7;
|
||||
}
|
||||
}
|
||||
.stream-header {
|
||||
z-index: 10;
|
||||
transition: $base-transition;
|
||||
&.sticky {
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .15);
|
||||
}
|
||||
}
|
||||
.stream-header-label {
|
||||
position: absolute;
|
||||
padding: 10px 15px 20px;
|
||||
max-width: 137px;
|
||||
text-align: left;
|
||||
margin: 0;
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 18px;
|
||||
max-width: 90px;
|
||||
}
|
||||
span {
|
||||
font-size: 20px;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.timeslot-label {
|
||||
@extend .stream-header-label;
|
||||
position: relative;
|
||||
float: left;
|
||||
display: block;
|
||||
transition: $base-transition;
|
||||
font-size: 40px;
|
||||
font-weight: $light;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 28px;
|
||||
}
|
||||
}
|
||||
.time-element {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
.timeslot-elements {
|
||||
overflow: hidden;
|
||||
margin-left: 100px;
|
||||
transition: $base-transition;
|
||||
@media (max-width: 767px) {
|
||||
display: block;
|
||||
margin-left: 80px;
|
||||
}
|
||||
}
|
||||
.slot-title {
|
||||
font-size: 22px;
|
||||
font-weight: $regular;
|
||||
margin: 0;
|
||||
padding-right: 20px;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.stream-header-title {
|
||||
@extend .slot-title;
|
||||
}
|
||||
.stream-header-slot {
|
||||
padding: 10px 15px 10px;
|
||||
text-align: left;
|
||||
transition: $base-transition;
|
||||
border-right: 1px solid #e7e7e7;
|
||||
user-select: none;
|
||||
@media (max-width: 767px) {
|
||||
border-top: 0;
|
||||
border-left: 1px solid #e7e7e7;
|
||||
}
|
||||
&:first-child {
|
||||
border-left: 1px solid #e7e7e7;
|
||||
@media (max-width: 767px) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.slot {
|
||||
@extend .stream-header-slot;
|
||||
padding: 0;
|
||||
border-top-width: 5px;
|
||||
border-top-style: solid;
|
||||
@media (max-width: 767px) {
|
||||
border-top: 1px solid #e7e7e7 !important;
|
||||
}
|
||||
&:first-child {
|
||||
@media (max-width: 767px) {
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.slot-content {
|
||||
padding: 20px 15px 30px;
|
||||
background: #fff;
|
||||
transform: translateY(-5px);
|
||||
transition: $base-transition;
|
||||
@media (max-width: 767px) {
|
||||
padding-bottom: 20px;
|
||||
border-right-width: 5px;
|
||||
border-right-style: solid;
|
||||
transform: translateY(0);
|
||||
}
|
||||
&:hover {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.slot-language {
|
||||
position: absolute;
|
||||
font-size: 11px;
|
||||
right: 15px;
|
||||
top: 20px;
|
||||
}
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
li {
|
||||
font-size: 16px;
|
||||
margin-bottom: 5px;
|
||||
min-height: 40px;
|
||||
@media (max-width: 767px) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.speaker-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 2px solid #fff;
|
||||
position: absolute;
|
||||
box-shadow: 0 1px 0 rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.2);
|
||||
}
|
||||
.speaker-name {
|
||||
line-height: 30px;
|
||||
margin-left: 48px;
|
||||
}
|
||||
.speaker-position {
|
||||
color: #555;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,27 +1,21 @@
|
|||
.subscribe {
|
||||
.email {
|
||||
font-size: 16px;
|
||||
font-weight: $light;
|
||||
width: 100%;
|
||||
height: 53px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0;
|
||||
transition: $base-transition;
|
||||
text-align: center;
|
||||
border-radius: 0;
|
||||
input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 32px;
|
||||
text-align: center;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
@extend .email;
|
||||
text-transform: uppercase;
|
||||
input {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mc-field-group {
|
||||
|
|
|
|||
|
|
@ -109,6 +109,13 @@ $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;
|
||||
}
|
||||
}
|
||||
.bio {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue