diff options
Diffstat (limited to 'pydis_site/templates/home')
| -rw-r--r-- | pydis_site/templates/home/index.html | 165 | ||||
| -rw-r--r-- | pydis_site/templates/home/timeline.html | 24 |
2 files changed, 149 insertions, 40 deletions
diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index f31363a4..7d91feb4 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,12 +9,69 @@ {% block content %} {% include "base/navbar.html" %} - <section class="section"> + <!-- Mobile-only Notice --> + <section id="mobile-notice" class="message is-primary is-hidden-tablet"> + <div class="message-header"> + <p>100K Member Milestone!</p> + </div> + <div class="message-body"> + Thanks to all our members for helping us create this friendly and helpful community! + <br><br> + As a nice treat, we've created a <a href="{% url 'timeline' %}">Timeline page</a> for people + to discover the events that made our community what it is today. Be sure to check it out! + </div> + </section> + + <!-- Wave Hero --> + <section id="wave-hero" class="section is-hidden-mobile"> + + <div class="container"> + <div class="columns is-variable is-8"> + + {# Embedded Welcome video #} + <div id="wave-hero-left" class="column is-half"> + <div class="force-aspect-container"> + <iframe + class="force-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>" + allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen + ></iframe> + </div> + </div> + + {# Right side content #} + <div id="wave-hero-right" class="column is-half"> + <img src="{% static "images/events/100k.png" %}" alt="100K members!"> + </div> + + </div> + </div> + + {# Animated wave elements #} + <span id="front-wave" class="wave"></span> + <span id="back-wave" class="wave"></span> + <span id="bottom-wave" class="wave"></span> - {# Who are we? #} - <div class="container is-spaced"> + </section> + + <!-- Main Body --> + <section id="body" class="section"> + + <div class="container"> <h1 class="is-size-1">Who are we?</h1> - <br> + <div class="columns is-desktop"> <div class="column is-half-desktop content"> <p> @@ -37,45 +94,97 @@ </p> </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> + {# Showcase box #} + <section id="showcase" class="column is-half-desktop has-text-centered"> + <article class="box"> + + <header class="title">New Timeline!</header> + + <div class="mini-timeline"> + <i class="fa fa-asterisk"></i> + <i class="fa fa-code"></i> + <i class="fab fa-python"></i> + <i class="fa fa-alien-monster"></i> + <i class="fa fa-duck"></i> + <i class="fa fa-bug"></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' %}" class="button is-primary"> + <span>Check it out!</span> + <span class="icon"> + <i class="fas fa-arrow-right"></i> + </span> + </a> + </div> + + </article> + </section> + </div> + </div> + </section> - {# Projects #} + <!-- Projects --> + <section id="projects" class="section"> + <div class="container"> <h1 class="is-size-1">Projects</h1> - <br> + <div class="columns is-multiline is-tablet"> - {# Display projects from HomeView.repos #} + {# Generate project data from HomeView.repos #} {% for repo in repo_data %} <div class="column is-one-third-desktop is-half-tablet"> - <div class="card has-equal-height github-card"> - <div class="card-content"> - <div class="repo-headline"> - <i class="fab fa-github"></i> - <a href="https://github.com/{{ repo.repo_name }}"> <strong>{{ repo.repo_name }}</strong></a> - </div> - <div> + + <a href="https://github.com/{{ repo.repo_name }}"> + <article class="card"> + + <header class="card-header"> + <span class="card-header-icon"> + <span class="icon"><i class="fab fa-github"></i></span> + </span> + <div class="card-header-title"> + {{ repo.repo_name|cut:"python-discord/" }} + </div> + </header> + + <p class="card-content"> {{ repo.description }} - <br><br> - </span><span class="repo-language-dot {{ repo.language | lower }}"></span> {{ repo.language }} - <span id="repo-footer-item"><i class="fas fa-star"></i> {{ repo.stargazers }}</span> - <span id="repo-footer-item"><i class="fas fa-code-branch"></i> {{ repo.forks }}</span> - </div> - </div> - </div> + </p> + + <footer class="card-footer"> + <div class="card-footer-item"> + <i class="repo-language-dot {{ repo.language | lower }}"></i> + {{ repo.language }} + </div> + <div class="card-footer-item"> + <i class="fas fa-star"></i> + {{ repo.stargazers }} + </div> + <div class="card-footer-item"> + <i class="fas fa-code-branch"></i> + {{ repo.forks }} + </div> + </footer> + + </article> + </a> + </div> {% endfor %} </div> + </div> </section> - {# Sponsors #} - <section class="section-sp hero is-light"> - <div id="sponsors-hero" class="hero-body"> + <!-- Sponsors --> + <section id="sponsors" class="hero is-light"> + <div class="hero-body"> <div class="container"> <h1 class="title is-6 has-text-grey"> Sponsors diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 54cbdc1b..f3c58fc2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -14,7 +14,7 @@ <div class="container max-width-lg cd-timeline__container"> <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> @@ -231,8 +231,8 @@ <div class="cd-timeline__content text-component"> <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/DIBXg8Qh7bA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -319,8 +319,8 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/8fbZsGrqBzo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -377,8 +377,8 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/KkLXMvKfEgs" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -450,8 +450,8 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:</p> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/OFtm8f2iu6c" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> @@ -481,13 +481,13 @@ <div class="cd-timeline__block"> <div class="cd-timeline__img cd-timeline__img--picture"> - <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture"> + <img src="{% static "images/timeline/cd-icon-picture.svg" %}" alt="Picture"> </div> <div class="cd-timeline__content text-component"> <h2>Python Discord hosts the 2020 CPython Core Developer Q&A</h2> - <div class="video-container"> - <iframe class="video" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" + <div class="force-aspect-container"> + <iframe class="force-aspect-content" src="https://www.youtube.com/embed/gXMdfBTcOfQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> |