Updated styles

This commit is contained in:
James Dinh 2022-07-25 18:22:26 -07:00
parent f0ac39bc3c
commit e1ff69c4aa
2 changed files with 24 additions and 17 deletions

View File

@ -687,6 +687,10 @@ section {
padding-left: 20px; padding-left: 20px;
} }
.desc-list {
margin-left: 25px;
}
.list li{ .list li{
margin: 10px 0; margin: 10px 0;
} }
@ -1073,15 +1077,15 @@ section {
margin: 0 10px; margin: 0 10px;
} }
#zoom-link { .zoom-link {
border: 1px solid rgb(45, 140, 255); border: 1px solid rgb(45, 140, 255);
} }
.timeline-button#zoom-link:hover { .timeline-button.zoom-link:hover {
background-color: rgb(45, 140, 255); background-color: rgb(45, 140, 255);
} }
.timeline-button#zoom-link:hover > .timeline-icon{ .timeline-button.zoom-link:hover > .timeline-icon{
filter:hue-rotate(90deg); filter:hue-rotate(90deg);
} }
@ -1091,7 +1095,7 @@ section {
transition: 0.5s; transition: 0.5s;
} }
#zoom-tooltip::after { .tooltip.zoom-tooltip::after {
content: 'Unavailable'; content: 'Unavailable';
font-size: 16px; font-size: 16px;
top: 40px; top: 40px;

View File

@ -124,23 +124,26 @@
<div id="event-main-box"> <div id="event-main-box">
<div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div> <div id="description-content">Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local middle/high school students.</div>
<hr class="line"> <hr class="line">
<ul class="list"> <div class="list">
"Strengthen your skills and collaborate with others to create something useful."<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;- GHacks Team <p>"Strengthen your skills and collaborate with others to create something useful."<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;- GHacks Team</p>
<h3 class="desc-title">Main Events</h3> <h3 class="desc-title">Main Events</h3>
<ul style="margin-left: 25px"> <ul class="desc-list">
<ul>
<li><span class="emphasis-text">Aug 12</span> -> Opening Ceremony</li> <li><span class="emphasis-text">Aug 12</span> -> Opening Ceremony</li>
<li><span class="emphasis-text">Aug 13</span> -> Web Dev + Python Workshops</li> <li><span class="emphasis-text">Aug 13</span> -> Web Dev + Python Workshops</li>
<li><span class="emphasis-text">Aug 14</span> -> Project Presentations</li> <li><span class="emphasis-text">Aug 14</span> -> Project Presentations</li>
</ul> </ul>
</li> </ul>
<h3 class="desc-title">Details</h3> <h3 class="desc-title">Details</h3>
<ul style="margin-left: 25px"> <ul class="desc-list">
<ul>
<li><u>Hybrid model</u> - you may choose to code online or in-person</li> <li><u>Hybrid model</u> - you may choose to code online or in-person</li>
<li>Signups are limited to <u>middle and high school students only</u></li> <li>Signups are limited to <u>middle and high school students only</u></li>
<li>Workshops are <u>fully open to the public</u> (as space allows)</li> <li>Workshops are <u>fully open to the public</u> (as space allows)</li>
</ul> </ul>
</ul> </ul>
</div> </div>
</div>
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg --> <!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
<div id="timeline"> <div id="timeline">
<h2 id="timeline-heading">Timeline</h2> <h2 id="timeline-heading">Timeline</h2>
@ -190,7 +193,7 @@
<li>After this event, participants will <u>head back home</u> to start coding</li> <li>After this event, participants will <u>head back home</u> to start coding</li>
</ul> </ul>
<div class="timeline-links"> <div class="timeline-links">
<a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a> <a class="tooltip zoom-tooltip"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
</div> </div>
</p> </p>
</div> </div>
@ -245,7 +248,7 @@
<li>Your team will be graded on both the product and presentation as per the rubric</li> <li>Your team will be graded on both the product and presentation as per the rubric</li>
</ul> </ul>
<div class="timeline-links"> <div class="timeline-links">
<a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a> <a class="tooltip zoom-tooltip"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
<a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a> <a target="_blank" href="https://docs.google.com/document/d/1g0NyLcNGcteaXelcNRLpGSzd0l6Mky78ohbBQgQTDQY/edit?usp=sharing"><div class="timeline-button">View the Rubric</div></a>
</div> </div>
</p> </p>
@ -263,7 +266,7 @@
<li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link tooltip email-link email-replace-tech" target="_blank" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li> <li>For Questions, ask in the Discord server (#ask-questions), or contact tech support at <a class="link tooltip email-link email-replace-tech" target="_blank" href="mailto:tech@gilroyhacks.com">tech@gilroyhacks.com</a></li>
</ul> </ul>
<div class="timeline-links"> <div class="timeline-links">
<a class="tooltip" id="zoom-tooltip"><div class="timeline-button" id="zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a> <a class="tooltip zoom-tooltip"><div class="timeline-button zoom-link"><img class="timeline-icon" loading="lazy" src="img/zoom.png" alt="Zoom"></div></a>
</div> </div>
</p> </p>
</div> </div>