tRewrite CSS file to respect HTML semantics - monochromatic - monochromatic blog: http://blog.z3bra.org
(HTM) git clone git://z3bra.org/monochromatic
(DIR) Log
(DIR) Files
(DIR) Refs
---
(DIR) commit a6c4a91890cea5711167708a835fa64bdf1fdc07
(DIR) parent 167d6041409999f3bebbcce77970596064cc3d24
(HTM) Author: Willy Goiffon <dev@z3bra.org>
Date: Fri, 27 Dec 2019 15:45:07 +0100
Rewrite CSS file to respect HTML semantics
The old stylesheet used to abuse <h2> tags for styling stuff, and
<span>/<div> as well.
This one will allow styling the HTML without having to resort to hack
tto make it look decent, thus making the markdown sources more readable
as-is.
Diffstat:
M monochrome.css | 136 +++++++++++++------------------
1 file changed, 55 insertions(+), 81 deletions(-)
---
(DIR) diff --git a/monochrome.css b/monochrome.css
t@@ -1,108 +1,82 @@
-/* Main blocks style */
body {
- width:90%;
- max-width:720px;
- margin:auto;
+ width:90%;
+ max-width:720px;
+ margin:auto;
}
-#wrapper {
-}
-
-footer {
- text-align: center;
- margin: auto;
- width: 70%;
- max-width: 720px;
- border-top:1px solid #aaa;
- padding: 10px;
-}
+h1:hover { color: #755; }
+a:hover { color: #755; }
-/* Titles and headers */
-h1, h2 {
- display: inline-block;
+article h1, a {
+ border-bottom: 1px dotted grey;
}
-h2 {
- font-weight: normal;
- color: #666;
- font-size: 100%;
-}
-
-/* Pretty links */
a {
- color: #333;
- text-decoration: none;
- font-style: italic;
- border-bottom: 1px dotted grey;
+ color: #333;
+ text-decoration: none;
+ font-style: italic;
}
-a:hover {
- color: #755;
+pre {
+ border: 1px dotted grey;
+ padding: 2px;
+ overflow-x: auto;
+ overflow-y: hidden;
}
-h1 a, h2 a, h3 a {
- font-style: normal;
+blockquote, q {
+ color: #666;
+ font-style: italic;
}
-header {
- text-align: center;
+blockquote {
+ border-left: 8px solid grey;
+ padding-left: 8px;
+ margin-left: -8px;
}
-header h1 a {
- color: #fff;
- border: none;
- text-shadow: 0px 0px 8px black;
-}
-header h1 a:hover {
- color: #fff;
- text-shadow: 0px 0px 8px #755;
+video, img {
+ display: block;
+ width: 100%;
}
-/* Coding style (<code>) */
-pre {
- color: #eee;
- font-family: monospace;
- font-size: 90%;
- background-color: #333;
- border: 1px solid #eee;
- border-radius: 4px;
- padding: 10px;
- overflow-x: auto;
- overflow-y: hidden;
+/* article date is a <p> tag following <h1> */
+h1 + p {
+ color: #666;
+ font-style: italic;
+ text-align: right;
}
-pre code {
- padding: 0;
- border: none;
+/* image captions are <em> tags following <img> or <video> */
+video + em, img + em {
+ display: block;
+ margin: auto;
+ text-align: center;
}
-/* Text Formatting */
-blockquote, q {
- color: #666;
- font-style: italic;
+header {
+ text-align: center;
}
-
-blockquote {
- border-left: 8px solid #aaa;
- padding-left: 8px;
- margin-left: -8px;
+header h1, header p {
+ display: inline-block;
+ padding: 0 4px;
}
-
-/* Medias and associated text */
-video {
- width: 100%;
+header h1 a {
+ color: #fff;
+ font-style: normal;
+ border: none;
+ text-shadow: 0px 0px 8px black;
}
-
-img {
- display: block;
- padding: 8px;
- border-radius: 4px;
- margin:auto;
+header h1 a:hover {
+ color: #fff;
+ text-shadow: 0px 0px 8px #755;
}
-/* Image captions are <em> tags following <img> */
-img + em {
- display: block;
- margin: auto;
- text-align: center;
+footer {
+ text-align: center;
+ margin: auto;
+ width: 70%;
+ max-width: 720px;
+ border-top:1px solid #aaa;
+ padding: 10px;
}