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 @@