varia
/
varia.website
12
2
Fork 2
Code Issues 4 Pull Requests Releases Activity
Browse Source

typographic changes

transformations
mb@mb 6 years ago
parent
3659e8a7b0
commit
dde0cce635
1 changed files with 86 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 166
      themes/varia/static/css/main.css

166
themes/varia/static/css/main.css
View File

@ -1,30 +1,36 @@
@font-face{ @font-face{
font-family: "header"; font-family: "header";
src:url('../fonts/cmuntt.ttf');
font-weight: normal;
font-style: normal;
}
@font-face{
font-family: "kop";
src:url('../fonts/cmunssdc.ttf'); src:url('../fonts/cmunssdc.ttf');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face{ @font-face{
font-family: "main"; font-family: "main";
src:url('../fonts/CourierCode-Roman.ttf'); src:url('../fonts/cooper-hewitt/CooperHewitt-Medium.otf');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
@font-face{ @font-face{
font-family: "main"; font-family: "main";
src:url('../fonts/CourierCode-Bold.ttf'); src:url('../fonts/cooper-hewitt/CooperHewitt-Bold.otf');
font-weight: bold; font-weight: bold;
font-style: normal; font-style: normal;
} }
@font-face{ @font-face{
font-family: "main"; font-family: "main";
src:url('../fonts/CourierCode-Italic.ttf'); src:url('../fonts/cooper-hewitt/CooperHewitt-MediumItalic.otf');
font-weight: normal; font-weight: normal;
font-style: italic; font-style: italic;
} }
@font-face{ @font-face{
font-family: "main"; font-family: "main";
src:url('../fonts/CourierCode-BoldItalic.ttf'); src:url('../fonts/cooper-hewitt/CooperHewitt-BoldItalic.otf');
font-weight: bold; font-weight: bold;
font-style: italic; font-style: italic;
} }
@ -34,13 +40,14 @@ body{
min-width: 500px; min-width: 500px;
top:0px; top:0px;
left:0px; left:0px;
margin:14px auto 5em auto; margin:0 auto 5em auto;
padding: 0px 15px; padding: 14px 15px;
font-family: "main", monospace; font-family: "main", monospace;
font-size: 15px; font-size: 22px;
line-height:1.8; line-height:1.65;
background-color: rgba(252, 255, 120, .7); /*letter-spacing: 0.01em;*/
color:black; background-color: rgba(238, 238, 238, 0.5);
color:#164515;
} }
#content{ #content{
margin-top:1em; margin-top:1em;
@ -55,34 +62,12 @@ a:hover{
border:0; border:0;
text-decoration: none; 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{ h1, h2, h3, h4, h5, h6, #header{
margin:0; margin:0;
padding:0; padding:0;
} }
h1{ h1{
font-family: "header"; font-family: "kop";
font-size: 100%; font-size: 100%;
} }
h2{ h2{
@ -97,10 +82,32 @@ h1, h2, h3, h4, h5, h6, #header{
p{ p{
margin:0 0 1em 0; margin:0 0 1em 0;
} }
em{
}
sup{
font-size: 12px;
}
pre{ pre{
line-height: 1.0; line-height: 1.0;
font-family: monospace; 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{ .paginator{
float:right; float:right;
margin:0px; margin:0px;
@ -120,7 +127,7 @@ ul li{
/* article info */ /* article info */
.article-info{ .article-info{
font-size: 14px; font-size: 12px;
margin:0; margin:0;
} }
/* date */ /* date */
@ -137,12 +144,17 @@ ul li{
font-size: 12px; font-size: 12px;
font-style: italic; font-style: italic;
} }
.post-info time{
display: block;
}
.post-info sup{ .post-info sup{
font-size: 100%; font-size: 80%;
} }
.post-info .categories:before, .post-info .article-translation:before{ .post-info .categories:before, .post-info .article-translation:before{
content:'→'; content:'→';
color:#7e5211; color:#7e5211;
font-family: sans-serif;
padding-right: 5px;
} }
/****************************/ /****************************/
@ -150,12 +162,13 @@ ul li{
header { header {
width:calc(100% - 50px); width:calc(100% - 50px);
margin-top:0; margin-top:26px;
margin-bottom:5em; margin-bottom:5em;
padding-bottom:1em; padding-bottom:1em;
font-family: 'main'; font-family: "header";
font-size: 14px; font-size: 17px;
line-height: 1.6; line-height: 1.6;
letter-spacing: -0.03em;
} }
header img{ header img{
width: 50px; width: 50px;
@ -165,6 +178,9 @@ header {
} }
/* custom font size for index */ /* custom font size for index */
#content.index header{ #content.index header{
font-size: 24px;
line-height: 1.5;
margin-top:0;
} }
header p{ header p{
display: inline; display: inline;
@ -204,23 +220,33 @@ header {
transform: skew(2deg); transform: skew(2deg);
} }
#translation{ .buttons{
position: absolute; position: absolute;
font-size: 12px; font-size: 14px;
top:0px;
right:15px;
margin:0; margin:0;
padding: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; list-style: none;
display: inline-block;
padding-left: 3px;
} }
#translation li.active a{ .buttons li.active a{
text-decoration: none; text-decoration: none;
} }
#translation li.active{ .buttons li.active{
font-weight: bold; /*font-weight: bold;*/
} }
/****************************/ /****************************/
@ -231,14 +257,13 @@ header {
.summary p{ .summary p{
display: inline; display: inline;
} }
.article.hentry{ .article.hentry, /*.documentation.hentry*/{
width:calc(400px + 2em); width:calc(400px + 2em);
/*font-size: 125%;*/
} }
.hentry{ .hentry{
display: inline-block; display: inline-block;
width: 200px; width: 200px;
font-size: 13.5px; font-size: 14px;
line-height: 1.65; line-height: 1.65;
margin:0 2em 5em 0; margin:0 2em 5em 0;
padding:0; padding:0;
@ -250,16 +275,16 @@ header {
.hentry .article-info .event-details{ .hentry .article-info .event-details{
margin:5px 0 2px; margin:5px 0 2px;
min-height: 1.65em; min-height: 1.65em;
font-family: monospace;
} }
/* title */ /* title */
.hentry .article-info .entry-title{ .hentry .article-info .entry-title{
display: block; display: block;
width: 100%; width: 100%;
font-family: "header"; font-family: "kop";
font-size: 165%; font-size: 185%;
font-weight: bold; font-weight: bold;
line-height: 1.15; line-height: 1.15;
letter-spacing: -0.01em;
margin:0; margin:0;
} }
.hentry .article-info .entry-title a{ .hentry .article-info .entry-title a{
@ -280,7 +305,7 @@ header {
/* article */ /* article */
#content.body .entry-title{ #content.body .entry-title{
display:inline-block; display:inline-block;
font-family: "header"; font-family: "kop";
font-size: 250%; font-size: 250%;
line-height: 1.25; line-height: 1.25;
font-weight: bold; font-weight: bold;
@ -309,24 +334,6 @@ header {
.entry-content .seperator hr, #page-content hr{ .entry-content .seperator hr, #page-content hr{
width:100%; 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 */ /* other */
@ -348,22 +355,21 @@ header {
margin-top: 2em; margin-top: 2em;
text-align: center; text-align: center;
} }
/*.simple-footnotes{
font-size:14px;
margin:auto;
max-width:800px;
}
*/
.author{ .author{
display: none; /*display: none;*/
}
iframe{
width: 100%;
height: auto;
} }
/*footnotes*/ /*footnotes*/
sup span{ sup span{
float: right; float: right;
width: 200px; width: 200px;
margin:0.25em -150px 1em 3em; margin:0.25em -150px 1em 3em;
clear:both; clear:both;
font-size: 11px;
line-height: 1.5;
display: inline; display: inline;
} }
sup span p{ sup span p{

Write Preview
Loading…
Cancel
Save