diff --git a/site/css/default.css b/site/css/default.css index fa4c3c2..9f1ba00 100644 --- a/site/css/default.css +++ b/site/css/default.css @@ -3,6 +3,8 @@ --text-color: gainsboro; --link-color: chartreuse; --link-visited-color: lightskyblue; + --box-color: #424242cc; + --border-radius: 10px; } body { @@ -14,7 +16,7 @@ body { margin: 0; display: grid; grid-template-columns: [leftcol] 1fr [maincol] auto [rightcol] 1fr; - grid-template-rows: [headerrow] 1fr [mainrow] auto [plugrow] 1fr [extrasrow] 1fr; + grid-template-rows: [headerrow] 1fr [mainrow] auto [plugrow] 0.6fr [extrasrow] 0.6fr; grid-template-areas: "inlinks logo outlinks" "main main main" @@ -30,7 +32,7 @@ body { body::after { content: ""; - opacity: 0.15; + opacity: 0.25; position: fixed; top: 0; left: 0; @@ -63,9 +65,9 @@ img, video { } hr { - color: black; + color: var(--link-color); border: 0; - background-color: black; + background-color: var(--link-color); height: 3px; margin: 20px 10% 20px; } @@ -104,6 +106,9 @@ article a:hover, .extras a:hover{ article ul{ list-style: none; + margin: 0; + padding-top: 1em; + padding-bottom: 1em; } article li::before { @@ -120,6 +125,20 @@ article li { text-indent: -2ex; } +article p, article ul { + background-color: var(--box-color); +} + +article p:first-of-type, article ul:first-of-type { + border-top-left-radius: var(--border-radius); + border-top-right-radius: var(--border-radius); +} + +article p:last-of-type, article ul:last-of-type { + border-bottom-left-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); +} + .liberapay { height: 45px; display: inline-block; @@ -156,11 +175,6 @@ article li { grid-area: extras; } -.plugs, .extras { - padding : 20px; - color: black; -} - .inlinks, .outlinks, .tags, .plugs, .extras { padding: 20px 20px 20px 20px; line-height: 100%; @@ -215,22 +229,27 @@ article li { .plugs img { width: 40px; height: 40px; + background-color: var(--text-color); + border-radius: 5px; } .plugs, .extras { padding: 0 40px 0; margin: 0; + padding : 20px; + color: var(--text-color); } + .plugs, .extras, .plugs ul, .extras ul { list-style: none; - justify-content: space-evenly; + justify-content: center; padding: 0; } .plugs li, .extras li { display: inline-block; - margin: 0; + margin: 0 20px 0; } .extras a { @@ -242,7 +261,7 @@ article li { } .extras a:link, .extras a:visited { - color: black; + color: var(--text-color); font-weight: bold; } @@ -251,13 +270,13 @@ article li { height: 85px; padding: 20px; width: 25%; - background-color: var(--text-color); - border-radius: 5px; + background-color: var(--box-color); + border-radius: var(--border-radius); } pre { border: dashed 1px #000000; - border-radius: 5px; + border-radius: (--border-radius); background-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2); padding: 10px; @@ -285,7 +304,7 @@ code { background: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2); border: dashed 1px #000000; - border-radius: 5px; + border-radius: var(--border-radius); } h1 { @@ -341,16 +360,6 @@ h3, h4, h5 { display: inline-block; } -.feed a::before { - content: ""; - width: 20px; - height: 20px; - display: inline-block; - background-image: url(/images/feed.svg); - background-size: contain; - margin-top: -2px; -} - .scripture { /* change font */ font-family: 'Inknut Antiqua'; @@ -375,7 +384,7 @@ h3, h4, h5 { } p { - padding-top: 1em; + padding: 1em; } .with-initial > p:first-child::first-letter { @@ -414,7 +423,7 @@ p { } .inlinks, .outlinks{ - border-radius: 5px; + border-radius: var(--border-radius); columns: auto; }