diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | footer.html | 2 | ||||
| -rw-r--r-- | header.html | 6 | ||||
| -rw-r--r-- | public/style.css | 94 |
4 files changed, 97 insertions, 6 deletions
@@ -19,6 +19,7 @@ etc.). * Posts need to be structured with an `h1` on the first line, a space on the second, and the date on the third line (ie. 2024-07-20) * Pages go under the `pages` directory as markdown files * Media (images, videos etc) go in the root `public` directory +* Main styling is found in `public/style.css` (feel free to get creative!) ## Defaults diff --git a/footer.html b/footer.html index 6a2001c..94a640f 100644 --- a/footer.html +++ b/footer.html @@ -1,7 +1,5 @@ </main> -<hr/> <footer role="contentinfo"> - <h2>Menu Navigation</h2> <ul id="menu"> <li><a href="/">Home</a></li> <li><a href="/posts">Posts</a></li> diff --git a/header.html b/header.html index ea7c0b9..5f80a93 100644 --- a/header.html +++ b/header.html @@ -7,13 +7,11 @@ <link rel="icon" href="data:,"> <title>{{TITLE}}</title> <link href="/index.rss" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" /> -<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 -auto;max-width:650px;padding:1rem;}blockquote{border-left:4px - solid;padding-left:5px;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.posts,#menu{list-style:none;padding:0;}.posts li{margin-bottom:8px;}.posts li span{display:block;font-size:90%;}#menu li{display:inline-block;margin-right:8px;}.footnotes{font-size:90%;}</style> + <link rel="stylesheet" href="/public/style.css"> </head> <nav id="top"> - <a href="/">Home</a><span> | </span><a href="#menu">Menu ↓</a> + <a href="/">Home</a><a href="#menu">Menu ↓</a> </nav> <main> diff --git a/public/style.css b/public/style.css new file mode 100644 index 0000000..fb88acd --- /dev/null +++ b/public/style.css @@ -0,0 +1,94 @@ +* { + box-sizing: border-box; +} +body { + font-family: "Verdana", sans-serif; + line-height: 1.4; + font-size: 13px; + margin: 0 auto; + max-width: 470px; + padding: 0 10px 10px; +} +h1{font-size:18px;margin-top:1em;} +h2, +h3, +h4, +h5, +h6 { + font-size: 15px; + margin: 2em 0 0; +} +blockquote { + border-left: 4px solid; + margin: 2em 0 2em 2em; + padding: 2px 8px; +} +blockquote p { + font-style: italic; + margin: 0; + padding: 0; +} +img { + max-width: 100%; +} +pre { + border: 1px solid; + overflow: auto; + padding: 5px; +} +table { + text-align: left; + width: 100%; +} +nav { + border-bottom: 1px solid; + padding: 10px 0; +} +nav a:last-of-type { + float: right; +} +#menu, +.posts { + list-style: none; + padding: 0; +} +.posts li { + margin-bottom: 8px; +} +.posts li span { + display: block; + font-size: 90%; +} +#menu li { + display: inline-block; + margin-right: 8px; +} +figure { + margin: 3em 0; +} +figure img { + width: 100%; +} +figcaption { + font-size: 90%; +} +footer { + border-top: 1px solid; + margin: 2em 0; +} +.footnotes { + font-size: 90%; +} +code { + background-color: #000; + color: #f1f1f1; + border-radius: 0.2rem; + padding: 0.1rem; +} +pre:has(code) { + border: 2px solid #f9f9f9; + background-color: #000; + color: #f1f1f1; + padding: 0.5rem; + border-radius: 0.5rem; +}
\ No newline at end of file |