From 93fd7a8d240fbe16413ec83918e6edaf7f3237d0 Mon Sep 17 00:00:00 2001 From: JoBCB Date: Thu, 10 Dec 2020 15:13:08 +0100 Subject: [PATCH] final adjustments on mobile and templates --- static/css/style.css | 120 ++++++++++++++++++++++++++++++----------- templates/artwork.html | 8 +-- 2 files changed, 95 insertions(+), 33 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 6c63fb3..844822c 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -434,14 +434,14 @@ div#footer{ } div#footer-title-contact { - margin-bottom: 20px; + margin-bottom: 20px !important; } #footer-socials-links { display: flex; flex-direction: column; flex-wrap: nowrap; - margin-top: 10px; + margin-top: 10px !important; } div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, div#footer-title-socials p{ @@ -1046,9 +1046,14 @@ div#home-top-div{ } /* ARCHIVE PREVIEW */ +/*.home-recent-items-top a, .browsethearchive-items-top a, .zinesindex-items-top a, .selfpublishedindex-items-top a { + max-height: 450px; +} +*/ img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs { width: 100%; max-height: 450px; + object-fit: contain; } div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items { @@ -1403,6 +1408,7 @@ div.browsebycategory-categories:hover { letter-spacing: normal; color: var(--black); margin: 20px 8vw 0px 8vw; + min-height: 30px; } .artwork-nav { @@ -1561,7 +1567,7 @@ div.browsebycategory-categories:hover { display: grid; /*padding: 0 0 20px 0;*/ grid-template-columns: repeat(10, 1fr); - column-gap: 1rem; + /*column-gap: 1rem;*/ } .artwork-rightcolumn-top-contributors { @@ -1613,10 +1619,10 @@ div.browsebycategory-categories:hover { padding: 20px 0; border-bottom: 0.5px solid var(--brown-grey); } -.artwork-rightcolumn-bottom:nth-of-type(2) { +/*.artwork-rightcolumn-bottom:nth-of-type(2) { padding: 20px 0 0 0; border-top: 0.5px solid var(--brown-grey); -} +}*/ .artwork-rightcolumn-description + .artwork-rightcolumn-exhibition { grid-column-start: 9; @@ -1640,17 +1646,23 @@ div.browsebycategory-categories:hover { margin: 1em 0 0.5em; } .des-exh-section .des, .des-exh-section .exh { - border-top: 3px solid #000; margin: 0px; - padding: 20px 0; - margin-top: 40px; + padding: 20px 0 0 0; +} +.des-exh-section .des { + margin-top: 40px; + border-top: 3px solid #000; +} +.des-exh-section .exh { + border-top: 2px solid #000; } - .text-description { grid-column-start: 1; grid-column-end: 8; grid-row-start: 2; grid-row-end: 2; + padding-top: 20px; + border-bottom: 1px solid black; } .text-description .mw-parser-output { padding: 0px; @@ -1667,7 +1679,9 @@ div.browsebycategory-categories:hover { grid-column-end: 11; grid-row-start: 2; grid-row-end: 2; - margin-left: 1em; + padding-left: 2em; + padding-top: 20px; + border-bottom: 1px solid black; } .text-date-author .label-item:nth-of-type(1) { /* margin-top: 0px;*/ @@ -1691,6 +1705,7 @@ div.browsebycategory-categories:hover { .artwork-lists .Heading_C , .artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C { grid-column-start: 1; grid-column-end: 2; + grid-row: 1 / span 4; /* writing-mode: sideways-lr; max-height: 120px; */ text-align: center; @@ -1841,7 +1856,7 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ padding: 0 10px 0 0; } -/* LIBRARY */ +/* LIBRARY CAROUSEL */ .tns-controls { text-align: center; margin-bottom: 10px; } .tns-controls [aria-controls] { display: none; @@ -1893,6 +1908,9 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{ width: 100%; max-width: inherit; } +#tns1 > .tns-item { + font-size: 14px; +} .artwork-nav-label-mobile, .artwork-about-under-img-mobile { display: none; } @@ -1937,7 +1955,7 @@ div#tutorials-intro h3, div#tutorials-intro p { @media screen and (min-width:0px) and (max-width: 768px) { #message-mobile { - display: block; + display: none; position: fixed; width: 100%; top: 0; @@ -1949,20 +1967,21 @@ div#tutorials-intro h3, div#tutorials-intro p { overflow-y: hidden; } -#message-mobile p { - text-align: center; - font-family: Roboto Condensed; - font-size: 24px; - line-height: 1.58; - letter-spacing: 1.33px; - margin: 25vw 8vw; -} -#message-mobile ~ * { - overflow: hidden; - position: static; -} + #message-mobile p { + text-align: center; + font-family: Roboto Condensed; + font-size: 24px; + line-height: 1.58; + letter-spacing: 1.33px; + margin: 25vw 8vw; + } + #message-mobile ~ * { + overflow: hidden; + position: static; + } .web-dev-placeholder { + display: none; padding: 0px 10px; margin-right: 30px; } @@ -2034,7 +2053,7 @@ div#tutorials-intro h3, div#tutorials-intro p { width: 100%; z-index: 10000; height: 100%; - background-color: rgba(255, 255, 255, 0.96); + background-color: rgba(255, 255, 255, 0.90); overflow-y: hidden; transition: transform 250ms ease-in-out; } @@ -2044,6 +2063,9 @@ div#tutorials-intro h3, div#tutorials-intro p { flex-direction: column; align-items: center; } + .navigation-mobile-items div { + margin: 5px 0px; + } .navigation-mobile-items div a{ font-family: Roboto Condensed; font-size: 24px; @@ -2055,7 +2077,6 @@ div#tutorials-intro h3, div#tutorials-intro p { text-align: center; color: var(--black); text-decoration: none; - margin: 30px 0px; cursor: pointer; } @@ -2089,7 +2110,8 @@ div#tutorials-intro h3, div#tutorials-intro p { grid-column-end: 19; } div#home-top-div { - height: 50vh; + height: 340px; /*50vh*/ + min-height: 340px; } #home-top-div #wrapper-vid { @@ -2148,6 +2170,11 @@ div#tutorials-intro h3, div#tutorials-intro p { grid-column-end: 19; } +.mw-parser-output blockquote + p { + grid-row-start: 3; + grid-row-end: 3; +} + .mw-parser-output p, .mw-parser-output ul, .mw-parser-output h2, .mw-parser-output h3 { grid-column-start: 1; grid-column-end: 19; @@ -2161,8 +2188,21 @@ div#tutorials-intro h3, div#tutorials-intro p { .artwork-nav-label-mobile { display: flex; - padding: 0px 0px 60px 8vw; + padding: 0px 8vw 60px 8vw; + flex-direction: column; + text-align: left; + } + .artwork-nav-label-mobile p { + color: #000; + font-family: Roboto Condensed; + font-size: calc(12px + 6 * (100vw - 320px) / 1600); + line-height: 1.63; + font-weight: normal; + font-stretch: normal; + font-style: normal; + letter-spacing: normal; } + .artwork-nav-label-record::before {display: none;} .artwork-leftcolumn { @@ -2179,6 +2219,26 @@ div#tutorials-intro h3, div#tutorials-intro p { grid-row-end: 3; } .artwork-about-under-img { margin: 0 0 20px 0; } + .tns-nav { padding: 0 15px; } + .tns-nav button:last-child { margin-right: 0px; } + + .text-date-author { + grid-column-start: 1; + grid-column-end: 19; + grid-row-start: 3; + grid-row-end: 4; + padding-left: 0em; + padding-top: 20px; + border-bottom: 1px solid black; + } + .text-description { + grid-column-start: 1; + grid-column-end: 19; + grid-row-start: 2; + grid-row-end: 2; + padding-top: 20px; + border-bottom: 1px solid black; + } } /***************** LAPTOP MEDIUM ****************/ @@ -2199,14 +2259,14 @@ div#tutorials-intro h3, div#tutorials-intro p { @media (min-width: 1000px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(4, 1fr); } - .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(5, 1fr); } + .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(4, 1fr); } } /***************** LAPTOP BIG ****************/ @media (min-width: 1400px) { #home-recent-grid, #browsethearchive-grid, #selfpublishedindex-grid, #zinesindex-grid { grid-template-columns: repeat(6, 1fr); } - .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(10, 1fr); } + .artwork-relatedwrapper,.artwork-copieswrapper, .artwork-lists { grid-template-columns: repeat(6, 1fr); } } diff --git a/templates/artwork.html b/templates/artwork.html index 7bf9b48..537d166 100644 --- a/templates/artwork.html +++ b/templates/artwork.html @@ -319,9 +319,9 @@ {% for x in artworkexhibitiondata['results']['bindings'] %} -
+
-
+
{{ x['text'] | safe }}
@@ -456,7 +456,9 @@
-
DETAILED RECORD
+
DETAILED RECORD +

For best view of all data available, please visit the site on desktop.

+