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

adjusted animation landing page and hopefully fixed font issue safari

master
JoBCB 4 years ago
parent
aec82ffde8
commit
bdd5baf726
2 changed files with 60 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. 12
      static/css/Icons/icn_bars-solid.svg
  2. 91
      static/css/style.css

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

Write Preview
Loading…
Cancel
Save