global media queries & sidebar style rewrite
This commit is contained in:
parent
d5f298b5a8
commit
67159abf39
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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 {
|
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%;
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
<SvelteToast />
|
<SvelteToast />
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style lang="less">
|
||||||
div {
|
div {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue