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

View File

@ -124,22 +124,25 @@
<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>
<hr class="line">
<ul class="list">
"Strengthen your skills and collaborate with others to create something useful."<br>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;- GHacks Team
<div class="list">
<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>
<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 13</span> -> Web Dev + Python Workshops</li>
<li><span class="emphasis-text">Aug 14</span> -> Project Presentations</li>
</ul>
</li>
<h3 class="desc-title">Details</h3>
<ul style="margin-left: 25px">
<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>Workshops are <u>fully open to the public</u> (as space allows)</li>
</ul>
</ul>
<h3 class="desc-title">Details</h3>
<ul class="desc-list">
<ul>
<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>Workshops are <u>fully open to the public</u> (as space allows)</li>
</ul>
</ul>
</div>
</div>
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
<div id="timeline">
@ -190,7 +193,7 @@
<li>After this event, participants will <u>head back home</u> to start coding</li>
</ul>
<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>
</p>
</div>
@ -245,7 +248,7 @@
<li>Your team will be graded on both the product and presentation as per the rubric</li>
</ul>
<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>
</div>
</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>
</ul>
<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>
</p>
</div>