global media queries & sidebar style rewrite
This commit is contained in:
parent
d5f298b5a8
commit
67159abf39
|
@ -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 {
|
||||
|
|
|
@ -106,7 +106,7 @@
|
|||
|
||||
<style lang="less">
|
||||
header {
|
||||
margin: 0 50px;
|
||||
margin: 0 2%;
|
||||
padding: 20px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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%;
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
<SvelteToast />
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
<style lang="less">
|
||||
div {
|
||||
display: flex;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue