New Hackathon Who Dis?
-A recap of Summer 2022:
--
-
- -
diff --git a/.DS_Store b/.DS_Store index 4ee1523..f1c2cc7 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/css/general.css b/css/general.css index 85e2661..ee36a07 100644 --- a/css/general.css +++ b/css/general.css @@ -1,3078 +1,3079 @@ -/* - Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) - - Web-Designed by James Dinh ᓚᘏᗢ from scratch using HTML, CSS, and JS - For more info, contact jamesdinh77 (at) protonmail (dot) com - - Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved. -*/ - -html { - scroll-behavior: smooth; -} - -/* Nav */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -.nav-container { - box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); - position: fixed; - width: 100%; - z-index: 3; -} - -/* menu */ - -.nav-container .nav-menu { - margin: 0; - padding: 0; - list-style: none; - overflow: hidden; - clear: none; - float: right; - max-height: none; - margin-right: 110px; -} - -.nav-container .nav-menu li { - display: inline-block; - line-height: 30px; - margin: 10px 7px; - padding: 3px 11px; - cursor: pointer; -} - -/* menu icon */ - -.nav-container .menu-icon { - display: none; -} - -.nav-container .menu-icon .navicon { - background: rgb(123, 123, 123); - display: block; - height: 2px; - position: relative; - transition: background .2s ease-out; - width: 18px; -} - -.nav-container .menu-icon .navicon:before, -.nav-container .menu-icon .navicon:after { - background: rgb(123, 123, 123); - content: ''; - display: block; - height: 100%; - position: absolute; - transition: all .2s ease-out; - width: 100%; -} - -.nav-container .menu-icon .navicon:before { - top: 5px; -} - -.nav-container .menu-icon .navicon:after { - top: -5px; -} - -/* menu btn */ - -.nav-container .menu-btn { - display: none; -} - -.nav-container .menu-btn:checked ~ .nav-menu { - max-height: 300px; - background-color: rgba(24, 24, 24, 0.988); - transition: 0.5s; -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon { - background: transparent; -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon:before { - transform: rotate(-45deg); -} - -.nav-container .menu-btn:checked ~ .menu-icon .navicon:after { - transform: rotate(45deg); -} - -.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, -.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { - top: 0; -} - -@keyframes slow-fade { - 0% { - background-color: rgb(24, 24, 24); - } - 90% { - background-color: unset; - } -} - -@media (max-width: 1050px) { - .nav-container .nav-menu { - clear: both; - max-height: 0; - transition: max-height .2s ease-out; - text-align: center; - width: 100%; - margin-right: 0; - } - .nav-container .nav-menu li { - display: block; - } - .nav-container .menu-icon { - cursor: pointer; - display: block; - float: right; - padding: 28px 20px; - position: relative; - user-select: none; - } - #sign-up { - right: 50px !important; - } - .nav-container .menu-btn:not(:checked) ~ .nav-menu { - animation: slow-fade 1s ease; - } -} - -nav { - height: 59px; - width: 100%; - top: 0; - left: 0; - position: fixed; - flex-wrap: nowrap; - z-index: 100; -} - -nav * { - padding: 0; - list-style: none; - box-sizing: border-box; - z-index: 100; - text-decoration: none; -} - -#nav-logo { - height: 50px; - width: 258px; - margin: 5px 0 0; -} - -#nav-logo:hover { - transform: scale(1.01); - transition: 0.5s; -} - -#nav-logo-a { - position: relative; - margin: 0; - margin-left: 10px; -} - -.navlink { - color:rgb(233, 203, 104); - font-size: 18px; - text-decoration: none; - position: relative; -} - -.navlink.active,.link:hover { - color: rgba(233, 203, 104, 0.774); - transition: .5s; -} - -.navlink::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 0.1em; - background-color: hotpink; - opacity: 1; - transition: opacity 300ms, transform 300ms; - transform: scale(0); - transform-origin: center; - } - -.navlink:hover::after, -.navlink:focus::after{ - transform: scale(1); -} - -.checkbtn { - font-size: 23px; - color: white; - float: right; - line-height: 59px; - margin-right: 20px; - cursor: pointer; - display: none; -} - -#check { - display: none; -} - -#nav-links-container { - display: flex; - width: auto; - margin: 0; - padding: 0; - height: 59px; - float: right; - flex-direction: row-reverse; - align-content: stretch; -} - -#nav-icon { - margin: 0 0 0 5px; -} - -#sign-up { - padding: 6px 7px; - margin: 14px 15px 14px 4px; - width: 72px; - border-radius: 5px; - font-size: 16px; - background-color: rgb(140, 42, 165); - color: bisque; - position: fixed; - display: inline-flex; - right: 10px; -} - -#sign-up:hover { - transform: scale(1.03); - filter: brightness(1.05); - cursor: pointer; - transition: 0.5s; -} - -#banner { - width: 70%; - position: absolute; - justify-content: center; - display: inline-flex; - top: 16px; - font-size: 20px; - margin: auto; - min-width: 310px; -} - -#banner-text { - text-align: center; -} - -.header-info { - display: flex; - flex-flow: row wrap; - max-width: 420px; - padding: 0 10px; - min-width: none; - justify-content: center; -} - -.header-info a { - margin: 0 5px; -} - -#timer { - color: rgb(184, 184, 184); - animation: blinking 3s infinite; - background-color: rgb(57, 57, 57); - border-radius: 5px; - padding: 2px 5px; - margin-left: 5px; - position: relative; - width: fit-content -} - -#timer::after { - content: 'Apr 15, 10am'; - position: absolute; - text-align: center; - align-items: center; - top: 30px; - right: calc(100% / 2); - padding: 2px 7px; - width: max-content; - opacity: 1; - background-color: #222429; - border-radius: 10px; - transition: opacity 300ms, transform 300ms; - transform: scale(0); - transform-origin: top; - } - - #timer:hover::after, - #timer:focus::after{ - transform: scale(1); -} - -#winners { - text-align: center; - position: absolute; - top: 59px; - background-color: #2c9643; - width: 100%; - font-size: 20px; - padding: 3px 5px; - animation: fadeInAnimation ease 2s; - animation-iteration-count: 1; - animation-fill-mode: forwards; -} - -#chart { - max-width: 650px; - margin: 35px auto; -} - -#team-emphasis { - color:rgb(180, 213, 253); -} - -.tooltip-nav { - text-decoration: none; - margin: 0; -} - -#timer-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; - background: unset; - margin-right: 10px; -} - -.link:hover { - color:rgba(252, 188, 93, 0.719); -} - -@keyframes blinking { - 0% { - filter: brightness(1); - } - 50% { - filter: brightness(0.8); - } - 100% { - filter: brightness(1); - } -} - -@keyframes dropdown{ - 0% { - opacity: 0; - transform: translateY(-30px); - } - 20% { - transform: translateY(0px); - opacity: 1; - } - 40% { - transform: translateY(-7px); - } - 100% { - transform: translateY(0px); - } -} - -/* Responsive Functions */ -@media (max-width: 1600px) { - #banner { - width: 50%; - } -} -@media (max-width: 1330px) { - #banner { - width: 30%; - } -} -@media (max-width: 1200px) { - #banner { - display: block; - top: 1px; - max-width: 200px; - min-width: 150px; - width: auto; - margin-left: 300px; - } - #timer-container { - display: block; - text-align: center; - } - #timer { - display: inline-block; - position: relative; - margin: 3px auto 0; - padding: 0px 5px; - } - #timer::after { - right: -15px; - } -} -@media (max-width: 900px) { - #prize-logo, .podium-label { - transform: scale(0.9); - font-size: 16px !important; - } - #podium-label-1 { - margin-right: 1px !important; - } - #podium-label-2 { - margin-left: 1px !important; - } - .header-background { - background-position: unset !important; - background-size: unset !important; - } - #logo { - height: 180px !important; - width: 180px !important; - } - header .waviy { - font-size: 45px; - } -} -@media (max-width: 700px) { - .header-link.tooltip::after { - display: none; - } -} -@media (max-width: 620px) { - #banner { - display: none; - } -} -@media (max-width: 500px) { - #signup-article, #rules, #prizes, #team { - transform: scale(0.9); - } - section { - padding-top: 0 !important; - } -} -@media (max-width: 470px) { - #nav-logo { - content: url(/img/logo_mini.png); - height: 45px; - width: 45px; - margin: 7px 0 0 5px; - } - #logo { - height: 2300px; - width: 230px; - } - #prizes-container, #banner { - transform: scale(0.9); - } - #banner { - display: block; - margin-left: 75px; - } -} -@media (max-width: 400px) { - #nav-logo { - content: url(/img/logo_mini.png); - height: 45px; - width: 45px; - margin: 7px 0 0 5px; - } - #logo { - height: 2300px; - width: 230px; - } - #prizes-container { - transform: scale(0.9); - } -} -@media (max-width: 370px) { - #banner { - display: none; - } -} -@media (max-height: 550px) { - #logo { - transform: scale(0.8); - } - .header-subtitle-date { - transform: translateY(-30px); - } - .spots-container { - transform: translateY(-30px); - } - #line-header { - transform: translateY(-30px); - } - #entrance-arrow { - visibility: hidden; - } -} -@media (max-height: 400px) { - .header { - transform: scale(0.7); - } -} - -.blob { - background: black; - border-radius: 50%; - box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); - margin: 10px 4px; - height: 10px; - width: 10px; - transform: scale(1); - animation: pulse-black 2s infinite; - position: relative; -} - -.blob.green { - background: rgba(51, 217, 178, 1); - box-shadow: 0 0 0 0 rgba(51, 217, 178, 1); - animation: pulse-green 2s infinite; -} - -.blob.gold { - background: rgb(254, 228, 84); - box-shadow: 0 0 0 0 rgba(254, 228, 84, 1); - animation: pulse-gold 2s infinite; -} - -@keyframes pulse-green { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7); - } - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); - } - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); - } -} - -@keyframes pulse-gold { - 0% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(254, 228, 84); - } - 70% { - transform: scale(1); - box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); - } - 100% { - transform: scale(0.95); - box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); - } -} - -/* Header */ -.header-background { - background-image: url(/img/background.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-attachment: fixed; - height: 100vh; -} - -.header-background.second { - height: 20%; -} - -.header { - width: 100%; - height: 100%; - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - text-align: center; - position: relative; -} - -.header.second { - padding: 70px 0 50px; - flex-flow: row nowrap; -} - -#second-logo { - height: 100px; - width: 100px; -} - -.header-container { - width: 100%; - height: 100%; - display: flex; - flex-flow: row nowrap; - justify-content: center; - - text-align: center; -} - -.header-logo-parent { - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -#logo { - height: 230px; - width: 230px; - animation: fadeInAnimation ease 3s; - animation-iteration-count: 1; - animation-fill-mode: forwards; -} - -.waviy { - position: relative; - display: flex; - font-size: 60px; -} -.waviy span { - font-family: "Norwester"; - font-weight: lighter; - margin: 0 1.4px; - position: relative; - display: inline-block; - left: 0%; - - animation: waviy 1s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.waviy span:hover { - padding-left: -20px; -} - -#top-logo-text { - color: #7ed957; -} - -#bottom-logo-text { - color: #72FFAF; -} - -@keyframes waviy { - 0% { - transform: translateY(-100px); - opacity: 0; - } - 10% { - opacity: 0; - } - 30% { - transform: translateY(0px); - opacity: 1; - } - 50% { - transform: translateY(-10px); - } - 100% { - transform: translateY(0px); - } -} - -.header-subtitle { - padding: 5px 7px; - margin-top: 5px; - border-radius: 10px; - display: flex; - width: fit-content; - place-items: center; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); -} - -.header-subtitle.donate { - background: rgb(98,0,255); - background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%); -} - -.header-link.left { - animation: slideinleft ease 1.5s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.header-link.right { - animation: slideinright ease 1.5s; - animation-delay: calc(var(--i)); - animation-fill-mode: both; -} - -.header-link { - background: unset !important; - color: white !important; - text-decoration: none; -} - -.header-link.second { - animation: none; -} - -#header-tooltip::after { - content: 'Add to Calendar →'; - top: 12px; - right: 160px; - transform-origin: right; - color: rgb(252, 188, 93); -} - -#header-tooltip-second::after { - content: '← Add to Calendar'; - top: 12px; - right: -110px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#spots-tooltip-second::after { - content: '← Sign up here'; - top: 12px; - right: -130px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#map-tooltip::after { - content: '← Open map'; - top: 12px; - right: -120px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#donate-tooltip::after { - content: '← Donate Page 💝'; - top: 12px; - right: -160px; - transform-origin: left; - color: rgb(252, 188, 93); -} - -#spots-tooltip::after { - content: 'Sign up here →'; - top: 12px; - right: 205px; - transform-origin: right; - color: rgb(252, 188, 93); -} - -.header-info-container { - display: flex; - flex-flow: column nowrap; - align-items: flex-start; - justify-content: center; -} - -@media (max-width: 610px) { - #header-tooltip::after, #spots-tooltip::after { - display: none; - } -} - -.header-icon { - margin-right: 6px; -} - -.spots-container { - display: flex; - place-items: center; - border-radius: 10px; - margin-top: 5px; - padding: 0 7px; - width: fit-content; - border: 1px solid rgb(73, 73, 73); - background-color: rgb(22, 22, 22); - background: rgb(20,48,10); - background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%); -} - -#header-subtitle-spots { - padding: 5px; -} - -.spots-container:hover, .header-subtitle:hover { - transform: translateY(-2px); - transition: 0.5s; -} - -#entrance-arrow { - width: 50px; - height: 50px; - position: absolute; - bottom: 10px; - float: bottom; - animation: bounce 3s infinite; -} - -#entrance-arrow:hover { - font-size: 17px; - transition: 0.1s; -} - -#header-gradient { - width: 100%; - height: 100%; - background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); -} - -.header-parent { - height: 100%; - display: flex; - flex-flow: row wrap; -} - -@keyframes bounce { - 0%, 20%, 50%, 80%, 100% { - transform: translateY(0); - } - 40% { - transform: translateY(-5px); - } - 60% { - transform: translateY(-3px); - } -} - -@keyframes fadeInAnimation { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} -@keyframes slideinleft { - 0% { - transform: translateX(-20px); - opacity: 0; - } - 60% { - opacity: 0; - transform: translateX(-20px); - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slideinright { - 0% { - transform: translateX(20px); - opacity: 0; - } - 60% { - transform: translateX(20px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -/* @keyframes slidein-2 { - 0% { - transform: translateY(20px); - opacity: 0; - } - 80% { - transform: translateY(20px); - opacity: 0; - } - 100% { - transform: translateY(0px); - opacity: 1; - } -} */ -@keyframes slidein-side { - 0% { - transform: translateX(-100px); - opacity: 0; - } - 40% { - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slidein-prize-2 { - 0% { - opacity: 0; - } - 40% { - transform: translateX(-30px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} -@keyframes slidein-prize-1 { - 0% { - opacity: 0; - } - 30% { - transform: translateY(-30px); - opacity: 0; - } - 100% { - transform: translateY(0px); - opacity: 1; - } -} -@keyframes slidein-prize-3 { - 0% { - opacity: 0; - } - 60% { - transform: translateX(30px); - opacity: 0; - } - 100% { - transform: translateX(0px); - opacity: 1; - } -} - -@keyframes modal-fade-in { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@media (prefers-reduced-motion: no-preference) { - .slide-animation { - animation: slidein-side ease 1s; - } - .slide-animation-prize-2 { - animation: slidein-prize-2 ease 3s; - } - .slide-animation-prize-1 { - animation: slidein-prize-1 ease 2s; - } - .slide-animation-prize-3 { - animation: slidein-prize-3 ease 3s; - } - .slide-animation-card-img { - animation: card-img-pullout ease 2s; - } - .slide-animation-card-desc { - animation: card-desc-pullout ease 2s; - } - .modal-animation { - animation: modal-fade-in ease 0.5s; - } -} - -/* Main Section */ -main { - width: 100%; - align-items: center; - justify-content: center; - text-align: center; - position: relative; - margin: auto; - display: grid; - padding-bottom: 70px; -} - -section { - width: auto; - padding-top: 70px; - text-align: center; - justify-content: center; - align-items: center; - max-width: 1500px; - min-width: 200px; -} - -.topic { - width: auto; - font-size: 35px; - padding: 0 20px 0 20px; - color:rgb(255, 243, 205); -} - -#event-container { - display: flex; - flex-wrap: wrap; - margin-top: 20px; - justify-content: center; -} - -#event-description { - margin: 0 20px; - max-width: 700px; - min-width: 200px; - font-size: 18px; - text-align: left; -} - -.description-heading { - text-align: center; - margin-bottom: 10px; -} - -#description-content { - text-align: center; - border-radius: 10px; - background-color: #202329; - padding: 15px 10px; - margin: auto; -} - -.desc-title { - margin-top: 15px; -} - -/* Splash text */ -.splash-container { - padding: 15px 20px; - border-radius: 10px; - border: 1px solid rgb(68, 68, 68); - margin: 10px 0; -} - -.splash-group { - display: flex; - flex-flow: row wrap; - justify-content: center; -} - -#why-GilroyHacks { - width: 100%; - min-width: 300px; - max-width: 315px; - margin: 15px; -} - -#who-GilroyHacks { - width: 100%; - min-width: 300px; - max-width: 315px; - margin: 15px; -} - -.splash-title { - color:rgb(51, 235, 189); - margin-bottom: 10px; -} - -.splash-desc { - line-height: 25px; -} - -#headline-recap { - color: #fbc334; -} - -.splide { - margin: 20px auto; -} - -.slide-content { - margin-bottom: 10px; - text-align: center; - max-width: fit-content; -} - -.splide, .splide__track, .splide__list, .splide__slide, .slide-content, .slide-img { - border-radius: 5px; -} - -.slide-caption { - position: relative; - bottom: 35px; - background-color: #232323b8; - padding: 2px 5px; - border-radius: 5px; -} - -.slide-img { - width: 100%; - height: auto; -} - -.splide__slide, .splide__slide:focus, .splide.is-focus-in, .splide__pagination__page:focus-visible { - border: none !important; - outline: none !important; -} - -li .splide__pagination__page.is-active { - background: #545454; -} - -.list { - padding-left: 20px; -} - -.desc-list { - margin-left: 25px; -} - -.list li{ - margin: 10px 0; -} - -.tooltip.zoom-tooltip::after { - content: 'Zoom Link'; - font-size: 16px; - top: 40px; - right: 12px; - color: rgb(45, 140, 255); -} - -.tooltip.zoom-tooltip-link::after { - content: 'Zoom Link'; - font-size: 16px; - top: 22px; - right: -22px; - color: rgb(45, 140, 255); -} - -#submit-tooltip:after { - content: 'Submission Form'; - right: -20px; -} - -#git-tooltip::after { - content: 'Git'; - color:#a6e2fa; - right: -3px; - top: 33px; -} - -#html-tooltip::after { - content: 'HTML'; - color:#a6e2fa; - right: -10px; - top: 33px; -} - -#python-tooltip::after { - content: 'Python'; - color:#a6e2fa; - right: -15px; - top: 33px; -} - -/* Signup Container */ -.signup-container { - margin: 20px auto; - } - -#steps-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #181a1d; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 0px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -/* Outer Layer with the steps border */ -.outer { - border-left: 2px solid #333; -} - -/* Card container */ -.card { - position: relative; - margin: 0 0 20px 20px; - padding: 10px; - background: rgb(49, 48, 48); - color: gray; - border-radius: 8px; - max-width: 400px; -} - -.card:hover { - filter: brightness(120%); - transition: 0.5s; -} - -/* Title of the card */ -.title { - color: rgb(255, 255, 255); - position: relative; - font-size: 16px; -} - -.step-desc { - color: gray; - width: 298px; -} - -/* Steps dot */ -.title::before { - content: ""; - position: absolute; - width: 10px; - height: 10px; - background: rgb(49, 48, 48); - border-radius: 50%; - margin-top: 3px; - left: -38px; - border: 2px solid rgb(255, 255, 255); -} - -.caption { - color: #8d8d8d; -} - -/* Signup Checklist */ -.checklist { - --text: #414856; - --check: #00ff37; - --disabled: #C3C8DE; - --border-radius: 10px; - background: var(--background); - position: relative; - display: grid; - grid-template-columns: 0px auto; - align-items: center; -} -.checklist label { - color: var(--text); - position: relative; - cursor: pointer; - display: grid; - align-items: center; - width: fit-content; - transition: color 0.3s ease; -} -.checklist label::before, .checklist label::after { - content: ""; - position: absolute; -} -.checklist label::before { - height: 2px; - width: 8px; - left: -35px; - border-radius: 2px; -} -.checklist label:after { - height: 4px; - width: 4px; - top: 8px; - left: -35px; - border-radius: 50%; -} -.checklist input[type=checkbox] { - appearance: none; - position: relative; - height: 15px; - width: 15px; - outline: none; - border: 0; - margin: 0 15px 0 0; - cursor: pointer; - background: var(--background); - display: grid; - align-items: center; -} -.checklist input[type=checkbox]::before, .checklist input[type=checkbox]::after { - content: ""; - position: absolute; - height: 2px; - top: auto; - background: var(--check); - border-radius: 2px; -} -.checklist input[type=checkbox]::before { - width: 0px; - transform-origin: right bottom; - z-index: 2; -} -.checklist input[type=checkbox]::after { - width: 0px; - transform-origin: left bottom; - z-index: 2; -} -.checklist input[type=checkbox]:checked::before { - animation: check-01 0.4s ease forwards; - left: -36px; -} -.checklist input[type=checkbox]:checked::after { - animation: check-02 0.4s ease forwards; - left: -31px; -} -.checklist input[type=checkbox]:checked + label { - color: var(--disabled); - animation: move 0.3s ease 0.1s forwards; -} -.checklist input[type=checkbox]:checked + label::before { - background: var(--disabled); - animation: slice 0.4s ease forwards; -} -.checklist input[type=checkbox]:checked + label::after { - animation: firework 0.5s ease forwards 0.1s; - left: -33px; -} - -@keyframes move { - 50% { - padding-left: 8px; - padding-right: 0px; - } - 100% { - padding-right: 4px; - } -} -@keyframes slice { - 60% { - width: 100%; - left: 4px; - } - 100% { - width: 100%; - left: -2px; - padding-left: 0; - } -} -@keyframes check-01 { - 0% { - width: 4px; - top: auto; - transform: rotate(0); - } - 50% { - width: 0px; - top: auto; - transform: rotate(0); - } - 51% { - width: 0px; - top: 8px; - transform: rotate(45deg); - } - 100% { - width: 5px; - top: 8px; - transform: rotate(45deg); - } -} -@keyframes check-02 { - 0% { - width: 4px; - top: auto; - transform: rotate(0); - } - 50% { - width: 0px; - top: auto; - transform: rotate(0); - } - 51% { - width: 0px; - top: 8px; - transform: rotate(-45deg); - } - 100% { - width: 10px; - top: 8px; - transform: rotate(-45deg); - } -} -@keyframes firework { - 0% { - opacity: 1; - box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; - } - 30% { - opacity: 1; - } - 100% { - opacity: 0; - box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; - } -} - -.card-info-container { - display: flex; - flex-flow: row wrap; - max-width: 400px; - min-width: 200px; - justify-content: space-around; - margin: 20px 0; -} - -.info-card { - min-width: 180px; - max-width: 400px; - padding: 10px 20px; - margin: 10px 0; - background-color: #197e47; - border-radius: 5px; -} - -.info-card.green { - background-color: #197e47; -} - -.info-card.blue { - background-color: #188592; -} - -.info-card.red { - background-color: #a83e32; -} - -.card-heading { - font-size: 30px; -} - -.apexcharts-menu { - background-color: #27293d!important; - border: 0px; - text-align: center; -} - -.apexcharts-menu-item:hover { - background-color: #3f3f3f!important; -} - -.tooltip { - position: relative; -} - -.tooltip::after { - content: ''; - position: absolute; - text-align: center; - align-items: center; - top: 22px; - right: -35px; - padding: 3px 7px; - width: max-content; - opacity: 1; - z-index: 1; - background-color: #222429; - border-radius: 10px; - transition: opacity 300ms, transform 300ms; - transform: scale(0); - transform-origin: top; - } - -.tooltip:hover::after { - transform: scale(1); -} - -#signup-link::after { - content: 'Signup Form'; -} - -.email-link::after { - content: 'Email'; - right: calc((100%/2) - 25px); -} - -#discord-link::after { - content: 'Discord Invite Link'; - right: -40px; -} - -#website::after { - content: 'Check out my website!'; - top: 100px; - color: rgb(255, 208, 137) -} - -.tooltip.discord::after { - content: 'Discord'; - color: rgb(128, 130, 245); - right: -70px; - top: -5px; - transform-origin: left; -} - -#facebook::after { - content: 'Facebook'; - right: -34px; - color: rgb(255, 208, 137) -} - -#instagram::after { - content: 'Instagram'; - right: -35px; - color: rgb(255, 208, 137) -} - -#youtube::after { - content: 'Youtube'; - right: -25px; - color: rgb(255, 208, 137) -} - -#sponsors { - margin-bottom: 10px; - padding-top: 30px; -} - -.wolfram-logo { - align-items: center; - justify-content: center; - display: flex; - width: 300px; -} - -#wolfram-star { - max-height: 60px !important; -} - -#wolfram-letters { - margin-left: 5px !important; - max-height: 35px !important; -} - -#sponsor-container { - display: flex; - flex-flow: row wrap; - padding: 20px 15px; - margin: 0 50px; - max-width: 1500px; - justify-content: space-evenly; -} - -#sponsor-container a { - padding: 7px 0px; - margin: 5px 20px; - align-content: center; -} - -#sponsor-container img { - max-height: 80px; - max-width: 370px; -} - -#sponsor-container a:hover { - animation: 0.3s ease shake; -} - -@keyframes shake { - 0% { - transform:rotate(0.5deg); - } - 33% { - transform:rotate(-0.5deg); - } - 66% { - transform:rotate(0.5deg); - } - 100% { - transform:rotate(0deg); - } -} - -#sponsor-container img { - margin: 10px 0; -} - -#gilroy-library-logo { - height: 120px; - width: 352px; -} - -#gavilan-college-logo { - height: 102px; - width: 352px; -} - -#gear-club-logo { - height: 60px; - width: 352px; -} - -/* Schedule */ -#schedule { - padding-top: 70px; - margin-bottom: 30px; -} - -.schedule-parent { - display: flex; - flex-flow: row wrap; - justify-content: center; - max-width: 1300px; - width: 95%; - margin: auto; -} - -.schedule-element { - padding: 20px 20px; - margin-top: 20px; - width: 95%; - min-width: 370px; - max-width: 650px; - background-color: rgb(29, 27, 36); - border-radius: 10px; -} - -.time-column-header { - margin-bottom: 20px; - font-size: 30px; - text-decoration: underline; -} - -.schedule-container { - display: grid; - margin: auto; - grid-gap: 0.2rem; - grid-template-columns: 4rem repeat(4, 1fr); - grid-template-rows: repeat(14, 1fr); - grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage"; -} - -.modal { - border: 1px solid rgb(142, 102, 177); - background-color: #23262a; - min-width: 350px; - max-width: 500px; - position: fixed; - margin: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - display: none; - text-align: left; - border-radius: 5px; - overflow: hidden; - z-index: 2; -} - -.modal-header { - background-color: rgb(147, 29, 141); - padding: 5px 10px; -} - -.modal-desc { - padding: 8px 10px 15px; -} - -.button-close-modal { - display: block; - float: right; - background-color: unset; - border: none; - cursor: pointer; - margin-right: 5px; - display: block; - height: 2px; - position: relative; - width: 20px; - height: 20px; - padding: 15px 20px 10px 10px; - cursor: pointer; -} - -.button-close-modal:before, -.button-close-modal:after { - background: rgb(200, 200, 200); - content: ''; - display: block; - height: 2px; - position: absolute; - transition: all .2s ease-out; - width: 13px; -} - -.button-close-modal:hover { - transform: scale(1.05); - filter: brightness(1.1); - transition: 0.3s; -} - -.button-close-modal:before { - transform: rotate(-45deg); -} - -.button-close-modal:after { - transform: rotate(45deg); -} - -#modal-overlay { - width: 100%; - height: 100%; - display: none; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - bottom: 0; - left: 0; - right: 0; - background-color: rgba(0, 0, 0, .5); - opacity: 0; - transition: opacity .2s ease; -} - -.timeline-description { - font-size: 16px; - font-weight: normal; -} - -.timeline-description-list li { - margin: 10px 40px; - font-size: 16px; -} - -.important-text { - color: rgb(255, 126, 126); -} - -.timeline-links { - display: flex; - flex-flow: row wrap; - justify-content: center; - text-align: center; - text-decoration: none !important; - margin-top: 15px; -} - -.timeline-icon { - height: 23px; - width: 75px; - float: left; -} - -.timeline-button { - color: rgb(233, 203, 104); - text-decoration: none; - border-radius: 5px; - font-size: 18px; - border: 1px solid rgb(192, 168, 88); - padding: 5px; - display: inline-block; - margin: 0 10px; -} - -.zoom-link { - border: 1px solid rgb(45, 140, 255); -} - -.timeline-button.zoom-link:hover { - background-color: rgb(45, 140, 255); -} - -.timeline-button.zoom-link:hover > .timeline-icon{ - filter:hue-rotate(60deg); -} - -.timeline-button:hover { - color: white; - background-color: rgb(192, 168, 88); - transition: 0.5s; -} - -/** - * Time - */ -.time { - display: flex; - justify-content: flex-end; - height: 100%; - padding: 0 0.5rem; -} - -.time span { - position: relative; - bottom: 10px; -} - -.time.start-800 { - grid-area: time800; -} -.time.start-900 { - grid-area: time900; -} -.time.start-1000 { - grid-area: time1000; -} -.time.start-1100 { - grid-area: time1100; -} -.time.start-1200 { - grid-area: time1200; -} -.time.start-1300 { - grid-area: time1300; -} -.time.start-1400 { - grid-area: time1400; -} -.time.start-1500 { - grid-area: time1500; -} -.time.start-1600 { - grid-area: time1600; -} -.time.start-1700 { - grid-area: time1700; -} -.time.start-1800 { - grid-area: time1800; -} -.time.start-1900 { - grid-area: time1900; -} -.time.start-2000 { - grid-area: time2000; -} -.time.start-2100 { - grid-area: time2100; -} - -/** - * Event - */ -.event { - display: flex; - justify-content: center; - flex-direction: column; - padding: 0.2rem 1rem; - background-color: rgb(157, 0, 149); - border-radius: 0.2rem; - font-size: 18px; - border-top: thin solid rgb(68, 68, 68); - cursor: pointer; - position: relative; -} -.event span { - display: block; - width: 100%; - font-size: 14px; - color: rgb(177, 177, 177); -} -.event.empty { - background-color: unset; - cursor: unset; -} - -.event:hover:not(.empty) { - filter: brightness(1.1); - transform: translateY(-2px); - transition: 0.3s; -} - -.event.start-800 { - grid-row-start: time800; -} -.event.start-900 { - grid-row-start: time900; -} -.event.start-1000 { - grid-row-start: time1000; -} -.event.start-1100 { - grid-row-start: time1100; -} -.event.start-1200 { - grid-row-start: time1200; -} -.event.start-1300 { - grid-row-start: time1300; -} -.event.start-1400 { - grid-row-start: time1400; -} -.event.start-1500 { - grid-row-start: time1500; -} -.event.start-1600 { - grid-row-start: time1600; -} -.event.start-1700 { - grid-row-start: time1700; -} -.event.start-1800 { - grid-row-start: time1800; -} -.event.start-1900 { - grid-row-start: time1900; -} -.event.start-2000 { - grid-row-start: time2000; -} -.event.start-2100 { - grid-row-start: time2100; -} -.event.end-800 { - grid-row-end: time800; -} -.event.end-900 { - grid-row-end: time900; -} -.event.end-1000 { - grid-row-end: time1000; -} -.event.end-1100 { - grid-row-end: time1100; -} -.event.end-1200 { - grid-row-end: time1200; -} -.event.end-1300 { - grid-row-end: time1300; -} -.event.end-1400 { - grid-row-end: time1400; -} -.event.end-1500 { - grid-row-end: time1500; -} -.event.end-1600 { - grid-row-end: time1600; -} -.event.end-1700 { - grid-row-end: time1700; -} -.event.end-1800 { - grid-row-end: time1800; -} -.event.end-1900 { - grid-row-end: time1900; -} -.event.end-2000 { - grid-row-end: time2000; -} -.event.end-2100 { - grid-row-end: time2100; -} -.event.length-1 { - grid-column-end: span 1; -} -.event.length-2 { - grid-column-end: span 2; -} -.event.length-3 { - grid-column-end: span 3; -} -.event.length-4 { - grid-column-end: span 4; -} -.event.small { - font-size: 16px; -} - -.logistics { - background-color: rgb(147, 29, 141); -} -.hacking { - background-color: rgb(53, 53, 199); -} -.food { - background-color: #03833b; -} -.workshop { - background-color: rgb(109, 40, 194); -} -.game { - background-color: rgb(105, 94, 139); -} - -.logistics-border { - border: 1px solid rgb(147, 29, 141); -} -.hacking-border { - border: 1px solid rgb(53, 53, 199); -} -.food-border { - border: 1px solid #03833b; -} -.workshop-border { - border: 1px solid rgb(109, 40, 194); -} -.game-border { - border: 1px solid rgb(105, 94, 139); -} - - -#map-article { - margin: 20px auto 0; - width: 90%; - max-width: 1100px; -} - -#cal-parent { - display: flex; - flex-wrap: wrap; - justify-content: center; -} - -#cal-container { - display: flex; - flex-direction: column; - flex-wrap: wrap; - width: 440px; - min-width: 400px !important; - height: auto; - justify-content: center; -} - -.cal-card { - width: 100%; - border-radius: 7px; - border: 1px solid white; -} - -.cal-card:hover { - transform: translateY(-5px); - background-color: #0f1318; - transition: 0.5s; -} - -/* .cal-card:hover > #community-room { - visibility: visible !important; -} */ - -#fri { - background-color: #18b14b65; -} - -#sat { - background-color: #cc1b1b65; -} - -#sun { - background-color: #cc83148a; -} - -.cal-entry { - display: flex; - align-content: stretch; - width: 100%; - height: 100%; - padding: 10px; - border-radius: 10px; -} - -.day-of-week { - font-size: 35px; -} - -.cal-date { - display: flex; - flex-direction: column; - padding: 5px 10px; - width: 110px; - height: 75px; - border-radius: 10px; -} - -.cal-subtitle { - color: rgb(150, 150, 150); -} - -.cal-title { - text-align: center; - text-decoration: underline; - margin-bottom: 10px; -} - -.vertical-line { - width: 2px; - margin: 0 10px; - background-color: rgb(88, 88, 88); -} - -.cal-desc { - justify-content: center; - width: 100%; -} - -.event-list { - display: flex; - flex-direction: column; - flex-wrap: wrap; -} - -.event-entry { - display: flex; - flex: row nowrap; - height: 30px; - margin-bottom: 7px; -} - -@media (max-width: 487px) { - .event-entry { - height: auto; - } -} - -.time-column { - width: 35%; - height: 100%; - text-align: right; -} - -.event-column { - width: 75%; - height: 100%; - text-align: left; - padding-left: 15px; -} - -.event-time { - color: gray; -} - -.map-title { - font-size: 25px; - margin: 10px 0; -} - -#map-div { - width: 660px; - height: 462px; -} - -#map-container { - border-radius: 10px; - padding: 3px; - width: 100%; - height: 100%; - border: 1px solid white; - position: relative; - min-width: 375px; -} - -#map { - height: 100%; - width: 100%; - - border-radius: 10px; - position: relative; - z-index: 1; - - display: flex; - align-items: center; - justify-content: center; -} - -/* Workshops */ -.flex-container { - display: flex; - flex-flow: row wrap; - margin-top: 20px; - justify-content: center; - align-items: flex-start; - width: 90%; - margin: 20px auto 0; -} - -.workshop-entry { - margin: 20px; - min-width: 350px; - max-width: 500px; - border-radius: 10px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; - overflow: hidden; -} - -.workshop-entry:hover { - transform: translateY(-4px); - transition: 0.5s; -} - -#webdev-workshop { - background-image: - linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), - url(/img/webdev.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-color: rgb(102, 85, 61); - background-blend-mode: multiply; - /* Photo by Tranmautritam: https://www.pexels.com/photo/information-sign-on-shelf-251225/ */ -} - -#python-workshop { - background-image: - linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), - url(/img/python_code.jpg); - background-position: center; - background-size: cover; - background-repeat: no-repeat; - background-color: rgb(53, 79, 110); - background-blend-mode: multiply; - /* Photo SRC: https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink */ -} - -.workshop-header { - padding: 10px 30px 15px; - display: grid; - grid-template-columns: auto auto; - background-color: rgb(19, 29, 41); -} - -.workshop-title { - display: flex; - flex-flow: column nowrap; -} - -.title-font-weight { - font-size: 25px; -} - -.workshop-subtitle { - margin-top: 3px; - font-size: 15px; - color: rgb(168, 168, 168); -} - -.workshop-topics { - float: right; - display: flex; - flex-flow: row-reverse; -} - -.workshop-img { - height: 30px; - width: 30px; - margin-left: 10px; -} - -.workshop-desc { - padding: 10px 35px; - background-color: #1b1c20; -} - -.workshop-date { - padding: 7px 20px; - text-align: center; - background-color: #3a3344; - display: flex; - flex-flow: row wrap; - justify-content: space-between; - font-size: 20px; - align-items: center; -} - -.workshop-date div { - margin: 0 10px; -} - -.cal-tooltip::after { - content: 'Add to Calendar'; - font-size: 16px; - top: 30px; - right: -20px; -} - -.link.workshop-link { - background: unset; -} - -.workshop-icon { - float: left; - margin-top: 2px; - margin-right: 5px; -} - -.workshop-instructor { - width: 20px; - height: 20px; - margin: 0 5px 0 10px; -} - -.instructor-img { - width: 20px; - height: 20px; - border-radius: 50%; - border-radius: 50%; - border: 1px solid rgb(161, 161, 161); -} - -.workshop-slides { - display: flex; - flex-flow: row nowrap; - width: 100%; -} - -.workshop-topics-covered { - width: 50%; - min-width: 150px; -} - -.workshop-presentation { - text-align: center; - justify-content: center; - float: right; - width: 50%; -} - -.slides-thumbnail { - padding: 10px 15px; -} - -.slides-thumbnail:hover { - transform: scale(1.05); - transition: 0.5s; -} - -.slides-element { - width: 100%; - height: 100%; - border-radius: 5px; - border: 1px solid rgb(102, 102, 102); -} - -.tooltip#python-slides-tooltip::after { - content: 'Intro to Python Programming'; - color: rgb(252, 188, 93); - right: -11px; -} - -.tooltip#webdev-slides-tooltip::after { - content: 'Web Dev & Git Version Control'; - color: rgb(252, 188, 93); - right: -17px; -} - -.tooltip#python-slides-tooltip::after { - content: 'Intro to Python Programming'; - color: rgb(252, 188, 93); - right: -11px; -} - -.workshop-difficulty { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - background-color: #176e2a; - padding: 3px 30px; - justify-content: space-around; -} - -.workshop-status { - display: flex; - justify-content: center; - align-items: center; - width: 100%; - background-color: #963c3c; - padding: 3px 30px; - justify-content: space-around; -} - -.workshop-footer { - padding: 10px 30px; - text-align: center; - background-color: #151618; - display: flex; - justify-content: center; - align-items: center; -} - -#license-list { - display: flex; - flex-flow: column wrap; - width: 100%; - height: auto; - margin: auto; - padding-left: 10px; -} - -#license-list ul { - margin-left: 20px; -} - -.license-entry { - width: 100%; - height: auto; - padding: 10px; - text-align: left; - overflow-wrap: break-word; -} - -/* Contact */ -.contact-form { - margin-top: 30px; - min-width: 300px; - width: 40vw; -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -input:-webkit-autofill:active { - transition: background-color 5000s ease-in-out 0s; - -webkit-text-fill-color: #fff !important; - caret-color: #fff; -} - -.input-block { - background-color: #202329; - border-radius: 10px; - width: 100%; - height: 60px; - padding: 25px; - position: relative; - margin-bottom: 20px; - transition: all 0.3s ease-out; -} -.input-block.focus { - background-color: #282c33; - transition: 0.5s; -} -.input-block.textarea { - height: auto; - font-size: 18px; -} -.form-control { - height: auto; - width: 100%; - resize: vertical; - font-family: "Glacial Indifference"; -} -.input-block label { - position: absolute; - left: 25px; - top: 25px; - display: block; - margin: 0; - font-weight: 300; - z-index: 1; - color: rgb(199, 199, 199); - font-size: 18px; - line-height: 10px; -} -.input-block .form-control { - background-color: transparent; - padding: 5px; - border: none; - border-radius: 0; - box-shadow: none; - height: auto; - position: relative; - z-index: 2; - font-size: 18px; - color: #fff; -} -option { - background-color: #343942; -} -.input-block .form-control:focus label { - top: 0; -} -.square-button { - background-color: #383e49; - color: #f3bc6a; - font-size: 26px; - text-transform: uppercase; - font-weight: 700; - text-align: center; - border-radius: 6px; - transition: all 0.3s ease; - height: 60px; - border: none; - width: 30%; -} -.square-button:hover, .square-button:focus { - filter: brightness(0.8); - cursor: pointer; -} - -@media (min-width: 768px) { - .contact-wrap { - width: 60%; - margin: auto; - } -} - -/* Rules */ -#rules-description { - margin: 10px 20px; - font-size: 18px; -} - -#photo-description { - margin: 10px 20px; -} - -.rules-box { - border-radius: 10px; - border: 1px solid white; - background-color: #272b1f; - margin: 10px auto; - width: 90%; - max-width: 850px; - min-width: 350px; - padding: 10px; -} - -#disclaimer { - background-color: #2b1f20; -} - -#rules-container { - display: flex; - flex-wrap: wrap; - margin-top: 20px; - justify-content: center; -} - -#guidelines { - margin: 20px; -} - -#code-of-conduct { - margin: 20px; -} - -.rules-card { - position: relative; - padding: 10px; - margin: 0 0 20px 20px; - background: rgb(47, 55, 70); - color: rgb(179, 179, 179); - border-radius: 8px; - max-width: 400px; -} - -.code-card { - background: rgb(40, 63, 52); -} - -#rules-main-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #131d29; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -#code-main-card { - width: 400px; - min-width: 300px; - border-radius: 10px; - background-color: #15271b; - margin: 10px auto; - padding: 10px 30px; - box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); - text-align: left; -} - -#rules-header { - padding-top: 10px; -} - -/* Title of the card */ -.rules-title { - color: rgb(253, 103, 103); - position: relative; - font-size: 17px; -} - -.code-title { - color: rgb(212, 100, 223); -} - -.rules-card::before { - content: ""; - font-size: 30px; - position: absolute; - width: 10px; - height: 10px; - left: -28px; -} - -.rules-1::before { - content: "1"; -} -.rules-2::before { - content: "2"; -} -.rules-3::before { - content: "3"; -} -.rules-4::before { - content: "4"; -} -.rules-5::before { - content: "5"; -} - -.rules-card:hover { - filter: brightness(1.2); - transition: 0.5s; -} - -#prizes-container { - display: grid; - margin: 50px auto 0; - width: 80%; - height: auto; - justify-content: center; - grid-template-columns: repeat(3, 1fr); -} - -.podium-description { - width: 100%; - height: auto; - - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -.prize-desc { - width: 100%; - height: auto; - - display: flex; - flex-flow: column nowrap; - justify-content: center; - align-items: center; - - text-align: center; - position: relative; -} - -.prize-desc:hover > .prize-text { - transform: rotate3d(0, 1, 0, 360deg); - transition: ease-in-out 0.5s; -} - -.prize-laurel { - height: 150px; - width: 150px; - position: relative; -} - -.prize-text { - position: absolute; - color: rgb(167, 146, 234); - font-size: 25px; - margin-bottom: 160px; - line-height: 25px; - z-index: 1; -} - -#first-prize-title { - margin-bottom: 180px; -} - -.prize-title { - color: rgb(167, 146, 234); - font-size: 30px; -} - -.prize-subtitle { - margin: 10px 0; -} - -.prize-column { - display: flex; - flex-flow: column-reverse; -} - -#second-podium { - width: 100%; - height: 50px; - background-color: #333; -} - -#first-podium { - width: 100%; - height: 90px; - background-color: #333; - align-items: center; - text-align: center; - display: flex; - justify-content: center; -} - -#third-podium { - width: 100%; - height: 40px; - background-color: #333; -} - -.podium-edge { - width: 105%; - height: 10px; - background-color: #24282e; - border-radius: 4px; - z-index: 1; -} - -#prize-logo { - height: 50px; - width: 50px; - border-radius: 50%; - border: 1px solid rgb(119, 119, 119); -} - -.podium-label { - position: relative; - font-size: 20px; -} - -#podium-label-1 { - margin-right: 7px; - color: #7ed856; -} - -#podium-label-2 { - margin-left: 7px; - color: #018036; -} - -.prize-img { - height: 85px; -} - -#prize-box { - border-radius: 10px; - border: 1px solid white; - background-color: #2c2c2c; - margin: 30px auto 10px; - width: 70%; - max-width: 850px; - min-width: 350px; - padding: 10px; -} - -#prize-list { - list-style: none; -} - -/* Team */ -#team-container { - width: 100%; - height: auto; - display: flex; - flex-wrap: wrap; - justify-content: center; - text-align: center; -} - -#team-container article { - padding: 20px 35px; - width: 430px; -} - -.team-title { - font-size: 25px; - color:rgb(161, 245, 150); - margin-bottom: 10px; -} - -.team-entry { - display: flex; - align-content: stretch; - padding: 15px; - border-radius: 10px; - width: 357px; - border: 0px solid rgb(54, 54, 54); -} - -@keyframes card-img-pullout { - 0% { - transform: translateX(110px); - } - 50% { - transform: translateX(110px); - } - 100% { - transform: translateX(0px); - } -} -@keyframes card-desc-pullout { - 0% { - transform: translateX(-110px); - opacity: 0; - } - 50% { - transform: translateX(-110px); - } - 80% { - opacity: 0; - } - 100% { - opacity: 1; - transform: translateX(0px); - } -} - -.team-entry:hover { - transform: scale(1.01); - border: 1px solid rgb(54, 54, 54); - transition: 0.5s; -} - -.team-picture { - width: auto; - height: auto; -} - -.team-picture img { - height: 100px; - width: 100px; - border-radius: 50%; - border: 1px solid rgb(161, 161, 161); -} - -#jd { - border: 0px; -} - -.team-description { - text-align: left; - width: auto; - display: block; - margin-left: 18px; -} - -.person-name { - font-size: 20px; - color:rgb(99, 169, 250); - padding-bottom: 2px; -} - -.person-subtitle { - font-size: 15px; - color: rgb(129, 129, 129); -} - -.person-contact { - font-size: 15px; - padding-top: 16px; - font-style: normal; -} - -/* Utilities */ -#line-header { - width: 200px; - margin: 10px 0; - animation: grow-wide ease 2s; -} - -.vertical-line.second { - width: 2px; - margin: 0 10px; - background-color: rgb(255, 255, 255); -} - -@keyframes grow-wide { - 0% { - transform: scale(0); - } - 100% { - transform: scale(1); - } -} - -.tooltip-rules { - text-decoration: underline dotted; - cursor: help; -} - -.emphasis-text { - color:rgb(51, 235, 189); -} - -.discord-text { - color: rgb(110, 112, 247); -} - -.discord-tag { - color: rgb(150, 150, 150); -} - -.line { - width: 100px; - margin: 10px auto; -} - -#arrow-link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; -} - -.bottom-text { - margin: 10px 5px; -} - -.link { - color:rgb(252, 188, 93); - text-decoration: none; - cursor: pointer; - background: - linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)), - linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1)); - background-size: 100% 0.1em, 0 0.1em; - background-position: 100% 100%, 0 100%; - background-repeat: no-repeat; - transition: background-size 400ms; -} - -.link:hover { - color:rgba(252, 188, 93, 0.719); - background-size: 0 0.1em, 100% 0.1em; -} - -.new-tab-icon { - fill: white; - height: 10px; - margin-left: 5px; -} - -.new-tab-icon.sub-icon { - height: 15px; - margin-left: 8px; -} - -.discord-icon { - width: 16px; - height: 16px; - fill: rgb(110, 112, 247); - float: left; - margin-right: 5px; -} - -@media (max-width: 869px) { - #footer-desc { - margin-bottom: 20px; - } -} - -@media (max-width: 565px) { - footer * { - text-align: center; - justify-content: center; - } - .footer-title { - margin-bottom: 0 !important; - } - #footer-desc, #footer-links, #footer-location { - margin-right: 0 !important; - margin-bottom: 20px; - } -} - -.donate-button { - color: white; - text-decoration: none; -} - -footer { - width: auto; - height: auto; - background-color: rgb(24, 24, 24); - justify-content: center; - align-items: left; - text-align: center; - padding: 20px; - flex-flow: row wrap; -} - -#footer-container { - width: 100%; - display: flex; - flex-wrap: wrap; - justify-content: center; - align-content: stretch; -} - -#footer-logo { - height: 45px; - width: 232px; - margin-left: -5px; -} - -#footer-desc { - width: 350px; - text-align: left; - line-height: 25px; - font-size: 18px; - margin-right: 40px; -} - -#socials { - display: flex; - flex-wrap: wrap; - margin-top: 10px; -} - -.socials-icon { - margin-right: 10px; -} - -#footer-copyright { - color: rgb(129, 129, 129); -} - -#footer-line { - width: 100%; - margin: 10px auto; -} - -#footer-links { - width: 180px; - margin-top: 7px; - margin-right: 20px; - text-align: left; -} - -.footer-title { - margin-bottom: 19px; -} - -#footer-location { - width: 220px; - margin-top: 7px; - margin-right: 20px; - text-align: left; -} - -footer li { - line-height: 30px; - list-style: none; -} - -/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and -coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? -Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to +/* + Gilroy Hacks Website Source Code -> CSS (https://gilroyhacks.com) + + Web-Designed by James Dinh ᓚᘏᗢ from scratch using HTML, CSS, and JS + For more info, contact jamesdinh77 (at) protonmail (dot) com + + Copyright Disclaimer: This Source Code is Copyright (c) 2022 Gilroy Hacks All Rights Reserved. +*/ + +html { + scroll-behavior: smooth; +} + +/* Nav */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +.nav-container { + box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1); + position: fixed; + width: 100%; + z-index: 3; +} + +/* menu */ + +.nav-container .nav-menu { + margin: 0; + padding: 0; + list-style: none; + overflow: hidden; + clear: none; + float: right; + max-height: none; + margin-right: 110px; +} + +.nav-container .nav-menu li { + display: inline-block; + line-height: 30px; + margin: 10px 7px; + padding: 3px 11px; + cursor: pointer; +} + +/* menu icon */ + +.nav-container .menu-icon { + display: none; +} + +.nav-container .menu-icon .navicon { + background: rgb(123, 123, 123); + display: block; + height: 2px; + position: relative; + transition: background .2s ease-out; + width: 18px; +} + +.nav-container .menu-icon .navicon:before, +.nav-container .menu-icon .navicon:after { + background: rgb(123, 123, 123); + content: ''; + display: block; + height: 100%; + position: absolute; + transition: all .2s ease-out; + width: 100%; +} + +.nav-container .menu-icon .navicon:before { + top: 5px; +} + +.nav-container .menu-icon .navicon:after { + top: -5px; +} + +/* menu btn */ + +.nav-container .menu-btn { + display: none; +} + +.nav-container .menu-btn:checked ~ .nav-menu { + max-height: 300px; + background-color: rgba(24, 24, 24, 0.988); + transition: 0.5s; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon { + background: transparent; +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:before { + transform: rotate(-45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon .navicon:after { + transform: rotate(45deg); +} + +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, +.nav-container .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after { + top: 0; +} + +@keyframes slow-fade { + 0% { + background-color: rgb(24, 24, 24); + } + 90% { + background-color: unset; + } +} + +@media (max-width: 1050px) { + .nav-container .nav-menu { + clear: both; + max-height: 0; + transition: max-height .2s ease-out; + text-align: center; + width: 100%; + margin-right: 0; + } + .nav-container .nav-menu li { + display: block; + } + .nav-container .menu-icon { + cursor: pointer; + display: block; + float: right; + padding: 28px 20px; + position: relative; + user-select: none; + } + #sign-up { + right: 50px !important; + } + .nav-container .menu-btn:not(:checked) ~ .nav-menu { + animation: slow-fade 1s ease; + } +} + +nav { + height: 59px; + width: 100%; + top: 0; + left: 0; + position: fixed; + flex-wrap: nowrap; + z-index: 100; +} + +nav * { + padding: 0; + list-style: none; + box-sizing: border-box; + z-index: 100; + text-decoration: none; +} + +#nav-logo { + height: 50px; + width: 258px; + margin: 5px 0 0; +} + +#nav-logo:hover { + transform: scale(1.01); + transition: 0.5s; +} + +#nav-logo-a { + position: relative; + margin: 0; + margin-left: 10px; +} + +.navlink { + color:rgb(233, 203, 104); + font-size: 18px; + text-decoration: none; + position: relative; +} + +.navlink.active,.link:hover { + color: rgba(233, 203, 104, 0.774); + transition: .5s; +} + +.navlink::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 0.1em; + background-color: hotpink; + opacity: 1; + transition: opacity 300ms, transform 300ms; + transform: scale(0); + transform-origin: center; + } + +.navlink:hover::after, +.navlink:focus::after{ + transform: scale(1); +} + +.checkbtn { + font-size: 23px; + color: white; + float: right; + line-height: 59px; + margin-right: 20px; + cursor: pointer; + display: none; +} + +#check { + display: none; +} + +#nav-links-container { + display: flex; + width: auto; + margin: 0; + padding: 0; + height: 59px; + float: right; + flex-direction: row-reverse; + align-content: stretch; +} + +#nav-icon { + margin: 0 0 0 5px; +} + +#sign-up { + padding: 6px 7px; + margin: 14px 15px 14px 4px; + width: 72px; + border-radius: 5px; + font-size: 16px; + background-color: rgb(140, 42, 165); + color: bisque; + position: fixed; + display: inline-flex; + right: 10px; +} + +#sign-up:hover { + transform: scale(1.03); + filter: brightness(1.05); + cursor: pointer; + transition: 0.5s; +} + +#banner { + width: 70%; + position: absolute; + justify-content: center; + display: inline-flex; + top: 16px; + font-size: 20px; + margin: auto; + min-width: 310px; +} + +#banner-text { + text-align: center; +} + +.header-info { + display: flex; + flex-flow: row wrap; + max-width: 420px; + padding: 0 10px; + min-width: none; + justify-content: center; +} + +.header-info a { + margin: 0 5px; +} + +#timer { + color: rgb(184, 184, 184); + animation: blinking 3s infinite; + background-color: rgb(57, 57, 57); + border-radius: 5px; + padding: 2px 5px; + margin-left: 5px; + position: relative; + width: fit-content +} + +#timer::after { + content: 'Apr 15, 10am'; + position: absolute; + text-align: center; + align-items: center; + top: 30px; + right: calc(100% / 2); + padding: 2px 7px; + width: max-content; + opacity: 1; + background-color: #222429; + border-radius: 10px; + transition: opacity 300ms, transform 300ms; + transform: scale(0); + transform-origin: top; + } + + #timer:hover::after, + #timer:focus::after{ + transform: scale(1); +} + +#winners { + text-align: center; + position: absolute; + top: 59px; + background-color: #2c9643; + width: 100%; + font-size: 20px; + padding: 3px 5px; + animation: fadeInAnimation ease 2s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +#chart { + max-width: 650px; + margin: 35px auto; +} + +#team-emphasis { + color:rgb(180, 213, 253); +} + +.tooltip-nav { + text-decoration: none; + margin: 0; +} + +#timer-link { + color:rgb(252, 188, 93); + text-decoration: none; + cursor: pointer; + background: unset; + margin-right: 10px; +} + +.link:hover { + color:rgba(252, 188, 93, 0.719); +} + +@keyframes blinking { + 0% { + filter: brightness(1); + } + 50% { + filter: brightness(0.8); + } + 100% { + filter: brightness(1); + } +} + +@keyframes dropdown{ + 0% { + opacity: 0; + transform: translateY(-30px); + } + 20% { + transform: translateY(0px); + opacity: 1; + } + 40% { + transform: translateY(-7px); + } + 100% { + transform: translateY(0px); + } +} + +/* Responsive Functions */ +@media (max-width: 1600px) { + #banner { + width: 50%; + } +} +@media (max-width: 1330px) { + #banner { + width: 30%; + } +} +@media (max-width: 1200px) { + #banner { + display: block; + top: 1px; + max-width: 200px; + min-width: 150px; + width: auto; + margin-left: 300px; + } + #timer-container { + display: block; + text-align: center; + } + #timer { + display: inline-block; + position: relative; + margin: 3px auto 0; + padding: 0px 5px; + } + #timer::after { + right: -15px; + } +} +@media (max-width: 900px) { + #prize-logo, .podium-label { + transform: scale(0.9); + font-size: 16px !important; + } + #podium-label-1 { + margin-right: 1px !important; + } + #podium-label-2 { + margin-left: 1px !important; + } + .header-background { + background-position: unset !important; + background-size: unset !important; + } + #logo { + height: 180px !important; + width: 180px !important; + } + header .waviy { + font-size: 45px; + } +} +@media (max-width: 700px) { + .header-link.tooltip::after { + display: none; + } +} +@media (max-width: 620px) { + #banner { + display: none; + } +} +@media (max-width: 500px) { + #signup-article, #rules, #prizes, #team { + transform: scale(0.9); + } + section { + padding-top: 0 !important; + } +} +@media (max-width: 470px) { + #nav-logo { + content: url(/img/logo_mini.png); + height: 45px; + width: 45px; + margin: 7px 0 0 5px; + } + #logo { + height: 2300px; + width: 230px; + } + #prizes-container, #banner { + transform: scale(0.9); + } + #banner { + display: block; + margin-left: 75px; + } +} +@media (max-width: 400px) { + #nav-logo { + content: url(/img/logo_mini.png); + height: 45px; + width: 45px; + margin: 7px 0 0 5px; + } + #logo { + height: 2300px; + width: 230px; + } + #prizes-container { + transform: scale(0.9); + } +} +@media (max-width: 370px) { + #banner { + display: none; + } +} +@media (max-height: 550px) { + /* #logo { + transform: scale(0.8); + } */ + #entrance-arrow { + visibility: hidden; + } + .header { + transform: scale(0.8); + } +} +@media (max-height: 450px) { + .header { + transform: scale(0.7); + } +} + +.blob { + background: black; + border-radius: 50%; + box-shadow: 0 0 0 0 rgba(0, 0, 0, 1); + margin: 10px 4px; + height: 10px; + width: 10px; + transform: scale(1); + animation: pulse-black 2s infinite; + position: relative; +} + +.blob.green { + background: rgba(51, 217, 178, 1); + box-shadow: 0 0 0 0 rgba(51, 217, 178, 1); + animation: pulse-green 2s infinite; +} + +.blob.gold { + background: rgb(254, 228, 84); + box-shadow: 0 0 0 0 rgba(254, 228, 84, 1); + animation: pulse-gold 2s infinite; +} + +@keyframes pulse-green { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); + } +} + +@keyframes pulse-gold { + 0% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(254, 228, 84); + } + 70% { + transform: scale(1); + box-shadow: 0 0 0 10px rgba(51, 217, 178, 0); + } + 100% { + transform: scale(0.95); + box-shadow: 0 0 0 0 rgba(51, 217, 178, 0); + } +} + +/* Header */ +.header-background { + background-image: url(/img/background.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-attachment: fixed; + height: 100vh; +} + +.header-background.second { + height: 20%; +} + +.header { + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + text-align: center; + position: relative; +} + +.header.second { + padding: 70px 0 50px; + flex-flow: row nowrap; +} + +#second-logo { + height: 100px; + width: 100px; +} + +.header-container { + width: 100%; + height: 100%; + display: flex; + flex-flow: row nowrap; + justify-content: center; + + text-align: center; +} + +.header-logo-parent { + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +#logo { + height: 230px; + width: 230px; + animation: fadeInAnimation ease 3s; + animation-iteration-count: 1; + animation-fill-mode: forwards; +} + +.waviy { + position: relative; + display: flex; + font-size: 60px; +} +.waviy span { + font-family: "Norwester"; + font-weight: lighter; + margin: 0 1.4px; + position: relative; + display: inline-block; + left: 0%; + + animation: waviy 1s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.waviy span:hover { + padding-left: -20px; +} + +#top-logo-text { + color: #7ed957; +} + +#bottom-logo-text { + color: #72FFAF; +} + +@keyframes waviy { + 0% { + transform: translateY(-100px); + opacity: 0; + } + 10% { + opacity: 0; + } + 30% { + transform: translateY(0px); + opacity: 1; + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0px); + } +} + +.header-subtitle { + padding: 5px 7px; + margin-top: 5px; + border-radius: 10px; + display: flex; + width: fit-content; + place-items: center; + border: 1px solid rgb(73, 73, 73); + background-color: rgb(22, 22, 22); +} + +.header-subtitle.donate { + background: rgb(98,0,255); + background: linear-gradient(90deg, rgba(98,0,255,1) 0%, rgba(199,82,35,1) 75%, rgba(209,117,47,1) 100%); +} + +.header-link.left { + animation: slideinleft ease 1.5s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.header-link.right { + animation: slideinright ease 1.5s; + animation-delay: calc(var(--i)); + animation-fill-mode: both; +} + +.header-link { + background: unset !important; + color: white !important; + text-decoration: none; +} + +.header-link.second { + animation: none; +} + +#header-tooltip::after { + content: 'Add to Calendar →'; + top: 12px; + right: 160px; + transform-origin: right; + color: rgb(252, 188, 93); +} + +#header-tooltip-second::after { + content: '← Add to Calendar'; + top: 12px; + right: -110px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#spots-tooltip-second::after { + content: '← Sign up here'; + top: 12px; + right: -130px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#map-tooltip::after { + content: '← Open map'; + top: 12px; + right: -120px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#donate-tooltip::after { + content: '← Donate Page 💝'; + top: 12px; + right: -160px; + transform-origin: left; + color: rgb(252, 188, 93); +} + +#spots-tooltip::after { + content: 'Sign up here →'; + top: 12px; + right: 205px; + transform-origin: right; + color: rgb(252, 188, 93); +} + +.header-info-container { + display: flex; + flex-flow: column nowrap; + align-items: flex-start; + justify-content: center; +} + +@media (max-width: 610px) { + #header-tooltip::after, #spots-tooltip::after { + display: none; + } +} + +.header-icon { + margin-right: 6px; +} + +.spots-container { + display: flex; + place-items: center; + border-radius: 10px; + margin-top: 5px; + padding: 0 7px; + width: fit-content; + border: 1px solid rgb(73, 73, 73); + background-color: rgb(22, 22, 22); + background: rgb(20,48,10); + background: linear-gradient(90deg, rgba(20,48,10,1) 0%, rgba(43,52,44,1) 100%); +} + +#header-subtitle-spots { + padding: 5px; +} + +.spots-container:hover, .header-subtitle:hover { + transform: translateY(-2px); + transition: 0.5s; +} + +#entrance-arrow { + width: 50px; + height: 50px; + position: absolute; + bottom: 10px; + float: bottom; + animation: bounce 3s infinite; +} + +#entrance-arrow:hover { + font-size: 17px; + transition: 0.1s; +} + +#header-gradient { + width: 100%; + height: 100%; + background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); +} + +.header-parent { + height: 100%; + display: flex; + flex-flow: row wrap; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-3px); + } +} + +@keyframes fadeInAnimation { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes slideinleft { + 0% { + transform: translateX(-20px); + opacity: 0; + } + 60% { + opacity: 0; + transform: translateX(-20px); + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slideinright { + 0% { + transform: translateX(20px); + opacity: 0; + } + 60% { + transform: translateX(20px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +/* @keyframes slidein-2 { + 0% { + transform: translateY(20px); + opacity: 0; + } + 80% { + transform: translateY(20px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} */ +@keyframes slidein-side { + 0% { + transform: translateX(-100px); + opacity: 0; + } + 40% { + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slidein-prize-2 { + 0% { + opacity: 0; + } + 40% { + transform: translateX(-30px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} +@keyframes slidein-prize-1 { + 0% { + opacity: 0; + } + 30% { + transform: translateY(-30px); + opacity: 0; + } + 100% { + transform: translateY(0px); + opacity: 1; + } +} +@keyframes slidein-prize-3 { + 0% { + opacity: 0; + } + 60% { + transform: translateX(30px); + opacity: 0; + } + 100% { + transform: translateX(0px); + opacity: 1; + } +} + +@keyframes modal-fade-in { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@media (prefers-reduced-motion: no-preference) { + .slide-animation { + animation: slidein-side ease 1s; + } + .slide-animation-prize-2 { + animation: slidein-prize-2 ease 3s; + } + .slide-animation-prize-1 { + animation: slidein-prize-1 ease 2s; + } + .slide-animation-prize-3 { + animation: slidein-prize-3 ease 3s; + } + .slide-animation-card-img { + animation: card-img-pullout ease 2s; + } + .slide-animation-card-desc { + animation: card-desc-pullout ease 2s; + } + .modal-animation { + animation: modal-fade-in ease 0.5s; + } +} + +/* Main Section */ +main { + width: 100%; + align-items: center; + justify-content: center; + text-align: center; + position: relative; + margin: auto; + display: grid; + padding-bottom: 70px; +} + +section { + width: auto; + padding-top: 70px; + text-align: center; + justify-content: center; + align-items: center; + max-width: 1500px; + min-width: 200px; +} + +.topic { + width: auto; + font-size: 35px; + padding: 0 20px 0 20px; + color:rgb(255, 243, 205); +} + +#event-container { + display: flex; + flex-wrap: wrap; + margin-top: 20px; + justify-content: center; +} + +#event-description { + margin: 0 20px; + max-width: 700px; + min-width: 200px; + font-size: 18px; + text-align: left; +} + +.description-heading { + text-align: center; + margin-bottom: 10px; +} + +#description-content { + text-align: center; + border-radius: 10px; + background-color: #202329; + padding: 15px 10px; + margin: auto; +} + +.desc-title { + margin-top: 15px; +} + +/* Splash text */ +.splash-container { + padding: 15px 20px; + border-radius: 10px; + border: 1px solid rgb(68, 68, 68); + margin: 10px 0; +} + +.splash-group { + display: flex; + flex-flow: row wrap; + justify-content: center; +} + +#why-GilroyHacks { + width: 100%; + min-width: 300px; + max-width: 315px; + margin: 15px; +} + +#who-GilroyHacks { + width: 100%; + min-width: 300px; + max-width: 315px; + margin: 15px; +} + +.splash-title { + color:rgb(51, 235, 189); + margin-bottom: 10px; +} + +.splash-desc { + line-height: 25px; +} + +#headline-recap { + color: #fbc334; +} + +.splide { + margin: 20px auto; +} + +.slide-content { + margin-bottom: 10px; + text-align: center; + max-width: fit-content; +} + +.splide, .splide__track, .splide__list, .splide__slide, .slide-content, .slide-img { + border-radius: 5px; +} + +.slide-caption { + position: relative; + bottom: 35px; + background-color: #232323b8; + padding: 2px 5px; + border-radius: 5px; +} + +.slide-img { + width: 100%; + height: auto; +} + +.splide__slide, .splide__slide:focus, .splide.is-focus-in, .splide__pagination__page:focus-visible { + border: none !important; + outline: none !important; +} + +li .splide__pagination__page.is-active { + background: #545454; +} + +.list { + padding-left: 20px; +} + +.desc-list { + margin-left: 25px; +} + +.list li{ + margin: 10px 0; +} + +.tooltip.zoom-tooltip::after { + content: 'Zoom Link'; + font-size: 16px; + top: 40px; + right: 12px; + color: rgb(45, 140, 255); +} + +.tooltip.zoom-tooltip-link::after { + content: 'Zoom Link'; + font-size: 16px; + top: 22px; + right: -22px; + color: rgb(45, 140, 255); +} + +#submit-tooltip:after { + content: 'Submission Form'; + right: -20px; +} + +#git-tooltip::after { + content: 'Git'; + color:#a6e2fa; + right: -3px; + top: 33px; +} + +#html-tooltip::after { + content: 'HTML'; + color:#a6e2fa; + right: -10px; + top: 33px; +} + +#python-tooltip::after { + content: 'Python'; + color:#a6e2fa; + right: -15px; + top: 33px; +} + +/* Signup Container */ +.signup-container { + margin: 20px auto; + } + +#steps-card { + width: 400px; + min-width: 300px; + border-radius: 10px; + background-color: #181a1d; + margin: 10px auto; + padding: 10px 30px; + box-shadow: 0px 5px 10px rgb(0 0 0 / 20%); + text-align: left; +} + +/* Outer Layer with the steps border */ +.outer { + border-left: 2px solid #333; +} + +/* Card container */ +.card { + position: relative; + margin: 0 0 20px 20px; + padding: 10px; + background: rgb(49, 48, 48); + color: gray; + border-radius: 8px; + max-width: 400px; +} + +.card:hover { + filter: brightness(120%); + transition: 0.5s; +} + +/* Title of the card */ +.title { + color: rgb(255, 255, 255); + position: relative; + font-size: 16px; +} + +.step-desc { + color: gray; + width: 298px; +} + +/* Steps dot */ +.title::before { + content: ""; + position: absolute; + width: 10px; + height: 10px; + background: rgb(49, 48, 48); + border-radius: 50%; + margin-top: 3px; + left: -38px; + border: 2px solid rgb(255, 255, 255); +} + +.caption { + color: #8d8d8d; +} + +/* Signup Checklist */ +.checklist { + --text: #414856; + --check: #00ff37; + --disabled: #C3C8DE; + --border-radius: 10px; + background: var(--background); + position: relative; + display: grid; + grid-template-columns: 0px auto; + align-items: center; +} +.checklist label { + color: var(--text); + position: relative; + cursor: pointer; + display: grid; + align-items: center; + width: fit-content; + transition: color 0.3s ease; +} +.checklist label::before, .checklist label::after { + content: ""; + position: absolute; +} +.checklist label::before { + height: 2px; + width: 8px; + left: -35px; + border-radius: 2px; +} +.checklist label:after { + height: 4px; + width: 4px; + top: 8px; + left: -35px; + border-radius: 50%; +} +.checklist input[type=checkbox] { + appearance: none; + position: relative; + height: 15px; + width: 15px; + outline: none; + border: 0; + margin: 0 15px 0 0; + cursor: pointer; + background: var(--background); + display: grid; + align-items: center; +} +.checklist input[type=checkbox]::before, .checklist input[type=checkbox]::after { + content: ""; + position: absolute; + height: 2px; + top: auto; + background: var(--check); + border-radius: 2px; +} +.checklist input[type=checkbox]::before { + width: 0px; + transform-origin: right bottom; + z-index: 2; +} +.checklist input[type=checkbox]::after { + width: 0px; + transform-origin: left bottom; + z-index: 2; +} +.checklist input[type=checkbox]:checked::before { + animation: check-01 0.4s ease forwards; + left: -36px; +} +.checklist input[type=checkbox]:checked::after { + animation: check-02 0.4s ease forwards; + left: -31px; +} +.checklist input[type=checkbox]:checked + label { + color: var(--disabled); + animation: move 0.3s ease 0.1s forwards; +} +.checklist input[type=checkbox]:checked + label::before { + background: var(--disabled); + animation: slice 0.4s ease forwards; +} +.checklist input[type=checkbox]:checked + label::after { + animation: firework 0.5s ease forwards 0.1s; + left: -33px; +} + +@keyframes move { + 50% { + padding-left: 8px; + padding-right: 0px; + } + 100% { + padding-right: 4px; + } +} +@keyframes slice { + 60% { + width: 100%; + left: 4px; + } + 100% { + width: 100%; + left: -2px; + padding-left: 0; + } +} +@keyframes check-01 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + 51% { + width: 0px; + top: 8px; + transform: rotate(45deg); + } + 100% { + width: 5px; + top: 8px; + transform: rotate(45deg); + } +} +@keyframes check-02 { + 0% { + width: 4px; + top: auto; + transform: rotate(0); + } + 50% { + width: 0px; + top: auto; + transform: rotate(0); + } + 51% { + width: 0px; + top: 8px; + transform: rotate(-45deg); + } + 100% { + width: 10px; + top: 8px; + transform: rotate(-45deg); + } +} +@keyframes firework { + 0% { + opacity: 1; + box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0; + } + 30% { + opacity: 1; + } + 100% { + opacity: 0; + box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0; + } +} + +.card-info-container { + display: flex; + flex-flow: row wrap; + max-width: 400px; + min-width: 200px; + justify-content: space-around; + margin: 20px 0; + background-color: #1d1d1d; + padding: 10px; + border-radius: 5px; +} + +.info-card { + min-width: 180px; + max-width: 400px; + padding: 10px 20px; + margin: 10px 0; + background-color:rgb(49, 48, 48); + border-radius: 5px; +} + +.hcb-container { + font-size: 24px; + padding: 2px; + display: flex; + justify-content: center; + align-items: center; +} + +.hcb-svg { + margin-right: 5px +} + +.spots-container.bankacc-click { + background:#9a4752; +} + +.card-heading { + font-size: 30px; +} + +.apexcharts-menu { + background-color: #27293d!important; + border: 0px; + text-align: center; +} + +.apexcharts-menu-item:hover { + background-color: #3f3f3f!important; +} + +.tooltip { + position: relative; +} + +.tooltip::after { + content: ''; + position: absolute; + text-align: center; + align-items: center; + top: 22px; + right: -35px; + padding: 3px 7px; + width: max-content; + opacity: 1; + z-index: 1; + background-color: #222429; + border-radius: 10px; + transition: opacity 300ms, transform 300ms; + transform: scale(0); + transform-origin: top; + } + +.tooltip:hover::after { + transform: scale(1); +} + +#signup-link::after { + content: 'Signup Form'; +} + +.email-link::after { + content: 'Email'; + right: calc((100%/2) - 25px); +} + +#discord-link::after { + content: 'Discord Invite Link'; + right: -40px; +} + +#website::after { + content: 'Check out my website!'; + top: 100px; + color: rgb(255, 208, 137) +} + +.tooltip.discord::after { + content: 'Discord'; + color: rgb(128, 130, 245); + right: -70px; + top: -5px; + transform-origin: left; +} + +#facebook::after { + content: 'Facebook'; + right: -34px; + color: rgb(255, 208, 137) +} + +#instagram::after { + content: 'Instagram'; + right: -35px; + color: rgb(255, 208, 137) +} + +#youtube::after { + content: 'Youtube'; + right: -25px; + color: rgb(255, 208, 137) +} + +#sponsors { + margin-bottom: 10px; + padding-top: 30px; +} + +.wolfram-logo { + align-items: center; + justify-content: center; + display: flex; + width: 300px; +} + +#wolfram-star { + max-height: 60px !important; +} + +#wolfram-letters { + margin-left: 5px !important; + max-height: 35px !important; +} + +#sponsor-container { + display: flex; + flex-flow: row wrap; + padding: 20px 15px; + margin: 0 50px; + max-width: 1500px; + justify-content: space-evenly; +} + +#sponsor-container a { + padding: 7px 0px; + margin: 5px 20px; + align-content: center; +} + +#sponsor-container img { + max-height: 80px; + max-width: 370px; +} + +#sponsor-container a:hover { + animation: 0.3s ease shake; +} + +@keyframes shake { + 0% { + transform:rotate(0.5deg); + } + 33% { + transform:rotate(-0.5deg); + } + 66% { + transform:rotate(0.5deg); + } + 100% { + transform:rotate(0deg); + } +} + +#sponsor-container img { + margin: 10px 0; +} + +#gilroy-library-logo { + height: 120px; + width: 352px; +} + +#gavilan-college-logo { + height: 102px; + width: 352px; +} + +#gear-club-logo { + height: 60px; + width: 352px; +} + +/* Schedule */ +#schedule { + padding-top: 70px; + margin-bottom: 30px; +} + +.schedule-parent { + display: flex; + flex-flow: row wrap; + justify-content: center; + max-width: 1300px; + width: 95%; + margin: auto; +} + +.schedule-element { + padding: 20px 20px; + margin-top: 20px; + width: 95%; + min-width: 370px; + max-width: 650px; + background-color: rgb(29, 27, 36); + border-radius: 10px; +} + +.time-column-header { + margin-bottom: 20px; + font-size: 30px; + text-decoration: underline; +} + +.schedule-container { + display: grid; + margin: auto; + grid-gap: 0.2rem; + grid-template-columns: 4rem repeat(4, 1fr); + grid-template-rows: repeat(14, 1fr); + grid-template-areas: "time800 stage stage stage stage" "time900 stage stage stage stage" "time1000 stage stage stage stage" "time1100 stage stage stage stage" "time1200 stage stage stage stage" "time1300 stage stage stage stage" "time1400 stage stage stage stage" "time1500 stage stage stage stage" "time1600 stage stage stage stage" "time1700 stage stage stage stage" "time1800 stage stage stage stage" "time1900 stage stage stage stage" "time2000 stage stage stage stage" "time2100 stage stage stage stage"; +} + +.modal { + border: 1px solid rgb(142, 102, 177); + background-color: #23262a; + min-width: 350px; + max-width: 500px; + position: fixed; + margin: auto; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: none; + text-align: left; + border-radius: 5px; + overflow: hidden; + z-index: 2; +} + +.modal-header { + background-color: rgb(147, 29, 141); + padding: 5px 10px; +} + +.modal-desc { + padding: 8px 10px 15px; +} + +.button-close-modal { + display: block; + float: right; + background-color: unset; + border: none; + cursor: pointer; + margin-right: 5px; + display: block; + height: 2px; + position: relative; + width: 20px; + height: 20px; + padding: 15px 20px 10px 10px; + cursor: pointer; +} + +.button-close-modal:before, +.button-close-modal:after { + background: rgb(200, 200, 200); + content: ''; + display: block; + height: 2px; + position: absolute; + transition: all .2s ease-out; + width: 13px; +} + +.button-close-modal:hover { + transform: scale(1.05); + filter: brightness(1.1); + transition: 0.3s; +} + +.button-close-modal:before { + transform: rotate(-45deg); +} + +.button-close-modal:after { + transform: rotate(45deg); +} + +#modal-overlay { + width: 100%; + height: 100%; + display: none; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, .5); + opacity: 0; + transition: opacity .2s ease; +} + +.timeline-description { + font-size: 16px; + font-weight: normal; +} + +.timeline-description-list li { + margin: 10px 40px; + font-size: 16px; +} + +.important-text { + color: rgb(255, 126, 126); +} + +.timeline-links { + display: flex; + flex-flow: row wrap; + justify-content: center; + text-align: center; + text-decoration: none !important; + margin-top: 15px; +} + +.timeline-icon { + height: 23px; + width: 75px; + float: left; +} + +.timeline-button { + color: rgb(233, 203, 104); + text-decoration: none; + border-radius: 5px; + font-size: 18px; + border: 1px solid rgb(192, 168, 88); + padding: 5px; + display: inline-block; + margin: 0 10px; +} + +.zoom-link { + border: 1px solid rgb(45, 140, 255); +} + +.timeline-button.zoom-link:hover { + background-color: rgb(45, 140, 255); +} + +.timeline-button.zoom-link:hover > .timeline-icon{ + filter:hue-rotate(60deg); +} + +.timeline-button:hover { + color: white; + background-color: rgb(192, 168, 88); + transition: 0.5s; +} + +/** + * Time + */ +.time { + display: flex; + justify-content: flex-end; + height: 100%; + padding: 0 0.5rem; +} + +.time span { + position: relative; + bottom: 10px; +} + +.time.start-800 { + grid-area: time800; +} +.time.start-900 { + grid-area: time900; +} +.time.start-1000 { + grid-area: time1000; +} +.time.start-1100 { + grid-area: time1100; +} +.time.start-1200 { + grid-area: time1200; +} +.time.start-1300 { + grid-area: time1300; +} +.time.start-1400 { + grid-area: time1400; +} +.time.start-1500 { + grid-area: time1500; +} +.time.start-1600 { + grid-area: time1600; +} +.time.start-1700 { + grid-area: time1700; +} +.time.start-1800 { + grid-area: time1800; +} +.time.start-1900 { + grid-area: time1900; +} +.time.start-2000 { + grid-area: time2000; +} +.time.start-2100 { + grid-area: time2100; +} + +/** + * Event + */ +.event { + display: flex; + justify-content: center; + flex-direction: column; + padding: 0.2rem 1rem; + background-color: rgb(157, 0, 149); + border-radius: 0.2rem; + font-size: 18px; + border-top: thin solid rgb(68, 68, 68); + cursor: pointer; + position: relative; +} +.event span { + display: block; + width: 100%; + font-size: 14px; + color: rgb(177, 177, 177); +} +.event.empty { + background-color: unset; + cursor: unset; +} + +.event:hover:not(.empty) { + filter: brightness(1.1); + transform: translateY(-2px); + transition: 0.3s; +} + +.event.start-800 { + grid-row-start: time800; +} +.event.start-900 { + grid-row-start: time900; +} +.event.start-1000 { + grid-row-start: time1000; +} +.event.start-1100 { + grid-row-start: time1100; +} +.event.start-1200 { + grid-row-start: time1200; +} +.event.start-1300 { + grid-row-start: time1300; +} +.event.start-1400 { + grid-row-start: time1400; +} +.event.start-1500 { + grid-row-start: time1500; +} +.event.start-1600 { + grid-row-start: time1600; +} +.event.start-1700 { + grid-row-start: time1700; +} +.event.start-1800 { + grid-row-start: time1800; +} +.event.start-1900 { + grid-row-start: time1900; +} +.event.start-2000 { + grid-row-start: time2000; +} +.event.start-2100 { + grid-row-start: time2100; +} +.event.end-800 { + grid-row-end: time800; +} +.event.end-900 { + grid-row-end: time900; +} +.event.end-1000 { + grid-row-end: time1000; +} +.event.end-1100 { + grid-row-end: time1100; +} +.event.end-1200 { + grid-row-end: time1200; +} +.event.end-1300 { + grid-row-end: time1300; +} +.event.end-1400 { + grid-row-end: time1400; +} +.event.end-1500 { + grid-row-end: time1500; +} +.event.end-1600 { + grid-row-end: time1600; +} +.event.end-1700 { + grid-row-end: time1700; +} +.event.end-1800 { + grid-row-end: time1800; +} +.event.end-1900 { + grid-row-end: time1900; +} +.event.end-2000 { + grid-row-end: time2000; +} +.event.end-2100 { + grid-row-end: time2100; +} +.event.length-1 { + grid-column-end: span 1; +} +.event.length-2 { + grid-column-end: span 2; +} +.event.length-3 { + grid-column-end: span 3; +} +.event.length-4 { + grid-column-end: span 4; +} +.event.small { + font-size: 16px; +} + +.logistics { + background-color: rgb(147, 29, 141); +} +.hacking { + background-color: rgb(53, 53, 199); +} +.food { + background-color: #03833b; +} +.workshop { + background-color: rgb(109, 40, 194); +} +.game { + background-color: rgb(105, 94, 139); +} + +.logistics-border { + border: 1px solid rgb(147, 29, 141); +} +.hacking-border { + border: 1px solid rgb(53, 53, 199); +} +.food-border { + border: 1px solid #03833b; +} +.workshop-border { + border: 1px solid rgb(109, 40, 194); +} +.game-border { + border: 1px solid rgb(105, 94, 139); +} + + +#map-article { + margin: 20px auto 0; + width: 90%; + max-width: 1100px; +} + +#cal-parent { + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#cal-container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 440px; + min-width: 400px !important; + height: auto; + justify-content: center; +} + +.cal-card { + width: 100%; + border-radius: 7px; + border: 1px solid white; +} + +.cal-card:hover { + transform: translateY(-5px); + background-color: #0f1318; + transition: 0.5s; +} + +/* .cal-card:hover > #community-room { + visibility: visible !important; +} */ + +#fri { + background-color: #18b14b65; +} + +#sat { + background-color: #cc1b1b65; +} + +#sun { + background-color: #cc83148a; +} + +.cal-entry { + display: flex; + align-content: stretch; + width: 100%; + height: 100%; + padding: 10px; + border-radius: 10px; +} + +.day-of-week { + font-size: 35px; +} + +.cal-date { + display: flex; + flex-direction: column; + padding: 5px 10px; + width: 110px; + height: 75px; + border-radius: 10px; +} + +.cal-subtitle { + color: rgb(150, 150, 150); +} + +.cal-title { + text-align: center; + text-decoration: underline; + margin-bottom: 10px; +} + +.vertical-line { + width: 2px; + margin: 0 10px; + background-color: rgb(88, 88, 88); +} + +.cal-desc { + justify-content: center; + width: 100%; +} + +.event-list { + display: flex; + flex-direction: column; + flex-wrap: wrap; +} + +.event-entry { + display: flex; + flex: row nowrap; + height: 30px; + margin-bottom: 7px; +} + +@media (max-width: 487px) { + .event-entry { + height: auto; + } +} + +.time-column { + width: 35%; + height: 100%; + text-align: right; +} + +.event-column { + width: 75%; + height: 100%; + text-align: left; + padding-left: 15px; +} + +.event-time { + color: gray; +} + +.map-title { + font-size: 25px; + margin: 10px 0; +} + +#map-div { + width: 660px; + height: 462px; +} + +#map-container { + border-radius: 10px; + padding: 3px; + width: 100%; + height: 100%; + border: 1px solid white; + position: relative; + min-width: 375px; +} + +#map { + height: 100%; + width: 100%; + + border-radius: 10px; + position: relative; + z-index: 1; + + display: flex; + align-items: center; + justify-content: center; +} + +/* Workshops */ +.flex-container { + display: flex; + flex-flow: row wrap; + margin-top: 20px; + justify-content: center; + align-items: flex-start; + width: 90%; + margin: 20px auto 0; +} + +.workshop-entry { + margin: 20px; + min-width: 350px; + max-width: 500px; + border-radius: 10px; + box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); + text-align: left; + overflow: hidden; +} + +.workshop-entry:hover { + transform: translateY(-4px); + transition: 0.5s; +} + +#webdev-workshop { + background-image: + linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), + url(/img/webdev.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: rgb(102, 85, 61); + background-blend-mode: multiply; + /* Photo by Tranmautritam: https://www.pexels.com/photo/information-sign-on-shelf-251225/ */ +} + +#python-workshop { + background-image: + linear-gradient( rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5) ), + url(/img/python_code.jpg); + background-position: center; + background-size: cover; + background-repeat: no-repeat; + background-color: rgb(53, 79, 110); + background-blend-mode: multiply; + /* Photo SRC: https://unsplash.com/photos/g5_rxRjvKmg?utm_source=unsplash&utm_medium=referral&utm_content=creditShareLink */ +} + +.workshop-header { + padding: 10px 30px 15px; + display: grid; + grid-template-columns: auto auto; + background-color: rgb(19, 29, 41); +} + +.workshop-title { + display: flex; + flex-flow: column nowrap; +} + +.title-font-weight { + font-size: 25px; +} + +.workshop-subtitle { + margin-top: 3px; + font-size: 15px; + color: rgb(168, 168, 168); +} + +.workshop-topics { + float: right; + display: flex; + flex-flow: row-reverse; +} + +.workshop-img { + height: 30px; + width: 30px; + margin-left: 10px; +} + +.workshop-desc { + padding: 10px 35px; + background-color: #1b1c20; +} + +.workshop-date { + padding: 7px 20px; + text-align: center; + background-color: #3a3344; + display: flex; + flex-flow: row wrap; + justify-content: space-between; + font-size: 20px; + align-items: center; +} + +.workshop-date div { + margin: 0 10px; +} + +.cal-tooltip::after { + content: 'Add to Calendar'; + font-size: 16px; + top: 30px; + right: -20px; +} + +.link.workshop-link { + background: unset; +} + +.workshop-icon { + float: left; + margin-top: 2px; + margin-right: 5px; +} + +.workshop-instructor { + width: 20px; + height: 20px; + margin: 0 5px 0 10px; +} + +.instructor-img { + width: 20px; + height: 20px; + border-radius: 50%; + border-radius: 50%; + border: 1px solid rgb(161, 161, 161); +} + +.workshop-slides { + display: flex; + flex-flow: row nowrap; + width: 100%; +} + +.workshop-topics-covered { + width: 50%; + min-width: 150px; +} + +.workshop-presentation { + text-align: center; + justify-content: center; + float: right; + width: 50%; +} + +.slides-thumbnail { + padding: 10px 15px; +} + +.slides-thumbnail:hover { + transform: scale(1.05); + transition: 0.5s; +} + +.slides-element { + width: 100%; + height: 100%; + border-radius: 5px; + border: 1px solid rgb(102, 102, 102); +} + +.tooltip#python-slides-tooltip::after { + content: 'Intro to Python Programming'; + color: rgb(252, 188, 93); + right: -11px; +} + +.tooltip#webdev-slides-tooltip::after { + content: 'Web Dev & Git Version Control'; + color: rgb(252, 188, 93); + right: -17px; +} + +.tooltip#python-slides-tooltip::after { + content: 'Intro to Python Programming'; + color: rgb(252, 188, 93); + right: -11px; +} + +.workshop-difficulty { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: #176e2a; + padding: 3px 30px; + justify-content: space-around; +} + +.workshop-status { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + background-color: #963c3c; + padding: 3px 30px; + justify-content: space-around; +} + +.workshop-footer { + padding: 10px 30px; + text-align: center; + background-color: #151618; + display: flex; + justify-content: center; + align-items: center; +} + +#license-list { + display: flex; + flex-flow: column wrap; + width: 100%; + height: auto; + margin: auto; + padding-left: 10px; +} + +#license-list ul { + margin-left: 20px; +} + +.license-entry { + width: 100%; + height: auto; + padding: 10px; + text-align: left; + overflow-wrap: break-word; +} + +/* Contact */ +.contact-form { + margin-top: 30px; + min-width: 300px; + width: 40vw; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + transition: background-color 5000s ease-in-out 0s; + -webkit-text-fill-color: #fff !important; + caret-color: #fff; +} + +.input-block { + background-color: #202329; + border-radius: 10px; + width: 100%; + height: 60px; + padding: 25px; + position: relative; + margin-bottom: 20px; + transition: all 0.3s ease-out; +} +.input-block.focus { + background-color: #282c33; + transition: 0.5s; +} +.input-block.textarea { + height: auto; + font-size: 18px; +} +.form-control { + height: auto; + width: 100%; + resize: vertical; + font-family: "Glacial Indifference"; +} +.input-block label { + position: absolute; + left: 25px; + top: 25px; + display: block; + margin: 0; + font-weight: 300; + z-index: 1; + color: rgb(199, 199, 199); + font-size: 18px; + line-height: 10px; +} +.input-block .form-control { + background-color: transparent; + padding: 5px; + border: none; + border-radius: 0; + box-shadow: none; + height: auto; + position: relative; + z-index: 2; + font-size: 18px; + color: #fff; +} +option { + background-color: #343942; +} +.input-block .form-control:focus label { + top: 0; +} +.square-button { + background-color: #383e49; + color: #f3bc6a; + font-size: 26px; + text-transform: uppercase; + font-weight: 700; + text-align: center; + border-radius: 6px; + transition: all 0.3s ease; + height: 60px; + border: none; + width: 30%; +} +.square-button:hover, .square-button:focus { + filter: brightness(0.8); + cursor: pointer; +} + +@media (min-width: 768px) { + .contact-wrap { + width: 60%; + margin: auto; + } +} + +/* Rules */ +#rules-description { + margin: 10px 20px; + font-size: 18px; +} + +#photo-description { + margin: 10px 20px; +} + +.rules-box { + border-radius: 10px; + border: 1px solid white; + background-color: #272b1f; + margin: 10px auto; + width: 90%; + max-width: 850px; + min-width: 350px; + padding: 10px; +} + +#disclaimer { + background-color: #2b1f20; +} + +#rules-container { + display: flex; + flex-wrap: wrap; + margin-top: 20px; + justify-content: center; +} + +#guidelines { + margin: 20px; +} + +#code-of-conduct { + margin: 20px; +} + +.rules-card { + position: relative; + padding: 10px; + margin: 0 0 20px 20px; + background: rgb(47, 55, 70); + color: rgb(179, 179, 179); + border-radius: 8px; + max-width: 400px; +} + +.code-card { + background: rgb(40, 63, 52); +} + +#rules-main-card { + width: 400px; + min-width: 300px; + border-radius: 10px; + background-color: #131d29; + margin: 10px auto; + padding: 10px 30px; + box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); + text-align: left; +} + +#code-main-card { + width: 400px; + min-width: 300px; + border-radius: 10px; + background-color: #15271b; + margin: 10px auto; + padding: 10px 30px; + box-shadow: 5px 5px 10px rgb(0 0 0 / 20%); + text-align: left; +} + +#rules-header { + padding-top: 10px; +} + +/* Title of the card */ +.rules-title { + color: rgb(253, 103, 103); + position: relative; + font-size: 17px; +} + +.code-title { + color: rgb(212, 100, 223); +} + +.rules-card::before { + content: ""; + font-size: 30px; + position: absolute; + width: 10px; + height: 10px; + left: -28px; +} + +.rules-1::before { + content: "1"; +} +.rules-2::before { + content: "2"; +} +.rules-3::before { + content: "3"; +} +.rules-4::before { + content: "4"; +} +.rules-5::before { + content: "5"; +} + +.rules-card:hover { + filter: brightness(1.2); + transition: 0.5s; +} + +#prizes-container { + display: grid; + margin: 50px auto 0; + width: 80%; + height: auto; + justify-content: center; + grid-template-columns: repeat(3, 1fr); +} + +.podium-description { + width: 100%; + height: auto; + + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +.prize-desc { + width: 100%; + height: auto; + + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; +} + +.prize-desc:hover > .prize-text { + transform: rotate3d(0, 1, 0, 360deg); + transition: ease-in-out 0.5s; +} + +.prize-laurel { + height: 150px; + width: 150px; + position: relative; +} + +.prize-text { + position: absolute; + color: rgb(167, 146, 234); + font-size: 25px; + margin-bottom: 160px; + line-height: 25px; + z-index: 1; +} + +#first-prize-title { + margin-bottom: 180px; +} + +.prize-title { + color: rgb(167, 146, 234); + font-size: 30px; +} + +.prize-subtitle { + margin: 10px 0; +} + +.prize-column { + display: flex; + flex-flow: column-reverse; +} + +#second-podium { + width: 100%; + height: 50px; + background-color: #333; +} + +#first-podium { + width: 100%; + height: 90px; + background-color: #333; + align-items: center; + text-align: center; + display: flex; + justify-content: center; +} + +#third-podium { + width: 100%; + height: 40px; + background-color: #333; +} + +.podium-edge { + width: 105%; + height: 10px; + background-color: #24282e; + border-radius: 4px; + z-index: 1; +} + +#prize-logo { + height: 50px; + width: 50px; + border-radius: 50%; + border: 1px solid rgb(119, 119, 119); +} + +.podium-label { + position: relative; + font-size: 20px; +} + +#podium-label-1 { + margin-right: 7px; + color: #7ed856; +} + +#podium-label-2 { + margin-left: 7px; + color: #018036; +} + +.prize-img { + height: 85px; +} + +#prize-box { + border-radius: 10px; + border: 1px solid white; + background-color: #2c2c2c; + margin: 30px auto 10px; + width: 70%; + max-width: 850px; + min-width: 350px; + padding: 10px; +} + +#prize-list { + list-style: none; +} + +/* Team */ +#team-container { + width: 100%; + height: auto; + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: center; +} + +#team-container article { + padding: 20px 35px; + width: 430px; +} + +.team-title { + font-size: 25px; + color:rgb(161, 245, 150); + margin-bottom: 10px; +} + +.team-entry { + display: flex; + align-content: stretch; + padding: 15px; + border-radius: 10px; + width: 357px; + border: 0px solid rgb(54, 54, 54); +} + +@keyframes card-img-pullout { + 0% { + transform: translateX(110px); + } + 50% { + transform: translateX(110px); + } + 100% { + transform: translateX(0px); + } +} +@keyframes card-desc-pullout { + 0% { + transform: translateX(-110px); + opacity: 0; + } + 50% { + transform: translateX(-110px); + } + 80% { + opacity: 0; + } + 100% { + opacity: 1; + transform: translateX(0px); + } +} + +.team-entry:hover { + transform: scale(1.01); + border: 1px solid rgb(54, 54, 54); + transition: 0.5s; +} + +.team-picture { + width: auto; + height: auto; +} + +.team-picture img { + height: 100px; + width: 100px; + border-radius: 50%; + border: 1px solid rgb(161, 161, 161); +} + +#jd { + border: 0px; +} + +.team-description { + text-align: left; + width: auto; + display: block; + margin-left: 18px; +} + +.person-name { + font-size: 20px; + color:rgb(99, 169, 250); + padding-bottom: 2px; +} + +.person-subtitle { + font-size: 15px; + color: rgb(129, 129, 129); +} + +.person-contact { + font-size: 15px; + padding-top: 16px; + font-style: normal; +} + +/* Utilities */ +#line-header { + width: 200px; + margin: 10px 0; + animation: grow-wide ease 2s; +} + +.vertical-line.second { + width: 2px; + margin: 0 10px; + background-color: rgb(255, 255, 255); +} + +@keyframes grow-wide { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} + +.tooltip-rules { + text-decoration: underline dotted; + cursor: help; +} + +.emphasis-text { + color:rgb(51, 235, 189); +} + +.discord-text { + color: rgb(110, 112, 247); +} + +.discord-tag { + color: rgb(150, 150, 150); +} + +.line { + width: 100px; + margin: 10px auto; +} + +#arrow-link { + color:rgb(252, 188, 93); + text-decoration: none; + cursor: pointer; +} + +.bottom-text { + margin: 10px 5px; +} + +.link { + color:rgb(252, 188, 93); + text-decoration: none; + cursor: pointer; + background: + linear-gradient(to right, rgba(100, 200, 200, 1), rgba(100, 200, 200, 1)), + linear-gradient(to right, rgba(255, 0, 0, 1), rgba(255, 0, 180, 1), rgba(0, 100, 200, 1)); + background-size: 100% 0.1em, 0 0.1em; + background-position: 100% 100%, 0 100%; + background-repeat: no-repeat; + transition: background-size 400ms; +} + +.link:hover { + color:rgba(252, 188, 93, 0.719); + background-size: 0 0.1em, 100% 0.1em; +} + +.new-tab-icon { + fill: white; + height: 10px; + margin-left: 5px; +} + +.new-tab-icon.sub-icon { + height: 15px; + margin-left: 8px; +} + +.discord-icon { + width: 16px; + height: 16px; + fill: rgb(110, 112, 247); + float: left; + margin-right: 5px; +} + +@media (max-width: 869px) { + #footer-desc { + margin-bottom: 20px; + } +} + +@media (max-width: 565px) { + footer * { + text-align: center; + justify-content: center; + } + .footer-title { + margin-bottom: 0 !important; + } + #footer-desc, #footer-links, #footer-location { + margin-right: 0 !important; + margin-bottom: 20px; + } +} + +.donate-button { + color: white; + text-decoration: none; +} + +footer { + width: auto; + height: auto; + background-color: rgb(24, 24, 24); + justify-content: center; + align-items: left; + text-align: center; + padding: 20px; + flex-flow: row wrap; +} + +#footer-container { + width: 100%; + display: flex; + flex-wrap: wrap; + justify-content: center; + align-content: stretch; +} + +#footer-logo { + height: 45px; + width: 232px; + margin-left: -5px; +} + +#footer-desc { + width: 350px; + text-align: left; + line-height: 25px; + font-size: 18px; + margin-right: 40px; +} + +#socials { + display: flex; + flex-wrap: wrap; + margin-top: 10px; +} + +.socials-icon { + margin-right: 10px; +} + +#footer-copyright { + color: rgb(129, 129, 129); +} + +#footer-line { + width: 100%; + margin: 10px auto; +} + +#footer-links { + width: 180px; + margin-top: 7px; + margin-right: 20px; + text-align: left; +} + +.footer-title { + margin-bottom: 19px; +} + +#footer-location { + width: 220px; + margin-top: 7px; + margin-right: 20px; + text-align: left; +} + +footer li { + line-height: 30px; + list-style: none; +} + +/* Are you interested in coding, engineering, or STEM? Does a weekend full of intense brainstorming and +coding extravaganza with tons of other like-minded students sound (at the least bit) interesting to you? +Gilroy Hacks is all about allowing passionate students showcase their skills and teaching new concepts to newcomers. If this sounds like you, then all aboard the Hackathon tra */ \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store index 57fa512..a52d1e1 100644 Binary files a/img/.DS_Store and b/img/.DS_Store differ diff --git a/index.html b/index.html index e6fed75..c8d8d59 100644 --- a/index.html +++ b/index.html @@ -1,900 +1,900 @@ - - - -
- - - - -Try to arrive by 9:15am so we can get you your lanyard, merch, and table!
-The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.
-Now's your time to shine! Start working with your team to build your project. No strings attached!
-Food options TBA!
-A chance for you to learn the world's most common version control system: Git -- and how to create your own website!
-Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!
-Play in a pyramid-style 🏓table tennis🏓 tournament with other hackers!
-Get studying with your concepts, cuz we'll be quizzing you 👀 (1st place wins a prize)!
-Wakey Wakey!!! We've got some coffee for y'all early risers and bagels to keep you awake throughout
-STOP coding! Your 28 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.
-This is where your team will present your product to our honored judges.
-Sit tight and relax while our judges assign scores to your projects!
-Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with constructive feedback for each in the Student Center.
-Our workshops will be hosted in-person!
-Beginner-Friendly
Open to all
A chance for you to learn the world's most common version control system: Git -- and how to create your own website!
Beginner-Friendly
Open to all
Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!
Gilroy
- -Hacks
-Try to arrive by 9:15am so we can get you your lanyard, merch, and table!
+The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.
+Now's your time to shine! Start working with your team to build your project. No strings attached!
+Food options TBA!
+A chance for you to learn the world's most common version control system: Git -- and how to create your own website!
+Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!
+Play in a pyramid-style 🏓table tennis🏓 tournament with other hackers!
+Get studying with your concepts, cuz we'll be quizzing you 👀 (1st place wins a prize)!
+Wakey Wakey!!! We've got some coffee for y'all early risers and bagels to keep you awake throughout
+STOP coding! Your 28 hours of intense stress and turmoil are finally up! We hope you learned some valuable skills and made some new friends along the way.
+This is where your team will present your product to our honored judges.
+Sit tight and relax while our judges assign scores to your projects!
+Congratuations! Judge scores are tallied and here's where we announce the 1st, 2nd, and 3rd place teams along with constructive feedback for each in the Student Center.
+Our workshops will be hosted in-person!
+Beginner-Friendly
Open to all
A chance for you to learn the world's most common version control system: Git -- and how to create your own website!
Beginner-Friendly
Open to all
Join us for a lecture on Python Programming basics. You'll learn basic data structures and be able to code your own programs!
Gilroy
+ +Hacks
+