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
Unified 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 ************/
.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 {
/************ WIKI PAGES ************/ 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{ .artwork-nav .active {
padding-left: 81px; color: var(--blue-blue);
padding-right: 81px; }
.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{ .artwork-about-img img {
text-align: center; width: 100%;
padding-top: 5em;
} }
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; 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; text-align: center;
padding-top: 5em; padding-top: 5em;
} }
div#upload-intro h3, div#upload-intro p { div#tutorials-intro h3, div#tutorials-intro p {
text-align: center; text-align: center;
width: 50%; width: 50%;
margin: auto; margin: auto;
} }

92
templates/artwork.html
View File

@ -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> <!-- </div> end of right column -->
</div>
<!-- relationships -->
<div></div>
<!-- lists -->
<div></div>
<!-- relationships -->
<div></div>
<!-- lists -->
<div></div>
</div>
<!-- end of about -->
</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 %}
Write Preview
Loading…
Cancel
Save