studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

Improve global layout structure and fix various styling issues #16

Browse source
This commit is contained in:
Timothée Goguely 2024-11-27 13:51:59 +01:00
parent 059e373a4a
commit b67896a4e9
11 changed files with 68 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/views/Inspirations.vue
View file

@ -1,11 +1,13 @@
<template>
<main>
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Selector
:all="page.inspirations"
@update:currentInspiration="changeInspiration"
/>
<main class="flex flex-col">
<header class="flex">
<h2 id="tabslist" class="sr-only">Inspirations</h2>
<Tabs :tabs="tabs" @update:currentTab="changeTab" />
<Selector
:all="page.inspirations"
@update:currentInspiration="changeInspiration"
/>
</header>
<section :id="currentTab" class="inspiration">
<Header
v-if="currentTab !== 'favorites'"
@ -88,25 +90,14 @@ function changeInspiration(newValue) {
</script>
<style scoped>
/* Header */
main > header {
align-items: flex-start;
justify-content: space-between;
gap: var(--space-16);
}
/* Tabs */
[role="tablist"] {
margin-left: 0;
}
/* Masonry */
@media (min-width: 40rem) {
.masonry {
column-count: 2;
}
}
@media (min-width: 65rem) {
.masonry {
column-count: 3;
}
}
@media (min-width: 90rem) {
.masonry {
column-count: 4;
}
}
</style>