Massive clean up of CSS
Anirudh Oppiliappan x@icyphox.sh
Tue, 23 Mar 2021 19:58:44 +0530
9 files changed,
147 insertions(+),
446 deletions(-)
M
bin/wiki.sh
→
bin/wiki.sh
@@ -23,7 +23,7 @@
} generate_index() { - mapfile -t entries < <(find "$WIKI_PATH" ! -path "$WIKI_PATH") + mapfile -t entries < <(find "$WIKI_PATH" ! -path "$WIKI_PATH" | sort) prevdir='' for r in "${entries[@]}"; do path="$(basename "$r")"
M
config.yaml
→
config.yaml
@@ -18,6 +18,7 @@ name: "Anirudh Oppiliappan"
email: "x@icyphox.sh" syntax: 'bw' footer: | + <hr> <section class="icons"> <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/"> <img class="footimgs" alt="cc nc-by-sa" src="/static/cc.svg">@@ -28,7 +29,7 @@ </a>
<a href="/blog/feed.xml" > <img class="footimgs" alt="rss feed" src="/static/rss.svg"> </a> - </section> + </section> prebuild:
M
pages/wiki/_index.md
→
pages/wiki/_index.md
@@ -1,7 +1,7 @@
--- title: Wiki subtitle: Ideas, beliefs and thoughts. -date: 2021-03-22 +date: 2021-03-23 template: page.html ---
D
static/charter.css
@@ -1,26 +0,0 @@
-/* for git.icyphox.sh */ - -@supports (font-variation-settings: normal) { - html { - font-family: 'Charter', sans-serif; - font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'zero' 1, - 'cv03' 1, 'cv02' 1, 'cv04' 1, 'tnum' 1; - } -} - -@font-face { - font-family: 'Charter'; - src: url('fonts/charter_italic.woff') format('woff'); - font-style: italic; -} - - -@font-face { - font-family: 'Charter'; - src: url('fonts/charter_bold.woff') format('woff'); -} - -@font-face { - font-family: 'Charter'; - src: url('fonts/charter_regular.woff') format('woff'); -}
M
static/style.css
→
static/style.css
@@ -9,112 +9,86 @@ --darker: #222;
--code-bg: #0000000a; } -body { - text-align: center; -} - -html { - background: var(--bg); - font-size: 16px; - line-height: 1.5; +* { + box-sizing: border-box; + text-decoration: none; } -.content > article, p, blockquote, ul { - line-height: 1.5; +main { + padding: 10px; font-family: serif; - font-feature-settings: normal; -} - -/* we'll have drop-caps someday... */ -/*article p:first-of-type:first-letter { - color: var(--dark); - float: left; - font-size: 4rem; - line-height: 0.65; - margin: 0.1em 0.1em 0.2em 0; -}*/ - -.content { - margin: auto 5% auto 5%; + font-size: 16px } -.pull-right > p { - font-family: serif; +.icons img { + max-height: 2.5rem; + display: inline-block; + vertical-align: text-top; + image-orientation: from-image; + max-width: 100%; + padding-bottom: 5px; + cursor: pointer; } a { - color: var(--gray); + margin: 0; + padding: 0; + box-sizing: border-box; text-decoration: none; - word-wrap: break-word; + color: #000 } -a:hover { - background: #eee; - color: var(--dark); +main { + margin: 0; } -article a, a:hover, footer a, header a { - color: inherit; - background: 0; +main a { + color: var(--darker); text-decoration: underline; - outline: 0; } -.sidebar-link { - font-size: 15px; - color: var(--darker); +table a { + text-decoration: none; } -.container { - display: grid; - grid-template-columns: repeat(12, minmax(0, 1fr)); - min-width: 0; - margin-bottom: 20px; +table a:hover { + text-decoration: underline; } -.pull-right { - padding-top: 20%; - text-align: left; - grid-column: 1 / 13; - grid-row: 2; +body { + max-width: 640px; } -.pull-right > p:not(:last-child) { - padding: 0px; - margin: 0px; - padding-top: 2%; - padding-left: 3%; - padding-bottom: 1%; +main img { + max-width: 100%; + display: block; + margin: 0 0 15px; } -.pull-right > h3 { - color: var(--dark); - padding: 0px; +main h2 { + font-size: 20px; margin: 0px; - padding-top: 7%; - padding-left: 3%; -} - -.pull-left { - grid-column: 1 / 13; - grid-row: 1; + padding: 0px; } -.openring { - display: inline-block; +.subtitle { + font-style: italic; + font-weight: normal; + font-variant: unset; + color: var(--dark); + padding-bottom: 20px; } -.openring-feed > p { - padding: 4px 8px 4px; - font-family: serif; +header img { + max-width: 10%; } -.sep { - display: visible; +.muted { + color: var(--gray); } - -.content { - text-align: left; +.muted a { + color: var(--cyan); + text-decoration: underline; } pre {@@ -130,234 +104,34 @@ pre > code {
color: var(--code); } -code { - font-variant: normal; - font-size: 15px !important; - color: var(--dark); - border-bottom: unset; -} - -@media only screen and (min-width: 800px) { - .pull-right { - text-align: left; - max-width: 100%; - grid-column: 9 / 13; - grid-row: 1; - } - - .logo { - width: 10% !important; - } - .sep { - display: hidden; - } - - .pull-left { - grid-column: 3 / 11; - grid-row: 1; - } - .content { - margin: 0%; - } - - .openring { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - min-width: 0; - } - - .openring-feed { - grid-row: 1; - font-size: 16px; - padding: 4px 8px 4px; - } - -} - -@media only screen and (min-width: 1200px) { - .pull-right { - max-width: 100%; - text-align: left; - grid-column: 8 / 10; - padding-left: 10%; - grid-row: 1; - } - - .logo { - width: 10% !important; - } - - html { - font-size: 16px; - } - - code { - font-size: 16px; - } - - pre { - font-size: 16px; - } - - .sep { - display: hidden; - } - .pull-left { - grid-column: 5 / 9; - grid-row: 1; - } - .content { - margin: 0 auto; - } - - .openring { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - min-width: 0; - } - - .openring-feed { - grid-row: 1; - font-size: 16px; - padding: 4px 8px 4px; - } -} - -.logo { - width: 14%; -} - -footer { - bottom: 20px; - width: 100%; - text-align: center; - margin-bottom: 20px; -} - -.lol { - font-variant-caps: all-small-caps; - letter-spacing: 0.3em; - padding-left: 0.3em; -} - -nav { - float: right; - transform: translateY(60%); -} - -header { - margin-bottom: 10px; -} - -.muted { +.post-date { color: var(--gray); - font-family: serif; - font-size: 14px; -} - -.muted a { - color: var(--cyan); - border-bottom: unset; } table { width: 100%; } -img { - max-width: 100%; - margin: 0 auto; -} - -article img { - max-width: 100%; -/* display: block; */ -} - - -.icons a { - color: unset; - background: unset; - border-bottom: unset; - text-decoration: none; -} - -.icons a:hover { - color: unset; - background: unset; - border-bottom: unset; -} - -.subtitle { - font-style: italic; - font-weight: normal; - font-variant: unset; - color: var(--dark); - padding-bottom: 20px; -} - -h2 { - color: var(--dark); - font-size: 20px; - margin: 0px; - padding: 0px; -} - -h1 { - font-size: 24px; - margin: 0px; - padding: 0px; +.index-date { + white-space: nowrap; + vertical-align: baseline; } -h3 { - color: black; +.index-post { + padding-bottom: 7px; } -p { - bottom: 2em; +nav { + float: right; + transform: translateY(-200%); } -blockquote { - border-left: 0.25rem solid var(--gray); - color: var(--dark); - font-style: italic; - margin: .8rem 0; - padding: .5rem 1rem -} hr { - width: 20%; -} - -::selection { - background-color: var(--dark); - color: white; -} - -.icons img { - all: initial; -} - -.icons img { - padding-left: 3%; - padding-top: 10px; - max-height: 2rem; - display: inline-block; - vertical-align: text-top; - image-orientation: from-image; max-width: 100%; - padding-bottom: 5px; - cursor: pointer; + text-align: left; + margin: 20px 0 20px 0; } -.post-date { - color: var(--gray); -} - -.index-date { - white-space: nowrap; - vertical-align: baseline; -} - -.index-post { - padding-bottom: 7px; +footer { + margin: 20px 0 40px 0px; }
M
templates/index.html
→
templates/index.html
@@ -1,57 +1,43 @@
<!DOCTYPE html> <html lang=en> -<head> - <link rel="stylesheet" href="/static/style.css" type="text/css"> - <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml"> - <meta name="description" content="{{ .Fm.Subtitle }}"> - <meta name="viewport" content="initial-scale=1"> - <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> - <meta charset="UTF-8"> - <meta name="HandheldFriendly" content="true"> - <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:site" content="@icyphox"> - <meta name="twitter:title" content="{{ .Fm.Title }}"> - <meta name="twitter:description" content="{{ .Fm.Subtitle }}"> - <meta name="twitter:image" content="/static/icyphox.png"> - <meta property="og:title" content="{{ .Fm.Title }}"> - <meta property="og:type" content="website"> - <meta property="og:description" content="{{ .Fm.Subtitle }}"> - <meta property="og:url" content="https://icyphox.sh"> - <meta property="og:image" content="/static/icyphox.png"> - - <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> - <meta name="theme-color" content="#ffffff"> -</head> + <head> + <link rel="stylesheet" href="/static/style.css" type="text/css"> + <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml"> + <meta name="description" content="{{ .Fm.Subtitle }}"> + <meta name="viewport" content="initial-scale=1,width"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta charset="UTF-8"> + <meta name="HandheldFriendly" content="true"> + <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> + <meta name="theme-color" content="#ffffff"> + </head> <title> {{ .Fm.Title }} </title> - <body> - <section class="container"> - <div class="pull-left"> - <div class="content"> - <header> - {{ .Cfg.Header }} - </header> - {{ .Fm.Body }} - <table> - {{ $datefmt := .Cfg.DateFmt }} - {{ range $_, $post := .Posts }} - <tr> - <td align="left" class="index-post"> - <a href="/blog/{{ $post.Fm.URL }}">{{ $post.Fm.Title }}</a> - </td> - <td align="right" class="index-date">{{ $post.Fm.Date.Format $datefmt }}</td> - </tr> - {{ end }} - </table> - <p><em><b>Note</b>: Opinions expressed in these posts may differ from those that I hold presently.</em></p> - </div> - <footer> - {{ .Cfg.Footer }} - </footer> - </div> - +<body> + <main> + <header> + {{ .Cfg.Header }} + </header> + {{ .Fm.Body }} + <table> + {{ $datefmt := .Cfg.DateFmt }} + {{ range $_, $post := .Posts }} + <tr> + <td align="left" class="index-post"> + <a href="/blog/{{ $post.Fm.URL }}">{{ $post.Fm.Title }}</a> + </td> + <td align="right" class="index-date">{{ $post.Fm.Date.Format $datefmt }}</td> + </tr> + {{ end }} + </table> + <p><em><b>Note</b>: Opinions expressed in these posts may differ from those that I hold presently.</em></p> </section> - </body> + </main> + <footer> + {{ .Cfg.Footer }} + </footer> +</body> + </html>
M
templates/page.html
→
templates/page.html
@@ -4,50 +4,36 @@ <head>
<link rel="stylesheet" href="/static/style.css" type="text/css"> <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml"> <meta name="description" content="{{ .Fm.Subtitle }}"> - <meta name="viewport" content="initial-scale=1"> + <meta name="viewport" content="initial-scale=1,width"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <meta name="HandheldFriendly" content="true"> - <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:site" content="@icyphox"> - <meta name="twitter:title" content="{{ .Fm.Title }}"> - <meta name="twitter:description" content="{{ .Fm.Subtitle }}"> - <meta name="twitter:image" content="/static/icyphox.png"> - <meta property="og:title" content="{{ .Fm.Title }}"> - <meta property="og:type" content="website"> - <meta property="og:description" content="{{ .Fm.Subtitle }}"> - <meta property="og:url" content="https://icyphox.sh"> - <meta property="og:image" content="/static/icyphox.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> <meta name="theme-color" content="#ffffff"> </head> <title> {{ .Fm.Title }} </title> - <body> - <div class="container"> - <div class="pull-left"> - <div class="content"> - <header> - {{ .Cfg.Header }} - </header> - <article align="left"> + <body> + <main> + <header> + {{ .Cfg.Header }} + </header> + <article align="left"> - <h1>{{ .Fm.Title }}</h1> - <h2 class="subtitle">{{ .Fm.Subtitle }}</h2> - {{ .Fm.Body }} + <h1>{{ .Fm.Title }}</h1> + <h2 class="subtitle">{{ .Fm.Subtitle }}</h2> + {{ .Fm.Body }} - <section class="post-date"> - <em>last updated</em>: {{ .Fm.Date }} - </section> + <section class="post-date"> + <em>last updated</em>: {{ .Fm.Date }} + </section> + + </article> + </main> + <footer> + {{ .Cfg.Footer }} + </footer> +</body> - </article> - </div> - <footer> - {{ .Cfg.Footer }} - </footer> - </div> - </div> - </body> </html>
M
templates/text.html
→
templates/text.html
@@ -4,51 +4,38 @@ <head>
<link rel="stylesheet" href="/static/style.css" type="text/css"> <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml"> <meta name="description" content="{{ .Fm.Subtitle }}"> - <meta name="viewport" content="initial-scale=1"> + <meta name="viewport" content="initial-scale=1,width"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <meta name="HandheldFriendly" content="true"> - <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:site" content="@icyphox"> - <meta name="twitter:title" content="{{ .Fm.Title }}"> - <meta name="twitter:description" content="{{ .Fm.Subtitle }}"> - <meta name="twitter:image" content="/static/icyphox.png"> - <meta property="og:title" content="{{ .Fm.Title }}"> - <meta property="og:type" content="website"> - <meta property="og:description" content="{{ .Fm.Subtitle }}"> - <meta property="og:url" content="https://icyphox.sh"> - <meta property="og:image" content="/static/icyphox.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> <meta name="theme-color" content="#ffffff"> </head> <title> {{ .Fm.Title }} </title> - <body> - <div class="container"> - <div class="pull-left"> - <div class="content"> - <header> - {{ .Cfg.Header }} - </header> - <article align="left"> - <section class="post-date"> - {{ .Fm.Date }} - </section> + <body> + <main> + <header> + {{ .Cfg.Header }} + </header> + <article align="left"> + <section class="post-date"> + {{ .Fm.Date }} + </section> + + <h1>{{ .Fm.Title }}</h1> + <h2 class="subtitle">{{ .Fm.Subtitle }}</h2> + {{ .Fm.Body }} + </article> + </main> + <footer> + <p class="muted">Questions or comments? + Send an email to + <a href="mailto:~icyphox/x@lists.sr.ht?Subject=Re: {{ .Fm.Title }}">~icyphox/x@lists.sr.ht</a> — my <a href="https://lists.sr.ht/~icyphox/x">public inbox</a>.</p> - <h1>{{ .Fm.Title }}</h1> - <h2 class="subtitle">{{ .Fm.Subtitle }}</h2> - {{ .Fm.Body }} - </article> - <p class="muted">Questions or comments? - Send an email to - <a href="mailto:~icyphox/x@lists.sr.ht?Subject=Re: {{ .Fm.Title }}">~icyphox/x@lists.sr.ht</a> — my <a href="https://lists.sr.ht/~icyphox/x">public inbox</a>.</p> - </div> - <footer> - {{ .Cfg.Footer }} - </footer> - </div> - </div> - </body> + {{ .Cfg.Footer }} + </footer> +</body> + </html>
M
templates/wiki.html
→
templates/wiki.html
@@ -2,19 +2,12 @@ <!DOCTYPE html>
<html lang=en> <head> <link rel="stylesheet" href="/static/style.css" type="text/css"> - <meta name="viewport" content="initial-scale=1"> + <link rel="alternate" type="application/rss+xml" title="RSS" href="https://icyphox.sh/blog/feed.xml"> + <meta name="description" content="{{ .Fm.Subtitle }}"> + <meta name="viewport" content="initial-scale=1,width"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="UTF-8"> <meta name="HandheldFriendly" content="true"> - <meta name="twitter:card" content="summary_large_image"> - <meta name="twitter:site" content="@icyphox"> - <meta name="twitter:title" content="{{ .Fm.Title }}"> - <meta name="twitter:image" content="/static/icyphox.png"> - <meta property="og:title" content="{{ .Fm.Title }}"> - <meta property="og:type" content="website"> - <meta property="og:url" content="https://icyphox.sh"> - <meta property="og:image" content="/static/icyphox.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png"> <meta name="theme-color" content="#ffffff"> </head>