changes to homepage

static/css/style.css

@@ -315,6 +315,11 @@ div#contactform{
 	color:#FFFFFF;
 }
 
+div#contactform:hover {
+	color: white;
+	background-color: black;	
+}
+ 
 #footer-contact-form {
 	width: 100%;
 	max-width: 365px;
@@ -411,11 +416,12 @@ tbody tr th a{
   min-width: 56px; 
   max-width: 128px; /*56px * 2 + 16*/
 }
-.label { 
+.label a { 
   font-family: Roboto Condensed Bold, sans-serif;
   font-weight: bold;
   min-width: 128px; 
   max-width: 272px;/*56px * 4 + 16 * 3*/
+  color: #000000;
   }
 .altaliases {
   min-width: 128px; 
@@ -586,9 +592,8 @@ div#home-top-div{
 	overflow: hidden;
 	position: relative;
 	border-bottom:  solid black 3px;
-
+	background-color: #e9e9e9;
 }
-
 .heading_A {
   font-family: Roboto Condensed;
   font-size: 40px;
@@ -601,90 +606,140 @@ div#home-top-div{
   margin-left: 150px; 
   margin-bottom: 26px;  
 }
-
 #home-top-div .heading_A  {
-	position: static;
+	position: relative;
 	max-width: 634px;
+	z-index: 99;
 }
 #home-top-div p {
 	margin-bottom: 0px;
 }
-
 #home-top-div #wrapper-bt-vid {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
+	position: relative;
+	z-index: 99;
 }
-
 #home-top-div #wrapper-vid {
 	margin: 0px 150px 0px 0px;
-	position: static;
 	width: 50%;
 }
-
 #home-top-div #wrapper-bt{
 	margin: 36px 26px 0px 150px;
-	position: static;
 	width: 50%;
 }
-
 #home-top-div #wrapper-vid video {
 	max-width: 600px;
 	width: 100%;
 	height: auto;
+	position: relative;
+	z-index: 99;
 }
-
 #home-top-div #wrapper-top-buttons{
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-bottom: 26px;
 }
-/*#home-top-div .primary-button { 
+#home-top-div .primary-button a, #home-top-div .primary-button a:visited {
-	margin-left: 150px; 
+	color: #fdfdfd;
-	margin-bottom: 26px;
+	text-decoration: none;
-	position: static; 
+	font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
+}
+#home-top-div .primary-button:hover, #home-top-div .primary-button a:hover {
+	color: white;
+	background-color: black;	
+}
+#home-top-div .secondary-button a, #home-top-div .secondary-button a:visited {
+	color: var(--blue-blue);
+	text-decoration: none;
+	font-size: calc(12px + (14 - 12) * ((100vw - 768px) / (1400 - 768)));
+}
+
+#home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover {
+	color: white;
+	background-color: var(--blue-blue);
 }
-#home-top-div .secondary-button { 
-	margin-left: 150px;  
-	position: static;
-}*/
 
 #home-top-div img {
   position: absolute;
-	z-index: -1;
   width: 100%;
-	max-width: 460px;
+  z-index: 0;
+  max-width: 400px;
   left: -600px;
   padding-right: 60px;
   padding-left: 60px;
-
   animation-name: move;
-  animation-duration: 20s;
+  animation-duration: 40s;
   animation-iteration-count: infinite; /* or infinite*/
   animation-fill-mode: forwards;
   animation-direction: normal;
   animation-timing-function: linear;  /* or ease*/
+  opacity: 0.8;
 }
 
 #home-top-div img:nth-of-type(even) { }
 #home-top-div img:nth-of-type(odd) { }
-
 #home-top-div img:nth-of-type(2n+1) {  }
 
-#home-top-div img:nth-of-type(1) {
+/*#home-top-div img:nth-of-type(1)*/
+.banner-image-0 {
   animation-delay: 0s;
-   padding-top: 120px;
+   padding-top: 200px;
 }
