From 892db42064aa0ce92595ae112783ec3ed241ecc9 Mon Sep 17 00:00:00 2001 From: Akshay Date: Thu, 9 Apr 2020 18:05:30 +0530 Subject: add ui system theme media query --- docs/style.css | 69 +++++++++++++++++++++++++++++++++++++++++++--------------- 1 file changed, 52 insertions(+), 17 deletions(-) (limited to 'docs/style.css') diff --git a/docs/style.css b/docs/style.css index ec60864..f95623f 100644 --- a/docs/style.css +++ b/docs/style.css @@ -1,5 +1,21 @@ @import url('https://rsms.me/inter/inter.css'); +.feed-button { + float: right; + text-decoration: none; + color: var(--black) !important; + background-color: var(--cyan); + font-size: 0.8rem; + padding: 0.3rem 0.5rem; + margin: -0.5rem 0; + border: 0px solid var(--dark-white); + border-radius: 0.2rem; +} + +::-moz-selection, ::selection { + background: var(--cyan); +} + :root { --cyan: #79ffe1; --pink: #d344e2; @@ -9,6 +25,25 @@ --dark-white: #eeeeee; } +@media (prefers-color-scheme: dark) { + :root { + --cyan: #79ffe1; + --pink: #ff3299; + --black: #dedede; + --light-black: #ccc; + --white: #000; + --dark-white: #323232; + } + .feed-button { + color: var(--white) !important; + background: var(--cyan); + } + ::-moz-selection, ::selection { + color: var(--white); + background: var(--cyan); + } +} + body { font-family: 'Inter', sans-serif; } @supports (font-variation-settings: normal) { body { @@ -31,6 +66,21 @@ html { font-size: 17px; } +h1, h2, h3 { + margin-top: 4rem; +} +h4, h5, h6 { + margin-top: 2rem; +} + +.subheading { + font-weight: 400; + font-size: 0.8rem; + color: var(--light-black); + margin-top: 2rem; + margin-bottom: 2rem; +} + table { width: 100%; border-collapse: collapse; @@ -106,7 +156,7 @@ pre > code { img { max-width: 100%; - border: 1px solid var(--dark-white); + border: 2px solid var(--dark-white); border-radius: 0.4rem; box-shadow: 0 0 1.5rem 0.5rem rgba(0, 0, 0, 0.15); } @@ -130,17 +180,6 @@ hr { border-top: 2px solid var(--dark-white); } -.feed-button { - float: right; - text-decoration: none; - color: var(--black) !important; - background-color: var(--cyan); - font-size: 0.8rem; - padding: 0.3rem 0.5rem; - margin: -0.5rem 0; - border: 0px solid var(--dark-white); - border-radius: 0.2rem; -} .intro { font-size: 0.8rem; @@ -207,11 +246,6 @@ ul { list-style: lower-greek inside none; } - -::-moz-selection, ::selection { - background: var(--cyan); -} - .stats { float: right; text-align: right; @@ -239,3 +273,4 @@ ul { cursor: pointer; box-shadow: none; } + -- cgit v1.2.3