diff options
Diffstat (limited to 'pydis_site')
| -rw-r--r-- | pydis_site/static/css/home/index.css | 127 | ||||
| -rw-r--r-- | pydis_site/static/images/events/100k.png | bin | 0 -> 210477 bytes | |||
| -rw-r--r-- | pydis_site/templates/home/index.html | 58 |
3 files changed, 169 insertions, 16 deletions
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index ba856a8e..67caf61c 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -70,18 +70,117 @@ span.repo-language-dot.javascript { padding-bottom: 3rem; } -@media screen and (min-width: 1088px) { - .video-container iframe { - height: calc(42vw * 0.5625); - max-height: 371px; - max-width: 660px; - } -} - -@media screen and (max-width: 1087px) { - .video-container iframe { - height: calc(92vw * 0.5625); - max-height: none; - max-width: none; - } +.welcome-video { + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); + border-radius: 10px; + margin-top: 1em; +} + +.welcome-video:hover { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); +} + +.aspect-wrapper { + position: relative; + padding-bottom: 56.25%; +} +.aspect-content { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; +} + +.hero-card img{ + border-radius: 10px; + box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); + margin-top: 1em; +} + +.main-head { + position: relative; + background-color: #7289DA; + color: #fff; + height: 32vw; + max-height: 500px; + overflow-x: hidden; + width: 100%; + padding: 0; +} + +.bottom-wave { + background: url(https://svgur.com/i/QVH.svg) repeat-x; + position: absolute; + bottom: 0; + width: 6400px; + height: 26px; + animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; + transform: translate3d(0, 0, 0); + z-index: 3; +} + +.above-waves { + z-index: 4; +} + +.wave { + background: url(https://svgur.com/i/QSd.svg) repeat-x; + position: absolute; + bottom: 0; + width: 6400px; + height: 198px; + animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; + transform: translate3d(0, 0, 0); +} + +.wave:nth-of-type(2) { + animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite; + opacity: 0.5; + height: 178px; + animation-delay: -50s; +} + +@keyframes wave { + 0% { + margin-left: 0; + } + 100% { + margin-left: -1600px; + } +} + +.showcase { + margin: 0 1em; +} + +.mini-timeline { + height: 3px; + position: relative; + margin: 50px 0 50px 0; + background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00); + text-align: center; +} +.mtl-item { + display: inline-block; + vertical-align: middle; + width: 30px; + height: 30px; + border-radius: 50%; + position: relative; + top: -14px; + margin: 0 4% 0 4%; + background-color: #3EB2EF; + color: white; + font-size: 15px; + line-height: 33px; + border:none; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); +} + +.mtl-item:hover { + box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); + transform: scale(1.5); } diff --git a/pydis_site/static/images/events/100k.png b/pydis_site/static/images/events/100k.png Binary files differnew file mode 100644 index 00000000..ae024d77 --- /dev/null +++ b/pydis_site/static/images/events/100k.png diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index f31363a4..04ad4465 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,6 +9,35 @@ {% block content %} {% include "base/navbar.html" %} + <section class="section main-head is-hidden-touch"> + <div class="container is-spaced above-waves"> + <div class="columns"> + <div class="column is-half"> + <div class="aspect-wrapper"> + <iframe + class="welcome-video aspect-content" + src="https://www.youtube.com/embed/ZH26PuX3re0" + srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020}</style><a href=https://www.youtube.com/embed/ZH26PuX3re0?autoplay=1><img src=https://i.ytimg.com/vi/ZH26PuX3re0/maxresdefault.jpg alt='Welcome to Python Discord'><span>▶</span></a>" + frameborder="0" + allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen + ></iframe> + </div> + </div> + + <div class="column is-half hero-card has-text-right"> + <img src="{% static "images/events/100k.png" %}" alt="100K members!"> + </div> + + </div> + + </div> + + <div class="wave"></div> + <div class="wave"></div> + <div class="bottom-wave"></div> + + </section> <section class="section"> {# Who are we? #} @@ -38,8 +67,33 @@ </div> {# Right column container #} - <div class="column is-half-desktop"> - <iframe width="560" height="315" src="https://www.youtube.com/embed/ZH26PuX3re0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> + <div class="column is-half-desktop showcase has-text-centered"> + <div class="box"> + <p class="title"> + New Timeline! + </p> + <div class="mini-timeline"> + <i class="fa fa-asterisk mtl-item"></i> + <i class="fa fa-code mtl-item"></i> + <i class="fab fa-python mtl-item"></i> + <i class="fa fa-alien-monster mtl-item"></i> + <i class="fa fa-duck mtl-item"></i> + <i class="fa fa-bug mtl-item"></i> + </div> + <p class="subtitle"> + Start from our humble beginnings to discover the events that made our community what it is today. + </p> + <div class="buttons are-large is-centered"> + <a href="{% url 'timeline' %}"> + <button class="button is-primary"> + <span>Check it out!</span> + <span class="icon"> + <i class="fas fa-arrow-right"></i> + </span> + </button> + </a> + </div> + </div> </div> </div> |
