style artwork first round

4 years ago · f37ca1e2ca
2 changed files with 223 additions and 119 deletions
--- 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;
+}

-
-/*************************************/
-/************ WIKI PAGES ************/
-/***********************************/
-
-/************ ABOUT ************/
-
-div#about-content{
-	padding-left: 81px;
-	padding-right: 81px;
-
+.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;
 }
-div#about-content-top{	
+
+.artwork-nav {
+	display: flex;
+	flex-direction: row;
 	width: 100%;
-		padding: 0px 80px;
-		display: grid;
-		grid-gap: 1rem;
-	    margin-bottom: 60px;
+	justify-content: space-evenly;
+	border-bottom: 3px solid #000;
 }

-	div#about-content-top-left{	
-		/*grid-column: 1/span 2;*/	
-		grid-template-columns: repeat(4, 1fr);	
-		font-size: 32px;	
+.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: 50px;	
-	    color: blue;	
-	    padding-right: 10%;	
-	    align-self: center;
+  line-height: normal;
+  letter-spacing: 1.5px;
+  color: var(--brown-grey);
 }
-	div#about-content-top-right{	
-			grid-column: 3/span 2;	
-			padding-right: 10%;	
+
+.artwork-nav .active { 
+	color: var(--blue-blue);
 }
-	div#about-content-top-right img{	
-			width: 100%;	
+.artwork-nav-label a, .artwork-nav-label a:visited{
+	text-decoration: none;
+	color: var(--brown-grey);
 }

-	div#about-content-bottom{	
-		grid-column: 1/ span 4;	
-	    padding: 0 15%;	
-	    padding-bottom: 5%;	
-	    margin-bottom: 200px;	
+.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;
 }

-	div.about-paragraph-subtitle{	
-		font-size: 30px;
-    	line-height: 30px;
-    	padding-top: 1.5rem;
+.artwork-about-img img {
+	width: 100%;
 }

-	div.about-paragraph p, ul {	
-		font-size: 20px;	
-	    line-height: 28px;	
-	    padding-bottom: 0.5rem;	
+.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;
+}

-	div.about-paragraph a{	
-		font-family: 'Roboto Condensed', sans-serif;	
-		text-decoration: none;	
-		color: blue;	
+.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;
+}

-/************ TUTORIALS ************/
+.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;
+}

-div#tutorials-intro{
+.artwork-copiesincollection-title-div {
 	text-align: center;
-	padding-top: 5em;
 }
-div#tutorials-intro h3, div#tutorials-intro p {
+
+.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;
-	width: 50%;
-	margin: auto;
+    align-self: center;
+}
+
+.artwork-copiesincollection-img-div {
+	max-width: 55px;
+	align-self: center;
 }

-/************ UPLOAD ************/
+.artwork-copiesincollection-img-div img {
+	width: 100%;
+}

-div#upload-intro{
+.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;
 }
+
--- a/templates/artwork.html
+++ b/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,16 +26,16 @@

 		<!-- 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 -->
+
+	<!-- about or relationships or lists or detailed record -->
 	<div class="artwork-about">
 		<!-- left -->
 		<div class="artwork-leftcolumn">
@ -54,16 +54,17 @@
 				<!-- other stuff like downloads, absent for now -->
 				<div></div>
 		</div>
-			<!-- right -->
-			<div class="artwork-rightcolumn">
+
+		<!-- right
+		<div class="artwork-rightcolumn">  -->
 			<!-- contributors / date / publishers -->
-				<div class="artwork-rightcolumn-top">
+	
 				<!-- contributors -->
 				<div class="artwork-rightcolumn-top-contributors">
-						<span>CONTRIBUTORS</span>
+						<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>
@ -76,7 +77,7 @@
 				</div>
 				<!-- date -->
 				<div class="artwork-rightcolumn-top-date">
-						<span>DATE</span>
+						<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 %}
@ -112,25 +113,24 @@
 						{% endfor %}
 				</div>
 				</div>
+				</div>
+			<div class="artwork-about-bottom">
 				<!-- description -->
 				<div></div>
 				<!-- exhibition and distribution history -->
 				<div></div>
-			</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 %}