From 50a9e48f83a492c676164c85ff78a8ba0355d9f9 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@0d.be>
Date: Fri, 13 Jan 2017 23:22:18 +0100
Subject: [PATCH] style: experiment with some big background text

---
 panikweb_templates/static/css/_specifics.scss | 34 +++++++++++++++++--
 panikweb_templates/static/js/specifics.js     |  5 +++
 .../combo/page_template_sidebar.html          |  2 +-
 panikweb_templates/templates/emissions.html   |  1 +
 .../templates/emissions/archives.html         |  1 +
 .../templates/emissions/nav.html              |  2 +-
 panikweb_templates/templates/grid.html        |  2 +-
 panikweb_templates/templates/home.html        |  2 +-
 panikweb_templates/templates/listen.html      |  2 +-
 panikweb_templates/templates/news.html        |  2 +-
 panikweb_templates/templates/program.html     |  2 +-
 11 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/panikweb_templates/static/css/_specifics.scss b/panikweb_templates/static/css/_specifics.scss
index 3753c73..afb1158 100644
--- 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 ea5a4ed..9816ee2 100644
--- 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 52f1876..7f1a030 100644
--- 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 8d4c0d2..21e9d09 100644
--- 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 758d348..300a3e2 100644
--- 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 e7119fe..750767b 100644
--- 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 a5d98d7..23c8828 100644
--- 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 6af305d..13226db 100644
--- 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 a368cbb..5f33a5e 100644
--- 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 1c827a6..94031bc 100644
--- 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 4ceeb76..9c84bc5 100644
--- 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" %}
-- 
2.39.2