m |
m |
||
Line 385: | Line 385: | ||
.calendarbutton.open { | .calendarbutton.open { | ||
bottom: 0px; | bottom: 0px; | ||
+ | } | ||
+ | .benchlingButtons { | ||
+ | display:flex; | ||
+ | column-gap: 16px; | ||
} | } | ||
@media (max-width: 900px) { | @media (max-width: 900px) { |
Latest revision as of 16:46, 17 December 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);
} .contentBlock .content .downloadButton:active, .contentBlock .content .sectionButtons div:active, .contentBlock .content .prevButton:active, .contentBlock .content .nextButton:active {
transform: translateY(2px);
}
body, html {
margin: 0; padding: 0; color: #222222; font-family: "lato-regular";
}
.contentBlock {
width: 54vw;
} @media (max-width: 900px) {
.contentBlock { margin-right: 0; width: unset; }
} .contentBlock .content {
display: flex; flex-direction: column; align-items: stretch; min-height: 700px;
} @media (max-width: 900px) {
.contentBlock .content { margin: unset; box-shadow: unset; padding: 30px; }
} .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 {
display: flex; align-items: center; justify-content: center; 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; overflow: hidden; position: relative;
} .contentBlock .content .downloadButton:hover {
box-shadow: 0 18px 40px -14px #6584ef;
} .contentBlock .content .downloadButton::after {
content: ""; color: transparent; display: block; background-color: rgba(0, 0, 0, 0.1); padding: 100px 200px; position: absolute; opacity: 0; transition: opacity 0.3s; pointer-events: none;
} .contentBlock .content .downloadButton:active::after {
opacity: 1;
} .contentBlock .content .sectionButtons {
display: flex; justify-content: stretch; align-items: center; margin: 20px -40px;
} @media (max-width: 900px) {
.contentBlock .content .sectionButtons { margin: 20px -30px; }
} .contentBlock .content .sectionButtons div {
padding: 16px 2px; 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: 900px) {
.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 .weekContent .subscript {
font-size: 0.3em; vertical-align: bottom;
} .contentBlock .content .weekButtons {
display: flex; flex-direction: row; justify-content: space-between; flex-grow: 1; align-items: flex-end;
} .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 .content a.button-wrapper {
align-self: center;
} .contentBlock::after {
display: none; content: unset;
}
@media (max-width: 900px) {
main { padding-bottom: 300px; justify-content: center; }
}
.sideBlockOverlay {
position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0; z-index: 19; background-color: rgba(0, 0, 0, 0.5); transition: opacity 0.5s;
} @media (max-width: 900px) {
.sideBlockOverlay.open { opacity: 1; pointer-events: unset; }
}
.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: 900px) {
.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%); max-width: unset; } .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: 900px) {
.sideBlock .title { display: flex; flex-direction: column; align-items: center; } .sideBlock .title::after { margin: 6px 0 16px; width: 100px; }
} .sideBlock .months {
font-family: "lato-heavy"; display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 20px; 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 span.darker {
color: #666; cursor: default;
} .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: 900px) {
.sideBlock .days .hover { margin-left: -3px; }
}
.calendarbutton {
font-family: "montserrat-bold"; display: none; position: fixed; bottom: -60px; height: 60px; 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; transition: 0.5s;
} .calendarbutton.notshow {
bottom: -60px;
} .calendarbutton.open {
bottom: 0px;
} .benchlingButtons {
display:flex; column-gap: 16px;
} @media (max-width: 900px) {
.calendarbutton { display: block; z-index: 21; bottom: 0px; transition: bottom 0.3s; }
}