diff options
author | 2024-01-28 16:04:33 +0800 | |
---|---|---|
committer | 2024-01-28 16:04:33 +0800 | |
commit | 753383fbed6a161dfb552047ad9c1d3807828eb7 (patch) | |
tree | 492b66fc42fc3897fce71ca9e5bdf7e87eecdd33 /pydis_site | |
parent | Merge branch 'main' into gdwr-dark-theme (diff) |
Dark: Darken nav, hero, hero waves, button, body backgrounds
Diffstat (limited to 'pydis_site')
-rw-r--r-- | pydis_site/settings.py | 4 | ||||
-rw-r--r-- | pydis_site/static/css/base/base.css | 27 | ||||
-rw-r--r-- | pydis_site/static/css/home/index.css | 29 | ||||
-rw-r--r-- | pydis_site/static/images/waves_dark/wave_black.svg (renamed from pydis_site/static/images/waves/wave_black.svg) | 2 | ||||
-rw-r--r-- | pydis_site/static/images/waves_dark/wave_dark.svg | 73 | ||||
-rw-r--r-- | pydis_site/static/images/waves_dark/wave_darker.svg | 73 |
6 files changed, 205 insertions, 3 deletions
diff --git a/pydis_site/settings.py b/pydis_site/settings.py index 3959395a..5942c582 100644 --- a/pydis_site/settings.py +++ b/pydis_site/settings.py @@ -328,6 +328,8 @@ BULMA_SETTINGS = { "info-dark": "#EFF5FB", # Bulma's info-light "info-light": "#254056", + "body-background-color": "#252629", + "white": "#2C2F33", "white-bis": "#23272A ", "white-ter": "#36393F", @@ -338,6 +340,8 @@ BULMA_SETTINGS = { "black-ter": "#E6E6E6", "dark": "$black", + "grey-darker": "#303032", + "text": "#F4F4F4", "text-light": "#F7F7F7", "text-strong": "#FEFEFE", diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 79a8a92d..bd448695 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -23,6 +23,20 @@ main.site-content { padding-right: 0.8em; } +[data-theme="dark"] .navbar.is-primary { + background-color: #3B4774; +} + +/* No good way other than this for now, because the item hover background setting + * applies only for a navbar without is-primary. + */ +@media screen and (min-width: 1024px) { + [data-theme="dark"] .navbar.is-primary .navbar-end > a.navbar-item:hover, + [data-theme="dark"] .navbar.is-primary .navbar-item.has-dropdown:hover .navbar-link { + background-color: #455382; + } +} + .navbar-item .navbar-link { padding-left: 1.5em; padding-right: 2.5em; @@ -58,6 +72,10 @@ main.site-content { overflow: hidden; } +[data-theme="dark"] #discord-btn a { + background-color: #58689cff; +} + #discord-btn:hover a { box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); /*transform: scale(1.03) translate3d(0,0,0);*/ @@ -167,3 +185,12 @@ button.is-size-navbar-menu, a.is-size-navbar-menu { scroll-behavior: auto; } } + +[data-theme="dark"] .button.is-primary, .button.is-link { + background-color: #5365A4; +} + +[data-theme="dark"] .button.is-primary:hover, .button.is-primary.is-hovered, +[data-theme="dark"] .button.is-link:hover, .button.is-link.is-hovered { + background-color: #6276BC; +} diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index c3975799..13a19d38 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -23,6 +23,10 @@ h1 { padding: 0; } +[data-theme="dark"] #wave-hero { + background-color: #3B4774; +} + #wave-hero .container { z-index: 4; /* keep hero contents above wave animations */ } @@ -57,6 +61,16 @@ h1 { transition: all 0.3s cubic-bezier(.25,.8,.25,1); } +[data-theme="dark"] #wave-hero-right img { + -webkit-filter: brightness(0.9); + filter: brightness(0.9); +} + +[data-theme="dark"] #wave-hero-right img:hover { + -webkit-filter: none; + filter: none; +} + #wave-hero-right img:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } @@ -72,13 +86,24 @@ h1 { transform: translate3d(0,0,0); /* Trigger 3D acceleration for smoother animation */ } +[data-theme="dark"] #wave-hero .wave { + background: url(../../images/waves_dark/wave_dark.svg) repeat-x; +} + #front-wave { animation-duration: 60s; animation-delay: -50s; - opacity: 0.5; height: 178px; } +[data-theme="light"] #front-wave { + opacity: 0.5; +} + +[data-theme="dark"] #wave-hero #front-wave { + background: url(../../images/waves_dark/wave_darker.svg) repeat-x; +} + #back-wave { animation-duration: 65s; height: 198px; @@ -93,7 +118,7 @@ h1 { } [data-theme="dark"] #bottom-wave { - background: url(../../images/waves/wave_black.svg) repeat-x !important; + background: url(../../images/waves_dark/wave_black.svg) repeat-x !important; } @keyframes wave { diff --git a/pydis_site/static/images/waves/wave_black.svg b/pydis_site/static/images/waves_dark/wave_black.svg index 899fe2f9..716d0501 100644 --- a/pydis_site/static/images/waves/wave_black.svg +++ b/pydis_site/static/images/waves_dark/wave_black.svg @@ -73,5 +73,5 @@ fill-rule="evenodd" d="M 1599.995,17.566918 C 1289,17.566918 1190.102,-0.03623696 789,5.6042811e-5 389,5.6042811e-5 289,17.566918 0,17.566918 v 11.178914 h 1600 c 0,0 -0.01,-6.968673 -0.01,-11.178914 z" id="path9" - style="fill:#2C2F33;fill-opacity:1;stroke-width:0.381026" /> + style="fill:#252629;fill-opacity:1;stroke-width:0.381026" /> </svg> diff --git a/pydis_site/static/images/waves_dark/wave_dark.svg b/pydis_site/static/images/waves_dark/wave_dark.svg new file mode 100644 index 00000000..0ba3d146 --- /dev/null +++ b/pydis_site/static/images/waves_dark/wave_dark.svg @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="1600" + height="198" + version="1.1" + id="svg11" + sodipodi:docname="wave.svg" + inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"> + <metadata + id="metadata15"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="2560" + inkscape:window-height="1409" + id="namedview13" + showgrid="false" + inkscape:zoom="1.44625" + inkscape:cx="757.49384" + inkscape:cy="107.38903" + inkscape:window-x="4880" + inkscape:window-y="677" + inkscape:window-maximized="1" + inkscape:current-layer="svg11" /> + <defs + id="defs7"> + <linearGradient + id="a" + x1="50%" + x2="50%" + y1="-10.959%" + y2="100%"> + <stop + stop-color="#57BBC1" + stop-opacity=".25" + offset="0%" + id="stop2" /> + <stop + stop-color="#015871" + offset="100%" + id="stop4" /> + </linearGradient> + </defs> + <path + fill="url(#a)" + fill-rule="evenodd" + d="M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z" + transform="matrix(-1 0 0 1 1600 0)" + id="path9" + style="fill:#455289;fill-opacity:1" /> +</svg> diff --git a/pydis_site/static/images/waves_dark/wave_darker.svg b/pydis_site/static/images/waves_dark/wave_darker.svg new file mode 100644 index 00000000..3cff0510 --- /dev/null +++ b/pydis_site/static/images/waves_dark/wave_darker.svg @@ -0,0 +1,73 @@ +<?xml version="1.0" encoding="UTF-8" standalone="no"?> +<svg + xmlns:dc="http://purl.org/dc/elements/1.1/" + xmlns:cc="http://creativecommons.org/ns#" + xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" + xmlns:svg="http://www.w3.org/2000/svg" + xmlns="http://www.w3.org/2000/svg" + xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" + xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" + width="1600" + height="198" + version="1.1" + id="svg11" + sodipodi:docname="wave.svg" + inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)"> + <metadata + id="metadata15"> + <rdf:RDF> + <cc:Work + rdf:about=""> + <dc:format>image/svg+xml</dc:format> + <dc:type + rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> + </cc:Work> + </rdf:RDF> + </metadata> + <sodipodi:namedview + pagecolor="#ffffff" + bordercolor="#666666" + borderopacity="1" + objecttolerance="10" + gridtolerance="10" + guidetolerance="10" + inkscape:pageopacity="0" + inkscape:pageshadow="2" + inkscape:window-width="2560" + inkscape:window-height="1409" + id="namedview13" + showgrid="false" + inkscape:zoom="1.44625" + inkscape:cx="757.49384" + inkscape:cy="107.38903" + inkscape:window-x="4880" + inkscape:window-y="677" + inkscape:window-maximized="1" + inkscape:current-layer="svg11" /> + <defs + id="defs7"> + <linearGradient + id="a" + x1="50%" + x2="50%" + y1="-10.959%" + y2="100%"> + <stop + stop-color="#57BBC1" + stop-opacity=".25" + offset="0%" + id="stop2" /> + <stop + stop-color="#015871" + offset="100%" + id="stop4" /> + </linearGradient> + </defs> + <path + fill="url(#a)" + fill-rule="evenodd" + d="M.005 121C311 121 409.898-.25 811 0c400 0 500 121 789 121v77H0s.005-48 .005-77z" + transform="matrix(-1 0 0 1 1600 0)" + id="path9" + style="fill:#333c61;fill-opacity:1" /> +</svg> |