diff --git a/static/css/style.css b/static/css/style.css index 7ab7004..482ac7b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -314,6 +314,11 @@ div#contactform{ text-decoration: none; color:#FFFFFF; } + +div#contactform:hover { + color: white; + background-color: black; +} #footer-contact-form { width: 100%; @@ -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 { - margin-left: 150px; - margin-bottom: 26px; - position: static; +#home-top-div .primary-button a, #home-top-div .primary-button a:visited { + color: #fdfdfd; + text-decoration: none; + 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 { - margin-left: 150px; - position: static; -}*/ -#home-top-div img { - position: absolute; - z-index: -1; - width: 100%; - max-width: 460px; - left: -600px; - padding-right: 60px; - padding-left: 60px; +#home-top-div .secondary-button:hover, #home-top-div .secondary-button a:hover { + color: white; + background-color: var(--blue-blue); +} +#home-top-div img { + position: absolute; + width: 100%; + 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(odd) { } +#home-top-div img:nth-of-type(2n+1) { } -#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; diff --git a/templates/home.html b/templates/home.html index 82dcda1..855932f 100644 --- a/templates/home.html +++ b/templates/home.html @@ -28,9 +28,8 @@
- - - + SEE EXAMPLE SEARCH FOR ZINES + CAROLEE SCHNEEMANN CASE STUDY
-
SHOW MORE
+
BROWSE THE FULL ARCHIVE