diff options
| -rw-r--r-- | _css/basic.css | 88 | ||||
| -rw-r--r-- | _css/franklin.css | 57 | ||||
| -rw-r--r-- | _layout/header.html | 1 | ||||
| -rw-r--r-- | _layout/tag.html | 16 |
4 files changed, 43 insertions, 119 deletions
diff --git a/_css/basic.css b/_css/basic.css index 3b2ffc5..15046be 100644 --- a/_css/basic.css +++ b/_css/basic.css @@ -3,7 +3,6 @@ ================================================================== */ nav { - width: 64%; display: inline-block; } @@ -20,7 +19,6 @@ nav li { nav li a { color: #004de6; text-decoration: none; - font-size: 18px; font-weight: bold; display: inline-block; float: center; @@ -35,24 +33,17 @@ nav li a { } header { - text-align: right; - margin-top: 50px; - margin-bottom: 50px; + margin-top: 3rem; + margin-bottom: 3rem; display: flex; + flex-wrap: wrap; + justify-content: space-between; align-items: center; } -header .blog-name { - width: 35%; - display: inline-block; - text-align: left; - font-size: 18px; - font-family: "Lucida Console", Monaco, monospace; - padding-top: 10px; -} - header .blog-name a { - color: #a6a2a0; + color: #436e58; + font-weight: bold; text-decoration: none; } @@ -65,65 +56,13 @@ header li a:hover { display: none; } -@media (max-width: 480px) { - header { - padding-left: 6%; - padding-right: 6%; - } -} - -@media (min-width: 481px) { - header { - padding-left: 12.5%; - padding-right: 12.5%; - } -} - -/* wide display: enforce maximum width of header to match content */ -@media (min-width: 940px) { - header { - width: 705px; - margin-left: auto; - margin-right: auto; - } -} - -/* -medium display: nav goes under name -*/ -@media (max-width: 760px) { - header { display: block; } - - header .blog-name { - display: block; - width: 100%; - padding-bottom: 10px; - } - - nav { - width: 100%; - } -} - /* -narrow display: collapse the header (don't show the menu items) -instead, display a burger menu. -*/ -@media (max-width: 500px) { - header { - height: 35px; - display: flex; - align-items: center; - } - - header .blog-name { - display: inline-block; - width: 70%; - } - + * narrow display: collapse the header (don't show the menu items) + * instead, display a burger menu. + */ +@media (max-width: 480px) { nav { display: inline-block; - width: 27%; } nav ul, @@ -156,8 +95,6 @@ instead, display a burger menu. #menu-icon { display: inline-block; - margin-right: 10px; - margin-top: 5px; } } @@ -188,3 +125,8 @@ td { table tbody tr td { border: 1px solid lightgray; } + +.note { + background-color: aliceblue; + padding: 0px 1em; +} diff --git a/_css/franklin.css b/_css/franklin.css index bb54a1e..e0b0128 100644 --- a/_css/franklin.css +++ b/_css/franklin.css @@ -4,8 +4,6 @@ :root { --block-background: #f8f8f8; - --small: 14px; - --normal: 19px; --text-color: hsv(0, 0%, 20%); } @@ -14,9 +12,20 @@ ================================================================== */ html { - font-family: Helvetica, Arial, sans-serif; - font-size: var(--normal); + box-sizing: border-box; color: var(--text-color); + max-width: 36rem; + margin: auto; + padding: 1rem; +} + +/* Keep minimum font size to the usual default of 16px */ +@media (min-width: 800px) { + html { + font-size: 2vw; + margin-left: auto; + margin-right: auto; + } } /* ================================================================== @@ -60,7 +69,6 @@ html { .page-foot { font-size: 80%; - font-family: Arial, serif; color: #a6a2a0; text-align: center; margin-top: 6em; @@ -78,38 +86,10 @@ html { margin: 0.6rem 0; } -.franklin-content { - position: relative; - padding-left: 12.5%; - padding-right: 12.5%; - line-height: 1.35em; -} - -/* On wide screens, fix content width to a max value. */ -@media (min-width: 940px) { - .franklin-content { - width: 705px; - margin-left: auto; - margin-right: auto; - } -} - -/* On narrow device, reduce margins. */ -@media (max-width: 480px) { - .franklin-content { - padding-left: 6%; - padding-right: 6%; - } -} - /* ================================================================== TITLES ================================================================== */ -.franklin-content h1 { font-size: 24px; } -.franklin-content h2 { font-size: 22px; } -.franklin-content h3 { font-size: 20px; } - .franklin-content h1, h2, h3, @@ -159,7 +139,7 @@ h6 { .franklin-content th, td { - font-size: var(--small); + font-size: 75%; padding: 10px; border: 1px solid black; } @@ -172,8 +152,15 @@ td { font-style: italic; } +.franklin-content p { + hyphens: auto; + text-align: justify; +} + .franklin-content blockquote p { display: inline; + hyphens: auto; + text-align: justify; } /* ================================================================== @@ -204,7 +191,6 @@ td { .franklin-content sup { font-size: 70%; vertical-align: super; - line-height: 0; } .franklin-content table.fndef { @@ -296,7 +282,6 @@ code { .hljs { font-size: var(--small); - line-height: 1.35em; border-radius: 10px; } diff --git a/_layout/header.html b/_layout/header.html index 31dbaa4..3815782 100644 --- a/_layout/header.html +++ b/_layout/header.html @@ -2,7 +2,6 @@ <div class=blog-name><a href=/>McSinyx</a></div> <nav> <ul> - <li><a href=/>Home</a></li> <li><a href=/works>Works</a></li> <li><a href=/menu2>Life</a></li> <li><a href=/menu3>Tags</a></li> diff --git a/_layout/tag.html b/_layout/tag.html index 979b60c..696f6de 100644 --- a/_layout/tag.html +++ b/_layout/tag.html @@ -1,15 +1,13 @@ <!doctype html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="/css/franklin.css"> - <link rel="stylesheet" href="/css/basic.css"> - <title>Tag: {{fill fd_tag}}</title> -</head> +<html lang=en> +<meta charset=UTF-8> +<meta name=viewport content='width=device-width, initial-scale=1'> +<link rel=stylesheet href=/css/franklin.css> +<link rel=stylesheet href=/css/basic.css> +<title>Tag: {{fill fd_tag}}</title> <body> {{insert header.html}} - <div class="{{div_content}}"> + <div class=franklin-content> <h1>Tag: {{fill fd_tag}}</h1> {{taglist}} {{insert page_foot.html}} |