From f37ca1e2ca8817d19d325868bd80b9ea485cd812 Mon Sep 17 00:00:00 2001 From: JoBCB Date: Sun, 15 Nov 2020 17:36:00 +0000 Subject: [PATCH] style artwork first round --- static/css/style.css | 250 +++++++++++++++++++++++++++++------------ templates/artwork.html | 92 ++++++++------- 2 files changed, 223 insertions(+), 119 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 4a4a62d..250fe5e 100644 --- a/static/css/style.css +++ b/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%; - } - - 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; } + diff --git a/templates/artwork.html b/templates/artwork.html index 04e19d8..11d9324 100644 --- a/templates/artwork.html +++ b/templates/artwork.html @@ -6,17 +6,17 @@
-
+
ARTWORK
-
+
{% for x in artworkintro['results']['bindings'] %} {{ x['workLabel']['value'] }} {% endfor %}
-
+
{% for x in artworkintro['results']['bindings'] %} {% if 'workDescription' in x %} {{ x['workDescription']['value'] }} @@ -26,19 +26,19 @@
-
ABOUT THIS WORK
-
RELATIONSHIPS
-
LISTS
- +
ABOUT THIS WORK
+
RELATIONSHIPS
+
LISTS
+
DETAILED RECORD
-
- -
- -
+ + +
+ +
{% for x in artworkimages['results']['bindings'] %} @@ -53,17 +53,18 @@
-
- -
- -
- -
- CONTRIBUTORS +
+ + + + + +
+ CONTRIBUTORS {% for x in artworkcontributors['results']['bindings'] %} -
+
{{ x['creatorsLabel']['value'] }} @@ -73,10 +74,10 @@ {{ x['role']['value'] }}
{% endfor %} -
- -
- DATE +
+ +
+ DATE {% for x in artworkdate['results']['bindings'] %} @@ -91,14 +92,14 @@
Source: {{ x['sourceLabel']['value'] }}
{% endif %} {% endfor %} -
- -
- PUBLISHERS + + + + PUBLISHERS {% for x in artworkpublisher['results']['bindings'] %} -
+
{% if 'publishersLabel' in x %} {{ x['publishersLabel']['value'] }} {% else %} @@ -110,27 +111,26 @@ {% endif %}
{% endfor %} -
+
+
+
-
-
- - -
- - -
- + + +
+ +
+
+
- -
-
Copies in collections
+
+
Copies in collections
{% for x in copiesincollection['results']['bindings'] %}
@@ -158,8 +158,8 @@
-
-
Related works
+
+
Related works
{% for x in relatedworks['results']['bindings'] %}
@@ -191,8 +191,6 @@ {% endfor %}
- -
{% endblock content %} \ No newline at end of file