nora
/
edgeblog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Rev CSS and make more mobile friendly.

This commit is contained in:
Leonora Tindall 2022-10-01 21:46:07 -05:00
parent 0cafd7545d
commit a80b0dff8f
Signed by: nora
GPG Key ID: 7A8B52EC67E09AAF
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
content/_header.md
View File

@ -1,20 +1,34 @@
<style> <style>
body {
max-width: 600px; /* 100 Bytes of CSS to look good nearly anywhere */
margin-left: auto; html {
margin-right: auto; max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
} }
/* 100 More optional bytes */
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
text-align: center; text-align: center;
margin: 3em 0 1em;
} }
p, ul, ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}
/* Don't underline the link to the index page */
h1 a { h1 a {
text-decoration: none; text-decoration: none;
color: black; color: black;
font-weight: bold; font-weight: bold;
} }
/* Clear around images, and preallocate their space */
img { img {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -23,6 +37,7 @@ img {
aspect-ratio: attr(width) / attr(height); aspect-ratio: attr(width) / attr(height);
} }
/* For each particular image, set its size */
img[alt="A diagram showing the difference in pipeline between normal websites with a CDN and this monstrosity"] { img[alt="A diagram showing the difference in pipeline between normal websites with a CDN and this monstrosity"] {
width: 582px; width: 582px;
height: 521px; height: 521px;
@ -30,7 +45,12 @@ img[alt="A diagram showing the difference in pipeline between normal websites wi
</style> </style>
<!-- These should, by rights, go in <head>, but we have no such luxury. -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markdown@Edge</title> <title>Markdown@Edge</title>
<!-- And here we begin the true page content. -->
<a href="/"><h1>Markdown@Edge</h1></a> <a href="/"><h1>Markdown@Edge</h1></a>