Merge pull request 'features/ui-polish' (#10) from features/ui-polish into main

Reviewed-on: 0x2620/aab21#10

app/static/css/partials/_film.scss

@@ -1,7 +1,7 @@
 
 
 .films {
-  margin: 8px;
+  margin: var(--spacing-2);
   box-sizing: border-box;
 
   a {
@@ -9,7 +9,7 @@
     text-decoration: none;
   }
   .film {
-    margin-bottom: 16px;
+    margin-bottom: var(--spacing-2);
     h1 {
       font-weight: bold;
       font-size: 20px;
@@ -17,9 +17,9 @@
   }
   @media screen and (max-width: 799px) {
     .film {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-2);
       h2 {
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }
@@ -30,7 +30,7 @@ main > .film {
   max-width: 1080px;
   margin: auto;
   .info {
-    margin: 8px;
+    margin: var(--spacing) var(--spacing-2);
     margin-bottom: 32px;
     text-overflow: ellipsis;
     overflow: hidden;
@@ -43,12 +43,12 @@ main > .film {
       margin: 24px 0;
     }
     .details {
-      margin-top: 16px;
+      margin-top: var(--spacing-2);
     }
     .bio {
-      margin-top: 16px;
+      margin-top: var(--spacing-2);
       div {
-        margin-top: 8px;
+        margin-top: var(--spacing);
       }
     }
   }
@@ -57,14 +57,14 @@ main > .film {
   }
   .play {
     text-align: center;
-    margin: 8px;
-    margin-top: 16px;
-    margin-bottom: 16px;
+    margin: var(--spacing);
+    margin-top: var(--spacing-2);
+    margin-bottom: var(--spacing-2);
 
     .texts {
-      padding-top: 16px;
+      padding-top: var(--spacing-2);
       .text {
-        padding-bottom: 16px;
+        padding-bottom: var(--spacing-2);
       }
     }
   }
@@ -72,7 +72,7 @@ main > .film {
     h1 {
       span {
         display: block;
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }

app/static/css/partials/_layout.scss

@@ -3,6 +3,9 @@
 	--bg-color-2: #0099ff;
 	--bg-color-3: #ffff00;
 	--bg-color-4: #ff3399;
+
+    --spacing: 8px;
+    --spacing-2: calc(var(--spacing) * 2);
 }
 
 @keyframes background_animation {
@@ -21,7 +24,7 @@ body {
     animation: background_animation 60s ease-in-out infinite;
     background-size: 400% 100%;
     color: #ddd;
-    font-family: "Noto Sans";
+    font-family: "noto_sans", sans-serif;
     font-size: 20px;
     overflow-x: hidden;
 }

app/static/css/partials/_menu.scss

@@ -2,23 +2,28 @@
 .topnav {
   background-color: #333;
   position: relative;
-  height: 72px;
-  padding-left: 16px;
-  padding-top: 16px;
+  height: 68px;
+  padding: var(--spacing-2);
+  box-sizing: border-box;
   @media screen and (max-width: 799px) {
-    padding-left: 0;
-    padding-right: 0;
+    padding-top: calc(var(--spacing) * 1.6);
+  }
+
+  @media screen and (min-width: 800px) {
+    display: flex;
+    align-items: flex-end;
   }
 
   nav {
     display: block;
     text-align: right;
-    margin-right: 16px;
     @media screen and (max-width: 799px) {
       text-align: center;
       width: 100%;
-      margin-right: 0;
-      margin-top: 16px;
+      margin-top: var(--spacing);
+    }
+    @media screen and (min-width: 800px) {
+      margin-left: auto;
     }
   }
 
@@ -26,6 +31,7 @@
     color: white;
     text-decoration: none;
     font-size: 17px;
+    margin-left: var(--spacing);
 
     &:hover {
       background-color: #ddd;
@@ -45,3 +51,10 @@
 
 
 }
+
+.title-text {
+    @media screen and (min-width: 800px) {
+      font-weight: 700;
+      padding-bottom: calc(var(--spacing) / 2);
+    }
+}

app/static/css/partials/_text.scss

@@ -1,3 +1,42 @@
+// Font: Noto Sans
+
+@font-face {
+    font-family: 'noto_sans';
+    src: url('../../static/fonts/noto-sans/noto-sans-regular-webfont.woff2') format('woff2'),
+         url('../../static/fonts/noto-sans/noto-sans-regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'noto_sans';
+    src: url('../../static/fonts/noto-sans/noto-sans-italic-webfont.woff2') format('woff2'),
+         url('../../static/fonts/noto-sans/noto-sans-italic-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'noto_sans';
+    src: url('../../static/fonts/noto-sans/noto-sans-bold-webfont.woff2') format('woff2'),
+         url('../../static/fonts/noto-sans/noto-sans-bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'noto_sans';
+    src: url('noto-sans-bold-italic-webfont.woff2') format('woff2'),
+         url('noto-sans-bold-italic-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+}
+
+// Text: Global Classes
+
+.font-bold {
+  font-weight: 700;
+}
 
 
 main > .texts {
@@ -9,7 +48,7 @@ main > .texts {
   }
 
   .text {
-    margin: 8px;
+    margin: var(--spacing);
     h1 {
       font-weight: bold;
       font-size: 20px;
@@ -17,9 +56,9 @@ main > .texts {
   }
   @media screen and (max-width: 799px) {
     .text {
-      margin-bottom: 16px;
+      margin-bottom: var(--spacing-2);
       h2 {
-        margin-bottom: 8px;
+        margin-bottom: var(--spacing);
       }
     }
   }

app/templates/base.html

@@ -8,14 +8,13 @@
 			Phantas.ma/polis - Looking Back to the Future
             {% endblock title %}
         </title>
-		<link href='https://fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>
         <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
 		{% block head %}{% endblock head %}
 	</head>
 	<body>
 		<div class="topnav">
 		  <a href="/polis" class="title">
-				<div>
+				<div class="title-text">
 				Phantas.ma/polis<span class="hide-mobile">: Looking Back to the Future</span>
 				</div>
 				<div>