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%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
background-color: #2C3E50;
|
background-color: #2C3E50;
|
||||||
width: 6vw;
|
width: 80px;
|
||||||
|
/* width: 6vw; */
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
input::before {
|
input::before {
|
||||||
right: calc(2vw);
|
right: calc(2vw);
|
||||||
}
|
}
|
||||||
input::after {
|
input::after {
|
||||||
left: calc(1vw);
|
left: calc(1vw);
|
||||||
}
|
}
|
||||||
input:checked {
|
input:checked {
|
||||||
background-color: #2C3E50;
|
background-color: #2C3E50;
|
||||||
}
|
}
|
||||||
input:checked::before {
|
input:checked::before {
|
||||||
background-color: #2C3E50;
|
background-color: #2C3E50;
|
||||||
}
|
}
|
||||||
input:checked::after {
|
input:checked::after {
|
||||||
background-color: #AEB6BF;
|
background-color: #AEB6BF;
|
||||||
}
|
}
|
||||||
input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
|
input:checked ~ input, input:checked ~ input::before, input:checked ~ input::after {
|
||||||
background-color: #AEB6BF;
|
background-color: #AEB6BF;
|
||||||
}
|
}
|
||||||
input:checked + .dot-info span {
|
input:checked + .dot-info span {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: rgb(243, 174, 252);
|
color: rgb(243, 174, 252);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dot-info {
|
.dot-info {
|
||||||
width: 25px;
|
width: 25px;
|
||||||
height: 25px;
|
height: 25px;
|
||||||
display: block;
|
display: flex;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
left: calc((((80vw - 25px) / 20) * -1) - 1px);
|
left: calc((((80vw - 25px) / 20) * -1) - 1px);
|
||||||
}
|
}
|
||||||
.dot-info span {
|
.dot-info span {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.dot-info span.year {
|
.dot-info span.year {
|
||||||
bottom: -30px;
|
bottom: -30px;
|
||||||
right: -0.2vw;
|
right: -0.2vw;
|
||||||
/* transform: translateX(-60%); */
|
/* transform: translateX(-60%); */
|
||||||
}
|
}
|
||||||
.dot-info span.label {
|
.dot-info span.label {
|
||||||
top: -56px;
|
top: -56px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
transform: rotateZ(-45deg);
|
transform: rotateZ(-45deg);
|
||||||
width: 70px;
|
width: 70px;
|
||||||
text-indent: -10px;
|
text-indent: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#timeline-descriptions-wrapper {
|
#timeline-descriptions-wrapper {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-top: 70px;
|
margin-top: 70px;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
margin-bottom: 200px;
|
margin-bottom: 200px;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
#timeline-descriptions-wrapper div {
|
#timeline-descriptions-wrapper div {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-description {
|
.timeline-description {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-description-subtitle {
|
.timeline-description-subtitle {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: rgb(121, 120, 120);
|
color: rgb(121, 120, 120);
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-description-list li {
|
.timeline-description-list li {
|
||||||
margin: 10px 40px;
|
margin: 10px 40px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.important-text {
|
.important-text {
|
||||||
color: rgb(255, 126, 126);
|
color: rgb(255, 126, 126);
|
||||||
}
|
}
|
||||||
|
|
||||||
input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
input[data-description="1"]:checked ~ #timeline-descriptions-wrapper div[data-description="1"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
input[data-description="2"]:checked ~ #timeline-descriptions-wrapper div[data-description="2"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
input[data-description="3"]:checked ~ #timeline-descriptions-wrapper div[data-description="3"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
input[data-description="4"]:checked ~ #timeline-descriptions-wrapper div[data-description="4"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-description="5"] {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1250px) {
|
@media (min-width: 1250px) {
|
||||||
input::before {
|
input::before {
|
||||||
left: -37.5px;
|
left: -37.5px;
|
||||||
}
|
}
|
||||||
@ -651,85 +652,85 @@ input::before, input::after {
|
|||||||
#timeline-descriptions-wrapper {
|
#timeline-descriptions-wrapper {
|
||||||
margin-left: -37.5px;
|
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 {
|
.input-flex-container {
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-top: 7vh;
|
margin-top: 7vh;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-bottom: 30px;
|
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@media (max-width: 480px) {
|
|
||||||
.input-flex-container {
|
input, .dot-info {
|
||||||
width: 340px;
|
width: 60px;
|
||||||
}
|
height: 60px;
|
||||||
|
margin: 0 10px 50px;
|
||||||
}
|
}
|
||||||
@media (max-width: 400px) {
|
|
||||||
.input-flex-container {
|
input {
|
||||||
width: 300px;
|
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">
|
<div data-description="1">
|
||||||
<h4>Opening Ceremony</h4>
|
<h4>Opening Ceremony</h4>
|
||||||
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
|
<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">
|
<ul class="timeline-description-list">
|
||||||
<li>You are required to attend this portion of the hackathon to participate</li>
|
<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>
|
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
|
||||||
@ -210,9 +210,9 @@
|
|||||||
<div class="info">
|
<div class="info">
|
||||||
<p class="title">Start discussing ideas for a project</p>
|
<p class="title">Start discussing ideas for a project</p>
|
||||||
<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>
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user