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

WEBSITE IN DEVELOPMENT