jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

added changes font sizes other adjust after Lozanas email and added placeholder yellow label

master
JoBCB 4 years ago
parent
f9a8eceba8
commit
4f6624ccb5
2 changed files with 207 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 298
      static/css/style.css
  2. 9
      templates/layout.html

298
static/css/style.css
View File

@ -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);
}

9
templates/layout.html
View File

@ -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>

Write Preview
Loading…
Cancel
Save