search

chadbaldwin / simple-blog-bootstrap

This is a template repo you can use to set up a simple blog using GitHub Pages with SSMS Style T-SQL highlighting. Refer to the blog post below for more instructions.
https://chadbaldwin.net/2021/03/14/how-to-build-a-sql-blog.html
92 stars 56 forks source link

Change column width in browser? #5

Closed Metabloggism closed 1 year ago

Metabloggism commented 1 year ago

When I open my blog with this template in several browsers (Google Chrome, Microsoft Edge, Mozilla Firefox...) I see is as a ~half screen sized column. I would like it to take ~80% of the screen. I tried to edit in /includes/head.htm the following line:

<meta name="viewport" content="width=device-width, initial-scale=1">

to

But doesn't work.

How could I solve it?

chadbaldwin commented 1 year ago

I can try looking into this later as I don't currently have a computer to test local builds.

The content width is specified by the minima theme in this file: https://github.com/jekyll/minima/blob/2.5-stable/_sass/minima.scss#L24

The way Jekyll themes work is that they pull from a git repo...all the images, css, layouts, etc come from that repo linked above. However, if you ever want to change something, you can just create that file in your personal repo, and it will use your file instead.

This is why there is an /includes/head.html file, even though there is already one in the minima repository because I wanted to override some of the things they did. So I made a copy of it, and added my changes.

One way that might work is to create a new /assets/main.scss file, copying the original: https://github.com/jekyll/minima/blob/2.5-stable/assets/main.scss

And then changing it to:

---
# Only the main Sass file needs front matter (the dashes are enough)
---

$content-width: 80%;

@import "minima";

My guess is that it will set the variable, and then when it imports /_sass/minima.scss it will override the value of that variable due to the !default tag.

If that doesn't work, my second solution would probably be to just stick it in the includes/head.html file by adding this line:

<style>.wrapper { max-width: 80%; }</style>

Neither of these are tested, like I mentioned at the start, I don't have a computer I can use to do local builds right now. But I can try looking into this later.

Metabloggism commented 1 year ago

First of all sorry for the delay, I lost your response. Actually, the second solution worked like a charm for me! My current file. Closing this issue.