diff --git a/Damo.Io.Server/www/styles/app.css b/Damo.Io.Server/www/styles/app.css index 8e9e0bb..7ce803e 100644 --- a/Damo.Io.Server/www/styles/app.css +++ b/Damo.Io.Server/www/styles/app.css @@ -13,9 +13,9 @@ --article-date-text-color: rgba(255, 255, 255, 0.25); - --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 90%); - --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 80%); - --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 70%); + --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 95%); + --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 70%); + --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 80%); --serif: 'Cambria', 'Palatino', serif; --sans-serif: -apple-system, 'Calibri', 'Helvetica Neue', sans-serif; @@ -31,7 +31,7 @@ --fg-color: #444; --card-color: rgba(255, 255, 255, 0.7); - --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 80%); + --menu-item-bg-not-selected: color-mix(in srgb, var(--primary-color), transparent 90%); --menu-item-bg-selected: color-mix(in srgb, var(--primary-color), transparent 70%); --menu-item-bg-hover: color-mix(in srgb, var(--primary-color), transparent 60%); @@ -125,11 +125,11 @@ ol { ul, ol { margin-bottom: 1.6rem; -} - -ul li, ol li { - margin-left: 3.2rem; - margin-bottom: .4rem; + + li { + margin-left: 3.2rem; + margin-bottom: .4rem; + } } pre { @@ -167,7 +167,7 @@ p { } em, strong { - font-weight: 700; + font-weight: 600; } figure { @@ -190,87 +190,88 @@ article { margin: 0 0 2.4rem 0; border-radius: 1rem; box-shadow: var(--card-shadow); + + header { + margin-bottom: 1.6rem; + overflow: hidden; + } + + header h2 { + margin: 0; + float: right; + font-size: 1.7rem; + font-weight: normal; + letter-spacing: -0.1px; + color: var(--article-date-text-color); + } + + h1 a:link, h1 a:visited { + color: var(--title-color); + } + + img { + max-width: 100%; + } + + section { + line-height: 180%; + } + + nav { + display: flex; + justify-content: end; + } } article:last-child { margin-bottom: 0; } -article header { - margin-bottom: 1.6rem; - overflow: hidden; -} - -article header h2 { - margin: 0; - float: right; - font-size: 1.7rem; - font-weight: normal; - letter-spacing: -0.1px; - color: var(--article-date-text-color); -} - -article h1 a:link, article h1 a:visited { - color: var(--title-color); -} - -article img { - max-width: 100%; -} - -article section { - line-height: 180%; -} - article.Social { background-image: url('data:image/svg+xml;utf8,%3Csvg%20height%3D%222500%22%20width%3D%222331%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%22-0.41%200.22%20747.62%20801.4499999999999%22%3E%3Cpath%20d%3D%22M729.94%20479.5c-10.96%2056.4-98.17%20118.12-198.34%20130.08-52.23%206.23-103.66%2011.96-158.49%209.44-89.68-4.1-160.45-21.4-160.45-21.4%200%208.73.54%2017.04%201.62%2024.81%2011.66%2088.52%2087.76%2093.82%20159.84%2096.29%2072.76%202.49%20137.55-17.94%20137.55-17.94l2.99%2065.79s-50.89%2027.32-141.55%2032.35c-50%202.75-112.07-1.26-184.37-20.39C31.94%20737.02%204.97%20569.86.85%20400.26-.41%20349.9.37%20302.42.37%20262.7.37%2089.27%20113.99%2038.44%20113.99%2038.44%20171.28%2012.12%20269.59%201.06%20371.79.22h2.52c102.19.84%20200.57%2011.9%20257.86%2038.22%200%200%20113.62%2050.83%20113.62%20224.26%200%200%201.42%20127.96-15.85%20216.8%22%20fill%3D%22%23888%22%2F%3E%3Cpath%20d%3D%22M611.77%20276.16v209.99h-83.2V282.33c0-42.97-18.07-64.77-54.23-64.77-39.98%200-60.01%2025.86-60.01%2077.02v111.57h-82.71V294.58c0-51.16-20.04-77.02-60.01-77.02-36.16%200-54.24%2021.8-54.24%2064.77v203.82h-83.19V276.16c0-42.92%2010.93-77.03%2032.88-102.26%2022.63-25.23%2052.27-38.17%2089.07-38.17%2042.57%200%2074.81%2016.37%2096.12%2049.1l20.72%2034.74%2020.73-34.74c21.31-32.73%2053.55-49.1%2096.12-49.1%2036.79%200%2066.44%2012.94%2089.07%2038.17%2021.95%2025.23%2032.88%2059.34%2032.88%20102.26z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: 4.8rem 2.4rem; background-size: 4.8rem 4.8rem; -} - -article.Social section { - padding-top: 3.6rem; - line-height: 130%; - font-size: 2.4rem; - text-align: center; - margin-bottom: 1.6rem; -} - -article nav { - display: flex; - justify-content: end; + + section { + padding-top: 3.6rem; + line-height: 130%; + font-size: 2.4rem; + text-align: center; + margin-bottom: 1.6rem; + } } .main-menu { list-style-type: none; -} - -.main-menu li { - margin: 0; -} - -.main-menu a { - display: block; - padding: 1.6rem; - margin: 0 0 0.8rem; - border-radius: 3rem; - background-color: var(--menu-item-bg-not-selected); - box-shadow: var(--card-shadow); -} - -.main-menu a:active { - position: relative; - top: 2px; -} -.main-menu a.selected { - background-color: var(--menu-item-bg-selected); - box-shadow: var(--card-shadow); -} - -.main-menu a:hover { - background-color: var(--menu-item-bg-hover); + li { + margin: 0; + } + + a { + display: block; + padding: 1.6rem; + margin: 0 0 0.8rem; + border-radius: 3rem; + background-color: var(--menu-item-bg-not-selected); + box-shadow: var(--card-shadow); + } + + a:active { + position: relative; + top: 2px; + } + + a.selected { + background-color: var(--menu-item-bg-selected); + box-shadow: var(--card-shadow); + color: var(--text-color); + } + + a:hover { + background-color: var(--menu-item-bg-hover); + } } @media (max-width: 1000px) { @@ -292,10 +293,10 @@ article nav { gap: 0.8rem; justify-content: center; margin: 0; - } - - .main-menu a { - width: auto; - padding: 1.2rem 2.4rem; + + a { + width: auto; + padding: 1.2rem 2.4rem; + } } }