Add Navigation Arrow and simplify static page
This commit is contained in:
Florian Zumpe
+171
-100
@@ -1,6 +1,6 @@
|
||||
:root {
|
||||
--page-background: #eef4e9;
|
||||
--surface: #ffffff;
|
||||
--surface: #fff;
|
||||
--primary: #315d3a;
|
||||
--primary-dark: #24462b;
|
||||
--text: #1f3022;
|
||||
@@ -8,41 +8,57 @@
|
||||
--notice: #fff8d6;
|
||||
--notice-border: #d4a72c;
|
||||
--focus: #1e6fba;
|
||||
--footer-height: 5.25rem;
|
||||
}
|
||||
|
||||
html, body {
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
background: var(--page-background);
|
||||
color: var(--text);
|
||||
overscroll-behavior-y: contain;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
button, audio {
|
||||
button,
|
||||
input,
|
||||
audio {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
button,
|
||||
[data-page-target] {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#app-shell {
|
||||
min-height: 100vh;
|
||||
#app-shell,
|
||||
.app-page {
|
||||
min-height: 100dvh;
|
||||
}
|
||||
|
||||
.app-page {
|
||||
min-height: 100vh;
|
||||
background: var(--page-background);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
#app-shell.has-navigation .app-page {
|
||||
padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.app-page > header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-items: center;
|
||||
min-height: 3.5rem;
|
||||
padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
|
||||
@@ -51,53 +67,43 @@ button, audio {
|
||||
box-shadow: 0 .15rem .5rem rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.app-header h1 {
|
||||
margin: 0;
|
||||
padding: .85rem 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.app-header-with-back {
|
||||
grid-template-columns: auto minmax(0, 1fr) auto;
|
||||
.app-page > header:has(.back-button) {
|
||||
grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.app-header-with-back::after {
|
||||
.app-page > header:has(.back-button)::after {
|
||||
content: "";
|
||||
width: 5.5rem;
|
||||
}
|
||||
|
||||
.app-header .back-button.ui-button {
|
||||
.app-page > header h1 {
|
||||
min-width: 0;
|
||||
margin: 0;
|
||||
padding: .85rem 0;
|
||||
overflow: hidden;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.app-page > header .back-button.ui-button {
|
||||
width: 5.5rem;
|
||||
min-height: 2.75rem;
|
||||
margin: 0;
|
||||
border-color: rgba(255, 255, 255, .45);
|
||||
background: rgba(255, 255, 255, .12);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-header .back-button.ui-button:hover,
|
||||
.app-header .back-button.ui-button:focus {
|
||||
border-color: #fff;
|
||||
background: rgba(255, 255, 255, .22);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
.content {
|
||||
width: min(48rem, 100%);
|
||||
box-sizing: border-box;
|
||||
margin: 0 auto;
|
||||
padding: 1rem max(1rem, env(safe-area-inset-right)) calc(1.5rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
padding: .85rem max(1rem, env(safe-area-inset-right)) calc(.85rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin: 0 0 1rem;
|
||||
padding: .75rem;
|
||||
@@ -106,25 +112,17 @@ button, audio {
|
||||
background: var(--notice);
|
||||
}
|
||||
|
||||
.route-section + .route-section {
|
||||
#routes-page .content > section + section {
|
||||
margin-top: 2rem;
|
||||
padding-top: 1.25rem;
|
||||
border-top: 1px solid #c8d3ca;
|
||||
}
|
||||
|
||||
.section-heading-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
|
||||
gap: 1rem;
|
||||
align-items: end;
|
||||
#routes-page h2 {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
|
||||
.section-heading-row h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.route-search-controls label {
|
||||
#routes-page label {
|
||||
display: block;
|
||||
margin-bottom: .35rem;
|
||||
color: var(--muted);
|
||||
@@ -132,7 +130,7 @@ button, audio {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.route-search-row {
|
||||
.search-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: .35rem;
|
||||
@@ -140,13 +138,14 @@ button, audio {
|
||||
|
||||
#route-search {
|
||||
width: 100%;
|
||||
min-height: 2.5rem;
|
||||
min-height: 3rem;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem .65rem;
|
||||
padding: .65rem .75rem;
|
||||
border: 1px solid #aebcaf;
|
||||
border-radius: .3rem;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#route-search:focus {
|
||||
@@ -155,22 +154,23 @@ button, audio {
|
||||
}
|
||||
|
||||
#clear-route-search.ui-button {
|
||||
min-width: 3rem;
|
||||
min-height: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.route-list-summary {
|
||||
margin: 0 0 .75rem;
|
||||
#all-routes-summary {
|
||||
margin: .75rem 0;
|
||||
color: var(--muted);
|
||||
font-size: .9rem;
|
||||
}
|
||||
|
||||
.ui-autocomplete {
|
||||
max-height: 16rem;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
max-height: min(16rem, 45dvh);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.card-list {
|
||||
.route-list {
|
||||
display: grid;
|
||||
gap: .75rem;
|
||||
margin: 0;
|
||||
@@ -178,9 +178,10 @@ button, audio {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.card-link {
|
||||
.route-list button {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 3.5rem;
|
||||
box-sizing: border-box;
|
||||
gap: .25rem;
|
||||
padding: 1rem;
|
||||
@@ -193,38 +194,33 @@ button, audio {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-link:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .13);
|
||||
.route-list button > strong {
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.card-link:focus-visible {
|
||||
.route-list button > span,
|
||||
.route-list button > small {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.route-list button > small {
|
||||
margin-top: .25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.route-list button:focus-visible,
|
||||
.ui-button:focus-visible {
|
||||
outline: .2rem solid var(--focus);
|
||||
outline-offset: .15rem;
|
||||
}
|
||||
|
||||
.card-link:disabled {
|
||||
.route-list button:disabled {
|
||||
cursor: progress;
|
||||
opacity: .65;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-description,
|
||||
.route-distance {
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.route-distance {
|
||||
margin-top: .25rem;
|
||||
font-size: .9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.empty-list {
|
||||
.route-list > li > p {
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
border-radius: .5rem;
|
||||
background: var(--surface);
|
||||
@@ -257,43 +253,39 @@ button, audio {
|
||||
|
||||
#start-tracking.ui-button {
|
||||
width: 100%;
|
||||
min-height: 3rem;
|
||||
margin: 0 0 1rem;
|
||||
border-color: var(--primary-dark);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#start-tracking.ui-button:hover,
|
||||
#start-tracking.ui-button:focus {
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.slideshow {
|
||||
#slideshow {
|
||||
overflow: hidden;
|
||||
border-radius: .75rem;
|
||||
background: #172019;
|
||||
color: #fff;
|
||||
touch-action: pan-y;
|
||||
}
|
||||
|
||||
.slideshow figure {
|
||||
#slideshow figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slideshow img {
|
||||
#slideshow img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: min(55vh, 28rem);
|
||||
height: min(55dvh, 28rem);
|
||||
object-fit: contain;
|
||||
background: #111;
|
||||
}
|
||||
|
||||
.slideshow figcaption {
|
||||
#slideshow figcaption {
|
||||
min-height: 1.4rem;
|
||||
padding: .5rem .75rem;
|
||||
}
|
||||
|
||||
.slide-controls {
|
||||
#slide-controls {
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(4rem, 1fr) auto;
|
||||
align-items: center;
|
||||
@@ -303,14 +295,19 @@ button, audio {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
|
||||
#slide-controls.ui-controlgroup-horizontal .ui-controlgroup-item {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#slide-controls .ui-button {
|
||||
min-width: 3rem;
|
||||
min-height: 3rem;
|
||||
}
|
||||
|
||||
#slide-position {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
min-height: 2.2rem;
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
#poi-audio {
|
||||
@@ -318,20 +315,94 @@ button, audio {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.ui-button:focus-visible {
|
||||
outline: .2rem solid var(--focus);
|
||||
outline-offset: .12rem;
|
||||
#navigation-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 40;
|
||||
display: grid;
|
||||
grid-template-columns: 3.75rem minmax(0, 1fr);
|
||||
align-items: center;
|
||||
min-height: var(--footer-height);
|
||||
box-sizing: border-box;
|
||||
gap: .85rem;
|
||||
padding: .6rem max(1rem, env(safe-area-inset-right)) calc(.6rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
|
||||
border-top: 1px solid rgba(255, 255, 255, .35);
|
||||
background: rgba(36, 70, 43, .96);
|
||||
color: #fff;
|
||||
box-shadow: 0 -.25rem .8rem rgba(0, 0, 0, .2);
|
||||
backdrop-filter: blur(.4rem);
|
||||
}
|
||||
|
||||
@media (max-width: 620px) {
|
||||
.section-heading-row {
|
||||
grid-template-columns: 1fr;
|
||||
align-items: stretch;
|
||||
#navigation-arrow {
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
fill: currentColor;
|
||||
transform: rotate(0deg);
|
||||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms linear;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#navigation-footer p {
|
||||
display: grid;
|
||||
gap: .15rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#navigation-mode {
|
||||
overflow: hidden;
|
||||
font-size: .78rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#navigation-distance {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.route-list button:hover {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 .2rem .55rem rgba(0, 0, 0, .13);
|
||||
}
|
||||
|
||||
.app-page > header .back-button.ui-button:hover,
|
||||
.app-page > header .back-button.ui-button:focus,
|
||||
#start-tracking.ui-button:hover,
|
||||
#start-tracking.ui-button:focus {
|
||||
background: var(--primary-dark);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 420px) {
|
||||
@media (max-width: 32rem) {
|
||||
.search-row {
|
||||
grid-template-columns: minmax(0, 1fr) 3rem;
|
||||
}
|
||||
|
||||
.route-facts {
|
||||
gap: .35rem;
|
||||
}
|
||||
|
||||
.route-facts div {
|
||||
padding: .6rem .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 22rem) {
|
||||
.route-facts {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
scroll-behavior: auto !important;
|
||||
transition-duration: .01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user