style: experiment with some big background text

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;
+}

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'));

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 %}

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">

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 %}

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 %}

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" %}

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 %}

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 %}

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 %}

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" %}