diff options
| -rw-r--r-- | assets/css/main.css | 145 | ||||
| -rw-r--r-- | content/posts/2024-01-05-mayim-sqlite.md | 3 |
2 files changed, 87 insertions, 61 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index 55167ef..8c7f075 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,5 +1,6 @@ /* Basic */ html { + font-size: 1.25rem; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ @@ -26,7 +27,6 @@ html { body { margin: 0; - font-size: 1.2em; line-height: 1.5; -webkit-font-smoothing: antialiased; color: var(--font-color); @@ -128,7 +128,6 @@ pre { code, pre { font-family: monospace, monospace; - font-size: 1rem; } kbd { @@ -171,11 +170,11 @@ hr { header { margin-top: 1em; + font-size: 1.25em; } header .site-title { color: var(--font-color); - font-size: 1em; margin-bottom: 0; font-weight: normal; } @@ -289,7 +288,7 @@ h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visit margin-left: 1em; } -article img { +main img, article img { max-width: 100%; display: block; height: auto; @@ -299,7 +298,6 @@ article img { article figcaption { color: grey; text-align: center; - font-size: 0.85em; margin-bottom: 2em; } @@ -312,7 +310,7 @@ article figcaption { list-style: none; padding: 0; display: inline; - font-size: 14px; + font-size: 0.8rem; } .post-translations > li { @@ -401,22 +399,54 @@ ul.language-select > li, ul.footer-menu > li { display: none; } } +.container > #left { + grid-area: left; +} +.container > main { + grid-area: main; +} +.container > #right { + grid-area: right; +} @media (min-width: 780px) { - #toc { position: sticky; top: 10px; } + main { + max-width: 60vw; + } .container { display: grid; - grid-template-columns: 1fr 4fr 1fr; - grid-gap: 2rem; + grid-template-areas: + "left main main" + "left main main" + "right right right"; + grid-gap: 5vw; } .common-footer-bottom { display: grid; grid-template-columns: 1fr 1fr; } } +@media (700px < width < 1200px) { + #right div.articles { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-gap: 1.5rem; + } +} + +@media (min-width: 1200px) { + .container { + display: grid; + grid-template-areas: + "left main right" + "left main right"; + grid-template-columns: 1fr 3fr 1fr; + grid-gap: 5vw; + } +} @media (max-width: 500px) { table.social-icons .inline-svg { @@ -445,125 +475,120 @@ ul.language-select > li, ul.footer-menu > li { /* Webring---doesn't make sense if you don't use openring */ -.webring { - margin-top: 2rem; -} - .webring h2 { - font-size: 1.2rem; + font-size: 1.2rem; } .webring .articles { - width: 95%; + width: 95%; } .webring .title { - margin: 0; + margin: 0; } .webring .article { - width: 100%; - padding: 0.5rem; - border: 1px solid #333; - margin: 0.5rem 0; + width: 100%; + padding: 0.5rem; + border: 1px solid #333; + margin: 0.5rem 0; } @media (max-width: 640px) { - .webring .article { - margin: 0.5rem 0; - } + .webring .article { + margin: 0.5rem 0; + } } .webring .article:first-child { - margin-left: 0; + margin-left: 0; } .webring .article:last-child { - margin-right: 0; + margin-right: 0; } .webring .summary { - font-size: 1rem; - flex: 1 1 0; + flex: 1 1 0; } .webring .attribution { - float: right; - font-size: 0.8rem; - color: #555; - line-height: 3; + float: right; + font-size: 0.8rem; + color: #555; + line-height: 3; } dl dt { - font-weight: bold; + font-weight: bold; } dl dd { - text-indent: 1em; + text-indent: 1em; } /* Book data format */ dl.data { - border: 3px double #ccc; - padding: 0.5em; + border: 3px double #ccc; + padding: 0.5em; } dl.data dt { - float: left; - clear: left; - max-width: 40%; - text-align: right; - font-weight: bold; + float: left; + clear: left; + max-width: 40%; + text-align: right; + font-weight: bold; } dl.data dd { - margin: 0 0 0 110px; - padding: 0 0 0.5em 0; + margin: 0 0 0 110px; + padding: 0 0 0.5em 0; } .text-red { - color: var(--red); + color: var(--red); } .text-green { - color: var(--green); + color: var(--green); } details { - margin-top: 1em; - margin-bottom: 1em; - border: 1px solid #aaa; - border-radius: 4px; - padding: .5em .5em 0; + margin-top: 1em; + margin-bottom: 1em; + border: 1px solid #aaa; + border-radius: 4px; + padding: .5em .5em 0; } summary { - font-weight: bold; - margin: -.5em -.5em 0; - padding: .5em; + font-weight: bold; + margin: -.5em -.5em 0; + padding: .5em; } details[open] { - padding: .5em; + padding: .5em; } details[open] summary { - border-bottom: 1px solid #aaa; - margin-bottom: .5em; + border-bottom: 1px solid #aaa; + margin-bottom: .5em; } a.site-title::before { - content: "["; + content: "["; } a.site-title::after { - content: "]"; + content: "]"; } a.prev-link::before { - content: "← "; + content: "← "; } a.next-link.float { - float: right; + float: right; } a.random-link::before { @@ -571,5 +596,5 @@ a.random-link::before { } a.next-link::after { - content: " →"; + content: " →"; } diff --git a/content/posts/2024-01-05-mayim-sqlite.md b/content/posts/2024-01-05-mayim-sqlite.md index a151bfe..d20c1f0 100644 --- a/content/posts/2024-01-05-mayim-sqlite.md +++ b/content/posts/2024-01-05-mayim-sqlite.md @@ -169,7 +169,8 @@ I'm skipping a bit here because categories has only one data field, though I probably should write full objects as for prices. ```sql -SELECT product.id, product.name, json_group_array(category.name) as categories, json_group_array( +SELECT product.id, product.name, json_group_array(category.name) as categories, +json_group_array( json_object('id', price.id, 'price', price, 'unit', unit) ) as prices FROM product |