quarante-douze
/
qdouze2-wordpress-theme
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
scss/components/_cards.scss
View File

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

20
scss/components/_menus.scss
View File

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

5
scss/custom/_global.scss
View File

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

7
scss/definitions/_sizing.scss
View File

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

10
scss/mixins/_panels.scss
View File

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

164
style.css
View File

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