diff --git a/main.css b/main.css index 253a176..e64c09b 100644 --- a/main.css +++ b/main.css @@ -1,315 +1,319 @@ /* Inferencium - Website - CSS - Main */ -/* Version: 12.0.1-beta.1 */ +/* Version: 12.0.2-beta.1 */ /* Copyright 2022 Jake Winters */ /* SPDX-License-Identifier: BSD-3-Clause */ +/* Display Size - Large +Colour Scheme - Dark */ /* Body */ body { - padding-top: 40px; - margin-left: min(400px, 45vw); - margin-right: min(150px, 12vw); - font-family: Roboto, sans-serif; - font-size: 16px; - line-height: 130%; - background-color: #121212; - color: #ffffff; + padding-top: 40px; + margin-left: min(400px, 45vw); + margin-right: min(150px, 12vw); + font-family: Roboto, sans-serif; + font-size: 16px; + line-height: 130%; + background-color: #121212; + color: #ffffff; } /* Headings */ -h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited { - text-align: left; - line-height: 130%; - color: #ffffff; +h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, +h6, h6 a, h6 a:visited { + text-align: left; + line-height: 130%; + color: #ffffff; } h1, h1 a, h1 a:visited { - text-align: center; - font-size: 24px; + text-align: center; + font-size: 24px; } h2, h2 a, h2 a:visited { - font-size: 22px; + font-size: 22px; } h3, h3 a, h3 a:visited { - font-size: 20px; + font-size: 20px; } h4, h4 a, h4 a:visited { - font-size: 19px; + font-size: 19px; } h5, h5 a, h5 a:visited { - font-size: 18px; + font-size: 18px; } h6, h6 a, h6 a:visited { - font-size: 17px; + font-size: 17px; } /* Paragraph */ p { - font-size: 16px; + font-size: 16px; } /* Blockquote */ blockquote { - font-size: 16px; + font-size: 16px; } /* Code */ code, pre { - font-size: 15px; - background-color: #424242; - padding: 2px; + font-size: 15px; + background-color: #424242; + padding: 2px; } /* Links */ a { - font-size: 16px; - color: #90caf9; - text-decoration: none; + font-size: 16px; + color: #90caf9; + text-decoration: none; } a:visited { - color: #ce93d8; + color: #ce93d8; } a:hover { - text-decoration: underline; + text-decoration: underline; } /* Lists */ li { - font-size: 16px; + font-size: 16px; } ul li::before { - margin-left: -1em; - display: inline-block; - width: 1em; - font-weight: bold; + margin-left: -1em; + display: inline-block; + width: 1em; + font-weight: bold; } /* Tables */ table, th, td { - border: 2px solid; - border-collapse: collapse; - border-color: #ffffff; - padding: 15px; - font-size: 16px; + border: 2px solid; + border-collapse: collapse; + border-color: #ffffff; + padding: 15px; + font-size: 16px; } th { - font-size: 16px; - font-weight: bold; - text-align: center; + font-size: 16px; + font-weight: bold; + text-align: center; } td { - font-size: 16px; - text-align: center; + font-size: 16px; + text-align: center; } td.desc { - text-align: left; + text-align: left; } td.desc-small { - text-align: left; + text-align: left; } td.green { - background-color: #00a70a + background-color: #00a70a } td.red { - background-color: #e50000; + background-color: #e50000; } colgroup col.small { - width: 10%; + width: 10%; } colgroup col.med { - width: 15%; + width: 15%; } colgroup col.lrg { - width: 65%; + width: 65%; } /* Image */ img.avatar { - width: 10%; - height: 10%; - margin-top: 15px; - margin-right: 15px; - margin-bottom: 15px; + width: 10%; + height: 10%; + margin-top: 15px; + margin-right: 15px; + margin-bottom: 15px; } img.logo-small { - transform: translate(0px, 13px); - margin-right: 15px; + transform: translate(0px, 13px); + margin-right: 15px; } /* Navigation bar */ nav.navbar { - height: 100%; - width: 250px; - position: fixed; - left: 0; - top: 0; - padding-top: 55px; - background-color: #909090; - text-align: center; - z-index: 99; - overflow: auto; + height: 100%; + width: 250px; + position: fixed; + left: 0; + top: 0; + padding-top: 55px; + background-color: #909090; + text-align: center; + z-index: 99; + overflow: auto; } nav.navbar div, nav.navbar div a, nav.navbar div a:visited { - padding: 6px; - font-family: Roboto, sans-serif; - font-size: 22px; - color: #000000; - display: block; - z-index: 100; + padding: 6px; + font-family: Roboto, sans-serif; + font-size: 22px; + color: #000000; + display: block; + z-index: 100; } nav.navbar div.title a, nav.navbar div.title a:visited { - padding: 8px; - font-family: Roboto, sans-serif; - font-size: 28px; + padding: 8px; + font-family: Roboto, sans-serif; + font-size: 28px; } nav.navbar div.logo a img, nav.navbar div.logo a img { - width: 110px; - height: 110px; + width: 110px; + height: 110px; } nav.navbar div.sitemap a, nav.navbar div.sitemap a:visited { - position: absolute; - bottom: 120px; - left: 90px; - font-size: 14px; + position: absolute; + bottom: 120px; + left: 90px; + font-size: 14px; } - div.sitemap-small { - display: none; + display: none; } -/* Media */ +/* Display Size - Small */ @media (max-width: 600px) { - body { - padding-top: 60px; - margin: 15px; - position: relative; - overflow-x: scroll; - } + body { + padding-top: 60px; + margin: 15px; + position: relative; + overflow-x: scroll; + } - nav.navbar { - display: flex; - align-items: center; - padding-top: 6px; - padding-bottom: 6px; - white-space: nowrap; - width: 100vw; - height: 35px; - overflow-y: hidden; - } + nav.navbar { + display: flex; + align-items: center; + padding-top: 6px; + padding-bottom: 6px; + white-space: nowrap; + width: 100vw; + height: 35px; + overflow-y: hidden; + } - nav.navbar div.logo a img { - width: 30px; - height: 30px; - } + nav.navbar div.logo a img { + width: 30px; + height: 30px; + } - nav.navbar .title { - display: none; - } + nav.navbar .title { + display: none; + } - nav.navbar div.sitemap { - display: none; - } + nav.navbar div.sitemap { + display: none; + } - nav.navbar div a { - font-size: 20px; - } + nav.navbar div a { + font-size: 20px; + } - h2, h3, h4, h5, h6 { - text-align: center; - } + h2, h3, h4, h5, h6 { + text-align: center; + } - div.sitemap-small, div.sitemap-small a { - display: block; - padding-top: 20px; - margin-right: auto; - margin-left: auto; - width: 50%; - text-align: center; - font-size: 12px; - } + div.sitemap-small, div.sitemap-small a { + display: block; + padding-top: 20px; + margin-right: auto; + margin-left: auto; + width: 50%; + text-align: center; + font-size: 12px; + } - img.avatar { - display: block; - width: 30%; - margin-right: auto; - margin-left: auto; - } + img.avatar { + display: block; + width: 30%; + margin-right: auto; + margin-left: auto; + } - .update_date { - text-align: center; - } + .update_date { + text-align: center; + } - table { - width: 200vw; - } + table { + width: 200vw; + } - table.lrg { - width: 300vw; - } + table.lrg { + width: 300vw; + } } +/* Colour Scheme - Light */ @media (prefers-color-scheme: light) { - body { - background-color: #fafafa; - color: #000000; - } + body { + background-color: #fafafa; + color: #000000; + } - h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, h5 a:visited, h6, h6 a, h6 a:visited, code { - color: #000000; - } + h1, h1 a, h1 a:visited, h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited, h4, h4 a, h4 a:visited, h5, h5 a, + h5 a:visited, h6, h6 a, h6 a:visited, code { + color: #000000; + } - a { - color: #1565c0; - } + a { + color: #1565c0; + } - a:visited { - color: #6a1b9a; - } + a:visited { + color: #6a1b9a; + } - code, pre { - background-color: #e0e2ec; - } + code, pre { + background-color: #e0e2ec; + } - table, th, td { - border-color: #000000; - } + table, th, td { + border-color: #000000; + } }