new fonts, adjust layout

This commit is contained in:
semanticdata 2023-11-22 22:27:33 -06:00
parent 03eafa336d
commit d8badc00bb
8 changed files with 41 additions and 45 deletions

View File

@ -14,20 +14,20 @@ const config: QuartzConfig = {
defaultDateType: "created",
theme: {
typography: {
header: "Schibsted Grotesk",
body: "Source Sans Pro",
code: "IBM Plex Mono",
header: "Bitter", // Schibsted Grotesk
body: "Poppins", // Source Sans Pro
code: "Fira Mono", // IBM Plex Mono
},
colors: {
lightMode: {
light: "#faf8f8",
lightgray: "#e5e5e5",
gray: "#b8b8b8",
// darkgray: "#4e4e4e",
darkgray: "#2e2e2e",
darkgray: "#4e4e4e",
// darkgray: "#2e2e2e",
dark: "#2b2b2b",
// secondary: "#284b63",
secondary: "#152733",
secondary: "#284b63",
// secondary: "#152733",
tertiary: "#84a59d",
highlight: "#8f9fa926",
},

View File

@ -31,27 +31,23 @@ export const defaultContentPageLayout: PageLayout = {
Component.Search(),
Component.Darkmode(),
Component.DesktopOnly(Component.Explorer(
{
mapFn: (node) => {
// dont change name of root node
if (node.depth > 0) {
// set emoji for file/folder
if (node.file) {
node.displayName = "📄 " + node.displayName
}
else { node.displayName = "📁 " + node.displayName }
}
},
}
// {
// mapFn: (node) => {
// // dont change name of root node
// if (node.depth > 0) {
// // set emoji for file/folder
// if (node.file) {
// node.displayName = "📄 " + node.displayName
// }
// else { node.displayName = "📁 " + node.displayName }
// }
// },
// }
)),
Component.DesktopOnly(Component.TableOfContents()),
// Component.RecentNotes(),
],
right: [
Component.Graph(),
// Component.DesktopOnly(Component.Backlinks()),
// Component.MobileOnly(Component.Backlinks()),
Component.Backlinks(),
right: [
Component.Graph(),
Component.Backlinks(),
],
}
@ -63,6 +59,6 @@ export const defaultListPageLayout: PageLayout = {
Component.MobileOnly(Component.Spacer()),
Component.Search(),
Component.Darkmode(),
],
Component.DesktopOnly(Component.Explorer({ folderClickBehavior: "link", }))],
right: [],
}

View File

@ -13,7 +13,7 @@ export default ((opts?: Options) => {
return (
<footer class={`${displayClass ?? ""}`}>
<hr />
<p>© {year} Miguel Pimentel · Created with <a href="https://quartz.jzhao.xyz/">Quartz</a>.
<p>© {year} Miguel Pimentel · Powered by <a href="https://quartz.jzhao.xyz/">Quartz</a>.
</p>
<ul>
{Object.entries(links).map(([text, link]) => (

View File

@ -90,7 +90,7 @@ svg {
& div > a {
color: var(--secondary);
font-family: var(--headerFont);
font-size: 0.95rem;
font-size: 0.95rem; // 0.95
font-weight: 600;
line-height: 1.5rem;
display: inline-block;
@ -113,7 +113,7 @@ svg {
font-family: var(--headerFont);
& p {
font-size: 0.95rem;
font-size: 1.1rem; // 0.95
display: inline-block;
color: var(--secondary);
font-weight: 600;

View File

@ -31,10 +31,11 @@
font-family: var(--bodyFont);
border: 1px solid var(--lightgray);
background-color: var(--light);
border-radius: 5px;
border-radius: 8px; // 5px
box-shadow: 6px 6px 36px 0 rgba(0, 0, 0, 0.25);
overflow: auto;
white-space: normal;
scrollbar-width: none;
}
h1 {

View File

@ -1,4 +1,6 @@
button#toc {
margin-top: 2rem;
all: unset;
background-color: transparent;
border: none;
text-align: left;
@ -17,7 +19,7 @@ button#toc {
& .fold {
margin-left: 0.5rem;
transition: transform 0.3s ease;
// opacity: 0.8;
opacity: 0.8;
}
&.collapsed .fold {

View File

@ -45,7 +45,7 @@ ul,
.math {
color: var(--darkgray);
fill: var(--darkgray);
// overflow-wrap: anywhere;
overflow-wrap: anywhere;
hyphens: auto;
}
@ -157,9 +157,12 @@ a {
align-items: center;
}
}
& .sidebar.right {
right: calc(calc(100vw - $pageWidth) / 2 - $sidePanelWidth);
@media all and (max-width: $fullPageWidth) {
flex-direction: column;
}
& > * {
@media all and (max-width: $fullPageWidth) {
flex: 1;
@ -459,8 +462,9 @@ video {
ul.overflow,
ol.overflow {
max-height: 400;
max-height: 500; // 400
overflow-y: auto;
scrollbar-width: thin;
// clearfix
content: "";
@ -479,8 +483,9 @@ ol.overflow {
left: 0;
bottom: 0;
opacity: 1;
transition: opacity 0.3s ease;
background: linear-gradient(transparent 0px, var(--light));
// Removes opacity fade
// transition: opacity 0.3s ease;
// background: linear-gradient(transparent 0px, var(--light));
}
}

View File

@ -1,11 +1,3 @@
@use "./base.scss";
// put your custom CSS here!
.article-title {
padding-bottom: 1rem;
}
.graph {
padding-bottom: 3rem;
}