-#home-top-div img:nth-of-type(2) {
+/*#home-top-div img:nth-of-type(2) */
+.banner-image-1 {
   animation-delay: 6s;
    padding-top: -60px;
 }
-#home-top-div img:nth-of-type(3) {
+/*#home-top-div img:nth-of-type(3) */
+.banner-image-2 {
   animation-delay: 12s;
- padding-top: 320px;
+ padding-top: 360px;
+}
+/*#home-top-div img:nth-of-type(4)*/ 
+.banner-image-3 {
+  animation-delay: 18s;
+   padding-top: 100px;
+}
+/*#home-top-div img:nth-of-type(5) */
+.banner-image-4 {
+  animation-delay: 26s;
+   padding-top: -60px;
+}
+/*#home-top-div img:nth-of-type(6)*/
+.banner-image-5 {
+  animation-delay: 34s;
+ padding-top: 300px;
+}
+/*#home-top-div img:nth-of-type(7)*/ 
+.banner-image-6{
+  animation-delay: 40s;
+}
+/*#home-top-div img:nth-of-type(8)*/
+.banner-image-7 {
+  animation-delay: 46s;
+}
+/*#home-top-div img:nth-of-type(9) */
+.banner-image-8 {
+  animation-delay: 52s;
+}
+/*#home-top-div img:nth-of-type(10) */
+.banner-image-9 {
+  animation-delay: 58s;
+}
+/*#home-top-div img:nth-of-type(11)*/
+.banner-image-10 {
+  animation-delay: 64s;
+}
+/*#home-top-div img:nth-of-type(12) */
+.banner-image-11 {
+  animation-delay: 70s;
+}
+.banner-image-6, .banner-image-7, .banner-image-8, .banner-image-9, .banner-image-10, .banner-image-11 {
+	display: none;
 }
-
 @keyframes move {
   0% {
   -webkit-transform:  translateX(0vw);
@@ -778,6 +833,11 @@ div.home-show-wrapper{
 	justify-content: center;
 }
 
+div.home-show-wrapper:hover {
+	color: white;
+	background-color: black;	
+}
+
 @media (min-width: 768px) {
   #home-recent-grid, #browsethearchive-grid { grid-template-columns: repeat(2, 1fr); }
 }
@@ -917,7 +977,7 @@ a img, a img::before {
   	letter-spacing: normal;
   	color: var(--black);
 }
-a:link, a:visited, .mw-parser-output a {
+.mw-parser-output a {
   font-family: Roboto Regular;
   font-size: calc(12px + (20 - 12) * ((100vw - 768px) / (1400 - 768)));
   font-weight: normal;

templates/home.html

@@ -28,9 +28,8 @@
 
 	<div id="wrapper-bt-vid">
 		<div id="wrapper-bt">
-			<div id="wrapper-top-buttons" class="primary-button"><a href="{{ url_for('zinesindex') }}"><span>SEE EXAMPLE SEARCH FOR ZINES</span></a></div>
+			<a id="wrapper-top-buttons" class="primary-button" href="{{ url_for('zinesindex') }}">SEE EXAMPLE SEARCH FOR ZINES</a>
-
+			<a id="wrapper-top-buttons" class="secondary-button" href="{{ url_for('casestudy') }}">CAROLEE SCHNEEMANN CASE STUDY</a>
-			<div id="wrapper-top-buttons" class="secondary-button"><a href="{{ url_for('casestudy') }}"><span>LEARN MORE ABOUT ADVANCED SEARCH TOOLS</span></a></div>
 		</div>
 		<div id="wrapper-vid">
 			<video preload="meta" autoplay="" loop="">
@@ -83,7 +82,7 @@
 
 	</div>
 
-	<div class="home-show-wrapper primary-button"><span class="home-show">SHOW MORE</span></div>
+	<div class="home-show-wrapper primary-button"><span class="home-show">BROWSE THE FULL ARCHIVE</span></div>
 
 </div>