Minor example file tweaks, add smooth scrolling to browsers that support it

This commit is contained in:
Timothy Warren 2016-06-07 11:36:02 -04:00
parent 1afb45522d
commit 6da1924f53
4 changed files with 46 additions and 6 deletions

View File

@ -15,7 +15,7 @@ show_anime_collection = true
show_manga_collection = false show_manga_collection = false
# cache driver for api calls (NullDriver, SQLDriver, RedisDriver) # cache driver for api calls (NullDriver, SQLDriver, RedisDriver)
cache_driver = NullDriver cache_driver = "NullDriver"
# path to public directory on the server # path to public directory on the server
asset_dir = "/../../public" asset_dir = "/../../public"

View File

@ -424,7 +424,7 @@ h1 a {
text-align: center; text-align: center;
width: 220px; width: 220px;
height: 319px; height: 319px;
margin: 0.25em; margin: 0.25em 0.125em;
} }
.media .edit_buttons > button { .media .edit_buttons > button {
@ -438,7 +438,7 @@ h1 a {
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
background: rgba(0, 0, 0, 0.45); background: rgba(0, 0, 0, 0.45);
color: #ffffff; color: #ffffff;
padding: 0.25em; padding: 0.25em 0.125em;
text-align: right; text-align: right;
} }
@ -481,7 +481,6 @@ h1 a {
} }
.media > .name > a { .media > .name > a {
/*text-align:justify;*/
background: none; background: none;
color: #fff; color: #fff;
text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
@ -676,3 +675,23 @@ h1 a {
.details td:nth-child(even) { .details td:nth-child(even) {
text-align: left; text-align: left;
} }
/* ----------------------------------------------------------------------------
Viewport-based styles
-----------------------------------------------------------------------------*/
@media screen and (max-width: 40em) {
nav a {
line-height: 4em;
line-height: 4rem;
}
.media {
margin: 2px 0;
}
main {
padding: 0 0,5em 0.5em;
padding: 0 0.5rem 0.5rem;
}
}

View File

@ -3,10 +3,11 @@
--shadow: 1px 2px 1px rgba(0, 0, 0, 0.85); --shadow: 1px 2px 1px rgba(0, 0, 0, 0.85);
--title-overlay: rgba(0, 0, 0, 0.45); --title-overlay: rgba(0, 0, 0, 0.45);
--text-color: #ffffff; --text-color: #ffffff;
--normal-padding: 0.25em; --normal-padding: 0.25em 0.125em;
--link-hover-color: #7d12db; --link-hover-color: #7d12db;
--edit-link-hover-color: #db7d12; --edit-link-hover-color: #db7d12;
--edit-link-color: #12db18; --edit-link-color: #12db18;
--radius: 5px;
} }
template, [hidden="hidden"], .media[hidden] {display:none} template, [hidden="hidden"], .media[hidden] {display:none}
@ -352,7 +353,6 @@ a:hover, a:active {
} }
.media > .name > a { .media > .name > a {
/*text-align:justify;*/
background:none; background:none;
color:#fff; color:#fff;
text-shadow: var(--shadow); text-shadow: var(--shadow);
@ -528,3 +528,23 @@ a:hover, a:active {
.details td:nth-child(even) { .details td:nth-child(even) {
text-align:left; text-align:left;
} }
/* ----------------------------------------------------------------------------
Viewport-based styles
-----------------------------------------------------------------------------*/
@media screen and (max-width: 40em) {
nav a {
line-height:4em;
line-height:4rem;
}
.media {
margin:2px 0;
}
main {
padding:0 0,5em 0.5em;
padding:0 0.5rem 0.5rem;
}
}

View File

@ -9,6 +9,7 @@
line-height:1.4; line-height:1.4;
overflow-y:scroll; overflow-y:scroll;
text-size-adjust:100%; text-size-adjust:100%;
scroll-behavior: smooth;
} }
audio:not([controls]) audio:not([controls])