global media queries & sidebar style rewrite

This commit is contained in:
Brieuc Dubois 2024-01-16 19:56:09 +01:00
parent d5f298b5a8
commit 67159abf39
7 changed files with 56 additions and 25 deletions

View File

@ -127,13 +127,15 @@
</div>
<style lang="less">
@import '../../styles/breakpoints.less';
.column {
margin: 20px 10px;
width: 250px;
@media (max-width: 480px) {
.one-column({
scroll-snap-align: center;
}
});
}
header {

View File

@ -106,7 +106,7 @@
<style lang="less">
header {
margin: 0 50px;
margin: 0 2%;
padding: 20px 0;
display: flex;
align-items: center;

View File

@ -107,16 +107,14 @@
{/if}
<style lang="less">
@import '../../styles/breakpoints.less';
section {
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
@media (min-width: 800px) {
margin-left: 250px;
width: calc(100vw - 250px);
}
flex-basis: 100%;
overflow: hidden;
}
.grid {
@ -124,7 +122,11 @@
flex-direction: row;
flex: 1;
overflow: scroll;
padding: 0 40px;
padding: 0 2%;
scroll-snap-type: x mandatory;
.one-column({
padding-left: calc(50vw - (250px / 2));
});
}
</style>

View File

@ -46,7 +46,7 @@
<div id="branding">
<a href="/">
<span id="title">Focus.</span>
<span id="version">v0.3.2</span>
<span id="version">v0.3.4</span>
</a>
</div>
<div id="views">
@ -124,18 +124,19 @@
</button>
<style lang="less">
@import '../../styles/breakpoints.less';
nav {
position: fixed;
position: sticky;
top: 0;
left: 0;
bottom: 0;
width: 250px;
flex-shrink: 0;
width: clamp(200px, 20vw, 300px);
height: 100vh;
background-color: #273049;
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 2rem;
transition: transform 0.3s ease-in-out;
}
.toggle {
@ -147,9 +148,6 @@
width: 50px;
height: 50px;
transform: scale(1);
transition-property: left, transform;
transition-duration: 0.3s;
transition-timing-function: ease-in-out;
&:hover {
cursor: pointer;
@ -161,20 +159,26 @@
}
&.open {
left: 195px;
left: auto;
right: 5px;
transform: scaleX(-1);
}
}
@media (max-width: 800px) {
nav.hidden {
transform: translateX(-100%);
.nosidebar({
nav {
width: 100vw;
&.hidden {
width: 0;
display: none;
}
}
.toggle {
visibility: visible;
}
}
});
#branding {
display: flex;

View File

@ -0,0 +1,21 @@
@one-column: 480px;
.one-column(@rules) {
@media (max-width: @one-column) {
@rules();
}
}
@sidebar: 800px;
.sidebar(@rules) {
@media (min-width: @sidebar) {
@rules();
}
}
.nosidebar(@rules) {
@media (max-width: @sidebar) {
@rules();
}
}

View File

@ -49,12 +49,14 @@
h2 {
text-align: center;
margin-bottom: 40px;
font-size: 3rem;
}
ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 1.5rem;
}
#add {
width: 100%;

View File

@ -40,7 +40,7 @@
<SvelteToast />
{/if}
<style>
<style lang="less">
div {
display: flex;
}