diff --git a/cista-front/src/App.vue b/cista-front/src/App.vue index 48b40a9..a7b5614 100644 --- a/cista-front/src/App.vue +++ b/cista-front/src/App.vue @@ -4,7 +4,7 @@ - +
diff --git a/cista-front/src/assets/main.css b/cista-front/src/assets/main.css index 109baaa..c8add70 100644 --- a/cista-front/src/assets/main.css +++ b/cista-front/src/assets/main.css @@ -8,6 +8,8 @@ --primary-color: #000; --accent-color: #f80; --transition-time: 0.2s; + /* The following are overridden by responsive layouts */ + --root-font-size: 1rem; --header-font-size: 1rem; --header-height: calc(8 * var(--header-font-size)); } @@ -19,13 +21,13 @@ --header-color: #ccc; } } -@media screen and (orientation: portrait) and (max-width: 600px) { +@media screen and (max-width: 600px) { .size, .modified { display: none; } } -@media screen and (orientation: landscape) and (min-width: 600px) { +@media screen and (orientation: landscape) and (min-width: 800px) { /* Breadcrumbs and buttons side by side */ header { display: flex; @@ -39,8 +41,8 @@ } } @media screen and (min-width: 800px) and (--webkit-min-device-pixel-ratio: 2) { - html { - font-size: 1.5rem; + :root { + --root-font-size: calc(16 * 100vw / 800); } header .buttons:has(input[type='search']) > div { display: none; @@ -49,9 +51,9 @@ display: inherit; } } -@media screen and (min-width: 1400px) and (--webkit-min-device-pixel-ratio: 3) { - html { - font-size: 2rem; +@media screen and (min-width: 1600px) and (--webkit-min-device-pixel-ratio: 3) { + :root { + --root-font-size: 2rem; } } @media screen and (max-height: 600px) { diff --git a/cista-front/src/components/BreadCrumb.vue b/cista-front/src/components/BreadCrumb.vue index 7e85bde..0573c41 100644 --- a/cista-front/src/components/BreadCrumb.vue +++ b/cista-front/src/components/BreadCrumb.vue @@ -2,7 +2,6 @@