Add project page for picard plugins.

[homepage.git] / content / style.css

diff --git a/content/style.css b/content/style.css
index 8f6d630c95405e23428dff8df206b5d4ed3a5e79..1028de0879fcd22d64689e3bcefbd6c966e159f3 100644 (file)
--- a/content/style.css
+++ b/content/style.css
@@ -22,13 +22,146 @@ body {
     margin: 1em;
 }
 
-p {
+h1 {
+    font-size: 2em;
+    max-width: 30em; /* 60rem */
+}
+
+h2 {
+    font-size: 1.5em;
+    max-width: 40em; /* 60rem */
+}
+
+a:link {
+    color: mediumblue;
+}
+
+a:active {
+    color: red;
+}
+
+a:visited {
+    color: purple;
+}
+
+p, body>div {
     text-align: justify;
     padding: 0;
     margin: 1em 0;
     max-width: 50em;
 }
 
+ul, ol, dl {
+    max-width: 50em;
+    padding: 0;
+    margin: 0;
+}
+
+dt, dd, li {
+    text-align: justify;
+    padding: 0;
+}
+li { margin: 0 0 0 2em; }
+dd { margin: 0 0 0 1em; }
+
+ul.ordered>li {
+    list-style: none;
+}
+
+ul.ordered>li>span:first-child, ul.ordered>li>*:first-child>span:first-child {
+    display: inline-block;
+    text-align: right;
+
+    margin-left: -1.8em;
+    min-width: 1.8em;
+}
+
+hr {
+    clear: both;
+    text-align: left;
+    margin: 0.5em 0;
+    max-width: 50em;
+    border: 0;
+    border-top: 1px solid lightgray;
+}
+
+small.permalink {
+    font-size: small;
+    color: slategray;
+}
+.permalink a:link, .permalink a:visited {
+    color: slategray;
+}
+
+@media not screen {
+    small.permalink {
+        visibility: hidden;
+    }
+}
+
+#footer {
+    max-width: 44em;
+    margin: 0;
+    padding: 0 3em;
+    text-align: center;
+}
+
+#footer>p {
+    display: inline-block;
+    color: slategray;
+    font-size: 0.8em;
+    max-width: 100%;
+    margin: 0.2em 0;
+}
+
+kbd {
+    font-family: monospace;
+    font-size: small;
+}
+
+kbd::before {
+    content: "% ";
+}
+
+#breadcrumbs, #sitetitle { text-align: left; }
+#breadcrumbs>*, #sitetitle>* { font-size: 0.8em; }
+
+#sitetitle>* {
+    float: right;
+    display: inline-block;
+}
+
+#breadcrumbs>strong {
+    vertical-align: top;
+    margin: 0;
+    padding: 0;
+}
+
+#breadcrumbs>ul {
+    list-style-type: none;
+    vertical-align: top;
+    display: inline;
+    margin: 0;
+    padding: 0;
+}
+
+#breadcrumbs>ul>li {
+    display: inline;
+    padding: 0;
+    margin: 0;
+}
+
+#breadcrumbs>ul>li::before { content: "/ " }
+#breadcrumbs>ul>li:first-child::before { content: none; }
+
 @media (max-width: 512px) {
-    p { text-align: left; }
+    body { margin: 0.6em; }
+    ul ul { margin-left: -1.2em; }
+    dd { margin: 0; }
+}
+
+@media (max-width: 28em) { li, dd, dt, p { text-align: left; } }
+@media (max-width: 35em) {
+    #sitetitle>* { float: none; }
+    #footer { padding: 0 1em; }
 }