fix: retrecir sidebar

Fixes #13
This commit is contained in:
Kazhnuz Klappsthul 2023-05-02 11:51:10 +02:00
parent b62f217bbd
commit d97c7b9df6
6 changed files with 108 additions and 111 deletions

View File

@ -5,8 +5,8 @@
*
*/
$card-bigpad: $lineheight;
$card-smallpad: $lineheight_half;
$card-bigpad: $lineheight_rel;
$card-smallpad: $lineheight_rel / 4;
.card {
@include panel($card-bigpad);
@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
&::before {
font-family: "ForkAwesome";
content:$symbol;
padding-right:$lineheight_half;
padding-right: $lineheight_rel / 4;
}
}
}
@ -52,11 +52,8 @@ ul.card-list, .card > ul {
padding:0;
margin:0;
li.list-element {
line-height:$lineheight;
padding-right:$lineheight_half;
padding-left:$lineheight_quarter;
padding-top:$lineheight_quarter;
padding-bottom:$lineheight_quarter;
line-height:$lineheight_rel / 2;
padding: $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 4, $lineheight_rel / 2;
margin:0;
}
}

View File

@ -3,7 +3,6 @@
.menu {
display: flex;
flex-direction: column;
padding: $lineheight/4;
ul,
li {
@ -16,8 +15,8 @@
a:visited {
@include shape-style($lineheight_half);
display: flex;
line-height: $lineheight;
padding: $lineheight_quarter;
line-height: $lineheight_rel;
padding: $lineheight_rel / 4;
margin: 0;
justify-content: space-between;
align-items: center;
@ -72,6 +71,7 @@
.toolbar {
flex-direction: row;
padding: $lineheight_rel/4;
ul {
display: flex;
@ -89,9 +89,9 @@
strong,
&.toolbar-element {
display: block;
padding: $lineheight/3;
padding-left: $lineheight/2;
padding-right: $lineheight/2;
padding: $lineheight_rel/3;
padding-left: $lineheight_rel/2;
padding-right: $lineheight_rel/2;
}
}
}
@ -102,12 +102,12 @@ ul.menu h1,
.menu h2,
ul.menu h2 {
position: relative;
left: -$lineheight_quarter;
left: -$lineheight_rel / 4;
font-weight: $fontweight_hyper;
padding-top: $lineheight_quarter;
padding-bottom: $lineheight_quarter;
padding-top: $lineheight_rel / 4;
padding-bottom: $lineheight_rel / 4;
font-size:1em;
line-height:$lineheight;
line-height:$lineheight_rel;
}
.menu-label {

View File

@ -100,13 +100,13 @@ header h1 {
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: $lineheight;
column-gap: 3rem;
column-gap: 1.5rem;
grid-template-areas:
"main"
"side";
@include lg() {
grid-template-columns: auto 360px;
grid-template-columns: auto 300px;
grid-template-areas: "main side";
}
}
@ -117,6 +117,7 @@ header h1 {
.sidebar {
grid-area: side;
font-size: 0.8rem;
}
ul.tag-list {

View File

@ -6,15 +6,16 @@ $baseline: 1.6;
$lineheight: $baseline * 1rem;
$lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4;
$lineheight_rel: $baseline * 1em;
$card-header-vmargin: 0px;
$card-header-hmargin: 0px;
$card-header-padding: $lineheight;
$card-header-padding: $lineheight_rel;
$card-header-width: 100%;
$card-header-position:0px;
// Buttons
$button_large: $lineheight;
$button_small: $lineheight_quarter;
$button_large: $lineheight_rel;
$button_small: $lineheight_rel / 4;
$button-group-margin: 0;
// Responsives sizes

View File

@ -33,9 +33,9 @@
padding-right:$card-header-padding;
padding-bottom: $size/2!important;
margin:$card-header-hmargin;
margin-bottom:$lineheight_half;
margin-top:$lineheight_half;
line-height:$lineheight;
margin-bottom:$lineheight_rel / 2;
margin-top:$lineheight_rel / 2;
line-height:$lineheight_rel;
white-space: nowrap;
position:relative;
@ -55,11 +55,11 @@
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont;
font-size:1rem;
font-size:1em;
padding:0px;
margin:0px;
color:$color-font-light;
font-weight: $fontweight_big;
line-height:$lineheight;
line-height:$lineheight_rel;
}
}

164
style.css
View File

@ -1040,11 +1040,11 @@ code {
*
*/
.btn {
padding: 1.6rem;
padding-top: 0.5333333333rem;
padding-bottom: 0.5333333333rem;
margin: 0.8rem;
margin-top: 0.5333333333rem;
padding: 1.6em;
padding-top: 0.5333333333em;
padding-bottom: 0.5333333333em;
margin: 0.8em;
margin-top: 0.5333333333em;
margin-bottom: 1.6rem;
line-height: 1.6rem;
height: auto;
@ -1061,11 +1061,11 @@ code {
margin-bottom: 0; }
.btn-small, .badge {
padding: 0.4rem;
padding-top: 0.1333333333rem;
padding-bottom: 0.1333333333rem;
margin: 0.2rem;
margin-top: 0.1333333333rem;
padding: 0.4em;
padding-top: 0.1333333333em;
padding-bottom: 0.1333333333em;
margin: 0.2em;
margin-top: 0.1333333333em;
margin-bottom: 1.6rem;
line-height: 1.6rem;
height: auto;
@ -1074,18 +1074,18 @@ code {
background-color: transparent;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
font-weight: 400;
padding-left: 0.4rem;
padding-right: 0.4rem;
padding-left: 0.4em;
padding-right: 0.4em;
text-decoration: none; }
.btn-small:hover, .btn-small:active, .badge:hover, .badge:active {
background-color: transparent; }
strong.btn-fake {
padding: 1.6rem;
padding-top: 0.5333333333rem;
padding-bottom: 0.5333333333rem;
margin: 0.8rem;
margin-top: 0.5333333333rem;
padding: 1.6em;
padding-top: 0.5333333333em;
padding-bottom: 0.5333333333em;
margin: 0.8em;
margin-top: 0.5333333333em;
margin-bottom: 1.6rem;
line-height: 1.6rem;
height: auto;
@ -1124,7 +1124,7 @@ strong.btn-fake {
border-color: transparent; }
.btn-toolbar {
padding: 0 1.6rem; }
padding: 0 1.6em; }
.btn-group > .btn {
border-radius: 4px 4px 4px 4px;
@ -1161,11 +1161,11 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
display: none; }
.breadcrumb li.breadcrumb-item a, .breadcrumb li.breadcrumb-item > span {
display: inline-block;
padding: 1.6rem;
padding-top: 0.5333333333rem;
padding-bottom: 0.5333333333rem;
margin: 0.8rem;
margin-top: 0.5333333333rem;
padding: 1.6em;
padding-top: 0.5333333333em;
padding-bottom: 0.5333333333em;
margin: 0.8em;
margin-top: 0.5333333333em;
margin-bottom: 1.6rem;
line-height: 1.6rem;
height: auto;
@ -1215,11 +1215,11 @@ nav.pagination {
text-align: center;
width: 100%; }
nav.pagination .page-numbers, nav.pagination .next, nav.pagination .prev {
padding: 0.4rem;
padding-top: 0.1333333333rem;
padding-bottom: 0.1333333333rem;
margin: 0.2rem;
margin-top: 0.1333333333rem;
padding: 0.4em;
padding-top: 0.1333333333em;
padding-bottom: 0.1333333333em;
margin: 0.2em;
margin-top: 0.1333333333em;
margin-bottom: 1.6rem;
line-height: 1.6rem;
height: auto;
@ -1228,10 +1228,10 @@ nav.pagination {
background-color: transparent;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
font-weight: 400;
padding-left: 0.4rem;
padding-right: 0.4rem;
margin-right: 0.05rem;
margin-left: 0.05rem;
padding-left: 0.4em;
padding-right: 0.4em;
margin-right: 0.05em;
margin-left: 0.05em;
text-decoration: none; }
nav.pagination .page-numbers:hover, nav.pagination .page-numbers:active, nav.pagination .next:hover, nav.pagination .next:active, nav.pagination .prev:hover, nav.pagination .prev:active {
background-color: transparent; }
@ -1270,14 +1270,14 @@ nav.pagination {
flex-direction: column;
color: #212529; }
.card > * {
margin-left: 0.8rem;
margin-right: 0.8rem; }
margin-left: 0.8em;
margin-right: 0.8em; }
.card > *:first-child, .card > *.sr-only:first-child ~ * {
margin-top: 1.6rem; }
margin-top: 1.6em; }
.card > *:first-child.card-header, .card > *.sr-only:first-child ~ *.card-header {
margin-top: 0px; }
.card > *:last-child {
margin-bottom: 1.6rem; }
margin-bottom: 1.6em; }
.card > *:last-child.card-header {
margin-bottom: 0px; }
.card-body {
@ -1285,14 +1285,14 @@ nav.pagination {
.card-header {
font-size: 1.1em;
font-weight: 300;
padding: 0.8rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-bottom: 0.8rem !important;
padding: 0.8em;
padding-left: 1.6em;
padding-right: 1.6em;
padding-bottom: 0.8em !important;
margin: 0px;
margin-bottom: 0.8rem;
margin-top: 0.8rem;
line-height: 1.6rem;
margin-bottom: 0.8em;
margin-top: 0.8em;
line-height: 1.6em;
white-space: nowrap;
position: relative;
left: 0px;
@ -1309,12 +1309,12 @@ nav.pagination {
border-bottom-right-radius: 8px; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6, .card-header h7, .card-header h8, .card-header h9, .card-header h10 {
font-family: Open Sans, sans-serif;
font-size: 1rem;
font-size: 1em;
padding: 0px;
margin: 0px;
color: #fefefe;
font-weight: 300;
line-height: 1.6rem; }
line-height: 1.6em; }
.card-header .fa {
margin-right: 0.5em; }
@ -1323,11 +1323,8 @@ ul.card-list, .card > ul {
padding: 0;
margin: 0; }
ul.card-list li.list-element, .card > ul li.list-element {
line-height: 1.6rem;
padding-right: 0.8rem;
padding-left: 0.4rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
line-height: 0.8em;
padding: 0.4em, 0.4em, 0.4em, 0.8em;
margin: 0; }
.list-check li.list-element {
@ -1335,14 +1332,14 @@ ul.card-list, .card > ul {
.list-check li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.8rem; }
padding-right: 0.4em; }
.list-cross li.list-element {
list-style: none; }
.list-cross li.list-element::before {
font-family: "ForkAwesome";
content: "";
padding-right: 0.8rem; }
padding-right: 0.4em; }
.list-danger li.list-element::before {
color: #e33d22; }
@ -1353,14 +1350,14 @@ ul.card-list, .card > ul {
.smallcard-header {
font-size: 1.1em;
font-weight: 300;
padding: 0.8rem;
padding-left: 1.6rem;
padding-right: 1.6rem;
padding-bottom: 0.8rem !important;
padding: 0.8em;
padding-left: 1.6em;
padding-right: 1.6em;
padding-bottom: 0.8em !important;
margin: 0px;
margin-bottom: 0.8rem;
margin-top: 0.8rem;
line-height: 1.6rem;
margin-bottom: 0.8em;
margin-top: 0.8em;
line-height: 1.6em;
white-space: nowrap;
position: relative;
left: 0px;
@ -1377,18 +1374,17 @@ ul.card-list, .card > ul {
border-bottom-right-radius: 8px; }
.smallcard-header h1, .smallcard-header h2, .smallcard-header h3, .smallcard-header h4, .smallcard-header h5, .smallcard-header h6, .smallcard-header h7, .smallcard-header h8, .smallcard-header h9, .smallcard-header h10 {
font-family: Open Sans, sans-serif;
font-size: 1rem;
font-size: 1em;
padding: 0px;
margin: 0px;
color: #fefefe;
font-weight: 300;
line-height: 1.6rem; }
line-height: 1.6em; }
/* Menu handling */
.menu {
display: flex;
flex-direction: column;
padding: 0.4rem; }
flex-direction: column; }
.menu ul,
.menu li {
list-style: none;
@ -1400,8 +1396,8 @@ ul.card-list, .card > ul {
border-radius: 4px 4px 4px 4px;
background-color: transparent;
display: flex;
line-height: 1.6rem;
padding: 0.4rem;
line-height: 1.6em;
padding: 0.4em;
margin: 0;
justify-content: space-between;
align-items: center;
@ -1434,7 +1430,8 @@ ul.card-list, .card > ul {
outline-color: #212529; }
.toolbar {
flex-direction: row; }
flex-direction: row;
padding: 0.4em; }
.toolbar ul {
display: flex;
flex-direction: row;
@ -1446,9 +1443,9 @@ ul.card-list, .card > ul {
.toolbar li em,
.toolbar li strong, .toolbar li.toolbar-element {
display: block;
padding: 0.5333333333rem;
padding-left: 0.8rem;
padding-right: 0.8rem; }
padding: 0.5333333333em;
padding-left: 0.8em;
padding-right: 0.8em; }
.menu-divider,
.menu ul h1,
@ -1456,20 +1453,20 @@ ul.menu h1,
.menu h2,
ul.menu h2 {
position: relative;
left: -0.4rem;
left: -0.4em;
font-weight: 800;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
padding-top: 0.4em;
padding-bottom: 0.4em;
font-size: 1em;
line-height: 1.6rem; }
line-height: 1.6em; }
.menu-label {
border: 0px solid rgba(0, 0, 0, 0.3);
border-radius: 4px 4px 4px 4px;
background-color: transparent;
transition: background-color .2s, border .2s, box-shadow .2s, color .2s;
padding-left: 0.4rem;
padding-right: 0.4rem; }
padding-left: 0.4em;
padding-right: 0.4em; }
.menu-label:hover, .menu-label:active {
background-color: transparent; }
@ -1480,17 +1477,17 @@ ul.menu h2 {
border: none;
margin: 0;
margin-bottom: 1.6rem;
padding: 0.8rem;
padding: 0.4em;
font-size: 0.8rem; }
.toast > * {
margin-left: 0.4rem;
margin-right: 0.4rem; }
margin-left: 0.2em;
margin-right: 0.2em; }
.toast > *:first-child, .toast > *.sr-only:first-child ~ * {
margin-top: 0.8rem; }
margin-top: 0.4em; }
.toast > *:first-child.card-header, .toast > *.sr-only:first-child ~ *.card-header {
margin-top: 0px; }
.toast > *:last-child {
margin-bottom: 0.8rem; }
margin-bottom: 0.4em; }
.toast > *:last-child.card-header {
margin-bottom: 0px; }
.toast a {
@ -2649,17 +2646,18 @@ header h1 {
grid-template-columns: 1fr;
grid-template-rows: auto;
row-gap: 1.6rem;
column-gap: 3rem;
column-gap: 1.5rem;
grid-template-areas: "main" "side"; }
@media (min-width: 992px) {
.container-blog {
grid-template-columns: auto 360px;
grid-template-columns: auto 300px;
grid-template-areas: "main side"; } }
.fullwidth {
grid-column: span 2; }
.sidebar {
grid-area: side; }
grid-area: side;
font-size: 0.8rem; }
ul.tag-list {
display: flex;