openbsd-webzine/issues/_common/header

158 lines
3.2 KiB
Plaintext
Raw Normal View History

<!DOCTYPE html>
2021-09-26 19:27:49 +00:00
<html lang="en">
<head>
2021-09-29 21:43:00 +00:00
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="alternate" type="application/rss+xml" href="https://webzine.puffy.cafe/atom.xml">
<meta property="og:title" content="OpenBSD webzine __TITLE__" />
<meta property="og:description" content="Webzine created by volunteers who are passionate about the OpenBSD project development." />
<meta property="og:url" content="https://webzine.puffy.cafe/__FILENAME__" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_EN" />
2021-09-29 21:43:00 +00:00
<title>OpenBSD_WEBZINE_ISSUE #__ISSUE__</title>
<style>
2021-09-26 21:53:16 +00:00
#title {
2021-09-26 19:27:49 +00:00
text-align: center;
2021-09-26 21:53:16 +00:00
font-size:3em;
font-weight:bold;
2021-09-29 19:13:29 +00:00
margin:0.75em auto;
2021-09-26 19:27:49 +00:00
}
#title a {
text-decoration: none;
}
2021-09-26 19:27:49 +00:00
#banner {
2021-09-26 21:53:16 +00:00
border-top: .2em double black;
border-bottom: .2em double black;
2021-09-29 21:43:00 +00:00
padding: .5em;
margin-bottom: 2em;
2021-09-30 19:22:56 +00:00
text-align:center;
2021-09-26 21:53:16 +00:00
display: flex;
justify-content: space-between;
2021-09-26 19:27:49 +00:00
}
.puffies {
2021-09-26 21:53:16 +00:00
margin: auto;
text-align: center;
2021-09-26 19:27:49 +00:00
}
.permalink {
color: steelblue;
2021-09-29 11:27:06 +00:00
text-decoration: underline;
2021-09-26 19:27:49 +00:00
}
a {
color:black;
text-decoration:underline;
}
.permalink::before { content: "↗ "; }
2021-09-29 19:13:29 +00:00
.permalink:hover { color: plum; }
2021-09-29 21:43:00 +00:00
h1 {
font-size: 1.5em;
line-height: 0.9em;
}
2021-09-26 19:27:49 +00:00
p {
text-align: justify;
text-justify: auto;
}
html, body {
font-size: 1.1em;
2021-09-26 21:53:16 +00:00
font-family:serif;
background-color: #fff;
2021-09-26 19:27:49 +00:00
}
body {
2021-09-26 21:53:16 +00:00
margin: 1em auto;
2021-09-29 19:13:29 +00:00
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
2021-09-26 19:27:49 +00:00
max-width: 80ch;
2021-09-26 21:53:16 +00:00
border: 1px solid #111;
background-color: #eee;
2021-09-26 21:53:16 +00:00
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
2021-09-29 21:43:00 +00:00
line-height: 1.5;
2021-09-26 19:27:49 +00:00
}
2021-09-26 21:53:16 +00:00
2021-09-26 19:27:49 +00:00
main {
2021-09-29 21:43:00 +00:00
column-count: 2;
2021-09-26 21:53:16 +00:00
column-gap: 2em;
2021-09-26 19:27:49 +00:00
}
img {
max-width: 100%;
height: auto;
margin: auto;
2021-09-29 21:43:00 +00:00
border: 3px solid black;
padding: .25em;
}
2021-09-29 21:43:00 +00:00
ul {
padding-left: .5em;
}
2021-09-29 20:21:15 +00:00
2021-10-02 12:25:13 +00:00
blockquote {
2021-10-02 17:43:35 +00:00
position: relative;
padding: 1.5rem;
2021-10-02 12:25:13 +00:00
}
blockquote:before,
blockquote:after {
2021-10-02 17:43:35 +00:00
position: absolute;
font-size: 4rem;
2021-10-02 12:25:13 +00:00
color:rgba(128,128,128,0.5);
}
blockquote:before {
2021-10-02 17:43:35 +00:00
content: open-quote;
left: -1rem;
top: -1rem;
2021-10-02 12:25:13 +00:00
}
blockquote:after {
2021-10-02 17:43:35 +00:00
content: close-quote;
right: -1rem;
bottom: -1rem;
2021-10-02 12:25:13 +00:00
}
cite {
font-size: smaller;
2021-10-02 13:47:50 +00:00
text-align: right;
2021-10-02 12:25:13 +00:00
width:100%;
display:block;
}
2021-10-02 12:32:10 +00:00
p:first-of-type:first-letter {
float:left;
font-size: 3em;
padding: 0.05em 0.05em 0 0;
}
2021-10-02 12:25:13 +00:00
@media print {
2021-09-29 11:27:06 +00:00
body { background-color:white; max-width:100%;}
main { column-count:1; }
}
@media screen and (max-width:800px) {
2021-09-29 21:43:00 +00:00
main { column-count: 1; }
}
@media (prefers-color-scheme: dark) {
body { color: #eee; background-color: #111; }
2021-09-29 11:27:06 +00:00
html { background-color: black; }
2021-09-29 21:43:00 +00:00
.permalink { color: deepskyblue; }
img { border-color: #eee; }
#banner { border-color:#eee; }
a { color:#eee; }
}
2021-09-29 21:43:00 +00:00
</style>
2021-09-26 19:27:49 +00:00
</head>
<body>