jules
/
DAAP_interface
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

changes to homepage

master
JoBCB 4 years ago
parent
e809a114bf
commit
3eb57845f2
2 changed files with 102 additions and 43 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 138
      static/css/style.css
  2. 7
      templates/home.html

138
static/css/style.css
View File

@ -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
View File

@ -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>

Write Preview
Loading…
Cancel
Save