From 4f6624ccb5c5d16439f9a4c4f91a18aa43ffe204 Mon Sep 17 00:00:00 2001
From: JoBCB <joaninha_quelhas@hotmail.com>
Date: Mon, 16 Nov 2020 09:43:56 +0000
Subject: [PATCH] added changes font sizes other adjust after Lozanas email and
 added placeholder yellow label

---
 static/css/style.css  | 298 ++++++++++++++++++++++++++++--------------
 templates/layout.html |   9 +-
 2 files changed, 207 insertions(+), 100 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index 4885c9e..8ab8472 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -35,13 +35,112 @@ font-style: normal;
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:ital@0;1&display=swap');
 
+
+/***************** ALL RESPONSE TEXT ****************/
+
+@media screen and (min-width: 320px) {
+
+/* 12 18 */ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, 
+.date, div#header-keyword-search span {
+		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
+		 line-height: 1.63;
+	}
+/* 12 18 */ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
+div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
+		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
+		line-height: 16px;
+	}
+/* 12 18 line height diff */ div#footer-socials-links a {
+		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
+		line-height: 28.4px;
+	}
+/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span {
+		font-size: calc(14px + 8 * (100vw - 320px) / 1600);
+  		line-height: 1.44;
+	}
+/* 10 14 - line height 16 */ div#backend-data-button, div#container-backend-data-button, 
+.primary-button, .secondary-button, .artwork-button, #home-top-div .primary-button a, 
+#home-top-div .primary-button a:visited, #home-top-div .secondary-button a, 
+#home-top-div .secondary-button a:visited, div.browsebycategory-categories a {
+	font-size: calc(10px + 4 * (100vw - 320px) / 1600);
+	line-height: 16px;
+    }
+/* 18 32 */ .mw-parser-output blockquote p {
+	font-size: calc(18px + 12 * (100vw - 320px) / 1600);
+	line-height: 1.56;
+	}
+/* 40 */ .heading_A {
+    font-size: 40px;
+    line-height: 1.45;
+	}
+/* 20 25 */	.mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, 
+.mw-parser-output h1, div#header-title {
+	font-size: calc(20px + 5 * (100vw - 320px) / 1600);
+    line-height: 35px;
+	}
+/* 18 30 */	 h2, .artbase-logo, .Heading_C, .mw-parser-output h2 {
+    	font-size: calc(18px + 12 * (100vw - 320px) / 1600);
+  		line-height: 40px;
+    }
+/* 20 25 */	 h3, .Heading_D, .mw-parser-output h3 {
+    	font-size: calc(20px + 5 * (100vw - 320px) / 1600);
+    	line-height: 35px;
+    }
+/* 14 20 */	.Heading_E {
+	    font-size: calc(14px + 6 * (100vw - 320px) / 1600);
+    	line-height: 20px;
+	}
+}
+
+/* - * - * - * - * - * - * - * - * - */
+
+@media screen and (min-width: 1920px) {
+body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro, 
+.date, div#header-keyword-search span {
+		font-size: 18px;
+	}
+div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
+div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
+		font-size: 	font-size: 18px;
+	}
+div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span  {
+		font-size: 20px;
+	}
+div#footer-socials-links a {
+		font-size: 18px;
+	}
+div#backend-data-button, div#container-backend-data-button, .primary-button, 
+.secondary-button, .artwork-button, #home-top-div .primary-button a, 
+#home-top-div .primary-button a:visited, #home-top-div .secondary-button a, 
+#home-top-div .secondary-button a:visited, div.browsebycategory-categories a {
+	font-size: 14px;
+	}
+.mw-parser-output blockquote p {
+	font-size: 32px;
+	}
+.heading_A {
+    font-size: 40px;
+	}
+.mw-parser-output h1, .Heading_B, .artwork-title, div.pagetitle, .mw-parser-output h1, 
+div#header-title {
+	font-size: 25px;
+}
+h2, .artbase-logo, .Heading_C, .mw-parser-output h2 {
+    	font-size: 30px;
+    }
+h3, .Heading_D, .mw-parser-output h3 {
+    	font-size: 25px;
+    }
+.Heading_E {
+	    font-size: 20px;
+	}
+}
+
 /***************** EMERGENCY BUTTON AND MOCKUPS****************/
