Styling

couchpotato/static/style/fonts.scss

@@ -1,23 +1,22 @@
-
 /* Fonts */
 @font-face {
-  font-family: 'Elusive-Icons';
-  src:url('../static/fonts/Elusive-Icons.eot');
-  src:url('../static/fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
-    url('../static/fonts/Elusive-Icons.woff') format('woff'),
-    url('../static/fonts/Elusive-Icons.ttf') format('truetype'),
-    url('../static/fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');
-  font-weight: normal;
-  font-style: normal;
+    font-family: 'Elusive-Icons';
+    src:url('../fonts/Elusive-Icons.eot');
+    src:url('../fonts/Elusive-Icons.eot?#iefix') format('embedded-opentype'),
+        url('../fonts/Elusive-Icons.woff') format('woff'),
+        url('../fonts/Elusive-Icons.ttf') format('truetype'),
+        url('../fonts/Elusive-Icons.svg#Elusive-Icons') format('svg');
+    font-weight: normal;
+    font-style: normal;
 }
 
 @font-face {
     font-family: 'OpenSans';
-    src: url('../static/fonts/OpenSans-Light-webfont.eot');
-    src: url('../static/fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/OpenSans-Light-webfont.woff') format('woff'),
-         url('../static/fonts/OpenSans-Light-webfont.ttf') format('truetype'),
-         url('../static/fonts/OpenSans-Light-webfont.svg#OpenSansRegular') format('svg');
+    src: url('../fonts/OpenSans-Light-webfont.eot');
+    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Light-webfont.svg#OpenSansRegular') format('svg');
     font-weight: 200;
     font-style: normal;
 
@@ -25,57 +24,55 @@
 
 @font-face {
     font-family: 'OpenSans';
-    src: url('../static/fonts/OpenSans-Regular-webfont.eot');
-    src: url('../static/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/OpenSans-Regular-webfont.woff') format('woff'),
-         url('../static/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
-         url('../static/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
+    src: url('../fonts/OpenSans-Regular-webfont.eot');
+    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
     font-weight: normal;
     font-style: normal;
-
 }
 
 @font-face {
     font-family: 'OpenSans';
-    src: url('../static/fonts/OpenSans-Italic-webfont.eot');
-    src: url('../static/fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/OpenSans-Italic-webfont.woff') format('woff'),
-         url('../static/fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
-         url('../static/fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
+    src: url('../fonts/OpenSans-Italic-webfont.eot');
+    src: url('../fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Italic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Italic-webfont.svg#OpenSansItalic') format('svg');
     font-weight: normal;
     font-style: italic;
-
 }
 
 @font-face {
     font-family: 'OpenSans';
-    src: url('../static/fonts/OpenSans-Bold-webfont.eot');
-    src: url('../static/fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/OpenSans-Bold-webfont.woff') format('woff'),
-         url('../static/fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
-         url('../static/fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
+    src: url('../fonts/OpenSans-Bold-webfont.eot');
+    src: url('../fonts/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-Bold-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-Bold-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
     font-weight: bold;
     font-style: normal;
 }
 
 @font-face {
     font-family: 'OpenSans';
-    src: url('../static/fonts/OpenSans-BoldItalic-webfont.eot');
-    src: url('../static/fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
-         url('../static/fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
-         url('../static/fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot');
+    src: url('../fonts/OpenSans-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.woff') format('woff'),
+         url('../fonts/OpenSans-BoldItalic-webfont.ttf') format('truetype'),
+         url('../fonts/OpenSans-BoldItalic-webfont.svg#OpenSansBoldItalic') format('svg');
     font-weight: bold;
     font-style: italic;
 }
 
 @font-face {
     font-family: 'Lobster';
-    src: url('../static/fonts/Lobster-webfont.eot');
-    src: url('../static/fonts/Lobster-webfont.eot?#iefix') format('embedded-opentype'),
-         url('../static/fonts/Lobster-webfont.woff') format('woff'),
-         url('../static/fonts/Lobster-webfont.ttf') format('truetype'),
-         url('../static/fonts/Lobster-webfont.svg#lobster_1.4regular') format('svg');
+    src: url('../fonts/Lobster-webfont.eot');
+    src: url('../fonts/Lobster-webfont.eot?#iefix') format('embedded-opentype'),
+         url('../fonts/Lobster-webfont.woff') format('woff'),
+         url('../fonts/Lobster-webfont.ttf') format('truetype'),
+         url('../fonts/Lobster-webfont.svg#lobster_1.4regular') format('svg');
     font-weight: normal;
     font-style: normal;
 }

couchpotato/static/style/main.scss

@@ -8,8 +8,9 @@ body, html {
 	height:  100%;
 	margin: 0;
 	padding: 0;
-	background: #111;
-	-webkit-font-smoothing: subpixel-antialiased;
+	background: $menu_color;
+	-webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     overflow: hidden;
 }
 
@@ -35,11 +36,11 @@ a {
     .navigation {
 
         .logo {
-            background: #ac0000;
+            background: $couch_color;
             display: block;
             text-align: center;
 
-            font-family: Lobster;
+            font-family: Lobster, serif;
             color: #FFF;
             font-size: 38px;
             line-height: 80px;
@@ -67,11 +68,10 @@ a {
     }
 }
 
-
 .content {
     @include flex(1 auto);
 
-    background: #FFF;
+    background: $background_color;
     border-radius: 3px 0 0 3px;
     overflow: hidden;
 
@@ -82,7 +82,7 @@ a {
 
     .pages {
         height: 100%;
-        widows: 100%;
+        width: 100%;
     }
 
     .footer {

couchpotato/static/style/mixins.scss

@@ -1,3 +1,8 @@
+$couch_color: #ac0000;
+$background_color: #FFF;
+$menu_color: #111;
+$theme_off: #f2f2f2;
+
 @mixin flexbox() {
   display: -webkit-box;
   display: -moz-box;