m |
m |
||
Line 1: | Line 1: | ||
− | .contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .nextButton, .calendarbutton { | + | .contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton, .calendarbutton { |
-moz-user-select: none; | -moz-user-select: none; | ||
-webkit-user-select: none; | -webkit-user-select: none; | ||
-ms-user-select: none; | -ms-user-select: none; | ||
user-select: none; | user-select: none; | ||
+ | } | ||
+ | |||
+ | .contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton { | ||
+ | cursor: pointer; | ||
+ | transition: transform 0.3s; | ||
+ | } | ||
+ | .contentBlock .content .downloadButton:hover, .contentBlock .content .sectionButtons div:hover, .contentBlock .content .prevButton:hover, .contentBlock .content .nextButton:hover { | ||
+ | transform: translateY(-2px); | ||
} | } | ||
Line 13: | Line 21: | ||
} | } | ||
+ | .contentBlock { | ||
+ | width: 54vw; | ||
+ | } | ||
@media (max-width: 800px) { | @media (max-width: 800px) { | ||
.contentBlock { | .contentBlock { | ||
margin-right: 0; | margin-right: 0; | ||
+ | width: unset; | ||
} | } | ||
} | } | ||
Line 33: | Line 45: | ||
text-transform: uppercase; | text-transform: uppercase; | ||
text-align: center; | text-align: center; | ||
+ | } | ||
+ | .contentBlock .content .heading:first-child { | ||
+ | margin-top: 28px; | ||
} | } | ||
.contentBlock .content .downloadButton { | .contentBlock .content .downloadButton { | ||
Line 43: | Line 58: | ||
padding: 8px 52px; | padding: 8px 52px; | ||
border-radius: 10px; | border-radius: 10px; | ||
− | margin: 16px 0 | + | margin: 16px 0 64px; |
box-shadow: 0 16px 32px -12px #6584ef; | box-shadow: 0 16px 32px -12px #6584ef; | ||
transition: box-shadow 0.3s, transform 0.3s; | transition: box-shadow 0.3s, transform 0.3s; | ||
− | |||
} | } | ||
.contentBlock .content .downloadButton:hover { | .contentBlock .content .downloadButton:hover { | ||
− | |||
box-shadow: 0 18px 40px -14px #6584ef; | box-shadow: 0 18px 40px -14px #6584ef; | ||
} | } | ||
Line 66: | Line 79: | ||
padding: 16px; | padding: 16px; | ||
font-size: 1.4rem; | font-size: 1.4rem; | ||
− | box-shadow: 0 | + | box-shadow: 0 4px 32px -12px #d5d5d5; |
flex-grow: 1; | flex-grow: 1; | ||
text-align: center; | text-align: center; | ||
− | |||
font-family: "montserrat-bold"; | font-family: "montserrat-bold"; | ||
background-color: #FAFAFC; | background-color: #FAFAFC; | ||
− | transition: color 0.5s, background-color 0.5s; | + | transition: color 0.5s, background-color 0.5s, box-shadow 0.3s, transform 0.3s; |
+ | } | ||
+ | .contentBlock .content .sectionButtons div:hover { | ||
+ | box-shadow: 0 6px 40px -14px #d5d5d5; | ||
} | } | ||
@media (max-width: 1024px) { | @media (max-width: 1024px) { | ||
Line 87: | Line 102: | ||
color: #FAFAFC; | color: #FAFAFC; | ||
background-color: #6281EF; | background-color: #6281EF; | ||
+ | box-shadow: 0 4px 32px -12px #6584ef; | ||
+ | } | ||
+ | .contentBlock .content .sectionButtons div.active:hover { | ||
+ | box-shadow: 0 6px 40px -14px #6584ef; | ||
} | } | ||
.contentBlock .content .weekName { | .contentBlock .content .weekName { | ||
Line 98: | Line 117: | ||
margin: 12px 0; | margin: 12px 0; | ||
height: 3px; | height: 3px; | ||
− | width: | + | width: 160px; |
background-color: #6281EF; | background-color: #6281EF; | ||
} | } | ||
− | .contentBlock .content .nextButton { | + | .contentBlock .content .weekContent { |
+ | font-size: 1.2rem; | ||
+ | line-height: 1.4; | ||
+ | } | ||
+ | .contentBlock .content .weekButtons { | ||
+ | display: flex; | ||
+ | flex-direction: row; | ||
+ | justify-content: space-between; | ||
+ | } | ||
+ | .contentBlock .content .prevButton, .contentBlock .content .nextButton { | ||
margin-top: 32px; | margin-top: 32px; | ||
cursor: pointer; | cursor: pointer; | ||
− | |||
display: flex; | display: flex; | ||
flex-direction: row; | flex-direction: row; | ||
Line 110: | Line 137: | ||
font-family: "montserrat-bold"; | font-family: "montserrat-bold"; | ||
} | } | ||
− | .contentBlock .content .nextButton::after { | + | @media (max-width: 480px) { |
+ | .contentBlock .content .prevButton span, .contentBlock .content .nextButton span { | ||
+ | display: none; | ||
+ | } | ||
+ | } | ||
+ | .contentBlock .content .prevButton::before, .contentBlock .content .nextButton::after { | ||
content: ""; | content: ""; | ||
display: block; | display: block; | ||
Line 119: | Line 151: | ||
width: 64px; | width: 64px; | ||
height: 40px; | height: 40px; | ||
− | margin-top: | + | margin-top: 1px; |
+ | } | ||
+ | .contentBlock .content .nextButton span { | ||
+ | text-align: end; | ||
+ | } | ||
+ | .contentBlock .content .prevButton::before { | ||
+ | transform: scaleX(-1); | ||
+ | margin-right: 8px; | ||
+ | } | ||
+ | .contentBlock .content .nextButton::after { | ||
margin-left: 8px; | margin-left: 8px; | ||
} | } | ||
Line 137: | Line 178: | ||
background-color: #222222; | background-color: #222222; | ||
color: #FAFAFC; | color: #FAFAFC; | ||
− | padding: 24px; | + | padding: 44px 34px 24px; |
box-sizing: border-box; | box-sizing: border-box; | ||
− | margin: | + | margin: 200px 60px 0 50px; |
text-transform: unset; | text-transform: unset; | ||
display: flex; | display: flex; | ||
Line 235: | Line 276: | ||
} | } | ||
.sideBlock .days .hover { | .sideBlock .days .hover { | ||
+ | pointer-events: none; | ||
margin-top: calc(-3px + 22px * 0); | margin-top: calc(-3px + 22px * 0); | ||
− | margin-left: - | + | margin-left: -11px; |
padding: 2px; | padding: 2px; | ||
width: calc(100% - 48px); | width: calc(100% - 48px); | ||
Line 244: | Line 286: | ||
border-radius: 20px; | border-radius: 20px; | ||
position: absolute; | position: absolute; | ||
− | transition: margin-top 0.3s, visibility 0.3s; | + | transition: margin-top 0.3s, visibility 0.3s, opacity 0.3s; |
} | } | ||
.sideBlock .days .hover.invisible { | .sideBlock .days .hover.invisible { | ||
visibility: hidden; | visibility: hidden; | ||
+ | opacity: 0; | ||
+ | } | ||
+ | @media (max-width: 800px) { | ||
+ | .sideBlock .days .hover { | ||
+ | margin-left: -3px; | ||
+ | } | ||
} | } | ||
Revision as of 14:51, 31 August 2020
.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton, .calendarbutton {
-moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none;
}
.contentBlock .content .downloadButton, .contentBlock .content .sectionButtons div, .contentBlock .content .prevButton, .contentBlock .content .nextButton {
cursor: pointer; transition: transform 0.3s;
} .contentBlock .content .downloadButton:hover, .contentBlock .content .sectionButtons div:hover, .contentBlock .content .prevButton:hover, .contentBlock .content .nextButton:hover {
transform: translateY(-2px);
}
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.contentBlock {
width: 54vw;
} @media (max-width: 800px) {
.contentBlock { margin-right: 0; width: unset; }
} .contentBlock .content {
display: flex; flex-direction: column; align-items: stretch;
} @media (max-width: 800px) {
.contentBlock .content { margin: unset; }
} .contentBlock .content .heading {
font-size: 1.5rem; font-family: "montserrat-bold"; text-transform: uppercase; text-align: center;
} .contentBlock .content .heading:first-child {
margin-top: 28px;
} .contentBlock .content .downloadButton {
align-self: center; color: #FAFAFC; background-color: #6281EF; font-family: "lato-heavy"; font-size: 1.3rem; text-transform: uppercase; padding: 8px 52px; border-radius: 10px; margin: 16px 0 64px; box-shadow: 0 16px 32px -12px #6584ef; transition: box-shadow 0.3s, transform 0.3s;
} .contentBlock .content .downloadButton:hover {
box-shadow: 0 18px 40px -14px #6584ef;
} .contentBlock .content .sectionButtons {
display: flex; justify-content: stretch; align-items: center; margin: 20px -40px;
} @media (max-width: 800px) {
.contentBlock .content .sectionButtons { margin: 20px -30px; }
} .contentBlock .content .sectionButtons div {
padding: 16px; font-size: 1.4rem; box-shadow: 0 4px 32px -12px #d5d5d5; flex-grow: 1; text-align: center; font-family: "montserrat-bold"; background-color: #FAFAFC; transition: color 0.5s, background-color 0.5s, box-shadow 0.3s, transform 0.3s;
} .contentBlock .content .sectionButtons div:hover {
box-shadow: 0 6px 40px -14px #d5d5d5;
} @media (max-width: 1024px) {
.contentBlock .content .sectionButtons div { font-size: 1.1rem; }
} @media (max-width: 800px) {
.contentBlock .content .sectionButtons div { font-size: 0.9rem; }
} .contentBlock .content .sectionButtons div.active {
color: #FAFAFC; background-color: #6281EF; box-shadow: 0 4px 32px -12px #6584ef;
} .contentBlock .content .sectionButtons div.active:hover {
box-shadow: 0 6px 40px -14px #6584ef;
} .contentBlock .content .weekName {
font-family: "montserrat-bold"; font-size: 1.4rem; margin: 10px 0;
} .contentBlock .content .weekName::after {
content: ""; display: block; margin: 12px 0; height: 3px; width: 160px; background-color: #6281EF;
} .contentBlock .content .weekContent {
font-size: 1.2rem; line-height: 1.4;
} .contentBlock .content .weekButtons {
display: flex; flex-direction: row; justify-content: space-between;
} .contentBlock .content .prevButton, .contentBlock .content .nextButton {
margin-top: 32px; cursor: pointer; display: flex; flex-direction: row; align-items: center; font-family: "montserrat-bold";
} @media (max-width: 480px) {
.contentBlock .content .prevButton span, .contentBlock .content .nextButton span { display: none; }
} .contentBlock .content .prevButton::before, .contentBlock .content .nextButton::after {
content: ""; display: block; background-image: url(https://static.igem.org/mediawiki/2020/7/7a/T--Vilnius-Lithuania--arrowNext2.svg); background-repeat: no-repeat; background-position: center; background-size: 91%; width: 64px; height: 40px; margin-top: 1px;
} .contentBlock .content .nextButton span {
text-align: end;
} .contentBlock .content .prevButton::before {
transform: scaleX(-1); margin-right: 8px;
} .contentBlock .content .nextButton::after {
margin-left: 8px;
} .contentBlock::after {
display: none; content: unset;
}
@media (max-width: 800px) {
main { padding-bottom: 300px; justify-content: center; }
}
.sideBlock {
background-color: #222222; color: #FAFAFC; padding: 44px 34px 24px; box-sizing: border-box; margin: 200px 60px 0 50px; text-transform: unset; display: flex; flex-direction: column; align-items: stretch; min-width: 321px;
} @media (max-width: 1024px) {
.sideBlock { margin: 374px 40px 0 50px; }
} @media (max-width: 800px) {
.sideBlock { position: fixed; bottom: 0; padding: 24px 24px 60px; border-radius: 0; float: unset; margin: 0; z-index: 20; width: 100%; text-align: center; transition: transform 0.5s; top: unset; transform: translateY(100%); } .sideBlock.open { transform: translateY(0); }
} .sideBlock .title {
font-family: "montserrat-bold"; font-size: 1.3rem;
} .sideBlock .title::after {
content: ""; display: block; margin: 6px 0; height: 2px; width: 100px; background-color: #6281EF;
} @media (max-width: 800px) {
.sideBlock .title { display: flex; flex-direction: column; align-items: center; } .sideBlock .title::after { margin: 6px 0 16px; width: 200px; }
} .sideBlock .months {
font-family: "lato-heavy"; display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 10px; justify-items: center;
} .sideBlock .months span {
width: 39px; padding: 4px; box-sizing: border-box; text-align: center; cursor: pointer;
} .sideBlock .months span::after {
content: ""; display: block; height: 2px; width: 28px; margin: 2px auto 0; background-color: transparent; transition: background-color 0.5s;
} .sideBlock .months span.active::after, .sideBlock .months span:hover::after {
background-color: #6281EF;
} .sideBlock .days {
justify-items: stretch; align-items: stretch; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr);
} .sideBlock .days span {
cursor: pointer; text-align: center; height: 22px;
} .sideBlock .days span.dark {
color: #BBBBBB;
} .sideBlock .days .hover {
pointer-events: none; margin-top: calc(-3px + 22px * 0); margin-left: -11px; padding: 2px; width: calc(100% - 48px); height: 22px; background-color: #6281EF; mix-blend-mode: lighten; border-radius: 20px; position: absolute; transition: margin-top 0.3s, visibility 0.3s, opacity 0.3s;
} .sideBlock .days .hover.invisible {
visibility: hidden; opacity: 0;
} @media (max-width: 800px) {
.sideBlock .days .hover { margin-left: -3px; }
}
.calendarbutton {
font-family: "montserrat-bold"; display: none; position: fixed; bottom: -100px; color: #FAFAFC; text-transform: uppercase; text-align: center; font-size: 1.3rem; width: 100%; box-sizing: border-box; padding: 16px; cursor: pointer; background-color: #222222; max-height: 60px; transition: 0.5s;
} .calendarbutton[onText=true] {
bottom: 0px;
} .calendarbutton.open {
bottom: 0px;
} @media (max-width: 800px) {
.calendarbutton { display: block; z-index: 21; bottom: 0px; }
}