Browse Source

changes to homepage

master
JoBCB 4 years ago
parent
commit
3eb57845f2
  1. 138
      static/css/style.css
  2. 7
      templates/home.html

138
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 {
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(2n+1) {}
#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;

7
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>
<div id="wrapper-top-buttons" class="secondary-button"><a href="{{ url_for('casestudy') }}"><span>LEARN MORE ABOUT ADVANCED SEARCH TOOLS</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>
<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>

Loading…
Cancel
Save