rename catchphrase class, adjust media-queries

Author: christopheschwyzer

_layouts/default.html

@@ -303,7 +303,7 @@
 		<header id="header">
 			<div class="logo-wrapper">
 				<span class="logo" title="Made in Basel"></span>
-				<q class="catchphrase">Beautiful code from a beautiful city!</q>
+				<p class="slogan">Beautiful code from a beautiful city!</p>
 			</div>
 			<div class="bg">
 				<svg viewBox="0 0 1600 900" preserveAspectRatio="xMidYMax slice" height="100%" width="100%">

css/main.css

@@ -149,7 +149,7 @@ strong {
     height: 90%;
   }
 }
-@media (min-aspect-ratio: 12/6) {
+@media (min-aspect-ratio: 12/7) {
   #header {
     height: 100%;
   }
@@ -167,22 +167,26 @@ strong {
   height: 100%;
   background: url(/img/logo.svg) no-repeat center;
 }
-#header .logo-wrapper .catchphrase {
+#header .logo-wrapper .slogan {
   display: block;
   font-style: italic;
   text-shadow: 1px 1px #f5f5f5;
 }
+#header .logo-wrapper .slogan:before {
+  content: '<';
+}
+#header .logo-wrapper .slogan:after {
+  content: '>';
+}
 @media (min-width: 700px) {
-  #header .logo-wrapper .catchphrase {
-    font-size: 1.5rem;
+  #header .logo-wrapper .slogan {
+    font-size: 1.3rem;
   }
 }
-@media (min-aspect-ratio: 12/8) {
-  #header .logo-wrapper .catchphrase {
+@media (min-aspect-ratio: 12/6) {
+  #header .logo-wrapper .slogan {
     display: none;
   }
-}
-@media (min-aspect-ratio: 12/7) {
   #header .logo-wrapper .logo {
     width: 220px;
   }

css/main.less

@@ -176,7 +176,7 @@ strong {
 		height: 90%;
 	}
 
-	@media (min-aspect-ratio: 12/6) {
+	@media (min-aspect-ratio: 12/7) {
 		height: 100%;
 	}
 
@@ -198,23 +198,29 @@ strong {
 			background: url(/img/logo.svg) no-repeat center;
 		}
 
-		.catchphrase {
+		.slogan {
 			display: block;
 			font-style: italic;
 			text-shadow: 1px 1px @colorBg;
 
+			&:before {
+				content: '<';
+			}
+
+			&:after {
+				content: '>';
+			}
+
 			@media (min-width: @breakpointMedium) {
-				font-size: 1.5rem;
+				font-size: 1.3rem;
 			}
 		}
 
-		@media (min-aspect-ratio: 12/8) {
-			.catchphrase {
+		@media (min-aspect-ratio: 12/6) {
+			.slogan {
 				display: none;
 			}
-		}
 
-		@media (min-aspect-ratio: 12/7) {
 			.logo {
 				width: 220px;
 			}