diff --git a/vue/src/assets/main.css b/vue/src/assets/main.css index ed226a9..47cf232 100644 --- a/vue/src/assets/main.css +++ b/vue/src/assets/main.css @@ -70,7 +70,7 @@ a, .feed-title { cursor: pointer; font-family: Glook, 'Courier New'; - font-size: clamp(1.25rem, 4.5vw, 1.6rem); + font-size: clamp(1.4rem, 5vw, 2rem); font-weight: bold; color: var(--color-accent-2); border-bottom: 1px solid #ccc; @@ -112,5 +112,6 @@ h3 { @media (min-width: 768px) { #app { padding: 0.75rem; + padding-top: var(--app-nav-height, 4.5rem); } } diff --git a/vue/src/components/RssFeeds.vue b/vue/src/components/RssFeeds.vue index ecb76df..6a6572c 100644 --- a/vue/src/components/RssFeeds.vue +++ b/vue/src/components/RssFeeds.vue @@ -325,7 +325,7 @@ onMounted(async () => { margin: 0; padding: 0 1rem; font-family: 'Courier New'; - font-size: clamp(1.75rem, 6vw, 2.75rem); + font-size: clamp(1.4rem, 5vw, 2rem); font-weight: bold; line-height: 1.15; color: var(--color-accent-2); diff --git a/vue/src/composables/useFeeds.js b/vue/src/composables/useFeeds.js index c84e3fd..5825304 100644 --- a/vue/src/composables/useFeeds.js +++ b/vue/src/composables/useFeeds.js @@ -290,9 +290,15 @@ function toggleViewMode() { } } -function toggleLayout() { +async function toggleLayout() { + if (observer) { + observer.disconnect() + observer = null + } layout.value = layout.value === 'list' ? 'cards' : 'list' localStorage.setItem('layout', layout.value) + await nextTick() + setupIntersectionObserver() } function nextArticle() {