Skip to content

Commit

Permalink
feat: add static Christmas theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@acolombier
acolombier committed Dec 17, 2024
1 parent cde9814 commit 28ac24c
Show file tree
Hide file tree
Showing 2 changed files with 234 additions and 73 deletions.
2 changes: 2 additions & 0 deletions theme/static/images/mixxx-logo-christmas.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
305 changes: 232 additions & 73 deletions theme/templates/pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,42 +4,201 @@

{% block extra_head %}
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pages/index.css">
<style>
/* customizable snowflake styling */
.snowflake {
color: #fff;
font-size: 1em;
font-family: Arial, sans-serif;
text-shadow: 0 0 5px #000;
}

.snowflakes {
position: relative;
overflow: hidden;
}

.snowflake,.snowflake .inner{
animation-iteration-count:infinite;
animation-play-state:running
}
@keyframes snowflakes-fall {
0% {
transform:translateY(0)
}
100% {
transform:translateY(50vh)
}
}
@keyframes snowflakes-shake {
0%, 100% {
transform:translateX(0)
}
50% {
transform:translateX(80px)
}
}
.snowflake {
position:absolute;
top:-10%;
z-index:9999;
-webkit-user-select:none;
user-select:none;
cursor:default;
animation-name:snowflakes-shake;
animation-duration:3s;
animation-timing-function:ease-in-out
}
.snowflake .inner {
animation-duration:10s;
animation-name:snowflakes-fall;
animation-timing-function:linear
}
.snowflake:nth-of-type(0) {
left:1%;
animation-delay:0s
}
.snowflake:nth-of-type(0) .inner {
animation-delay:0s
}
.snowflake:first-of-type {
left:10%;
animation-delay:1s
}
.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner {
animation-delay:1s
}
.snowflake:nth-of-type(2) {
left:20%;
animation-delay:.5s
}
.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner {
animation-delay:6s
}
.snowflake:nth-of-type(3) {
left:30%;
animation-delay:2s
}
.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner {
animation-delay:4s
}
.snowflake:nth-of-type(4) {
left:40%;
animation-delay:2s
}
.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner {
animation-delay:2s
}
.snowflake:nth-of-type(5) {
left:50%;
animation-delay:3s
}
.snowflake:nth-of-type(5) .inner {
animation-delay:8s
}
.snowflake:nth-of-type(6) {
left:60%;
animation-delay:2s
}
.snowflake:nth-of-type(7) {
left:70%;
animation-delay:1s
}
.snowflake:nth-of-type(7) .inner {
animation-delay:2.5s
}
.snowflake:nth-of-type(8) {
left:80%;
animation-delay:0s
}
.snowflake:nth-of-type(9) {
left:90%;
animation-delay:1.5s
}
.snowflake:nth-of-type(9) .inner {
animation-delay:3s
}
.snowflake:nth-of-type(10) {
left:25%;
animation-delay:0s
}
.snowflake:nth-of-type(11) {
left:65%;
animation-delay:2.5s
}
</style>
{% endblock %}

{% block header %}
<div class="header splash cover-bg">
<div class="header splash cover-bg snowflakes" aria-hidden="true">
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="snowflake">
<div class="inner">❅</div>
</div>
<div class="container">
<img class="splash-logo drop-shadow" src="{{ SITEURL }}/theme/images/mixxx-logo.svg" alt="Mixxx Logo">
<img class="splash-logo drop-shadow" src="{{ SITEURL }}/theme/images/mixxx-logo-christmas.svg" alt="Mixxx Logo" title="Image by gstudioimagen on Freepik">
<div class="splash-text">
<h2>{% trans %}DJ Your Way{% endtrans %}</h2>
<p>Free and open source DJ software for Windows, macOS, and Linux</p>
<ul class="splash-social">
<li>
<a rel="me" class="mastodon social_icon" href="https://floss.social/@mixxx" target="_blank">
<img src="{{ SITEURL }}/theme/images/social_icons/mastodon.svg" alt="Mastodon" title="Follow Mixxx on Mastodon">
</a>
</li>
<li>
<a class="twitter social_icon" href="https://twitter.com/mixxxdj" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/twitter.svg" alt="Twitter" title="Follow Mixxx on Twitter">
</a>
</li>
<li>
<a class="facebook social_icon" href="https://facebook.com/mixxxdj/" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/facebook.svg" alt="Facebook" title="Follow Mixxx on Facebook">
</a>
</li>
<li>
<a class="zulip social_icon" href="https://mixxx.zulipchat.com" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/zulip.svg" alt="Zulip" title="Chat on Zulip">
</a>
</li>
<li>
<a class="github social_icon" href="https://github.com/mixxxdj/mixxx" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/github.svg" alt="GitHub" title="Get the source on GitHub">
</a>
</li>
</ul>
<h2>{% trans %}DJ Your Way{% endtrans %}</h2>
<p>Free and open source DJ software for Windows, macOS, and Linux</p>
<ul class="splash-social">
<li>
<a rel="me" class="mastodon social_icon" href="https://floss.social/@mixxx" target="_blank">
<img src="{{ SITEURL }}/theme/images/social_icons/mastodon.svg" alt="Mastodon" title="Follow Mixxx on Mastodon">
</a>
</li>
<li>
<a class="twitter social_icon" href="https://twitter.com/mixxxdj" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/twitter.svg" alt="Twitter" title="Follow Mixxx on Twitter">
</a>
</li>
<li>
<a class="facebook social_icon" href="https://facebook.com/mixxxdj/" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/facebook.svg" alt="Facebook" title="Follow Mixxx on Facebook">
</a>
</li>
<li>
<a class="zulip social_icon" href="https://mixxx.zulipchat.com" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/zulip.svg" alt="Zulip" title="Chat on Zulip">
</a>
</li>
<li>
<a class="github social_icon" href="https://github.com/mixxxdj/mixxx" target="_blank">
<img class="drop-shadow" src="{{ SITEURL }}/theme/images/social_icons/github.svg" alt="GitHub" title="Get the source on GitHub">
</a>
</li>
</ul>
</div>
</div>
</div>
Expand All @@ -53,41 +212,41 @@ <h2><a class="headline-link" href="#features">{% trans %}Powerful Features For A

<div class="grid-container halves u-align-left">
<div class="feature-indent">
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_keydetect.png" alt="{% trans %}BPM, Key Detection & Sync{% endtrans %}">
<h5 class="docs-header">{% trans %}BPM, Key Detection & Sync{% endtrans %}</h5>
<p>
{% trans %}BPM and musical key detection help you find the perfect next track from your library. Use Sync Lock to match the tempo and beats of four songs for seamless mixing.{% endtrans %}
</p>
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_keydetect.png" alt="{% trans %}BPM, Key Detection & Sync{% endtrans %}">
<h5 class="docs-header">{% trans %}BPM, Key Detection & Sync{% endtrans %}</h5>
<p>
{% trans %}BPM and musical key detection help you find the perfect next track from your library. Use Sync Lock to match the tempo and beats of four songs for seamless mixing.{% endtrans %}
</p>
</div>

<div class="feature-indent">
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_controllers.png" alt="{% trans %}DJ Controller Support{% endtrans %}">
<h5 class="docs-header">{% trans %}DJ Controller Support{% endtrans %}</h5>
<p>
{% trans %}Built-in mappings for DJ controller hardware gives you hands-on control of Mixxx's features. Use the programmable mapping system to customize your workflow and add support for any MIDI or HID device.{% endtrans %}
</p>
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_controllers.png" alt="{% trans %}DJ Controller Support{% endtrans %}">
<h5 class="docs-header">{% trans %}DJ Controller Support{% endtrans %}</h5>
<p>
{% trans %}Built-in mappings for DJ controller hardware gives you hands-on control of Mixxx's features. Use the programmable mapping system to customize your workflow and add support for any MIDI or HID device.{% endtrans %}
</p>
</div>

<div class="feature-indent">
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_waveform.png" alt="{% trans %}Effects{% endtrans %}">
<h5 class="docs-header">{% trans %}Effects{% endtrans %}</h5>
<p>
{% trans %}Add your unique spin to tracks with sound effects. Get creative by chaining multiple effects together and twisting all their knobs.{% endtrans %}
</p>
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_waveform.png" alt="{% trans %}Effects{% endtrans %}">
<h5 class="docs-header">{% trans %}Effects{% endtrans %}</h5>
<p>
{% trans %}Add your unique spin to tracks with sound effects. Get creative by chaining multiple effects together and twisting all their knobs.{% endtrans %}
</p>
</div>

<div class="feature-indent">
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_vinyl.png" alt="{% trans %}Vinyl Record Control{% endtrans %}">
<h5 class="docs-header">{% trans %}Vinyl Record Control{% endtrans %}</h5>
<p>
{% trans %}Use turntables with timecode vinyl records to control playback and scratch your digital music files as if they were pressed on vinyl. Mix music vinyls into your set by toggling vinyl passthrough mode.{% endtrans %}
</p>
<img class="feature-icon" src="{{ SITEURL }}/theme/images/ic_preferences_vinyl.png" alt="{% trans %}Vinyl Record Control{% endtrans %}">
<h5 class="docs-header">{% trans %}Vinyl Record Control{% endtrans %}</h5>
<p>
{% trans %}Use turntables with timecode vinyl records to control playback and scratch your digital music files as if they were pressed on vinyl. Mix music vinyls into your set by toggling vinyl passthrough mode.{% endtrans %}
</p>
</div>
</div>

