diff options
| -rw-r--r-- | links/main.css | 234 |
1 files changed, 34 insertions, 200 deletions
diff --git a/links/main.css b/links/main.css index abe0379..9cf95db 100644 --- a/links/main.css +++ b/links/main.css @@ -8,6 +8,7 @@ --body-spacing: 45px; --body-line-height: 1.3; + --body-inline-padding: 15px; color-scheme: light dark; } @@ -17,7 +18,10 @@ opacity: 1.0; color: var(--black); padding: 10px; - /* Safari */ +} + +a { + color: var(--fg); } body { @@ -74,7 +78,6 @@ main { main img { width: 100%; max-width: 700px; - margin-bottom: 15px; } main>* { @@ -106,62 +109,37 @@ main p { margin-top: 0px; } -main>ul { - line-height: var(--body-line-height); -} - figure { margin: 0; - padding-bottom: 20px + padding-bottom: var(--body-inline-padding); } figcaption { + text-align: end; font-size: smaller; padding: 2px } -code.button { - background: var(--fg); - color: var(--bg); - font-size: smaller; - display: inline-block; - padding: 0px 6px; - font-weight: bold; - border-radius: 2px; - line-height: var(--body-line-height); -} - main hr { border-color: color-mix(in srgb, var(--fg) 20%, var(--bg)); clear: both; } -main>ul.jump { - columns: 2; - line-height: var(--body-line-height); -} - -main>ul.jump li { - list-style-type: decimal-leading-zero; - list-style-position: inside; - text-transform: capitalize; -} - -main img.medium { - max-width: 300px; - padding: 10px +main img.sm { + max-width: 192px; } -main img.normal { - max-width: 192px; +main img.left { + float: left; + padding-right: var(--body-inline-padding); } -main img.sm { - max-width: 88px +main img.right { + float: right; + padding-left: var(--body-inline-padding); } main>q { - /*font-size: 20px;*/ max-width: 500px; display: block; margin-left: 30px; @@ -171,17 +149,16 @@ main>pre { font-family: monospace; background: var(--fg); color: var(--bg); - padding: 15px; + padding: var(--body-inline-padding); } main>code { font-family: monospace; - /*font-size: 12px;*/ margin-bottom: 30px; display: block; background: var(--fg); color: var(--bg); - padding: 15px; + padding: var(--body-inline-padding); white-space: pre } @@ -189,19 +166,24 @@ main>code comment { color: #777 } +main ol, +main ul { + margin-bottom: 30px; + line-height: var(--body-line-height); +} + +main ol { + list-style-type: decimal-leading-zero; +} + + main ul.gallery { - background: none + padding: 0; } main ul.gallery li { clear: both; display: block; - height: 260px; - margin-top: -2px -} - -main ul.gallery li:last-child { - border-bottom: 0px } main ul.gallery li a { @@ -210,146 +192,7 @@ main ul.gallery li a { } main ul.gallery li img { - width: 250px; display: block; - margin-right: 15px; -} - -main .project { - border-left: 2px solid var(--fg); - padding-left: 30px; - max-width: 555px; -} - -main .project>* { - margin-bottom: 30px -} - -main .project p { - padding: 0px; - margin-top: 0px; - margin-bottom: 30px; -} - -main .project img { - display: block; - max-width: 100%; -} - -main .button { - background-color: #000; - border: 2px solid var(--fg); - color: var(--bg); - padding: 13px 28px; - text-align: center; - text-decoration: none; - display: inline-block; - /*font-size: 14px;*/ - border-radius: 200px; - font-weight: bold; - margin-right: 15px; - margin-bottom: 30px; -} - -main .button:hover { - background-color: #333 !important; - color: var(--bg); - cursor: pointer; -} - -main .button small { - color: var(--fg); -} - -body select { - color: var(--fg); - margin-bottom: 20px -} - -main table.drpdown { - padding-bottom: 15px; - /*font-size: 18px*/ -} - -main table.drpdown td { - padding-bottom: 15px; - color: var(--fg); -} - -main>table.col tr th { - text-align: left -} - -main>table.col tr td { - border-right: 1.5px solid var(--fg) -} - -main>table.col tr>* { - padding: 5px 20px -} - -main>table.col tr td:last-child { - border-right: 0px -} - -main>table.col tr>*:first-child { - padding-left: 0px -} - -main>table.col b { - font-weight: bold -} - -main .progress { - padding: 2px; - width: 100%; - max-width: 100%; - border: 1px solid grey -} - -main .progress>div { - height: 100%; - width: 100%; - background-color: var(--fg) -} - -main .progress>div>span { - color: var(--bg); - padding: 0px 2px -} - -main img.detail { - max-width: 64px; - border: 1px solid #777; - padding: 20px; - margin: 0px 20px 20px 0px; - border-radius: 3px; -} - -main .shortcut, -main kbd { - background: var(--bg); - color: var(--fg); - display: inline-block; - padding: 2px 5px; - margin: 0px; - /*font-size: 12px;*/ - line-height: var(--body-line-height); - border-radius: 2px; - font-weight: bold -} - -main .shortcut-list dt, -main .shortcut-list dd { - display: inline; - line-height: var(--body-line-height); - margin-left: 0; - margin-right: 10px; -} - -main>table.logbook tr td { - padding-bottom: 15px; - padding-top: 15px; } main>table img { @@ -359,7 +202,7 @@ main>table img { } main>table tr th { - text-align: left; + text-align: start; font-weight: bold } @@ -419,16 +262,7 @@ details[open]>*:not(summary) { margin: 1ex 0 0 0; } -/* Modular */ - -a { - color: var(--fg); -} - -ol, -ul { - margin: 0px 0px 30px 0px; -} +/* modular */ .col2 { columns: 2 @@ -443,7 +277,7 @@ ul { } .notice { - padding: 15px; + padding: var(--body-inline-padding); border: 1px solid var(--ac); background-color: color-mix(in srgb, var(--ac) 10%, var(--bg)); color: color-mix(in srgb, var(--fg) 90%, var(--bg)); @@ -468,7 +302,7 @@ ul.nobull li { display: none } -/* Theme */ +/* theme */ @media (prefers-color-scheme: dark) { :root { @@ -481,7 +315,7 @@ ul.nobull li { } } -/* Mobile */ +/* mobile */ @media (max-width: 1100px) { :root { |