From dde0cce635fc031970f340b36532fbcb49b1f8ff Mon Sep 17 00:00:00 2001 From: "mb@mb" Date: Thu, 12 Apr 2018 00:09:15 +0200 Subject: [PATCH] typographic changes --- themes/varia/static/css/main.css | 166 ++++++++++++++++--------------- 1 file changed, 86 insertions(+), 80 deletions(-) diff --git a/themes/varia/static/css/main.css b/themes/varia/static/css/main.css index ed3daaf..308624f 100644 --- a/themes/varia/static/css/main.css +++ b/themes/varia/static/css/main.css @@ -1,30 +1,36 @@ @font-face{ font-family: "header"; + src:url('../fonts/cmuntt.ttf'); + font-weight: normal; + font-style: normal; +} +@font-face{ + font-family: "kop"; src:url('../fonts/cmunssdc.ttf'); font-weight: normal; font-style: normal; } @font-face{ font-family: "main"; - src:url('../fonts/CourierCode-Roman.ttf'); + src:url('../fonts/cooper-hewitt/CooperHewitt-Medium.otf'); font-weight: normal; font-style: normal; } @font-face{ font-family: "main"; - src:url('../fonts/CourierCode-Bold.ttf'); + src:url('../fonts/cooper-hewitt/CooperHewitt-Bold.otf'); font-weight: bold; font-style: normal; } @font-face{ font-family: "main"; - src:url('../fonts/CourierCode-Italic.ttf'); + src:url('../fonts/cooper-hewitt/CooperHewitt-MediumItalic.otf'); font-weight: normal; font-style: italic; } @font-face{ font-family: "main"; - src:url('../fonts/CourierCode-BoldItalic.ttf'); + src:url('../fonts/cooper-hewitt/CooperHewitt-BoldItalic.otf'); font-weight: bold; font-style: italic; } @@ -34,13 +40,14 @@ body{ min-width: 500px; top:0px; left:0px; - margin:14px auto 5em auto; - padding: 0px 15px; + margin:0 auto 5em auto; + padding: 14px 15px; font-family: "main", monospace; - font-size: 15px; - line-height:1.8; - background-color: rgba(252, 255, 120, .7); - color:black; + font-size: 22px; + line-height:1.65; + /*letter-spacing: 0.01em;*/ + background-color: rgba(238, 238, 238, 0.5); + color:#164515; } #content{ margin-top:1em; @@ -55,34 +62,12 @@ a:hover{ border:0; text-decoration: none; } - - a.h-card{ - color:black; - text-decoration: none; - - } - -hr, .separator hr { - border:0; - border-top:1px dotted #7e5211; - color: black; - margin:1em 0 .5em; -} - -blockquote { - font-style:italic; -} - -ul { - padding-left:0px; -} - h1, h2, h3, h4, h5, h6, #header{ margin:0; padding:0; } h1{ - font-family: "header"; + font-family: "kop"; font-size: 100%; } h2{ @@ -97,10 +82,32 @@ h1, h2, h3, h4, h5, h6, #header{ p{ margin:0 0 1em 0; } +em{ + +} +sup{ + font-size: 12px; +} pre{ line-height: 1.0; font-family: monospace; } + +hr, .separator hr { + border:0; + border-top:1px dotted #7e5211; + color: black; + margin:1em 0 .5em; +} + +blockquote { + font-style:italic; +} + +ul { + padding-left:0px; +} + .paginator{ float:right; margin:0px; @@ -120,7 +127,7 @@ ul li{ /* article info */ .article-info{ - font-size: 14px; + font-size: 12px; margin:0; } /* date */ @@ -137,12 +144,17 @@ ul li{ font-size: 12px; font-style: italic; } + .post-info time{ + display: block; + } .post-info sup{ - font-size: 100%; + font-size: 80%; } .post-info .categories:before, .post-info .article-translation:before{ content:'→'; color:#7e5211; + font-family: sans-serif; + padding-right: 5px; } /****************************/ @@ -150,12 +162,13 @@ ul li{ header { width:calc(100% - 50px); - margin-top:0; + margin-top:26px; margin-bottom:5em; padding-bottom:1em; - font-family: 'main'; - font-size: 14px; + font-family: "header"; + font-size: 17px; line-height: 1.6; + letter-spacing: -0.03em; } header img{ width: 50px; @@ -165,6 +178,9 @@ header { } /* custom font size for index */ #content.index header{ + font-size: 24px; + line-height: 1.5; + margin-top:0; } header p{ display: inline; @@ -204,23 +220,33 @@ header { transform: skew(2deg); } -#translation{ +.buttons{ position: absolute; - font-size: 12px; - top:0px; - right:15px; + font-size: 14px; margin:0; padding:0; - text-align: right; } - #translation li{ + .buttons.top, .buttons.side{ + top:10px; + right:15px; + text-align: right; + } + .buttons.side{ + top:40px; + } + .buttons.side li{ + display: block; + } + .buttons li{ list-style: none; + display: inline-block; + padding-left: 3px; } - #translation li.active a{ + .buttons li.active a{ text-decoration: none; } - #translation li.active{ - font-weight: bold; + .buttons li.active{ + /*font-weight: bold;*/ } /****************************/ @@ -231,14 +257,13 @@ header { .summary p{ display: inline; } -.article.hentry{ +.article.hentry, /*.documentation.hentry*/{ width:calc(400px + 2em); - /*font-size: 125%;*/ } .hentry{ display: inline-block; width: 200px; - font-size: 13.5px; + font-size: 14px; line-height: 1.65; margin:0 2em 5em 0; padding:0; @@ -250,16 +275,16 @@ header { .hentry .article-info .event-details{ margin:5px 0 2px; min-height: 1.65em; + font-family: monospace; } /* title */ .hentry .article-info .entry-title{ display: block; width: 100%; - font-family: "header"; - font-size: 165%; + font-family: "kop"; + font-size: 185%; font-weight: bold; line-height: 1.15; - letter-spacing: -0.01em; margin:0; } .hentry .article-info .entry-title a{ @@ -280,7 +305,7 @@ header { /* article */ #content.body .entry-title{ display:inline-block; - font-family: "header"; + font-family: "kop"; font-size: 250%; line-height: 1.25; font-weight: bold; @@ -309,24 +334,6 @@ header { .entry-content .seperator hr, #page-content hr{ width:100%; } - /* Roel's complex footnote effect */ - .entry-content span.simple-footnote-container{ - float: left; - width: 200px; - margin:.5em 0 0 -270px; - } - .entry-content span.simple-footnote-content{ - display: block; - font-size: 12px; - line-height: 1.3; - word-wrap:break-word; - } - .entry-content blockquote{ - font-size: 150%; - margin:1em 3em 0; - line-height: 1.5; - } - /****************************/ /* other */ @@ -348,22 +355,21 @@ header { margin-top: 2em; text-align: center; } -/*.simple-footnotes{ - font-size:14px; - margin:auto; - max-width:800px; -} -*/ .author{ - display: none; + /*display: none;*/ +} +iframe{ + width: 100%; + height: auto; } - /*footnotes*/ sup span{ float: right; width: 200px; margin:0.25em -150px 1em 3em; clear:both; + font-size: 11px; + line-height: 1.5; display: inline; } sup span p{