style: experiment with some big background text

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 3753c73b332fc76e99d6687a9947c66c59a48351..afb1158638923262cc3f5194b2e753523a7990ab 100644 (file)
--- a/panikweb_templates/static/css/_specifics.scss
+++ b/panikweb_templates/static/css/_specifics.scss
@@ -280,6 +280,7 @@ body{
 }
 
 @media screen and (max-width:760px){
+       #bg-title { display: none; }
        #metaNav .iconLabel {display:none;}
        #metaNav ul li a span.nav-icon { display: inline-block; }
        #metaNav ul li {
@@ -318,7 +319,8 @@ body{
 
 /* PANIK LOGO */
 #Commons{
-       background: #fff;
+       position: relative;
+       z-index: 5;
 }
 #Commons .wrapper{
 }
@@ -463,7 +465,7 @@ body{
 }
 
 #backgroundBox {
-       background: white center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
+       background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
 }
 
 #All #backgroundBox h1.top {
@@ -726,7 +728,8 @@ h1.top#frequence {
 #Main{
        flex-grow: 1;
        color:#333;
-       background-color: white;
+       position: relative;
+       z-index: 1;
 }
 #Main >.wrapper{
        padding-bottom:2em;
@@ -784,6 +787,8 @@ h1.top#frequence {
        border-top:2px solid #333;
        padding-top: 2em;
        padding-bottom: 80px;
+       position: relative;
+       z-index: 3;
 }
 
 #Footer ul {
@@ -1015,6 +1020,10 @@ div.extra-soundfiles ul strong {
        max-width: 500px;
 }
 
