jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

style artwork first round

master
JoBCB 4 years ago
parent
4356b3b147
commit
f37ca1e2ca
2 changed files with 223 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 250
      static/css/style.css
  2. 92
      templates/artwork.html

250
static/css/style.css
View File

@ -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%;
}
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 ************/
.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#tutorials-intro{
text-align: center;
padding-top: 5em;
.artwork-about-img img {
width: 100%;
}
div#tutorials-intro h3, div#tutorials-intro p {
.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;
width: 50%;
margin: auto;
}
/************ UPLOAD ************/
.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#upload-intro{
.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 ************/
/***********************************/
/************ 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
View File

@ -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 %}
Write Preview
Loading…
Cancel
Save