Hello! I am very new to Ghost, CSS, and typography, and have a question about all three as they relate to Ghost. After fiddling around with the layout of a theme I am building for my website, I went back to the drawing board and figured out where the default typographic settings were found so I could see what I was messing with (from the theme’s root directory, they are in /node_modules/@tryghost/shared-theme-assets/assets/css/v1/components/content.css). So now I am going through that file piece by piece and recreating it with my own options via code injection. (I may ultimately move that stuff to my custom theme’s css files, but this seems faster.)
Eventually I will have to sort out all the logic in that file dealing with conditional top and bottom margins based on the sequence of content elements (i.e., put this margin above a header UNLESS the previous content element was also a header or whatever), but for now I am just trying to get paragraphs, lists, and blockquotes how I want them. I’ve chosen and installed the body font I want, and figured out how to scale the text to get around 60 characters per line in paragraphs. The default layout (I am using the London theme, but I think it leaves the grid alone) has a center column that scales up to 720px (I think?) and what I want is to leave the image widths alone but set any text about 100px narrower (at the largest size.) I figured out I could do this for paragraphs with the width, like this:
.gh-content > P {
width: min(620px, 86%);
font-size: clamp(15px, 2.4552vw, 21px);
line-height: 1.46;
font-variant-numeric: oldstyle-nums;
margin-top: 0;
margin-bottom: 1em;
margin-left: auto;
margin-right: auto;
hyphens: auto;
-webkit-hyphens: auto;
text-wrap: pretty;
}
(The font sizing and line breaks aren’t perfect yet but I am tweaking that further.) But this basically centers the paragraph, which causes me trouble when I am trying to deal with lists, blockquotes, anything that should be indented. Is there a way to do this with left-margin instead of width so that it preserves / scales indentation from one element to the next? I guess I don’t entirely understand how the columns in the grid are scaling or how change that (without still letting images or video or other stuff use the full 720 pixels.) How have people approached typography / line length without breaking the rest of the layout?