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

adjusted animation landing page and hopefully fixed font issue safari

Browse Source
This commit is contained in:
JoBCB 2020-12-03 19:08:16 +00:00
parent aec82ffde8
commit bdd5baf726
2 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/Icons/icn_bars-solid.svg
View File

@ -1 +1,11 @@
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="bars" class="svg-inline--fa fa-bars fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>bars</title>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Mobile_navigation" transform="translate(-344.000000, -27.000000)" fill="#1B42D8" fill-rule="nonzero">
<g id="bars">
<path d="M362.998219,30.0781582 C363.141448,30.0781582 363.263193,30.0280279 363.363453,29.9277679 C363.463713,29.827508 363.513843,29.705763 363.513843,29.5625344 L363.513843,28.1875377 C363.513843,28.0443091 363.463713,27.9225642 363.363453,27.8223042 C363.263193,27.7220442 363.141448,27.6719139 362.998219,27.6719139 L344.779513,27.6719139 C344.636284,27.6719139 344.514539,27.7220442 344.414279,27.8223042 C344.314019,27.9225642 344.263889,28.0443091 344.263889,28.1875377 L344.263889,29.5625344 C344.263889,29.705763 344.314019,29.827508 344.414279,29.9277679 C344.514539,30.0280279 344.636284,30.0781582 344.779513,30.0781582 L362.998219,30.0781582 Z M362.998219,36.9531418 C363.141448,36.9531418 363.263193,36.9030115 363.363453,36.8027515 C363.463713,36.7024916 363.513843,36.5807466 363.513843,36.437518 L363.513843,35.0625213 C363.513843,34.9192927 363.463713,34.7975478 363.363453,34.6972878 C363.263193,34.5970278 363.141448,34.5468975 362.998219,34.5468975 L344.779513,34.5468975 C344.636284,34.5468975 344.514539,34.5970278 344.414279,34.6972878 C344.314019,34.7975478 344.263889,34.9192927 344.263889,35.0625213 L344.263889,36.437518 C344.263889,36.5807466 344.314019,36.7024916 344.414279,36.8027515 C344.514539,36.9030115 344.636284,36.9531418 344.779513,36.9531418 L362.998219,36.9531418 Z M362.998219,43.8281254 C363.141448,43.8281254 363.263193,43.7779951 363.363453,43.6777351 C363.463713,43.5774752 363.513843,43.4557302 363.513843,43.3125016 L363.513843,41.9375049 C363.513843,41.7942763 363.463713,41.6725314 363.363453,41.5722714 C363.263193,41.4720115 363.141448,41.4218811 362.998219,41.4218811 L344.779513,41.4218811 C344.636284,41.4218811 344.514539,41.4720115 344.414279,41.5722714 C344.314019,41.6725314 344.263889,41.7942763 344.263889,41.9375049 L344.263889,43.3125016 C344.263889,43.4557302 344.314019,43.5774752 344.414279,43.6777351 C344.514539,43.7779951 344.636284,43.8281254 344.779513,43.8281254 L362.998219,43.8281254 Z"></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 B

After

Width:  |  Height:  |  Size: 2.4 KiB

91
static/css/style.css
View File

