162 lines
2.7 KiB
SCSS
162 lines
2.7 KiB
SCSS
|
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic */
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Main Grid */
|
||
|
|
|
||
|
|
body.layout-generic {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: min-content 1fr;
|
||
|
|
grid-template-rows: min-content 1fr min-content;
|
||
|
|
gap: 0;
|
||
|
|
|
||
|
|
& > nav {
|
||
|
|
grid-column: 1;
|
||
|
|
grid-row: 1 / span 2;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
z-index: #{$z-index-sidebar};
|
||
|
|
}
|
||
|
|
|
||
|
|
& > header {
|
||
|
|
grid-column: 2;
|
||
|
|
grid-row: 1;
|
||
|
|
|
||
|
|
// Inner content
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: 1fr min-content;
|
||
|
|
grid-template-rows: min-content;
|
||
|
|
|
||
|
|
& > h1 {
|
||
|
|
grid-column: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > #lang-selector {
|
||
|
|
grid-column: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
& > main {
|
||
|
|
grid-column: 2;
|
||
|
|
grid-row: 2;
|
||
|
|
overflow-x: hidden;
|
||
|
|
overflow-y: auto;
|
||
|
|
position: relative; // Helps with some absolute alignments inside it
|
||
|
|
}
|
||
|
|
|
||
|
|
& > footer {
|
||
|
|
grid-column: 1 / span 2;
|
||
|
|
grid-row: 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Mobile Fixes */
|
||
|
|
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
body.layout-generic {
|
||
|
|
& > nav {
|
||
|
|
//border-right: 1px solid #{$color-border-all};
|
||
|
|
border-right: 1px solid #{$color-border-main};
|
||
|
|
}
|
||
|
|
|
||
|
|
& > header {
|
||
|
|
grid-column: 1 / span 2;
|
||
|
|
}
|
||
|
|
|
||
|
|
& > main {
|
||
|
|
grid-column: 1 / span 2;
|
||
|
|
// TODO: Remove scrolling here
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Sidebar */
|
||
|
|
|
||
|
|
body.layout-generic {
|
||
|
|
.sidebar {
|
||
|
|
width: #{$size-sidebar};
|
||
|
|
max-width: #{$size-sidebar};
|
||
|
|
min-height: 100%;
|
||
|
|
|
||
|
|
&.retracted {
|
||
|
|
width: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-entry {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Sidebar > Mobile Fixes */
|
||
|
|
|
||
|
|
// Inverting the sidebar's states for mobile devices
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
body.layout-generic {
|
||
|
|
.sidebar {
|
||
|
|
width: 0;
|
||
|
|
padding-left: 0;
|
||
|
|
padding-right: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
&.retracted {
|
||
|
|
width: #{$size-sidebar};
|
||
|
|
max-width: #{$size-sidebar};
|
||
|
|
min-height: 100%;
|
||
|
|
overflow: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
// Inherited from .p-m
|
||
|
|
padding-left: 1rem;
|
||
|
|
padding-right: 1rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sidebar-entry {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Main Extras */
|
||
|
|
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
body.layout-generic {
|
||
|
|
main {
|
||
|
|
border-left: 0 !important;
|
||
|
|
border-radius: 0 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media only screen and (min-width: 768px) {
|
||
|
|
body.layout-generic {
|
||
|
|
main {
|
||
|
|
&.expanded {
|
||
|
|
border-left: 0;
|
||
|
|
border-radius: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/* Site > Layouts > Generic > Transitions */
|
||
|
|
|
||
|
|
body.layout-generic {
|
||
|
|
main, .sidebar {
|
||
|
|
transition: width 0.4s, padding 0.4s, border-width 0.4s, border-radius 0.4s;
|
||
|
|
transition-timing-function: cubic-bezier(.25, .8, .25, 1.1);
|
||
|
|
}
|
||
|
|
}
|