+#newsRoll li {
+       background: white;
+}
+
 .newsRoll .title{
        background:black;
        color:white;
@@ -1534,6 +1543,7 @@ h3.episode-subtitle {
 
 .waveform span {
        background: #3A3A3A;
+       background: rgba(10, 10, 10, 0.8);
        display: inline-block;
        width: 0.50%;
 }
@@ -2007,3 +2017,21 @@ div#chat.moderation .msg-in span.from:hover::after {
 div.programCell a.playlist {
        font-size: 80%;
 }
+
+#bg-title {
+       color: lighten($primary, 20);
+       font-family: 'Reglo';
+       text-transform: uppercase;
+       line-height: 100%;
+       font-size: 250px;
+       font-size: 25vh;
+       position: absolute;
+       left: -260px;
+       top: 48vh;
+       z-index: 0;
+       -webkit-user-select: none;
+       -moz-user-select: none;
+       -ms-user-select: none;
+       user-select: none;
+       cursor: default;
+}

diff --git a/panikweb_templates/static/js/specifics.js b/panikweb_templates/static/js/specifics.js
index ea5a4ed4e67e54878d7496636e8739a6cce1a3d3..9816ee2243e4e5bdcce49c7e002acc63f7c3eccd 100644 (file)
--- a/panikweb_templates/static/js/specifics.js
+++ b/panikweb_templates/static/js/specifics.js
@@ -462,6 +462,11 @@ $(function() {
                $('#nav-search a').unbind('click').on('click', navsearch_click);
                $('#nav-search form').unbind('submit').on('submit', navsearch_click);
 
+               if ($('.bg-title').length) {
+                       var bg_title = $('<span id="bg-title" aria-hidden="true"></span>');
+                       bg_title.text($('.bg-title').text());
+                       $('#Changing').append(bg_title);
+               }
                $('[data-toggle-img]').bind('click', function() {
                        var src = $(this).data('toggle-img');
                        $(this).data('toggle-img', $(this).attr('src'));

diff --git a/panikweb_templates/templates/combo/page_template_sidebar.html b/panikweb_templates/templates/combo/page_template_sidebar.html
index 52f18766681abfaa65ac354667a23bf487ea8cea..7f1a03063457d5cff6ad31e0071816fbe298d852 100644 (file)
--- a/panikweb_templates/templates/combo/page_template_sidebar.html
+++ b/panikweb_templates/templates/combo/page_template_sidebar.html
@@ -4,7 +4,7 @@
 {% block title %}{{ page.title }}{% endblock %}
 
 {% block toptitle %}
-<h1 class="top"><a href="{{ page.get_parents_and_self.0.get_online_url }}">{{ page.get_parents_and_self.0.title }}</a></h1>
+<h1 class="top bg-title"><a href="{{ page.get_parents_and_self.0.get_online_url }}">{{ page.get_parents_and_self.0.title }}</a></h1>
 {% endblock %}
 
 {% block nav %}

diff --git a/panikweb_templates/templates/emissions.html b/panikweb_templates/templates/emissions.html
index 8d4c0d2610bb5dc754aa5348e95637dcb55b0030..21e9d09a90dc6d084d37e51c6d0077e5fad9a7b9 100644 (file)
--- a/panikweb_templates/templates/emissions.html
+++ b/panikweb_templates/templates/emissions.html
@@ -7,6 +7,7 @@
 {% endblock %}
 {% block nav %}
        {% emission_nav with klass="emissions" %}
+       <span class="bg-title" style="display: none"><a>{% trans 'Emissions' %}</a></span>
 {% endblock %}
 {% block main %}
 <div class="emissions">

diff --git a/panikweb_templates/templates/emissions/archives.html b/panikweb_templates/templates/emissions/archives.html
index 758d34840aa9a2c2be69cf37160eb7081a8020bc..300a3e21f34fc99f1235704156983186e532866e 100644 (file)
--- a/panikweb_templates/templates/emissions/archives.html
+++ b/panikweb_templates/templates/emissions/archives.html
@@ -7,4 +7,5 @@
 {% endblock %}
 {% block nav %}
        {% emission_nav with klass="archives" %}
+       <span class="bg-title" style="display: none"><a>{% trans 'Archives' %}</a></span>
 {% endblock %}

diff --git a/panikweb_templates/templates/emissions/nav.html b/panikweb_templates/templates/emissions/nav.html
index e7119fe699600d4e4e395753c28982e8b35ba277..750767b4f6165ddfc28d2d99ddf773fb05f6e7aa 100644 (file)
--- a/panikweb_templates/templates/emissions/nav.html
+++ b/panikweb_templates/templates/emissions/nav.html
@@ -39,7 +39,7 @@
 <div class="navigation">
        <header class="mainHeader marged cf">
             <div class="leftPart">
-                       <h2 class="squashed title">
+                       <h2 class="squashed title bg-title">
                                <a href="{% url 'emission-view' slug=emission.slug %}">{{ emission.title }}</a>
                        </h2>
                {% if emission.categories %}

diff --git a/panikweb_templates/templates/grid.html b/panikweb_templates/templates/grid.html
index a5d98d7b528e8742028c7d525878b7a28bc3a212..23c8828278cd9e500779c28ac5ff6222d4763897 100644 (file)
--- a/panikweb_templates/templates/grid.html
+++ b/panikweb_templates/templates/grid.html
@@ -3,7 +3,7 @@
 {% block bodyID %}Grid{% endblock %}
 {% block title %}{% trans 'Grid' %}{% endblock %}
 {% block toptitle %}
-<h1 class="top"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
+<h1 class="top bg-title"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
 {% endblock %}
 {% block nav %}
        {% emission_nav with klass="grid" %}

diff --git a/panikweb_templates/templates/home.html b/panikweb_templates/templates/home.html
index 6af305db7d4943c89c5eb3b56054759ad5bd9358..13226db25398f2bd4473b1cf2ad78bd8a4cecded 100644 (file)
--- a/panikweb_templates/templates/home.html
+++ b/panikweb_templates/templates/home.html
@@ -26,7 +26,7 @@
     <div>
            <div class="leftPart">
                    <h1 class="top"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
-                   <h2><a href="{% url 'program' %}">{% trans 'This week on Panik' %}</a></h2>
+                   <h2 class="bg-title"><a href="{% url 'program' %}">{% trans 'This week on Panik' %}</a></h2>
 
                    {% weeknav %}
                    {% weekview %}

diff --git a/panikweb_templates/templates/listen.html b/panikweb_templates/templates/listen.html
index a368cbb056b26f4a0cfeb7c717de3663c28bdb3e..5f33a5ea14b7bd778a1e60eeed846df501450151 100644 (file)
--- a/panikweb_templates/templates/listen.html
+++ b/panikweb_templates/templates/listen.html
@@ -2,7 +2,7 @@
 {% load paniktags staticfiles thumbnail i18n %}
 {% block title %}{% trans 'Sounds' %}{% endblock %}
 {% block toptitle %}
-<h1 class="top"><a href="{% url 'listen' %}">{% trans 'Sounds' %}</a></h1>
+<h1 class="top bg-title"><a href="{% url 'listen' %}">{% trans 'Sounds' %}</a></h1>
 {% endblock %}
 {% block nav %}
 {% endblock %}

diff --git a/panikweb_templates/templates/news.html b/panikweb_templates/templates/news.html
index 1c827a65c28ef49a64ce39d4ad4fd8987bd29a3a..94031bcd4aee0ae766164abb9acbcfcd3e72aede 100644 (file)
--- a/panikweb_templates/templates/news.html
+++ b/panikweb_templates/templates/news.html
@@ -2,7 +2,7 @@
 {% load paniktags i18n %}
 {% block title %}{% trans 'News' %}{% endblock %}
 {% block toptitle %}
-<h1 class="top"><a href="{% url 'news' %}">{% trans 'News' %}</a>
+<h1 class="top bg-title"><a href="{% url 'news' %}">{% trans 'News' %}</a>
  / <a class="dimmed" href="{% url 'agenda' %}">Agenda</a>
 </h1>
 {% endblock %}

diff --git a/panikweb_templates/templates/program.html b/panikweb_templates/templates/program.html
index 4ceeb766cfe803713746e04d9fd50471515285a7..9c84bc54137af1b956f653960f6441e9bb1a06a0 100644 (file)
--- a/panikweb_templates/templates/program.html
+++ b/panikweb_templates/templates/program.html
@@ -3,7 +3,7 @@
 {% block bodyID %}Program{% endblock %}
 {% block title %}{% trans 'Program' %}{% endblock %}
 {% block toptitle %}
-<h1 class="top"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
+<h1 class="top bg-title"><a href="{% url 'grid' %}">{% trans 'Program' %}</a></h1>
 {% endblock %}
 {% block nav %}
        {% emission_nav with klass="program" %}