style artwork first round
This commit is contained in:
parent
4356b3b147
commit
f37ca1e2ca
@ -1130,77 +1130,194 @@ img.person_creatorof-imgs{
|
|||||||
}
|
}
|
||||||
/************ ARTWORK ************/
|
/************ ARTWORK ************/
|
||||||
|
|
||||||
|
.artwork-box span {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-box {
|
||||||
|
font-family: Roboto Condensed;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: condensed;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--black);
|
||||||
|
border: solid 1px var(--black);
|
||||||
|
margin: 30px 80px 0px 80px;
|
||||||
|
padding: 6px 10px;
|
||||||
|
max-width: 96px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.artwork-title {
|
||||||
|
margin: 20px 80px 30px 80px;
|
||||||
|
font-size: 25px;
|
||||||
|
font-family: 'Roboto Condensed Bold', sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1.88px;
|
||||||
|
line-height: 35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-intro {
|
||||||
|
font-family: Roboto;
|
||||||
|
font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.63;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: var(--black);
|
||||||
|
margin: 20px 80px 30px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
width: 100%;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border-bottom: 3px solid #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-nav-label, .label-item {
|
||||||
|
margin: 25px 0 12px 1px;
|
||||||
|
font-family: Roboto Condensed;
|
||||||
|
font-size: calc(14px + (18 - 14) * ((100vw - 768px) / (1400 - 768)));
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: condensed;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: 1.5px;
|
||||||
|
color: var(--brown-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-nav .active {
|
||||||
|
color: var(--blue-blue);
|
||||||
|
}
|
||||||
|
.artwork-nav-label a, .artwork-nav-label a:visited{
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--brown-grey);
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-about, .artwork-copieswrapper, .artwork-relatedwrapper {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
row-gap: 0rem;
|
||||||
|
column-gap: 1rem;
|
||||||
|
grid-template-columns: repeat(18, 1fr);
|
||||||
|
}
|
||||||
|
.artwork-about{
|
||||||
|
padding: 30px 80px 60px 80px;
|
||||||
|
}
|
||||||
|
.artwork-copieswrapper, .artwork-relatedwrapper {
|
||||||
|
border-top: solid 3px var(--black);
|
||||||
|
padding: 30px 80px 30px 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-leftcolumn {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 8;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 1;
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.artwork-rightcolumn {
|
||||||
|
grid-column-start: 9;
|
||||||
|
grid-column-end: 18;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 1;
|
||||||
|
margin: 0 !important;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-about-img img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-about-bottom{
|
||||||
|
grid-column-start: 9;
|
||||||
|
grid-column-end: 18;
|
||||||
|
grid-row-start: 2;
|
||||||
|
grid-row-end: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-rightcolumn-top-contributors {
|
||||||
|
grid-column-start: 9;
|
||||||
|
grid-column-end: 14;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-rightcolumn-top-date {
|
||||||
|
grid-column-start: 15;
|
||||||
|
grid-column-end: 18;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-rightcolumn-top-publishers {
|
||||||
|
grid-column-start: 15;
|
||||||
|
grid-column-end: 18;
|
||||||
|
grid-row-start: 2;
|
||||||
|
grid-row-end: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-copiesincollection {
|
||||||
|
grid-column-start: 4;
|
||||||
|
grid-column-end: 7;
|
||||||
|
border-right: solid 0.5px var(--black);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-copiesincollection-title-div {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.artwork-relatedwrapper .Heading_C , .artwork-copieswrapper .Heading_C {
|
||||||
|
grid-column-start: 1;
|
||||||
|
grid-column-end: 3;
|
||||||
|
writing-mode: sideways-lr;
|
||||||
|
margin-top: auto;
|
||||||
|
margin-bottom: auto;
|
||||||
|
max-height: 100px;
|
||||||
|
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;
|
||||||
|
font-weight: bold;
|
||||||
|
font-stretch: condensed;
|
||||||
|
font-style: normal;
|
||||||
|
line-height: 1.44;
|
||||||
|
letter-spacing: 0.9px;
|
||||||
|
color: var(--blue-blue);
|
||||||
|
}
|
||||||
|
.metadata-link:hover {
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
/*************************************/
|
/*************************************/
|
||||||
/************ WIKI PAGES ************/
|
/************ WIKI PAGES ************/
|
||||||
/***********************************/
|
/***********************************/
|
||||||
|
|
||||||
/************ ABOUT ************/
|
|
||||||
|
|
||||||
div#about-content{
|
|
||||||
padding-left: 81px;
|
|
||||||
padding-right: 81px;
|
|
||||||
|
|
||||||
}
|
|
||||||
div#about-content-top{
|
|
||||||
width: 100%;
|
|
||||||
padding: 0px 80px;
|
|
||||||
display: grid;
|
|
||||||
grid-gap: 1rem;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#about-content-top-left{
|
|
||||||
/*grid-column: 1/span 2;*/
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
font-size: 32px;
|
|
||||||
font-weight: normal;
|
|
||||||
font-stretch: condensed;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: 50px;
|
|
||||||
color: blue;
|
|
||||||
padding-right: 10%;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
div#about-content-top-right{
|
|
||||||
grid-column: 3/span 2;
|
|
||||||
padding-right: 10%;
|
|
||||||
}
|
|
||||||
div#about-content-top-right img{
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
div#about-content-bottom{
|
|
||||||
grid-column: 1/ span 4;
|
|
||||||
padding: 0 15%;
|
|
||||||
padding-bottom: 5%;
|
|
||||||
margin-bottom: 200px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
div.about-paragraph-subtitle{
|
|
||||||
font-size: 30px;
|
|
||||||
line-height: 30px;
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
div.about-paragraph p, ul {
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 28px;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
div.about-paragraph a{
|
|
||||||
font-family: 'Roboto Condensed', sans-serif;
|
|
||||||
text-decoration: none;
|
|
||||||
color: blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/************ TUTORIALS ************/
|
/************ TUTORIALS ************/
|
||||||
|
|
||||||
@ -1214,14 +1331,3 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
|||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/************ UPLOAD ************/
|
|
||||||
|
|
||||||
div#upload-intro{
|
|
||||||
text-align: center;
|
|
||||||
padding-top: 5em;
|
|
||||||
}
|
|
||||||
div#upload-intro h3, div#upload-intro p {
|
|
||||||
text-align: center;
|
|
||||||
width: 50%;
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -6,17 +6,17 @@
|
|||||||
<!-- Artwork title and navigation -->
|
<!-- Artwork title and navigation -->
|
||||||
<div>
|
<div>
|
||||||
<!-- ARTWORK label in rectangle -->
|
<!-- ARTWORK label in rectangle -->
|
||||||
<div>
|
<div class="artwork-box">
|
||||||
<span>ARTWORK</span>
|
<span>ARTWORK</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Artwork title -->
|
<!-- Artwork title -->
|
||||||
<div>
|
<div class="artwork-title">
|
||||||
{% for x in artworkintro['results']['bindings'] %}
|
{% for x in artworkintro['results']['bindings'] %}
|
||||||
{{ x['workLabel']['value'] }}
|
{{ x['workLabel']['value'] }}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<!-- Artwork intro-description -->
|
<!-- Artwork intro-description -->
|
||||||
<div>
|
<div class="artwork-intro">
|
||||||
{% for x in artworkintro['results']['bindings'] %}
|
{% for x in artworkintro['results']['bindings'] %}
|
||||||
{% if 'workDescription' in x %}
|
{% if 'workDescription' in x %}
|
||||||
{{ x['workDescription']['value'] }}
|
{{ x['workDescription']['value'] }}
|
||||||
@ -26,19 +26,19 @@
|
|||||||
|
|
||||||
<!-- NAVIGATION HERE? -->
|
<!-- NAVIGATION HERE? -->
|
||||||
<div class="artwork-nav">
|
<div class="artwork-nav">
|
||||||
<div>ABOUT THIS WORK</div>
|
<div class="artwork-nav-label active">ABOUT THIS WORK</div>
|
||||||
<div>RELATIONSHIPS</div>
|
<div class="artwork-nav-label">RELATIONSHIPS</div>
|
||||||
<div>LISTS</div>
|
<div class="artwork-nav-label">LISTS</div>
|
||||||
<div><a href="">DETAILED RECORD</a></div>
|
<div class="artwork-nav-label"><a href="">DETAILED RECORD</a></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- The content in 3 divs displayed or not (detailed revord is out)-->
|
<!-- The content in 3 divs displayed or not (detailed revord is out)-->
|
||||||
<div>
|
|
||||||
<!-- about -->
|
<!-- about or relationships or lists or detailed record -->
|
||||||
<div class="artwork-about">
|
<div class="artwork-about">
|
||||||
<!-- left -->
|
<!-- left -->
|
||||||
<div class="artwork-leftcolumn">
|
<div class="artwork-leftcolumn">
|
||||||
<!-- img - I am unsure how to handle the thing to go through the different pictures -->
|
<!-- img - I am unsure how to handle the thing to go through the different pictures -->
|
||||||
<div class="artwork-about-img">
|
<div class="artwork-about-img">
|
||||||
{% for x in artworkimages['results']['bindings'] %}
|
{% for x in artworkimages['results']['bindings'] %}
|
||||||
@ -53,17 +53,18 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- other stuff like downloads, absent for now -->
|
<!-- other stuff like downloads, absent for now -->
|
||||||
<div></div>
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
<!-- right -->
|
|
||||||
<div class="artwork-rightcolumn">
|
<!-- right
|
||||||
<!-- contributors / date / publishers -->
|
<div class="artwork-rightcolumn"> -->
|
||||||
<div class="artwork-rightcolumn-top">
|
<!-- contributors / date / publishers -->
|
||||||
<!-- contributors -->
|
|
||||||
<div class="artwork-rightcolumn-top-contributors">
|
<!-- contributors -->
|
||||||
<span>CONTRIBUTORS</span>
|
<div class="artwork-rightcolumn-top-contributors">
|
||||||
|
<span class="label-item">CONTRIBUTORS</span>
|
||||||
{% for x in artworkcontributors['results']['bindings'] %}
|
{% for x in artworkcontributors['results']['bindings'] %}
|
||||||
<!-- name surname -->
|
<!-- name surname -->
|
||||||
<div>
|
<div class="metadata-link">
|
||||||
<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||||||
<span>{{ x['creatorsLabel']['value'] }}</span>
|
<span>{{ x['creatorsLabel']['value'] }}</span>
|
||||||
</a>
|
</a>
|
||||||
@ -73,10 +74,10 @@
|
|||||||
<span>{{ x['role']['value'] }}</span>
|
<span>{{ x['role']['value'] }}</span>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<!-- date -->
|
<!-- date -->
|
||||||
<div class="artwork-rightcolumn-top-date">
|
<div class="artwork-rightcolumn-top-date">
|
||||||
<span>DATE</span>
|
<span class="label-item">DATE</span>
|
||||||
<!-- loops through dates -->
|
<!-- loops through dates -->
|
||||||
{% for x in artworkdate['results']['bindings'] %}
|
{% for x in artworkdate['results']['bindings'] %}
|
||||||
<!-- date -->
|
<!-- date -->
|
||||||
@ -91,14 +92,14 @@
|
|||||||
<div>Source: {{ x['sourceLabel']['value'] }}</div>
|
<div>Source: {{ x['sourceLabel']['value'] }}</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
|
||||||
<!-- publishers -->
|
<!-- publishers removed div .artwork-rightcolumn-top-publishers-->
|
||||||
<div class="artwork-rightcolumn-top-publishers">
|
|
||||||
<span>PUBLISHERS</span>
|
<span class="label-item">PUBLISHERS</span>
|
||||||
<!-- loop through publishers -->
|
<!-- loop through publishers -->
|
||||||
{% for x in artworkpublisher['results']['bindings'] %}
|
{% for x in artworkpublisher['results']['bindings'] %}
|
||||||
<!-- name, surname -->
|
<!-- name, surname -->
|
||||||
<div class="artwork-rightcolumn-top-publishers-item">
|
<div class="metadata-link artwork-rightcolumn-top-publishers-item">
|
||||||
{% if 'publishersLabel' in x %}
|
{% if 'publishersLabel' in x %}
|
||||||
<a href=""><span>{{ x['publishersLabel']['value'] }}</span></a>
|
<a href=""><span>{{ x['publishersLabel']['value'] }}</span></a>
|
||||||
{% else %}
|
{% else %}
|
||||||
@ -110,27 +111,26 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
<div>
|
<div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="artwork-about-bottom">
|
||||||
<!-- description -->
|
<!-- description -->
|
||||||
<div></div>
|
<div></div>
|
||||||
<!-- exhibition and distribution history -->
|
<!-- exhibition and distribution history -->
|
||||||
<div></div>
|
<div></div>
|
||||||
|
<!-- </div> end of right column -->
|
||||||
|
|
||||||
|
<!-- relationships -->
|
||||||
|
<div></div>
|
||||||
|
<!-- lists -->
|
||||||
|
<div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<!-- end of about -->
|
||||||
|
|
||||||
<!-- relationships -->
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
<!-- lists -->
|
|
||||||
<div></div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- copies in collections -->
|
<!-- copies in collections -->
|
||||||
<div>
|
<div class="artwork-copieswrapper">
|
||||||
<div>Copies in collections</div>
|
<div class="Heading_C">Copies in collections</div>
|
||||||
<!-- all the copies if any -->
|
<!-- all the copies if any -->
|
||||||
{% for x in copiesincollection['results']['bindings'] %}
|
{% for x in copiesincollection['results']['bindings'] %}
|
||||||
<div class="artwork-copiesincollection">
|
<div class="artwork-copiesincollection">
|
||||||
@ -158,8 +158,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Related works -->
|
<!-- Related works -->
|
||||||
<div>
|
<div class="artwork-relatedwrapper">
|
||||||
<div>Related works</div>
|
<div class="Heading_C">Related works</div>
|
||||||
<!-- all the works if any-->
|
<!-- all the works if any-->
|
||||||
{% for x in relatedworks['results']['bindings'] %}
|
{% for x in relatedworks['results']['bindings'] %}
|
||||||
<div class="artwork-relatedworks">
|
<div class="artwork-relatedworks">
|
||||||
@ -191,8 +191,6 @@
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% endblock content %}
|
{% endblock content %}
|
||||||
Loading…
Reference in New Issue
Block a user