keb/jpg-quartz
1
0
Fork 0
mirror of https://github.com/ZetaKebab/quartz.git synced 2025-01-14 22:18:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Better CSS styling fitting the needs of the project

Browse Source 
Bigger sizing mostly, also bigger popovers
Readjustment of some components
This commit is contained in:
Théo Marchal 2024-05-22 16:58:08 +02:00
parent a7f550d69f
commit 784f17d83d
2 changed files with 78 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
quartz/styles/custom.scss
View File

@ -88,20 +88,21 @@ ul.overflow::after, ol.overflow::after {
font-size: 1.15rem;
}
& h4 {
font-size: 1.3rem;
}
& h3 {
font-size: 1.5rem;
& h1 {
font-size: 2rem;
margin-top: 1.25rem;
}
& h2 {
font-size: 1.7rem;
}
& h1 {
font-size: 2rem;
& h3 {
font-size: 1.5rem;
}
& h4 {
font-size: 1.3rem;
}
}
@ -116,7 +117,51 @@ ul.overflow::after, ol.overflow::after {
margin-top: 0;
}
}
.sidebar {
gap: 1rem;
margin-top: 1.25rem;
}
.sidebar.left {
@media all and (min-width: $maxFullPageWidth) {
left: calc(50vw - 900px);
}
@media all and (max-width: $maxFullPageWidth) {
left: calc(50vw - 790px);
}
}
.sidebar.right {
@media all and (min-width: $maxFullPageWidth) {
right: calc(50vw - 900px);
}
@media all and (max-width: $maxFullPageWidth) {
right: calc(50vw - 790px);
}
}
}
}
.page .center, .page footer {
@media all and (min-width: $maxFullPageWidth) {
width: 950px;
}
@media all and (max-width: $maxFullPageWidth) {
width: 800px;
}
@media all and (max-width: $mobileBreakpoint) {
width: initial;
}
}
.page .page-header {
margin-top: 0;
width: initial;
}
.breadcrumb-container {
margin-top: 1.25rem;
}
hr {
@ -136,6 +181,27 @@ footer {
}
// Align dark mode and search
.page > #quartz-body .sidebar.right {
flex-direction: row;
gap: 1rem;
}
.darkmode.desktop-only {
margin:unset;
margin-top:0.25rem;
}
// Bigger popover
.popover {
& > .popover-inner {
width: 45rem;
max-height: 45rem;
}
}
// Usage

1
quartz/styles/variables.scss
View File

@ -4,6 +4,7 @@ $tabletBreakpoint: 1000px;
$sidePanelWidth: 380px;
$topSpacing: 2rem;
$fullPageWidth: $pageWidth + 2 * $sidePanelWidth;
$maxFullPageWidth: $fullPageWidth + 250px;
$boldWeight: 700;
$semiBoldWeight: 600;
$normalWeight: 400;