Browse Source

style artwork first round

master
JoBCB 4 years ago
parent
commit
f37ca1e2ca
  1. 236
      static/css/style.css
  2. 92
      templates/artwork.html

236
static/css/style.css

@ -1130,98 +1130,204 @@ 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;
}
/*************************************/
/************ WIKI PAGES ************/
/***********************************/
.artwork-nav {
display: flex;
flex-direction: row;
width: 100%;
justify-content: space-evenly;
border-bottom: 3px solid #000;
}
/************ ABOUT ************/
.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);
}
div#about-content{
padding-left: 81px;
padding-right: 81px;
.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;
}
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%;
}
.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;
}
div#about-content-bottom{
grid-column: 1/ span 4;
padding: 0 15%;
padding-bottom: 5%;
margin-bottom: 200px;
.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;
}
div.about-paragraph-subtitle{
font-size: 30px;
line-height: 30px;
padding-top: 1.5rem;
}
.artwork-rightcolumn-top-contributors {
grid-column-start: 9;
grid-column-end: 14;
grid-row-start: 1;
grid-row-end: 1;
}
div.about-paragraph p, ul {
font-size: 20px;
line-height: 28px;
padding-bottom: 0.5rem;
}
.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;
}
div.about-paragraph a{
font-family: 'Roboto Condensed', sans-serif;
text-decoration: none;
color: blue;
}
.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;
}
/************ TUTORIALS ************/
.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;
}
div#tutorials-intro{
text-align: center;
padding-top: 5em;
.artwork-copiesincollection-img-div {
max-width: 55px;
align-self: center;
}
div#tutorials-intro h3, div#tutorials-intro p {
text-align: center;
width: 50%;
margin: auto;
.artwork-copiesincollection-img-div img {
width: 100%;
}
/************ UPLOAD ************/
.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 ************/
/***********************************/
div#upload-intro{
/************ TUTORIALS ************/
div#tutorials-intro{
text-align: center;
padding-top: 5em;
}
div#upload-intro h3, div#upload-intro p {
div#tutorials-intro h3, div#tutorials-intro p {
text-align: center;
width: 50%;
margin: auto;
}

92
templates/artwork.html

@ -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>
</div>
<!-- relationships -->
<div></div>
<!-- lists -->
<div></div>
<!-- </div> end of right column -->
<!-- relationships -->
<div></div>
<!-- lists -->
<div></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…
Cancel
Save