update on artworks layout
This commit is contained in:
parent
4f6624ccb5
commit
0d5dcee566
@ -41,7 +41,7 @@ font-style: normal;
|
||||
@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 {
|
||||
.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
|
||||
font-size: calc(12px + 6 * (100vw - 320px) / 1600);
|
||||
line-height: 1.63;
|
||||
}
|
||||
@ -54,7 +54,8 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
|
||||
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 {
|
||||
/* 14 20 */ div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
|
||||
div.artwork-relatedworks-tile {
|
||||
font-size: calc(14px + 8 * (100vw - 320px) / 1600);
|
||||
line-height: 1.44;
|
||||
}
|
||||
@ -96,14 +97,15 @@ div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
|
||||
|
||||
@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 {
|
||||
.date, div.artwork-relatedworks-date, div#header-keyword-search span, .metadata-link p {
|
||||
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 {
|
||||
div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span,
|
||||
div.artwork-relatedworks-tile {
|
||||
font-size: 20px;
|
||||
}
|
||||
div#footer-socials-links a {
|
||||
@ -191,7 +193,15 @@ img.artwork-mockuppage{
|
||||
text-transform: uppercase;
|
||||
padding: 0px 20px;
|
||||
}
|
||||
|
||||
.soon {
|
||||
padding: 55px 80px;
|
||||
width: 100%;
|
||||
}
|
||||
.soon + #footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
/************ LAYOUT ************/
|
||||
:root {
|
||||
--black: #000000;
|
||||
@ -647,7 +657,7 @@ a.paginate_button.next:after {
|
||||
}
|
||||
|
||||
/************ TEXT STYLES************/
|
||||
.title {
|
||||
.title, div.artwork-relatedworks-tile {
|
||||
/* width: 200px;
|
||||
height: 26px;
|
||||
font-size: 18px;
|
||||
@ -659,7 +669,7 @@ a.paginate_button.next:after {
|
||||
letter-spacing: 0.9px;
|
||||
color: var(--black);
|
||||
}
|
||||
.date {
|
||||
.date, div.artwork-relatedworks-date {
|
||||
font-family: Roboto;
|
||||
/*font-size: 16px;
|
||||
line-height: 1.63;*/
|
||||
@ -1312,6 +1322,10 @@ div.browsebycategory-categories:hover {
|
||||
column-gap: 1rem;
|
||||
grid-template-columns: repeat(18, 1fr);
|
||||
}
|
||||
/*.artwork-relatedwrapper{
|
||||
grid-template-areas:
|
||||
"title title item1 item1 item1 item2 item2 item2 item3 item3 item3 item4 item4 item4 item5 item5 item5";
|
||||
}*/
|
||||
.artwork-about{
|
||||
padding: 30px 80px 60px 80px;
|
||||
}
|
||||
@ -1369,8 +1383,8 @@ div.browsebycategory-categories:hover {
|
||||
}
|
||||
|
||||
.artwork-copiesincollection {
|
||||
grid-column-start: 4;
|
||||
grid-column-end: 7;
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 6;
|
||||
border-right: solid 0.5px var(--black);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -1380,7 +1394,6 @@ div.browsebycategory-categories:hover {
|
||||
.artwork-copiesincollection-title-div {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
@ -1391,16 +1404,13 @@ div.browsebycategory-categories:hover {
|
||||
text-align: center;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.artwork-copiesincollection-img-div {
|
||||
max-width: 55px;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.artwork-copiesincollection-img-div img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.metadata-link, .metadata-link a, .metadata-link a span {
|
||||
font-family: Roboto Condensed Bold;
|
||||
/* font-size: 18px;
|
||||
@ -1411,16 +1421,65 @@ div.browsebycategory-categories:hover {
|
||||
letter-spacing: 0.9px;
|
||||
color: var(--blue-blue);
|
||||
}
|
||||
.label-item-date-artwork{
|
||||
font-family: Roboto Condensed Bold;
|
||||
font-weight: bold;
|
||||
font-stretch: condensed;
|
||||
font-style: normal;
|
||||
letter-spacing: 0.9px;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.metadata-link, .metadata-link a, .metadata-link a span:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.artwork-about-bottom .mw-parser-output {
|
||||
.metadata-link p {
|
||||
font-family: Roboto;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
font-style: normal;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.artwork-rightcolumn-top-contributors p.label-item, .artwork-rightcolumn-top-date p.label-item,
|
||||
.artwork-rightcolumn-top-contributors .metadata-link, .artwork-rightcolumn-top-date .metadata-link {
|
||||
margin-bottom: 30px;
|
||||
margin-top: 0px !important;
|
||||
}
|
||||
.artwork-about-bottom .mw-parser-output, .artwork-about-bottom div.label-item, .artwork-about-bottom div.mw-parser-output {
|
||||
width: 100%;
|
||||
padding: 30px 0px 0px 0px;
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
.artwork-relatedworks:nth-of-type(2) {
|
||||
grid-column-start: 3;
|
||||
grid-column-end: 6;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-relatedworks:nth-of-type(3) {
|
||||
grid-column-start: 6;
|
||||
grid-column-end: 9;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-relatedworks:nth-of-type(4) {
|
||||
grid-column-start: 9;
|
||||
grid-column-end: 12;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-relatedworks:nth-of-type(5) {
|
||||
grid-column-start: 12;
|
||||
grid-column-end: 15;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-relatedworks:nth-of-type(6) {
|
||||
grid-column-start: 15;
|
||||
grid-column-end: 18;
|
||||
margin: 0 !important;
|
||||
}
|
||||
.artwork-relatedworks-imgs{
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/************ WIKI PAGES ************/
|
||||
|
||||
@ -64,28 +64,26 @@
|
||||
|
||||
<!-- contributors -->
|
||||
<div class="artwork-rightcolumn-top-contributors">
|
||||
<span class="label-item">CONTRIBUTORS</span>
|
||||
<p class="label-item">CONTRIBUTORS</p>
|
||||
{% for x in artworkcontributors['results']['bindings'] %}
|
||||
<!-- name surname -->
|
||||
<div class="metadata-link">
|
||||
<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||||
<span>{{ x['creatorsLabel']['value'] }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<!-- role/function -->
|
||||
<div>
|
||||
<span>{{ x['role']['value'] }}</span>
|
||||
<p>{{ x['role']['value'] }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- date -->
|
||||
<div class="artwork-rightcolumn-top-date">
|
||||
<span class="label-item">DATE</span>
|
||||
<p class="label-item">DATE</p>
|
||||
<!-- loops through dates -->
|
||||
{% for x in artworkdate['results']['bindings'] %}
|
||||
<!-- date -->
|
||||
{% if 'date' in x %}
|
||||
<div>{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
|
||||
<div class="label-item-date-artwork">{{ x['date']['value'] | replace("T00:00:00Z", "") }}</div>
|
||||
{% else %}
|
||||
but <div>information not available</div>
|
||||
{% endif %}
|
||||
@ -98,7 +96,7 @@
|
||||
|
||||
<!-- publishers removed div .artwork-rightcolumn-top-publishers-->
|
||||
|
||||
<span class="label-item">PUBLISHERS</span>
|
||||
<p class="label-item">PUBLISHERS</p>
|
||||
<!-- loop through publishers -->
|
||||
{% for x in artworkpublisher['results']['bindings'] %}
|
||||
<!-- name, surname -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user