From bb4fe0acda564a9766eaff4ebc972fbea3ec4760 Mon Sep 17 00:00:00 2001 From: Sadeep Madurange Date: Sat, 25 Oct 2025 09:10:30 +0800 Subject: wip: marat my own style. --- assets/css/main.css | 176 ++++++++++++---------------------------------------- 1 file changed, 41 insertions(+), 135 deletions(-) (limited to 'assets/css/main.css') diff --git a/assets/css/main.css b/assets/css/main.css index fc159a3..a381261 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,12 +1,3 @@ -:root { - --link-color: #841212; - --main-font: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; - --main-font-size: 1.1em; - --heading-font: sans-serif; - --heading-color: #404040; - --text-color: #454545; -} - *, *:before, *:after { @@ -22,156 +13,71 @@ html, body { } html { - font-family: var(--main-font); - font-size: 1em; - line-height: 1.5; -} - -@media (min-width: 38em) { - html { - font-size: var(--main-font-size); - } + font-family: 'IM Fell English SC', serif; + font-size: 15px; + line-height: 1.6; } body { - color: var(--text-color); + height: 100%; + text-decoration-skip-ink: auto; + color: #2f2f2f; + padding-top: 10px; background-color: #fff; - @include text-size-adjust(100%); -} + /* background-size: cover; + background-position: center; + background-repeat: repeat-y; + background-image: url("../img/bg.jpg"); */ -.content { - margin-bottom: 4rem; } -.wrap { +.container { position: relative; width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; } -.container { - max-width: 32rem; - padding-left: 1rem; - padding-right: 1rem; - margin-left: auto; - margin-right: auto; -} - -@media (min-width: 56em) { +@media (min-width: 400px) { .container { - max-width: 38rem; - } -} - -h1, h2, h3, h4, h5, h6 { - font-family: var(--heading-font); - margin-bottom: .5rem; - font-weight: normal; - color: var(--heading-color); - letter-spacing: -.025rem; - line-height: 1.25; - text-rendering: optimizeLegibility; -} - -h1, h1.text-title { - font-size: 1.4rem; -} - -h2 { - margin-top: 1rem; - font-size: 1.2rem; -} - -h3, h4, h5, h6 { - margin-top: 1rem; - font-size: 1rem; -} - -h3 { - margin-top: 1.5rem; -} - -p { - margin-top: 0; - margin-bottom: 1rem; -} - -a { - color: var(--link-color); - text-decoration: none; -} - -a.external::after { - background-color: var(--link-color); - content: ''; - display: inline-flex; - height: 10px; - margin-left: 4px; - width: 10px; - mask-size: cover; - mask-image: url(/assets/images/external-link.svg); -} - -ul { - list-style: circle; -} - -ul, ol { - margin-top: 0; - margin-bottom: 1rem; + width: 85%; + padding: 0; } } -hr { - position: relative; - margin: 1.5rem 0; - border: 0; - border-top: 1px solid #eee; - border-bottom: 1px solid #fff; +@media (min-width: 550px) { + .container { + width: 80%; } -img { - display: block; - max-width: 100%; - margin: 0 0 1rem; - border-radius: 5px; +.container:after, +.row:after, +.u-cf { + content: ""; + display: table; + clear: both; } -.masthead { - border-bottom: 1px solid #eee; - margin-bottom: 3rem; - padding-top: 26px; - padding-bottom: 1rem; - text-align: center; +#navlist > .active > a { + color: #000; + text-decoration: overline; } -.masthead-title { - color: #505050; - font-family: var(--main-font); - font-size: 1.8rem; - line-height: .777em; - margin: 2em 0 0; - text-align: center; +#navlist > .active > a { + color: #000; + text-decoration: overline; } -.masthead-title small { - color: var(--text-color); - display: none; /* This is an accessibility no-no */ - font-family: var(--heading-font); - font-size: .78rem; - font-weight: normal; - letter-spacing: .05rem; -} -@media (min-width: 320px) { - .masthead-title { - margin-top: 2px; - margin-right: 15%; - margin-left: 15%; - } +#navlist li { + display: inline; + list-style-type: none; + padding-right: 20px; } -@media (min-width: 48em) { - .masthead-title small { - display: inline; - } +ol, ul { + padding-left: 0; + margin-top: 0; } -- cgit v1.2.3