alex-2017.css 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545
  1. /* This file is in the public domain. */
  2. html{ text-align: center; }
  3. body, rss {
  4. font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  5. font-style: normal;
  6. font-size: 14pt;
  7. padding: 1em 3em;
  8. max-width: 72ex;
  9. display: inline-block;
  10. text-align: left;
  11. color: #000;
  12. background-color: #fff;
  13. }
  14. @import url(file:///home/alex/alexschroeder.ch/css/alex-2017.css) print;
  15. @media print {
  16. body {
  17. font-size: 12pt;
  18. }
  19. /* hide all the crap */
  20. div.diff, div.diff+hr, div.refer, div.near, div.definition, div.sister,
  21. div.cal, div.footer, span.specialdays, span.gotobar, a.edit, a.number span,
  22. div.rc form, form.tiny, p.comment, p#plus1, div.g-plusone, div.content a.feed {
  23. display:none;
  24. }
  25. div.content a.book,
  26. div.content a.movie {
  27. text-decoration: none;
  28. }
  29. a cite {
  30. font-style: italic;
  31. }
  32. img[alt="RSS"] { display: none }
  33. a.rss { font-size: 8pt }
  34. }
  35. /* headings: we can use larger sizes if we use a lighter color.
  36. we cannot inherit the font-family because header and footer use a narrow font. */
  37. h1, h2, h3, title {
  38. font-family: inherit;
  39. font-weight: normal;
  40. }
  41. h1, channel title {
  42. font-size: 32pt;
  43. margin: 1em 0 0.5em 0;
  44. padding: 0.4em 0;
  45. }
  46. h2 {
  47. font-size: 18pt;
  48. margin: 2em 0 0 0;
  49. padding: 0;
  50. }
  51. h3 {
  52. font-size: inherit;
  53. font-weight: bold;
  54. padding: 0;
  55. margin: 1em 0 0 0;
  56. clear: both;
  57. }
  58. /* headers in the journal are smaller */
  59. div.journal h1, item title {
  60. font-size: inherit;
  61. padding: 0;
  62. clear: both;
  63. border-bottom: 1px solid #000;
  64. }
  65. div.journal h2 {
  66. font-family: inherit;
  67. font-size: inherit;
  68. }
  69. div.journal h3 {
  70. font-family: inherit;
  71. font-size: inherit;
  72. font-weight: inherit;
  73. font-style: italic;
  74. }
  75. div.journal hr {
  76. visibility: hidden;
  77. }
  78. p.more {
  79. margin-top: 3em;
  80. }
  81. /* Links in headings appear on journal pages. */
  82. h1 a, h2 a, h3 a {
  83. color:inherit;
  84. text-decoration:none;
  85. font-weight: normal;
  86. }
  87. h1 a:visited, h2 a:visited, h3 a:visited {
  88. color: inherit;
  89. }
  90. /* for download buttons and the like */
  91. .button {
  92. display: inline-block;
  93. font-size: 120%;
  94. cursor: pointer;
  95. padding: 0.4em 0.6em;
  96. text-shadow: 0px -1px 0px #ccc;
  97. background-color: #cfa;
  98. border: 1px solid #9d8;
  99. border-radius: 5px;
  100. box-shadow: 0px 1px 3px white inset, 0px 1px 3px black;
  101. }
  102. .button .icon {
  103. color: #363;
  104. text-shadow: 0px -1px 1px white, 0px 1px 3px #666;
  105. }
  106. .button a {
  107. text-decoration: none;
  108. font-weight: normal;
  109. }
  110. /* links */
  111. a.pencil {
  112. padding-left: 1ex;
  113. text-decoration: none;
  114. color: inherit;
  115. visibility: hidden;
  116. transition: visibility 0s 1s, opacity 1s linear;
  117. opacity: 0;
  118. }
  119. *:hover > a.pencil {
  120. visibility: visible;
  121. transition: opacity .5s linear;
  122. opacity: 1;
  123. }
  124. @media print {
  125. a.pencil {
  126. display: none;
  127. }
  128. }
  129. a.number {
  130. text-decoration: none;
  131. }
  132. /* stop floating content from flowing over the footer */
  133. hr {
  134. clear: both;
  135. }
  136. /* the distance between links in the navigation bars */
  137. span.bar a {
  138. margin-right: 1ex;
  139. }
  140. a img {
  141. border: none;
  142. }
  143. /* search box in the top bar */
  144. .header form, .header p {
  145. display: inline;
  146. white-space: nowrap;
  147. }
  148. label[for="searchlang"], #searchlang, .header input[type="submit"] {
  149. /* don't use display: none! http://stackoverflow.com/questions/5665203/getting-iphone-go-button-to-submit-form */
  150. visibility: hidden; position: absolute;
  151. }
  152. /* wrap on the iphone */
  153. @media only screen and (max-device-width: 480px) {
  154. }
  155. .header input {
  156. width: 10ex;
  157. }
  158. /* other form fields */
  159. input[type="text"] {
  160. padding: 0;
  161. font-size: 80%;
  162. line-height: 125%;
  163. }
  164. /* code */
  165. textarea, pre, code, tt {
  166. font-family: "Andale Mono", Monaco, "Courier New", Courier, monospace, "Symbola";
  167. font-size: 80%;
  168. }
  169. pre {
  170. overflow:hidden;
  171. white-space: pre-wrap; /* CSS 3 */
  172. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  173. white-space: -pre-wrap; /* Opera 4-6 */
  174. white-space: -o-pre-wrap; /* Opera 7 */
  175. word-wrap: break-word; /* Internet Explorer 5.5+ */
  176. }
  177. /* styling for divs that will be invisible when printing
  178. when printing. */
  179. div.header, div.footer, div.near, div.definition, p.comment, a.tag {
  180. font-size: 14pt;
  181. }
  182. @media print {
  183. div.header, div.footer, div.near, div.definition, p.comment, a.tag {
  184. font-size: 8pt;
  185. }
  186. }
  187. div.footer form.search {
  188. display: none;
  189. }
  190. div.rc li + li {
  191. margin-top: 1em;
  192. }
  193. div.rc li strong, table.history strong, strong.description {
  194. font-family: inherit;
  195. font-weight: inherit;
  196. }
  197. div.diff {
  198. padding-left: 5%;
  199. padding-right: 5%;
  200. font-size: 12pt;
  201. color: #000;
  202. }
  203. div.old {
  204. background-color: #ffffaf;
  205. }
  206. div.new {
  207. background-color: #cfffcf;
  208. }
  209. div.refer {
  210. padding-left: 5%;
  211. padding-right: 5%;
  212. font-size: 12pt;
  213. }
  214. div.message {
  215. background-color:#fee;
  216. color:#000;
  217. }
  218. img.xml {
  219. border:none;
  220. padding:1px;
  221. }
  222. a.small img {
  223. max-width:300px;
  224. }
  225. a.large img {
  226. max-width:600px;
  227. }
  228. div.sister {
  229. margin-right:1ex;
  230. background-color:inherit;
  231. }
  232. div.sister p {
  233. margin-top:0;
  234. }
  235. div.sister hr {
  236. display:none;
  237. }
  238. div.sister img {
  239. border:none;
  240. }
  241. div.near, div.definition {
  242. background-color:#efe;
  243. }
  244. div.sidebar {
  245. float:right;
  246. border:1px dotted #000;
  247. padding:0 1em;
  248. }
  249. div.sidebar ul {
  250. padding-left:1em;
  251. }
  252. /* replacements, features */
  253. ins {
  254. font-style: italic;
  255. text-decoration: none;
  256. }
  257. acronym, abbr {
  258. letter-spacing:0.1em;
  259. font-variant:small-caps;
  260. }
  261. /* Interlink prefix not shown */
  262. a .site, a .separator {
  263. display: none;
  264. }
  265. a cite { font:inherit; }
  266. /* browser borkage */
  267. textarea[name="text"] { width:97%; height:80%; }
  268. textarea[name="summary"] { width:97%; height:3em; }
  269. /* comments */
  270. textarea[name="aftertext"] { width:97%; height:10em; }
  271. div.commentshown {
  272. font-size: 12pt;
  273. padding: 2em 0;
  274. }
  275. div.commenthidden {
  276. display:none;
  277. }
  278. div.commentshown {
  279. display:block;
  280. }
  281. p.comment {
  282. margin-bottom: 0;
  283. }
  284. div.comment {
  285. font-size: 14pt;
  286. }
  287. div.comment h2 {
  288. margin-top: 5em;
  289. }
  290. /* comment pages with username, homepage, and email subscription */
  291. .comment form span { display: block; }
  292. .comment form span label { display: inline-block; width: 10em; }
  293. /* IE sucks */
  294. .comment input#username,
  295. .comment input#homepage,
  296. .comment input#mail { width: 20em; }
  297. /* cal */
  298. div.month { padding:0; margin:0 2ex; }
  299. body > div.month {
  300. float:right;
  301. background-color: inherit;
  302. border:solid thin;
  303. padding:0 1ex;
  304. }
  305. .year > .month {
  306. float:left;
  307. }
  308. .footer {
  309. clear:both;
  310. }
  311. .month .title a.local {
  312. background-color: inherit;
  313. }
  314. .month a.local {
  315. background-color: #ddf;
  316. }
  317. .month a.today {
  318. background-color: #fdd;
  319. }
  320. .month a {
  321. color:inherit;
  322. font-weight:inherit;
  323. text-decoration: none;
  324. background-color: #eee;
  325. }
  326. /* history tables and other tables */
  327. table.history {
  328. border: none;
  329. }
  330. td.history {
  331. border: none;
  332. }
  333. table {
  334. border: none;
  335. border-top: 1px solid #ccc;
  336. border-bottom: 1px solid #ccc;
  337. padding: 1em;
  338. margin: 1em 2em;
  339. }
  340. table tr td, table tr th {
  341. border: none;
  342. padding: 0.2em 0.5em;
  343. vertical-align: top;
  344. }
  345. table.arab tr th {
  346. font-weight:normal;
  347. text-align:left;
  348. vertical-align:top;
  349. }
  350. table.arab, table.arab tr th, table.arab tr td {
  351. border:none;
  352. }
  353. th.nobreak {
  354. white-space:nowrap;
  355. }
  356. table.full { width:99%; margin-left:1px; }
  357. table.j td, table.j th, table tr td.j, table tr th.j, .j { text-align:justify; }
  358. table.l td, table.l th, table tr td.l, table tr th.l, .l { text-align:left; }
  359. table.r td, table.r th, table tr td.r, table tr th.r, .r { text-align:right; }
  360. table.c td, table.c th, table tr td.c, table tr th.c, .c { text-align:center; }
  361. table.t td { vertical-align: top; }
  362. td.half { width:50%; }
  363. td.third { width:33%; }
  364. form table td { padding:5px; }
  365. /* lists */
  366. dd { padding-bottom:0.5ex; }
  367. dl.inside dt { float:left; }
  368. /* search */
  369. div.search span.result { font-size:larger; }
  370. div.search span.info { font-size:smaller; font-style:italic; }
  371. div.search p.result { display:none; }
  372. img.logo {
  373. float: right;
  374. margin: 0 0 0 1ex;
  375. padding: 0;
  376. border: 1px solid #000;
  377. opacity: 0.3;
  378. background-color:#ffe;
  379. }
  380. /* images */
  381. div.content a.feed img, div.journal a.feed img,
  382. div.content a img.smiley, div.journal a img.smiley, img.smiley,
  383. div.content a.inline img, div.journal a.inline img,
  384. div.content li a.image img, div.journal li a.image img {
  385. margin: 0; padding: 0; border: none;
  386. }
  387. div.image a img {
  388. margin-bottom: 0;
  389. }
  390. div.image span.caption {
  391. margin: 0 1em;
  392. }
  393. img {
  394. max-width: 100%;
  395. }
  396. .left { float:left; margin-right: 1em; }
  397. .right { float:right; margin-left: 1em; }
  398. .half img { height: 50%; width: 50%; }
  399. .face img { width: 200px; }
  400. div.left .left, div.right .right {
  401. float:none;
  402. }
  403. .center { text-align:center; }
  404. table.aside {
  405. float:right;
  406. width:40%;
  407. margin-left: 1em;
  408. padding: 1ex;
  409. border: 1px dotted #666;
  410. }
  411. table.aside td {
  412. text-align:left;
  413. }
  414. div.sidebar {
  415. float:right; width: 250px;
  416. text-align: right;
  417. border: none;
  418. margin: 1ex;
  419. }
  420. .bigsidebar {
  421. float:right;
  422. width: 500px;
  423. border: none;
  424. margin-left: 1ex;
  425. font-size: 80%;
  426. }
  427. dl.irc dt { width:20ex; float:left; text-align:right; clear:left; }
  428. dl.irc dt span.time { float:left; }
  429. dl.irc dd { margin-left:22ex; }
  430. /* portrait */
  431. div.footer, div.comment, hr { clear: both; }
  432. .portrait { float: left; font-size: small; margin-right: 1em; }
  433. .portrait a { color: #999; }
  434. div.left { float:left; margin:1em; padding: 0.5em; }
  435. div.left p { display:table-cell; }
  436. div.left p + p { display:table-caption; caption-side:bottom; }
  437. p.table a { float:left; width:20ex; }
  438. p.table + p { clear:both; }
  439. /* mastodon */
  440. div.mastodon { padding: 0 2em }
  441. div.mastodon .status {padding-top: 1ex; border-bottom: 1px solid grey;}
  442. div.mastodon .status:first-child {border-top: 1px solid grey;}
  443. /* rss */
  444. channel * { display: block; }
  445. channel title {
  446. margin-top: 30pt;
  447. }
  448. copyright {
  449. font-size: 14pt;
  450. margin-top: 1em;
  451. }
  452. channel:before {
  453. font-size: 14pt;
  454. display: block;
  455. margin: 1em;
  456. padding: 0.5em;
  457. content: "This document is to be read in a feed reader. The item content is escaped HTML, which makes it hard to read for humans. Sorry!";
  458. color: red;
  459. border: 1px solid red;
  460. }
  461. license {
  462. font-size: 11pt;
  463. margin-bottom: 9pt;
  464. }
  465. contributor:before { content: "Last edited by "; }
  466. contributor:after { content: "."; }
  467. generator:before { content: "Feed generated by "; }
  468. generator:after { content: "."; }
  469. channel description {
  470. font-weight: bold;
  471. }
  472. item description {
  473. font-weight: normal;
  474. margin-bottom: 1em;
  475. }
  476. link, managingEditor, webMaster, license, url,
  477. docs, language,
  478. pubDate, lastBuildDate, ttl, guid, category, comments,
  479. docs, image title, image link,
  480. status, version, diff, history, importance {
  481. display: none;
  482. }