-div#backend-data-button, div#container-backend-data-button {
-	max-width: 365px !important;
-	min-height: 48px  !important;
+div#backend-data-button {
 	font-family: 'Roboto Condensed Bold', sans-serif;
-	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-	line-height: 16px;
+/*	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+	line-height: 16px;*/
 	font-weight: bold;
 	font-stretch: condensed;
 	font-style: normal;
@@ -52,19 +151,21 @@ div#backend-data-button, div#container-backend-data-button {
 	color: #ffffff;
 	cursor: pointer;
 	background-color: var(--blue-blue);
+	max-width: 365px !important;
+	min-height: 48px  !important;
 	border-radius: 6px;
 	margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
+}
+#container-backend-data-button {
     margin-top: 20px;
+    width: 100%;	
 }
-
 img.placeholder-style, .placeholder-style {
 	width: 100%;
 }
-
-
 div#container-backend-data-button a{
 	text-decoration: none;
 }
@@ -75,12 +176,21 @@ div#backend-data-button span{
 	font-weight: bold;
 	text-transform: uppercase;
 }
-
 img.artwork-mockuppage{
 	width: 80%;
     padding: 0 10%; 
 }
-
+.web-dev-placeholder{
+	color: var(--blue-blue);
+	background-color: #ffff00;
+	font-family: 'Roboto Condensed', sans-serif;
+	font-size: calc(10px + 4 * (100vw - 320px) / 1600);
+	line-height: 1.44;
+	letter-spacing: 0.9px;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding: 0px 20px;
+}
 
 /************ LAYOUT ************/
 :root {
@@ -105,13 +215,14 @@ html {
   -webkit-box-sizing: inherit;
   -moz-box-sizing: inherit;
   box-sizing: inherit; }
+
 body {
   font-family: Roboto;
-  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 1.63;*/
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
-  line-height: 1.63;
   letter-spacing: normal;
   color: var(--black);
   margin: 0;
@@ -120,6 +231,7 @@ body {
 body i {
  	font-family: 'Roboto';
  	font-weight: normal;
+ 	font-stretch: normal;
 	font-style: italic;
 }
 
@@ -153,8 +265,8 @@ div#animatedlogo img{
 div#header-title{
 	font-family: 'Roboto Condensed Bold', sans-serif;
 	font-weight: bold;
-	font-size: 25px;
-	line-height: 35px;
+/*	font-size: 25px;
+	line-height: 35px;*/
 	letter-spacing: 1.88px;
 }
 div#header-title a:link, div#header-title a:visited {
@@ -163,7 +275,7 @@ div#header-title a:link, div#header-title a:visited {
 }
 
 div#header-keyword-search span {
-	font-size: 20px;
+/*	font-size: 20px;*/
     font-weight: bold;
     padding: 2px 10px;
 }
@@ -224,10 +336,9 @@ div#navigation a{
 	text-decoration: none;
 	font-weight: normal;
 	color: var(--black);
-	font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320)));
-	line-height: 26px;
-/*	line-height: calc(22px + (22 - 26) * ((100vw - 768px) / (1400 - 320)));
-*/}
+/*	font-size: calc(12px + (18 - 12) * ((100vw - 320) / (1600 - 320)));
+	line-height: 26px;*/
+}
 
 div#navigation a:hover {
 	text-decoration: underline;
@@ -281,21 +392,22 @@ div#footer{
 div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{
 	text-transform: uppercase;
 	font-family: 'Roboto Condensed', sans-serif;
-	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
+	line-height: 1.5;*/
   	font-weight: normal;
   	font-stretch: condensed;
   	font-style: normal;
-  	line-height: 1.5;
   	letter-spacing: 1.5px;
   	color: var(--brown-grey);
 }
 div#footer-img-br img{
-	width: 70px;
+	width: 85px;
 	height: auto;
