Changed timeline responsiveness
This commit is contained in:
James Dinh
parent
4c2c2aa2db
commit
e68f7784f0
341
css/general.css
341
css/general.css
@ -530,113 +530,114 @@ input::before, input::after {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #2C3E50;
|
||||
width: 6vw;
|
||||
width: 80px;
|
||||
/* width: 6vw; */
|
||||
height: 5px;
|
||||
}
|
||||
input::before {
|
||||
right: calc(2vw);
|
||||
}
|
||||
input::after {
|
||||
left: calc(1vw);
|
||||
}
|
||||
input:checked {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked::before {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked::after {
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
input:checked + .dot-info span {
|
||||
font-size: 13px;
|
||||
color: rgb(243, 174, 252);
|
||||
font-weight: bold;
|
||||
}
|
||||
input::before {
|
||||
right: calc(2vw);
|
||||
}
|
||||
input::after {
|
||||
left: calc(1vw);
|
||||
}
|
||||
input:checked {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked::before {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked::after {
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
input:checked + .dot-info span {
|
||||
font-size: 13px;
|
||||
color: rgb(243, 174, 252);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dot-info {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
left: calc((((80vw - 25px) / 20) * -1) - 1px);
|
||||
}
|
||||
.dot-info span {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
}
|
||||
.dot-info span.year {
|
||||
bottom: -30px;
|
||||
right: -0.2vw;
|
||||
/* transform: translateX(-60%); */
|
||||
}
|
||||
.dot-info span.label {
|
||||
top: -56px;
|
||||
left: -10px;
|
||||
transform: rotateZ(-45deg);
|
||||
width: 70px;
|
||||
text-indent: -10px;
|
||||
}
|
||||
.dot-info {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
left: calc((((80vw - 25px) / 20) * -1) - 1px);
|
||||
}
|
||||
.dot-info span {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
font-size: 12px;
|
||||
}
|
||||
.dot-info span.year {
|
||||
bottom: -30px;
|
||||
right: -0.2vw;
|
||||
/* transform: translateX(-60%); */
|
||||
}
|
||||
.dot-info span.label {
|
||||
top: -56px;
|
||||
left: -10px;
|
||||
transform: rotateZ(-45deg);
|
||||
width: 70px;
|
||||
text-indent: -10px;
|
||||
}
|
||||
|
||||
#timeline-descriptions-wrapper {
|
||||
width: 100%;
|
||||
margin-top: 70px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
#timeline-descriptions-wrapper div {
|
||||
margin-top: 0;
|
||||
display: none;
|
||||
}
|
||||
#timeline-descriptions-wrapper {
|
||||
width: 100%;
|
||||
margin-top: 70px;
|
||||
font-size: 22px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 200px;
|
||||
text-align: left;
|
||||
}
|
||||
#timeline-descriptions-wrapper div {
|
||||
margin-top: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-description {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.timeline-description {
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.timeline-description-subtitle {
|
||||
font-size: 18px;
|
||||
color: rgb(121, 120, 120);
|
||||
}
|
||||
.timeline-description-subtitle {
|
||||
font-size: 18px;
|
||||
color: rgb(121, 120, 120);
|
||||
}
|
||||
|
||||
.timeline-description-list li {
|
||||
margin: 10px 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.timeline-description-list li {
|
||||
margin: 10px 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.important-text {
|
||||
color: rgb(255, 126, 126);
|
||||
}
|
||||
.important-text {
|
||||
color: rgb(255, 126, 126);
|
||||
}
|
||||
|
||||
input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
||||
display: block;
|
||||
}
|
||||
input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
||||
display: block;
|
||||
}
|
||||
input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
||||
display: block;
|
||||
}
|
||||
input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
||||
display: block;
|
||||
}
|
||||
input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
||||
display: block;
|
||||
}
|
||||
input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@media (min-width: 1250px) {
|
||||
@media (min-width: 1250px) {
|
||||
input::before {
|
||||
left: -37.5px;
|
||||
}
|
||||
@ -651,85 +652,85 @@ input::before, input::after {
|
||||
#timeline-descriptions-wrapper {
|
||||
margin-left: -37.5px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 630px) {
|
||||
.flex-parent {
|
||||
justify-content: initial;
|
||||
}
|
||||
@media (max-width: 630px) {
|
||||
.flex-parent {
|
||||
justify-content: initial;
|
||||
}
|
||||
|
||||
.input-flex-container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
margin-top: 7vh;
|
||||
margin-left: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
input, .dot-info {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 10px 50px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent !important;
|
||||
z-index: 1;
|
||||
}
|
||||
input::before, input::after {
|
||||
content: none;
|
||||
}
|
||||
input:checked + .dot-info {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked + .dot-info span.year {
|
||||
font-size: 14px;
|
||||
}
|
||||
input:checked + .dot-info span.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dot-info {
|
||||
visibility: visible;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
margin-left: -70px;
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
.dot-info span.year {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ECF0F1;
|
||||
}
|
||||
.dot-info span.label {
|
||||
top: calc(100% + 5px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-indent: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#timeline-descriptions-wrapper {
|
||||
margin-top: 30px;
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.input-flex-container {
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: auto;
|
||||
margin-top: 7vh;
|
||||
margin-left: 0;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.input-flex-container {
|
||||
width: 340px;
|
||||
}
|
||||
|
||||
input, .dot-info {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin: 0 10px 50px;
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.input-flex-container {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: transparent !important;
|
||||
z-index: 1;
|
||||
}
|
||||
input::before, input::after {
|
||||
content: none;
|
||||
}
|
||||
input:checked + .dot-info {
|
||||
background-color: #2C3E50;
|
||||
}
|
||||
input:checked + .dot-info span.year {
|
||||
font-size: 14px;
|
||||
}
|
||||
input:checked + .dot-info span.label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.dot-info {
|
||||
visibility: visible;
|
||||
border-radius: 50%;
|
||||
z-index: 0;
|
||||
left: 0;
|
||||
margin-left: -70px;
|
||||
background-color: #AEB6BF;
|
||||
}
|
||||
.dot-info span.year {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #ECF0F1;
|
||||
}
|
||||
.dot-info span.label {
|
||||
top: calc(100% + 5px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-indent: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#timeline-descriptions-wrapper {
|
||||
margin-top: 30px;
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.input-flex-container {
|
||||
width: 340px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
.input-flex-container {
|
||||
width: 300px;
|
||||
}
|
||||
}
|
||||
@ -126,7 +126,7 @@
|
||||
<div data-description="1">
|
||||
<h4>Opening Ceremony</h4>
|
||||
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
|
||||
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the final teams, prompts, rules, and timeline.<br>
|
||||
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.<br>
|
||||
<ul class="timeline-description-list">
|
||||
<li>You are required to attend this portion of the hackathon to participate</li>
|
||||
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
|
||||
@ -210,9 +210,9 @@
|
||||
<div class="info">
|
||||
<p class="title">Start discussing ideas for a project</p>
|
||||
<p>
|
||||
- Between now and the start of the hackathon is a great time to come up with project ideas w/ your team
|
||||
- Between now and the start of the hackathon is a great time to come up with project ideas & download any software you may need
|
||||
<br>
|
||||
- However, you can't start working on the project before the hackathon
|
||||
- However, you can't start working on the project until the hackathon begins
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user