diff --git a/assets/css/blog.css b/assets/css/blog.css index 5f2e432..54fcb8e 100644 --- a/assets/css/blog.css +++ b/assets/css/blog.css @@ -1,3 +1,7 @@ +* { + box-sizing: border-box; +} + img { /* Prevent images in blog posts from getting too big */ max-width: 800px; @@ -20,6 +24,10 @@ h1, h2, h3, h4 { max-width: 800px; } +.post-list-item-title { + color: #3498db; +} + .post { display: block; max-width: 1000px; @@ -33,7 +41,21 @@ h1, h2, h3, h4 { font-size: 21px; } +.text-content { + max-width: 1000px; +} + @media only screen and (max-width: 768px) { + .page-title { + /* The page header title otherwise overflows the page on small screens */ + font-size: 8vw; + } + + .text-content { + /* Otherwise the page content overflows the page */ + max-width: 100%; + } + .text { /* A smaller font looks better on smaller devices */ font-size: 19px; @@ -53,12 +75,22 @@ h1, h2, h3, h4 { } } -.post-title { - color: #3498db; -} - code { display: inline-block; - max-width: 100%; - overflow-y: auto; + padding: 0 3px; + border-radius: 3px; + + background-color: black; + line-height: 1.5; +} + +pre > code { + background-color: black; + line-height: 1.5; + border-radius: 3px; + + padding: 10px; + + width: 100%; + overflow-x: auto; } diff --git a/layout/item.html b/layout/item.html index cbf1001..ec38ee7 100644 --- a/layout/item.html +++ b/layout/item.html @@ -1,6 +1,6 @@
> {{ date }}
diff --git a/layout/page.html b/layout/page.html index 9041b38..665597f 100644 --- a/layout/page.html +++ b/layout/page.html @@ -16,18 +16,18 @@ {{ mathjax_include }} -