@ -230,7 +230,7 @@ html {
padding:0;
height: 100vh;
width: 100vw;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-size: 16px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
@ -244,7 +244,7 @@ html {
}
body {
font-family: Roboto;
font-family: Roboto Condensed;
/*font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -256,7 +256,7 @@ body {
padding: 0;
}
body i {
font-family: 'Roboto';
font-family: 'Roboto Condensed';
font-weight: normal;
font-stretch: normal;
font-style: italic;
@ -469,7 +469,7 @@ a#footer-img-br img {
/* Banner Repeater Logo*/
a#footer-img-br, a#footer-img-br figcaption , a#footer-img-br figcaption:hover, a#footer-img-br figcaption:visited,
a#footer-img-wiki, a#footer-img-wiki figcaption, a#footer-img-wiki figcaption:hover, a#footer-img-wiki figcaption:visited {
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
/*font-size: 16px;*/
margin: 0;
padding: 0;
@ -512,7 +512,7 @@ a#footer-img-wiki img{
div#footer-socials-links a{
text-decoration: none;
color:#FFFFFF;
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
/* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 28.4px;*/
font-weight: normal;
@ -592,7 +592,7 @@ thead tr th{
tbody tr th{
/* font-size: calc(12px + (18 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 26px;*/
font-family: 'Roboto', sans-serif;
font-family: 'Roboto Condensed', sans-serif;
font-weight: normal;
}
@ -708,7 +708,7 @@ a.paginate_button.next:after {
color: var(--black);
}
.date, div.artwork-relatedworks-date {
font-family: Roboto;
font-family: Roboto Condensed;
/*font-size: 16px;
line-height: 1.63;*/
font-weight: normal;
@ -762,7 +762,7 @@ a.paginate_button.next:after {
.artwork-button {
width: 76px;
height: 24px;
font-family: Roboto;
font-family: Roboto Condensed;
/* font-size: 16px;
line-height: 1.5;*/
font-weight: normal;
@ -843,7 +843,7 @@ div#home-top-div{
#home-top-div #wrapper-bt{
/* margin: 36px 26px 0px 0vw; 8vmin*/
/*width: 50%;*/
z-index: 99;
z-index: 1000;
grid-column-start: 1;
grid-column-end: 9;
grid-row-start: 2;
@ -894,11 +894,12 @@ div#home-top-div{
width: 100%;
z-index: 0;
max-width: 400px;
left: -600px;
left: -360px;
/*left: -600px;*/
padding-right: 60px;
padding-left: 60px;
animation-name: move;
animation-duration: 40s;
animation-duration: 32s;
animation-iteration-count: infinite; /* or infinite*/
animation-fill-mode: forwards;
animation-direction: normal;
@ -913,87 +914,93 @@ div#home-top-div{
/*#home-top-div img:nth-of-type(1)*/
.banner-image-0 {
animation-delay: 0s;
padding-top: 200px;
padding-top: 200px;
}
/*#home-top-div img:nth-of-type(2) */
.banner-image-1 {
animation-delay: 6s;
padding-top: -60px;
animation-delay: 5s;
padding-top: 50px;
}
/*#home-top-div img:nth-of-type(3) */
.banner-image-2 {
animation-delay: 12s;
padding-top: 430px;
animation-delay: 10s;
padding-top: 20px;
}
/*#home-top-div img:nth-of-type(4)*/
.banner-image-3 {
animation-delay: 18s;
animation-delay: 15s;
padding-top: 100px;
}
/*#home-top-div img:nth-of-type(5) */
.banner-image-4 {
animation-delay: 26s;
padding-top: -60px;
animation-delay: 20s;
padding-top: -60px;
}
/*#home-top-div img:nth-of-type(6)*/
.banner-image-5 {
animation-delay: 34s;
padding-top: 300px;
animation-delay: 25s;
padding-top: 20px;
}
/*#home-top-div img:nth-of-type(7)*/
.banner-image-6{
animation-delay: 40s;
animation-delay: 30s;
padding-top: 100px;
}
/*#home-top-div img:nth-of-type(8)*/
.banner-image-7 {
animation-delay: 46s;
animation-delay: 35s;
padding-top: -30px;
}
/*#home-top-div img:nth-of-type(9) */
.banner-image-8 {
animation-delay: 52s;
animation-delay: 40s;
}
/*#home-top-div img:nth-of-type(10) */
.banner-image-9 {
animation-delay: 58s;
animation-delay: 46s;
}
/*#home-top-div img:nth-of-type(11)*/
.banner-image-10 {
animation-delay: 64s;
animation-delay: 50s;
}
/*#home-top-div img:nth-of-type(12) */
.banner-image-11 {
animation-delay: 70s;
animation-delay: 56s;
}
.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);
left: -330px;
/* -webkit-transform: translateX(0vw);
-ms-transform: translateX(0vw);
-moz-transform: translateX(0vw);
transform: translateX(0vw);
transform: translateX(0vw);*/
}
100% {
-webkit-transform: translateX(200vw); /* 250vw*/
-ms-transform: translateX(200vw);
-moz-transform: translateX(200vw);
transform: translateX(200vw);
left: 200vw;
/* -webkit-transform: translateX(2600px);
-ms-transform: translateX(2600px);
-moz-transform: translateX(2600px);
transform: translateX(2600px);*/
}
}
@-webkit-keyframes move{
0% {
-webkit-transform: translateX(0px);
left: -330px;
/* -webkit-transform: translateX(0px);
-ms-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
transform: translateX(0px);*/
}
100% {
-webkit-transform: translateX(1650px); /* 250vw*/
left: 200vw;
/* -webkit-transform: translateX(1650px);
-ms-transform: translateX(1650px);
-moz-transform: translateX(1650px);
transform: translateX(1650px);
transform: translateX(1650px);*/
}
}
.scroll-down {
@ -1211,7 +1218,7 @@ div.home-show-wrapper a:hover {
grid-column-end: 15;
}
.mw-parser-output ul {
font-family: Roboto;
font-family: Roboto Condensed;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -1229,7 +1236,7 @@ div.home-show-wrapper a:hover {
height: auto;
}
.mw-parser-output img {
font-family: Roboto ;
font-family: Roboto Condensed;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
text-decoration: none;
@ -1240,7 +1247,7 @@ div.home-show-wrapper a:hover {
color: var(--black);
}
.mw-parser-output a {
font-family: Roboto ;
font-family: Roboto Condensed;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -1383,7 +1390,7 @@ div.browsebycategory-categories:hover {
}
.artwork-intro {
font-family: Roboto;
font-family: Roboto Condensed;
/* font-size: calc(12px + (20 - 12) * ((100vw - 320px) / (1600 - 320)));
line-height: 1.63;*/
font-weight: normal;
@ -1734,7 +1741,7 @@ div.browsebycategory-categories:hover {
text-decoration-color: black;
}
.metadata-link p {
font-family: Roboto;
font-family: Roboto Condensed;
font-weight: normal;
font-stretch: normal;
font-style: normal;