final adjustments on mobile and templates
This commit is contained in:
parent
cbd6c9b92a
commit
93fd7a8d24
@ -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); }
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -319,9 +319,9 @@
|
||||
|
||||
|
||||
{% for x in artworkexhibitiondata['results']['bindings'] %}
|
||||
<div class="artwork-rightcolumn-exhibition">
|
||||
<div class="artwork-rightcolumn-bottom">
|
||||
|
||||
<div class="text-exhibition">
|
||||
<div class="text-description">
|
||||
{{ x['text'] | safe }}
|
||||
</div>
|
||||
<!-- right ride with author etc LATER-->
|
||||
@ -456,7 +456,9 @@
|
||||
</div>
|
||||
<!-- END OF LISTS -->
|
||||
|
||||
<div class="artwork-nav-label-mobile artwork-nav-label artwork-nav-label-record"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a></div>
|
||||
<div class="artwork-nav-label-mobile artwork-nav-label artwork-nav-label-record"><a class="det-record" target="_blank" href="https://daap.bannerrepeater.org/wiki/Item:{{ artwork_id }}">DETAILED RECORD</a>
|
||||
<p>For best view of all data available, please visit the site on desktop.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user