<div>
<p>
{% trans %}See dozens <a href="{{ SITEURL }}/features">more features</a> or download Mixxx and start DJing now!{% endtrans %}
{% trans %}See dozens <a href="{{ SITEURL }}/features">more features</a> or download Mixxx and start DJing now!{% endtrans %}
</p>
</div>
</div>
Expand All @@ -96,18 +255,18 @@ <h5 class="docs-header">{% trans %}Vinyl Record Control{% endtrans %}</h5>
<div class="container splash-text">
<h2><a class="headline-link" href="#opensource">{% trans %}Free &amp; Open Source{% endtrans %}</a></h2>
<p>
{% trans %}Mixxx is free open-source software and entirely community-driven. There is no company behind Mixxx &mdash; the development is shouldered by passionate DJs and programmers that dedicate their free time to working on their favorite DJ software. Mixxx is and always will be free!{% endtrans %}
{% trans %}Mixxx is free open-source software and entirely community-driven. There is no company behind Mixxx &mdash; the development is shouldered by passionate DJs and programmers that dedicate their free time to working on their favorite DJ software. Mixxx is and always will be free!{% endtrans %}
</p>
</div>
<div class="container grid-container thirds drop-shadow">
<div>
<a class="button button-primary" href="{{ SITEURL }}/download">{% trans %}Download{% endtrans %}</a>
<a class="button button-primary" href="{{ SITEURL }}/download">{% trans %}Download{% endtrans %}</a>
</div>
<div>
{% include "donate_paypal.html" %}
{% include "donate_paypal.html" %}
</div>
<div>
<a class="button button-secondary" href="https://github.com/mixxxdj/mixxx" target="_blank">{% trans %}Source Code{% endtrans %}</a>
<a class="button button-secondary" href="https://github.com/mixxxdj/mixxx" target="_blank">{% trans %}Source Code{% endtrans %}</a>
</div>
</div>
</div>
Expand All @@ -122,10 +281,10 @@ <h2><a class="headline-link" href="#news">{% trans %}Latest News{% endtrans %}</
<div class="grid-container halves u-align-left">
{% for article in articles[:2] %}
<div>
<time>{{ article.locale_date }}</time>
<h5>{{ article.title }}</h5>
{{ article.summary }}
<a class="button button-secondary" href="{{ SITETURL }}/{{ article.url }}">{% trans %}Read More{% endtrans %}</a>
<time>{{ article.locale_date }}</time>
<h5>{{ article.title }}</h5>
{{ article.summary }}
<a class="button button-secondary" href="{{ SITETURL }}/{{ article.url }}">{% trans %}Read More{% endtrans %}</a>
</div>
{% endfor %}
</div>
Expand All @@ -147,28 +306,28 @@ <h2><a class="headline-link" href="community">{% trans %}Friendly Community{% en
<div id="archievements" class="docs-section container">
<div class="grid-container quarters">
<div class="archievement">
<img src="{{ SITEURL }}/theme/images/rating_macappstore.png" alt="Mac App Store">
<br>
{% trans %}#1 Top Free Mac App Worldwide{% endtrans %}<br>
Mac App Store<br>
<small>{% trans %}February 2011{% endtrans %}</small>
<img src="{{ SITEURL }}/theme/images/rating_macappstore.png" alt="Mac App Store">
<br>
{% trans %}#1 Top Free Mac App Worldwide{% endtrans %}<br>
Mac App Store<br>
<small>{% trans %}February 2011{% endtrans %}</small>
</div>

<div class="archievement">
<img src="{{ SITEURL }}/theme/images/rating_cnet.png" alt="CNet">
<img src="{{ SITEURL }}/theme/images/rating_cnet.png" alt="CNet">
</div>

<div class="archievement">
<img src="{{ SITEURL }}/theme/images/rating_cm.png" alt="Computer Music"><br>
{% trans %}Free Pick of the Month{% endtrans %}<br>
<small>{% trans %}September 2007{% endtrans %}</small>
<img src="{{ SITEURL }}/theme/images/rating_cm.png" alt="Computer Music"><br>
{% trans %}Free Pick of the Month{% endtrans %}<br>
<small>{% trans %}September 2007{% endtrans %}</small>
</div>

<div class="archievement">
<img src="{{ SITEURL }}/theme/images/rating_synthtopia.png" alt="Synthtopia">
<br>
{% trans %}"The coolest open source<br>application ever?"{% endtrans %}<br>
<small>{% trans %}February 2011{% endtrans %}</small>
<img src="{{ SITEURL }}/theme/images/rating_synthtopia.png" alt="Synthtopia">
<br>
{% trans %}"The coolest open source<br>application ever?"{% endtrans %}<br>
<small>{% trans %}February 2011{% endtrans %}</small>
</div>
</div>
</div>
Expand Down

0 comments on commit 28ac24c

Please sign in to comment.