-    padding-top: 20px;
-    margin-left: -8px;
+	padding-top: 5px;
+	margin-left: -8px;
 }
-div#footer-img-br figcaption{
+/* Banner Repeater Logo*/
+div#footer-img-br figcaption {
 	font-family: 'Roboto', sans-serif;
 	font-size: 16px;
 	margin: 0;
@@ -327,8 +439,8 @@ div#footer-socials-links a{
 	text-decoration: none;
 	color:#FFFFFF;
 	font-family: 'Roboto', sans-serif;
-	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
-	line-height: 28.4px;
+/*	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
+	line-height: 28.4px;*/
 	font-weight: normal;
  	font-stretch: normal;
   	font-style: normal;
@@ -386,12 +498,12 @@ div#footer{ flex-wrap: wrap; }
 /*div#home-recent-title, div#browsethearchive-title, div#artistsindex-title, div#publishersindex-title, div#selfpublishedindex-title, div#zinesindex-title, div#browseby-title */
 div.pagetitle, .mw-parser-output h1{
 	margin: 60px 80px 30px 80px;
-	font-size: 25px;
+/*	font-size: 25px;
+	line-height: 35px;*/
 	font-family: 'Roboto Condensed Bold', sans-serif;
 	font-weight: bold;
 	text-transform: uppercase;
 	letter-spacing: 1.88px;
-    line-height: 35px;
 }
 
 /******************************************************/
@@ -421,8 +533,8 @@ th { padding: 16px; }
 thead tr th{
 	text-transform: uppercase;
 	color:#7f7f7f;
-	font-size: 16px;
-    letter-spacing: 1.5px;
+/*	font-size: 16px;
+    letter-spacing: 1.5px;*/
     line-height: 24px;
 	font-family: 'Roboto Condensed', sans-serif;
 	font-weight: normal;
@@ -430,8 +542,8 @@ thead tr th{
 }
 
 tbody tr th{
-	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
-	line-height: 26px;
+/*	font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
+	line-height: 26px;*/
 	font-family: 'Roboto', sans-serif;
 	font-weight: normal;
 }
@@ -467,6 +579,8 @@ tbody tr th a{
 #artistsindex-table_paginate{
   background-color: #E9E9E9;
 }
+
+/* Pagination Numbers */
 .dataTables_paginate {
 	display: flex;
     flex-direction: row;
@@ -535,23 +649,23 @@ a.paginate_button.next:after {
 /************ TEXT STYLES************/
 .title {
   /* width: 200px;
-  height: 26px;*/
-  font-family: Roboto Condensed;
+  height: 26px;
   font-size: 18px;
+  line-height: 1.44;*/
+  font-family: Roboto Condensed;
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 1.44;
   letter-spacing: 0.9px;
   color: var(--black);
 }
 .date {
   font-family: Roboto;
-  font-size: 16px;
+/*font-size: 16px;
+  line-height: 1.63;*/
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
-  line-height: 1.63;
   letter-spacing: normal;
   color: var(--black);
 }
@@ -562,8 +676,8 @@ a.paginate_button.next:after {
   max-width: 365px;
   min-height: 48px;
   font-family: 'Roboto Condensed Bold', sans-serif;
-  font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-  line-height: 16px;
+/*  font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 16px;*/
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
@@ -581,8 +695,8 @@ a.paginate_button.next:after {
   max-width: 365px;
   min-height: 48px;
   font-family: 'Roboto Condensed Bold', sans-serif;
-  font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-  line-height: 16px;
+/*  font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 16px;*/
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
@@ -601,11 +715,11 @@ a.paginate_button.next:after {
   width: 76px;
   height: 24px;
   font-family: Roboto;
-  font-size: 16px;
+/*  font-size: 16px;
+  line-height: 1.5;*/
   font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 1.5;
   letter-spacing: 1.5px;
   text-align: center;
   color: var(--black);
@@ -622,15 +736,15 @@ div#home-top-div{
 	overflow: hidden;
 	position: relative;
 	border-bottom:  solid black 3px;
-	background-color: #e9e9e9;
+	background-color: rgba(233,233,233, 0.5);
 }
 .heading_A {
   font-family: Roboto Condensed;
-  font-size: 40px;
+/*  font-size: 40px;
+  line-height: 1.45;*/
   font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 1.45;
   letter-spacing: normal;
   color: var(--black); 
   margin-left: 150px; 
@@ -675,8 +789,8 @@ div#home-top-div{
 #home-top-div .primary-button a, #home-top-div .primary-button a:visited {
 	color: #fdfdfd;
 	text-decoration: none;
-	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-}
+/*	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+*/}
 #home-top-div .primary-button:hover, #home-top-div .primary-button a:hover {
 	color: white;
 	background-color: black;	
@@ -684,8 +798,8 @@ div#home-top-div{
 #home-top-div .secondary-button a, #home-top-div .secondary-button a:visited {
 	color: var(--blue-blue);
 	text-decoration: none;
-	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-}
+/*	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+*/}
 
 #home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover {
 	color: white;
@@ -807,24 +921,24 @@ img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, im
 }
 
 div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items {
-	font-size: 16px;
+	/* align-content: start; center;
+	font-size: 16px; */
 	font-family: 'Roboto Condensed', sans-serif;
 	margin: 0 auto;
 	display: flex;
 	flex-direction: column;
-	/* align-content: start; center;*/
 	justify-content: space-between; 
 	height: 100%;
 }
 
 div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a {
-	font-size: 18px;
+	/*	font-size: 18px;
 	line-height: 26px;
+	display: flex;
+	justify-content: left;*/
 	font-family: 'Roboto Condensed Bold', sans-serif;
 	color: #000000;
 	text-decoration: none;
-/*	display: flex;
-	justify-content: left;*/
 }
 
 /*div.home-recent-items span, div.browsethearchive-items span {
@@ -847,7 +961,7 @@ div.home-recent-items-bottom, div.browsethearchive-items-bottom, div.selfpublish
 }
 
 div.browsethearchive-items-bottom, div.selfpublishedindex-items-bottom,  div.zinesindex-items-bottom { 
-	padding: 20px 0px 0px 0px;
+/*	padding: 20px 0px 0px 0px;*/
 }
 
 div#home-recent-grid, div#browsethearchive-grid, div#selfpublishedindex-grid, div#zinesindex-grid {
