Troplo/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

clean up and organize CSS, use ems for widths, use vars more

Browse source
This commit is contained in:
Henry Jameson 2022-04-10 14:23:30 +03:00
parent 4750d9bb4c
commit 0ff34f8a5a
1 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/App.scss
View file

@ -154,8 +154,8 @@ nav {
grid-column-end: span 3; grid-column-end: span 3;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
margin: 0 -0.5em; margin: 0 calc(var(--columnGap) * -2);
padding: 0 0.5em; padding: 0 calc(var(--columnGap) * 2);
pointer-events: none; pointer-events: none;
background-color: rgba(0, 0, 0, 0.15); background-color: rgba(0, 0, 0, 0.15);
background-color: var(--underlay, rgba(0, 0, 0, 0.15)); background-color: var(--underlay, rgba(0, 0, 0, 0.15));
@ -163,6 +163,10 @@ nav {
} }
.app-layout { .app-layout {
--miniColumn: 25em;
--maxiColumn: minmax(var(--miniColumn), 45em);
--columnGap: 1em;
position: relative; position: relative;
display: grid; display: grid;
grid-template-columns: var(--miniColumn) var(--maxiColumn); grid-template-columns: var(--miniColumn) var(--maxiColumn);
@ -173,39 +177,40 @@ nav {
height: calc(100vh - var(--navbar-height)); height: calc(100vh - var(--navbar-height));
align-content: flex-start; align-content: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 10px 0 10px; padding: 0 10px;
justify-content: center; justify-content: center;
--miniColumn: 345px;
--maxiColumn: minmax(345px, 615px);
.column { .column {
--___columnMargin: var(--columnGap);
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
box-sizing: border-box; box-sizing: border-box;
padding-top: 10px; padding-top: 10px;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 1; grid-row-end: 1;
margin: 0 0.5em; margin: 0 calc(var(--___columnMargin) / 2);
row-gap: 1em; row-gap: var(--___columnMargin);
align-content: start; align-content: start;
&.-scrollable { &.-scrollable {
--___paddingIncrease: calc(var(--columnGap) / 2);
padding-top: 10px; padding-top: 10px;
position: sticky; position: sticky;
top: 0; top: 0;
max-height: calc(100vh - var(--navbar-height)); max-height: calc(100vh - var(--navbar-height));
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin-left: -2em; margin-left: calc(var(--___paddingIncrease) * -1);
padding-left: 2.5em; padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
// Only show custom scrollbars on devices which // Only show custom scrollbars on devices which
// have a cursor/pointer to operate them // have a cursor/pointer to operate them
&:not(.-show-scrollbar) { &:not(.-show-scrollbar) {
scrollbar-width: none; scrollbar-width: none;
margin-right: -2em; margin-right: calc(var(--___paddingIncrease) * -1);
padding-right: 2.5em; padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
&::-webkit-scrollbar { &::-webkit-scrollbar {
display: block; display: block;