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

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

7
templates/home.html

@ -28,9 +28,8 @@
<div id="wrapper-bt-vid"> <div id="wrapper-bt-vid">
<div id="wrapper-bt"> <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>
<div id="wrapper-vid"> <div id="wrapper-vid">
<video preload="meta" autoplay="" loop=""> <video preload="meta" autoplay="" loop="">
@ -83,7 +82,7 @@
</div> </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> </div>

Loading…
Cancel
Save