2024-01-14 18:00:51 -08:00
|
|
|
$prefix: pf;
|
|
|
|
|
|
|
|
@import "variables";
|
2024-01-12 20:50:41 -08:00
|
|
|
|
2024-01-13 18:33:26 -08:00
|
|
|
// highlight transition speed
|
|
|
|
$hl-trn-spd: 0.2s;
|
|
|
|
|
2024-01-12 21:59:19 -08:00
|
|
|
@import 'mixins';
|
|
|
|
|
|
|
|
@import 'nav';
|
|
|
|
|
2024-01-14 18:00:51 -08:00
|
|
|
|
2024-01-12 20:50:41 -08:00
|
|
|
body {
|
2024-01-14 18:00:51 -08:00
|
|
|
background-color: var(--#{$prefix}-bg);
|
|
|
|
}
|
|
|
|
|
|
|
|
w-full {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.d-flex {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
.my-auto {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
|
|
|
}
|
|
|
|
.m-0 {
|
|
|
|
margin: 0px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.container {
|
|
|
|
width: 100%;
|
|
|
|
margin-right: auto;
|
|
|
|
margin-left: auto;
|
2024-01-12 20:50:41 -08:00
|
|
|
}
|
2024-01-12 21:59:19 -08:00
|
|
|
|
2024-01-14 18:00:51 -08:00
|
|
|
.row {
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
2024-01-12 21:59:19 -08:00
|
|
|
}
|
2024-01-13 18:33:26 -08:00
|
|
|
|
2024-01-14 18:00:51 -08:00
|
|
|
.col {
|
|
|
|
box-sizing: border-box;
|
2024-01-13 18:33:26 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
div#left-col {
|
|
|
|
width: 15vw;
|
|
|
|
padding: 10px;
|
2024-01-14 18:00:51 -08:00
|
|
|
background-color: var(--#{$prefix}-nav-bg);
|
2024-01-13 18:33:26 -08:00
|
|
|
}
|
|
|
|
|
|
|
|
div#main-body-content {
|
|
|
|
width: 70vw;
|
|
|
|
padding: 10px;
|
|
|
|
opacity: 1;
|
|
|
|
transition: opacity 0.2s ease-out;
|
|
|
|
}
|
|
|
|
div#main-body-content.htmx-swapping {
|
|
|
|
opacity: 0;
|
|
|
|
transition: opacity 0.2s ease-out;
|
|
|
|
}
|
|
|
|
div#main-body-content.htmx-added {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
div#right-col {
|
|
|
|
width: 15vw;
|
|
|
|
padding: 10px;
|
2024-01-14 18:00:51 -08:00
|
|
|
background-color: var(--#{$prefix}-nav-bg);
|
2024-01-13 18:33:26 -08:00
|
|
|
}
|