I am building a quarto blog site and it seems that regardless of the quarto themes I use, somehow I end up with a index listing page that has excessive white space between the left edge of the descriptions, a small thumbnail image and the column space where categories would appear.
https://quartopub.com/sites/7b224868-9c1b-48fb-96db-93041fdc80ef
Here is my in-progress _quarto.yml file and below that is my css file. I'd like to be more efficiently using the whitespace horizontally.
thanks in advance.
title: "Quarks, Spacetime, and the Big Bang"
#author: "Chip Brock"
from: markdown+emoji
project:
type: website
output-dir: docs
render:
- "*.qmd"
- "!about3.qmd"
#- about2.qmd
#- index.qmd
#- about.qmd
#- about2.qmd
toc: true
number-sections: true
highlight-style: pygments
website:
draft-mode: unlinked
#title: "Quarks, Spacetime, and the Big Bang"
title: "<img src='/images/logo_orange_words.png' class='site-logo'/> Quarks, Spacetime, and the Big Bang"
page-navigation: true
back-to-top-navigation: true
navbar:
left:
- text: 👉 start here
href: QSBB.qmd
- text: 👉 then here
href: once_upon.qmd
- text: 📖 blog
href: blog.qmd
#- text: about me
# menu:
# - me-in-2-seconds.qmd
# - CV.qmd
# - teaching.qmd
# - research.qmd
# - professional.qmd
#- me.qmd
#- QSBB.qmd
#- text: sandbox_working
# href: sandbox_working.qmd
- text: 🗑️ just a theory?
href: trigger.qmd
#- text: 📜 musings
# href: musings/index.qmd
- text: topics
menu:
- text: Nature of Science (NOS)
href: NOS/index.qmd
#- text: All Stories
# href: stories.qmd
#- text: interesting posts
# href: posts/index.qmd
- text: Particle Bios
href: particle-bios/index.qmd
- text: Feynman Diagrams
href: feynman-diagrams/index.qmd
- text: Math Review
href: math/index.qmd
- text: words
href: Words/index.qmd
# - text: Musings
# href: musings/index.qmd
#- stories.qmd
#- teaching.qmd
#- research.qmd
#- professional.qmd
#- about3.qmd
#- authoring.qmd
sidebar:
- id: id-feynman_diagrams
title: "cheese"
style: "docked"
background: light
- id: id-particle_bio
title: "particles"
style: "docked"
background: light
format:
html:
code-fold: true
theme:
light: simplex
dark: darkly
css: styles.css
grid:
body-width: 900px
mainfont: "EB Garamond, Georgia, serif"
toc: true
reading-time: true
html-math-method: mathjax
mathjax:
options:
chtml:
scale: 0.8 # or try 0.85 to reduce more
#reference-location: margin
css:
/* css styles */
.article-style p {
font-size: 2.1rem;
}
#quarto-document-content p {
font-size: 1.2rem;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}
/* menu logo size */
.navbar-title .site-logo {
height: 4em !important;
vertical-align: middle;
margin-right: 0.4em;
}
/* logo */
.navbar-brand {
display: flex;
align-items: center;
color: #ff6600 !important; /* or any color you want */
}
.navbar-brand:hover {
color: #4563A7 !important;
}
.navbar-title {
font-size: 1.2rem; /* Increase this value as needed */
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
}
#quarto-document-content p {
font-size: 1.3rem;
/*font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;*/
}
/* Increase font size for the list of posts and descriptions under ## Posts */
main ul {
font-size: 1.2rem;
}
body h1 {
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
font-size: 1.55rem !important;
color: #4563A7 !important;
}
/*-- this makes the heading h2 blue */
body h2 {
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
font-size: 1.3rem !important;
color: #4563A7 !important;
}
body h3 {
font-size: 1.25rem !important;
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
color: rgba(0, 0, 0, 0.45) !important;
}
body h4 {
font-size: 0.5rem !important;
}
body h5 {
font-size: 1.3rem !important;
}
body h6 {
font-size: 1.1rem !important;
}
/* vertical spacing for the title of posts */
.quarto-title h1.title {
margin-top: 1.2rem !important;
padding-top: 0rem !important;
}
/* Targets the thumbnail images on listing pages */
.quarto-post .thumbnail-image {
width: 90px !important;
height: auto;
border-radius: 6px;
border: 1px solid #ccc;
}
/* tables */
.centered-table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
text-align: center;
font-size: 0.5rem;
border: none;
}
.centered-table th,
.centered-table td {
border: none !important;
padding: 0.2em 0.5em; /* adjust padding as needed */
}
.custom-table {
margin: 2em auto;
border-collapse: collapse;
text-align: center;
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
font-size: 1.rem;
max-width: 120rem;
}
.custom-table td {
padding: 3.5em 1.em;
border: none;
}
.margin-figure {
display: block;
margin-left: auto;
margin-right: auto;
width: fit-content;
text-align: center;
}
.margin-figure p {
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
font-size: 0.9em;
margin-top: 0.3em;
}
/* Smaller titles in listings */
.quarto-listing-title {
font-size: 1.8rem; /* or 90%, or whatever you like */
}
/*.callout.callout-style-default .callout-body {
font-family: "Helvetica", "Helvetica Neue", Arial, sans-serif;
font-size: 0.8rem;
}*/
/* Define a custom paragraph style */
.small-links a {
color: #444444 !important; /* normal link color */
font-family: Helvetica, Arial, sans-serif !important;
font-size: 0.8em !important;
text-decoration: none; /* optional: remove underline */
}
.small-links a:hover {
color: #007acc !important; /* hover color */
text-decoration: underline; /* optional: underline on hover */
}
/* Listing title (e.g. post headline) */
.listing-title {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 1.5em !important;
color: #333333 !important;
}
/* Listing description (summary or excerpt) */
.listing-description {
font-family: Helvetica, Arial, sans-serif !important;
font-size: 1.2em !important;
color: #666666 !important;
}
div.quarto-post .thumbnailappliesflex-basis: 30%, so you'll probably want to overwrite that. (And also modify the 45% applied todiv.quarto-post .bodyaccordingly.)