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> </div>
<style lang="less"> <style lang="less">
@import '../../styles/breakpoints.less';
.column { .column {
margin: 20px 10px; margin: 20px 10px;
width: 250px; width: 250px;
@media (max-width: 480px) { .one-column({
scroll-snap-align: center; scroll-snap-align: center;
} });
} }
header { header {

View File

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

View File

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

View File

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

View File

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