body {
- /* background: #fffffa; */
- font-family: sans-serif;
- line-height: 1.6;
- padding: 2em;
+ background: #d9d8d1;
+ font: 18px/1.6 sans-serif;
+ margin: 0;
}
-header, nav, main, footer {
- margin: auto;
- max-width: 38rem;
+body > header, body > nav, main, body > footer {
+ padding: 0 2em;
}
body > header {
- margin-bottom: 0.25em;
+ padding-top: 1em;
}
body > header h1 {
margin: 0;
- font-size: 100%;
+ font-size: 1em;
}
header a {
color: inherit;
}
+nav {
+ margin-bottom: 1em;
+}
nav ul {
margin: 0;
padding: 0;
nav a {
color: #333;
}
-nav, main {
- margin-bottom: 1.5em;
+main {
+ background: #ebeae4;
+ padding-top: 1em;
+ padding-bottom: 1em;
}
-header >:not(h1) {
+article header >:not(h1) {
font-size: 0.875em;
}
header > h1 + p {
margin-top: -1em;
}
footer {
- border-top: 1px solid #bbb;
font-size: 0.84em;
- padding-top: 1em;
+ margin-left: 0.4em;
}
-footer p {
- margin: 0;
+
+main > * {
+ max-width: 43rem;
}
h1 {
a:active {
outline-offset: 2px;
}
-
-h4 {
- margin: 0.75em auto;
+a.permalink {
+ color: #ddd;
+ font: 1.2em/1 "TeX Gyre Termes", serif;
+ text-decoration: none;
+ transition: color 150ms linear;
+ user-select: none;
+}
+a.permalink:hover, :hover > a.permalink, :target a.permalink {
+ color: #999;
+ transition: color 150ms linear;
}
article h3 {
min-width: 100%;
padding: 1em;
}
-pre:first-of-type {
- margin-top: 0;
-}
pre > code {
padding: 0;
background: initial;
text-transform: none;
padding: .2em .3em;
}
+pre, code {
+ font-size: smaller;
+}
/* box effect */
.box, details, pre, code {
- background-color: #f8f8f8;
+ background-color: #f4f4f4;
border: 1px solid #e6e6e6;
border-radius: 4px;
box-sizing: border-box;
}
p.box {
font-size: 0.95em;
- padding: 0.3em 0.6em;
+ padding: 0.6em 0.9em;
}
table td {
table td:last-child {
padding-right: 0
}
-#notes {
- margin-top: 0.9em;
-}
.post-list {
width: 100%;
}
.post-list tr:hover {
- background: #fafafa;
+ background: #efefe8;
}
.post-list td {
padding: 0.25em 0;
}
.feed-icon {
- margin-right: 3px
-}
-.feed-icon-h2 {
- margin-left: 5px;
- position: relative;
- top: 2px
+ background-image: url(feed-12x12.png);
+ background-position: center right;
+ background-repeat: no-repeat;
+ padding-right: 15px;
}
.smly {
display: inline-block;