From ba2c077edf9d0788337fa2716e6d556f79a6d3be Mon Sep 17 00:00:00 2001 From: Dave Page Date: Thu, 20 Oct 2022 15:26:02 +0100 Subject: [PATCH] Update styling to match PGCAC/www.postgresql.org. --- static/css/pgzypp.css | 222 +++++++++-------------------- templates/pages/packages.html | 2 +- templates/pages/reporpms.html | 6 +- templates/pages/rpmchart.html | 54 +++---- templates/pages/srpm-packages.html | 2 +- 5 files changed, 98 insertions(+), 188 deletions(-) diff --git a/static/css/pgzypp.css b/static/css/pgzypp.css index b7fd845..87c2451 100644 --- a/static/css/pgzypp.css +++ b/static/css/pgzypp.css @@ -2,185 +2,95 @@ @import url('https://fonts.googleapis.com/css?family=Open+Sans'); @import url('https://fonts.googleapis.com/css?family=Maven+Pro'); +/** STANDARD COLOR DEFINITIONS (complete list) **/ +:root { + --a-fg-color: #336791; + --a-highlight-fg-color: #193145; + --body-bg-color: #fff; + --body-fg-color: #515151; + --h-fg-color: #515151; + --navbar-bg-color: #fff; + --navbar-fg-color: inherit; + --navbar-sdw-color: rgba(0,0,0,0.2); + --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); + --th-bg-color: #e7eae8; + --th-fg-color: inherit; +} + +/** DARK COLOR (overrides only) **/ +@media (prefers-color-scheme: dark) { + :root { + --a-highlight-fg-color: #50b0f0; + --body-bg-color: #212121; + --body-fg-color: #f3f5f9; + --h-fg-color: #2b6da3; + --navbar-bg-color: #212121; + --navbar-fg-color: #f3f5f9; + --navbar-toggler-img: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(243, 245, 249, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); + --th-bg-color: #2e2e2e; + --th-fg-color: #fff; + } +} + body { + background-color: var(--body-bg-color); padding-top: 4rem; - font-family: 'Open Sans', sans-serif; font-weight: 400; - color: #515151; + color: var(--body-fg-color); font-size: 11.5pt; } h1, h2, h3, h4, h5, h6 { - font-family: 'Maven Pro', sans-serif; - font-weight: 700; - text-transform: uppercase; - color: #515151; - margin-top: 0.5em; + font-family: 'Maven Pro', sans-serif; + font-weight: 700; + color: var(--h-fg-color); + margin-top: 0.5em; } a { - color: #336791; - font-weight: 600; - text-decoration: none; - -moz-transition: color .2s ease-in-out; - -webkit-transition: color .2s ease-in-out; - -ms-transition: color .2s ease-in-out; - transition: color .2s ease-in-out; + color: var(--a-fg-color); + font-weight: 600; + text-decoration: none; + -moz-transition: color .2s ease-in-out; + -webkit-transition: color .2s ease-in-out; + -ms-transition: color .2s ease-in-out; + transition: color .2s ease-in-out; } -.navbar { - box-shadow: 0px 3px 15px rgba(0,0,0,0.2); +a:hover, a:active { + color: var(--a-highlight-fg-color); + text-decoration: none; } -.navbar img.logo { - height: 2rem; - margin-left: 0; - margin-bottom: 0; +.table .thead-light th { + color: var(--th-fg-color); + background-color: var(--th-bg-color); } -#footer { - text-align: center; - padding: 5em 0 2em 0; - display: block; -} - -#sidenav { - padding: 1em; -} - -#sidenav h2 { - font-size: 2em; - display: flex; - flex-direction: row; -} - -#sidenav h2:after { - background-color: #e7eae8; - content: '\a0'; - flex-grow: 1; - height: 2px; - position: relative; - margin: .5em 0 .5em .75em; -} - -div.contentwrap h2 { - font-size: 2em; - display: flex; - flex-direction: row; -} -div.contentwrap h2:after { - background-color: #e7eae8; - content: '\a0'; - flex-grow: 1; - height: 2px; - position: relative; - margin: .5em 0 .5em .75em; -} - - -/* Elections */ -div.electionResultRow { - padding: 2px 2px 2px 2px; -} -div.electionHeaderRow { - font-weight: bold; - padding: 2px 2px 2px 2px; -} -div.electionResultCol1 { - display: inline-block; - width: 150px; -} -div.electionResultCol2 { - display: inline-block; - width: 50px; - text-align: right; -} -div.electionResultCol3 { - display: inline-block; - background-color: #0091c1; -} -div.electionResultCol3Hdr { - display: inline-block; - width: 300px; -} -div.electionSeparator { - display: inline-block; - background-color: red; - height: 2px; - width: 510px; -} -tr.electionError { - background-color: #ffb6b6; -} - -div#eventCarousel div.carousel-inner div.carousel-item img { - border-radius: 15px; -} -div.eventCarouselCaption { - top: 20px; - color: red; -} -div.eventCarouselCaption div.info { - background: rgba(255,255,255,0.8); - border-radius: 15px; - padding: 0.5rem; -} -div.eventCarouselBadge { - background: rgba(0,0,255,0.4); - display: block; - right: 30%; - left: 30%; - padding: 2px 2px 2px 2px; - border-radius: 5px; -} -div.eventCarouselRegBadge { - bottom: 7rem; -} -div.eventCarouselCfpBadge { - bottom: 5rem; -} -div.eventCarouselCfsBadge { - bottom: 3rem; -} - -.eventCarouselBadge a { - text-decoration: none; - color: white; -} - -h2 a, h3 a { - text-decoration: none; - color: #515151; -} - -span.nobr { - white-space:nowrap; +.navbar { + box-shadow: 0px 3px 15px var(--navbar-sdw-color); + background-color: var(--navbar-bg-color) !important; + color: var(--navbar-fg-color) !important; } -small { - font-size: 0.85em; +.navbar img.logo { + height: 2rem; + margin-left: 0; + margin-bottom: 0; } -div.newscontent h1, -div.newscontent h2, -div.newscontent h3, -div.newscontent h4, -div.newscontent h5, -div.newscontent h6 -{ - font-size: small; +.navbar-light .navbar-toggler-icon { + background-image: var(--navbar-toggler-img) } -dl.eventlist { - padding-left: 1em; -} -dl.eventlist dd { - padding-left: 1em; - margin-bottom: 1em; +#footer { + text-align: center; + padding: 2em 0 2em 0; + display: block; } -.pgyum-bold { +.pgzypp-bold { font-weight: bolder; } @@ -188,6 +98,6 @@ dl.eventlist dd { color: red; } -.pgyum-available { +.pgzypp-available { color: green; -} \ No newline at end of file +} diff --git a/templates/pages/packages.html b/templates/pages/packages.html index f3eb9ab..7afe859 100644 --- a/templates/pages/packages.html +++ b/templates/pages/packages.html @@ -3,7 +3,7 @@ {%block maincontent%}

Packages

-

+

For SRPMs, please click here.

diff --git a/templates/pages/reporpms.html b/templates/pages/reporpms.html index c8b8da1..50a22a0 100644 --- a/templates/pages/reporpms.html +++ b/templates/pages/reporpms.html @@ -9,7 +9,7 @@ If you do not know which OS/arch you are using, click here to find your OS/architecture.

-

+

Please note that PostgreSQL YUM repository depends on the EPEL repository for some packages. RHEL/CentOS/etc. users should install the EPEL @@ -17,7 +17,7 @@

Available Repo RPMs

-

+

As of 15 April 2019, there is only one repository RPM per distro which includes repository information for all available PostgreSQL releases.

@@ -56,7 +56,7 @@ -

NonFree Repository

+

NonFree Repository