change player to be vertical, like earlier mockups

panikweb_templates/static/css/specifics.css

@@ -64,7 +64,7 @@
 /****************************************************/
 /* WRAPPER */
 /****************************************************/
-.wrapper {max-width: 1260px; margin:auto;padding:0 10%;}
+.wrapper {max-width: 1260px; margin:auto;padding:0 1%;}
 .wrapper.text {max-width: 780px; margin:auto;}
 .wrapper.half {max-width: 510px; margin:auto;}
 .wrapper.sided{		max-width:1260px;	}
@@ -188,7 +188,7 @@ button.check:before, a.check:before {
 /**** BODY ****/
 /****************************************************/
 body{
-	background: #ddd;
+	background: white;
 	color: #333;
 }
 /****************************************************/
@@ -257,12 +257,6 @@ body{
 }
 #Commons .wrapper{
 }
-#Commons #backgroundBox{
-	margin-top:25px;
-	padding-top:25px;
-    padding-bottom:50px;
-    background:white 0% 0% no-repeat url('../img/logoPanik.png');
-}
 #mainHeader {
 	padding-bottom:1em;
 }
@@ -287,6 +281,42 @@ body{
     margin:1em 0;
 }
 
+
+@media screen and (min-width: 600px) {
+	#Commons {
+		float: left;
+		width: 20%;
+		width: calc(0% + 280px);
+	}
+	#Changing {
+		float: right;
+		width: 78%;
+		width: calc(100% - 300px);
+		margin-left: 20px;
+	}
+	#All h1.top {
+		font-size: 120px;
+		font-family: Reglo;
+		text-transform: uppercase;
+		-webkit-transform: scale(0.5, 1);
+		-webkit-transform-origin: 0;
+		padding-left: 0;
+	}
+
+	#backgroundBox h1 {
+		color: #ff6600 !important;
+	}
+
+	#Player #CurrentlyPlaying {
+		margin-top: 50px;
+	}
+
+	#Player .fixed #CurrentlyPlaying {
+		margin-top: 0;
+	}
+
+}
+
 /****************************************************/
 /****  SCREEN NAV ****/
 #Nav{

panikweb_templates/templates/base.html

@@ -47,11 +47,10 @@
 		<div id="Commons" class="cf" >
             <div class="wrapper sided" >
                 <div id="backgroundBox" class="cf">
-			        <div id="mainHeader" class="leftPart">
-				        <h1><span id="radioPanik" class="inBlock">Radio Panik</span> <span id="frequence" class="inBlock">105.4 FM</span></h1>
-				        <!--{% block logo %}<img class="logo" src="{{ STATIC_URL }}/img/LogoPanik.jpg"/>{% endblock %}-->
+			        <div id="mainHeader">
+					<h1 class="top">Media</h1>
 			        </div>
-			        <div id="Player" class="rightPart withoutPlaylist">
+			        <div id="Player" class="withoutPlaylist">
 				        {% block listen %}{% player %}{% endblock %}
 			        </div>
 		        </div>
@@ -67,12 +66,12 @@
 			<div id="Related" class="cf">
 				{% block related %}{% endblock %}
 			</div>
-		</div>
 		<div id="Footer">
 			<nav class="wrapper">
 				{% show_menu "footer-menu" 1 1 "all" %}
 			</nav>
 		</div>
+		</div>
 		<div id="userLog"></div>
 	</div>
 {% piwik %}