style artwork first round
This commit is contained in:
parent
4356b3b147
commit
f37ca1e2ca
@ -1130,77 +1130,194 @@ img.person_creatorof-imgs{
|
||||
}
|
||||
/************ 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 ************/
|
||||
/***********************************/
|
||||
|
||||
/************ 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 ************/
|
||||
|
||||
@ -1214,14 +1331,3 @@ div#tutorials-intro h3, div#tutorials-intro p {
|
||||
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 -->
|
||||
<div>
|
||||
<!-- ARTWORK label in rectangle -->
|
||||
<div>
|
||||
<div class="artwork-box">
|
||||
<span>ARTWORK</span>
|
||||
</div>
|
||||
<!-- Artwork title -->
|
||||
<div>
|
||||
<div class="artwork-title">
|
||||
{% for x in artworkintro['results']['bindings'] %}
|
||||
{{ x['workLabel']['value'] }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- Artwork intro-description -->
|
||||
<div>
|
||||
<div class="artwork-intro">
|
||||
{% for x in artworkintro['results']['bindings'] %}
|
||||
{% if 'workDescription' in x %}
|
||||
{{ x['workDescription']['value'] }}
|
||||
@ -26,19 +26,19 @@
|
||||
|
||||
<!-- NAVIGATION HERE? -->
|
||||
<div class="artwork-nav">
|
||||
<div>ABOUT THIS WORK</div>
|
||||
<div>RELATIONSHIPS</div>
|
||||
<div>LISTS</div>
|
||||
<div><a href="">DETAILED RECORD</a></div>
|
||||
<div class="artwork-nav-label active">ABOUT THIS WORK</div>
|
||||
<div class="artwork-nav-label">RELATIONSHIPS</div>
|
||||
<div class="artwork-nav-label">LISTS</div>
|
||||
<div class="artwork-nav-label"><a href="">DETAILED RECORD</a></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- The content in 3 divs displayed or not (detailed revord is out)-->
|
||||
<div>
|
||||
<!-- about -->
|
||||
<div class="artwork-about">
|
||||
<!-- left -->
|
||||
<div class="artwork-leftcolumn">
|
||||
|
||||
<!-- about or relationships or lists or detailed record -->
|
||||
<div class="artwork-about">
|
||||
<!-- left -->
|
||||
<div class="artwork-leftcolumn">
|
||||
<!-- img - I am unsure how to handle the thing to go through the different pictures -->
|
||||
<div class="artwork-about-img">
|
||||
{% for x in artworkimages['results']['bindings'] %}
|
||||
@ -53,17 +53,18 @@
|
||||
</div>
|
||||
<!-- other stuff like downloads, absent for now -->
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- right -->
|
||||
<div class="artwork-rightcolumn">
|
||||
<!-- contributors / date / publishers -->
|
||||
<div class="artwork-rightcolumn-top">
|
||||
<!-- contributors -->
|
||||
<div class="artwork-rightcolumn-top-contributors">
|
||||
<span>CONTRIBUTORS</span>
|
||||
</div>
|
||||
|
||||
<!-- right
|
||||
<div class="artwork-rightcolumn"> -->
|
||||
<!-- contributors / date / publishers -->
|
||||
|
||||
<!-- contributors -->
|
||||
<div class="artwork-rightcolumn-top-contributors">
|
||||
<span class="label-item">CONTRIBUTORS</span>
|
||||
{% for x in artworkcontributors['results']['bindings'] %}
|
||||
<!-- name surname -->
|
||||
<div>
|
||||
<div class="metadata-link">
|
||||
<a href='/person?id={{ x["creators"]["value"] | replace("http://daap.bannerrepeater.org/entity/", "") }}'>
|
||||
<span>{{ x['creatorsLabel']['value'] }}</span>
|
||||
</a>
|
||||
@ -73,10 +74,10 @@
|
||||
<span>{{ x['role']['value'] }}</span>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- date -->
|
||||
<div class="artwork-rightcolumn-top-date">
|
||||
<span>DATE</span>
|
||||
</div>
|
||||
<!-- date -->
|
||||
<div class="artwork-rightcolumn-top-date">
|
||||
<span class="label-item">DATE</span>
|
||||
<!-- loops through dates -->
|
||||
{% for x in artworkdate['results']['bindings'] %}
|
||||
<!-- date -->
|
||||
@ -91,14 +92,14 @@
|
||||
<div>Source: {{ x['sourceLabel']['value'] }}</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<!-- publishers -->
|
||||
<div class="artwork-rightcolumn-top-publishers">
|
||||
<span>PUBLISHERS</span>
|
||||
|
||||
<!-- publishers removed div .artwork-rightcolumn-top-publishers-->
|
||||
|
||||
<span class="label-item">PUBLISHERS</span>
|
||||
<!-- loop through publishers -->
|
||||
{% for x in artworkpublisher['results']['bindings'] %}
|
||||
<!-- name, surname -->
|
||||
<div class="artwork-rightcolumn-top-publishers-item">
|
||||
<div class="metadata-link artwork-rightcolumn-top-publishers-item">
|
||||
{% if 'publishersLabel' in x %}
|
||||
<a href=""><span>{{ x['publishersLabel']['value'] }}</span></a>
|
||||
{% else %}
|
||||
@ -110,27 +111,26 @@
|
||||
{% endif %}
|
||||
<div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="artwork-about-bottom">
|
||||
<!-- description -->
|
||||
<div></div>
|
||||
<!-- exhibition and distribution history -->
|
||||
<div></div>
|
||||
<!-- </div> end of right column -->
|
||||
|
||||
<!-- relationships -->
|
||||
<div></div>
|
||||
<!-- lists -->
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- relationships -->
|
||||
<div></div>
|
||||
|
||||
<!-- lists -->
|
||||
<div></div>
|
||||
|
||||
|
||||
<!-- end of about -->
|
||||
</div>
|
||||
|
||||
<!-- copies in collections -->
|
||||
<div>
|
||||
<div>Copies in collections</div>
|
||||
<div class="artwork-copieswrapper">
|
||||
<div class="Heading_C">Copies in collections</div>
|
||||
<!-- all the copies if any -->
|
||||
{% for x in copiesincollection['results']['bindings'] %}
|
||||
<div class="artwork-copiesincollection">
|
||||
@ -158,8 +158,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Related works -->
|
||||
<div>
|
||||
<div>Related works</div>
|
||||
<div class="artwork-relatedwrapper">
|
||||
<div class="Heading_C">Related works</div>
|
||||
<!-- all the works if any-->
|
||||
{% for x in relatedworks['results']['bindings'] %}
|
||||
<div class="artwork-relatedworks">
|
||||
@ -191,8 +191,6 @@
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
Loading…
Reference in New Issue
Block a user