@@ -907,12 +1021,12 @@ div.home-show-wrapper a:hover {
 }
 .mw-parser-output h1, .Heading_B {
   font-family: Roboto Condensed Bold;
-  font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(22 + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 35px;*/
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
   text-transform: uppercase;
-  line-height: 35px;
   letter-spacing: 1.13px;
   color: var(--black);
 }
@@ -925,11 +1039,11 @@ div.home-show-wrapper a:hover {
 }
 .mw-parser-output blockquote p {
   font-family: Roboto Condensed;
-  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 1.56;*/
   font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 1.56;
   letter-spacing: normal;
   color: var(--blue-blue);
 }
@@ -942,46 +1056,36 @@ div.home-show-wrapper a:hover {
 .mw-parser-output p {
 	margin: 0px 0px 30px 0px;
 }
-/*.mw-parser-output h2 {
-  font-family: Roboto Condensed;
-  font-size: calc(16px + (20 - 16) * ((100vw - 768px) / (1400 - 320)));
-  font-weight: normal;
-  font-stretch: condensed;
-  font-style: normal;
-  letter-spacing: 1.13px;
-  color: var(--black);
-  margin: 0px 0px 30px 0px;	
-}*/
-h2:nth-of-type(1), .Heading_C, .mw-parser-output h2, h2 {
+
+.Heading_C, .mw-parser-output h2, h2 {
   font-family: Roboto Condensed;
-  font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
+/* font-size: calc(20px + (30 - 20) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 40px;
+  margin: 0px 0px 30px 0px;	*/
   font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 40px;
   letter-spacing: 1.13px;
   color: var(--black);
-  margin: 0px 0px 30px 0px;	
-	
 }
-h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
+.Heading_D, .mw-parser-output h3, h3 {
   font-family: Roboto Condensed;
-  font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(22px + (25 - 22) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 35px;*/
   font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 35px;
   letter-spacing: 1.13px;
   color: var(--black);		
 }
 .Heading_E {
   font-family: Roboto Condensed;
-  font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(16px + (20 - 16) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 20px;*/
   font-weight: normal;
   font-stretch: condensed;
   text-transform: uppercase;
   font-style: normal;
-  line-height: 20px;
   letter-spacing: 1.13px;
   color: var(--black);		
 }
@@ -991,11 +1095,11 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
 }
 .mw-parser-output ul {
   font-family: Roboto;
-  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 1.63;*/
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
-  line-height: 1.63;
   letter-spacing: normal;
   color: var(--black);
   margin: 0;
@@ -1009,22 +1113,22 @@ h2:nth-of-type(2), .Heading_D,.mw-parser-output h3, h3 {
 }
 .mw-parser-output img {
 	font-family: Roboto ;
-    font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+  	line-height: 1.63;*/
 	text-decoration: none;
  	font-weight: normal;
  	font-stretch: normal;
-  	font-style: normal;
-  	line-height: 1.63;	
+  	font-style: normal;	
   	letter-spacing: normal;
   	color: var(--black);
 }
 .mw-parser-output a {
   font-family: Roboto ;
-  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 1.63;*/
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
-  line-height: 1.63;
   letter-spacing: normal;
   color: #163adc;
 }
@@ -1108,8 +1212,8 @@ div.browsebycategory-categories a {
 	font-family: 'Roboto Condensed Bold', sans-serif;
 	color: #ffffff;
 	text-decoration: none;
-	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
-
+/*	font-size: calc(12px + (14 - 12) * ((100vw - 320px) / (1600 - 320)));
+*/
 }
 
 div.browsebycategory-categories:hover {
@@ -1153,7 +1257,7 @@ div.browsebycategory-categories:hover {
 
 .artwork-title {
 	margin: 20px 80px 30px 80px;
-	font-size: 25px;
+/*	font-size: 25px; */	
 	font-family: 'Roboto Condensed Bold', sans-serif;
 	font-weight: bold;
 	text-transform: uppercase;
@@ -1163,11 +1267,11 @@ div.browsebycategory-categories:hover {
 
 .artwork-intro {
   font-family: Roboto;
-  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+/*  font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
+  line-height: 1.63;*/
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
-  line-height: 1.63;
   letter-spacing: normal;
   color: var(--black);
   margin: 20px 80px 30px 80px;
@@ -1184,8 +1288,8 @@ div.browsebycategory-categories:hover {
 .artwork-nav-label, .label-item {
   margin: 25px 0 12px 1px;
   font-family: Roboto Condensed;
-  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
-  font-weight: normal;
+/*  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
+*/  font-weight: normal;
   font-stretch: condensed;
   font-style: normal;
   line-height: normal;
@@ -1299,11 +1403,11 @@ div.browsebycategory-categories:hover {
 
 .metadata-link, .metadata-link a, .metadata-link a span {
   font-family: Roboto Condensed Bold;
-  font-size: 18px;
+/*  font-size: 18px;
+  line-height: 1.44;*/
   font-weight: bold;
   font-stretch: condensed;
   font-style: normal;
-  line-height: 1.44;
   letter-spacing: 0.9px;
   color: var(--blue-blue);
 }
diff --git a/templates/layout.html b/templates/layout.html
index 432ca79..e9a56dc 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -20,9 +20,12 @@
 		<div id="header-top">
 			<div id="header-title">
 				<a href="{{ url_for('home') }}">DAAP</a>
-			</div>
-			<div id="header-keyword-search"> 
-				<input type="text" id="fname" name="fname" value="" placeholder="Keyword search">
+			</div> 
+			<!-- <div id="header-keyword-search">
+			<input type="text" id="fname" name="fname" value="" placeholder="Keyword search"> 
+			</div> -->
+			<div class="web-dev-placeholder">
+				<p>WEBSITE IN DEVELOPMENT</p>
 			</div>
 		</div>