diff options
Diffstat (limited to 'pydis_site/static/css/home')
| -rw-r--r-- | pydis_site/static/css/home/index.css | 113 | ||||
| -rw-r--r-- | pydis_site/static/css/home/timeline.css | 31 |
2 files changed, 119 insertions, 25 deletions
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index e117a35b..f21263db 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; @@ -92,6 +117,10 @@ h1 { z-index: 3; } +[data-theme="dark"] #bottom-wave { + background: url(../../images/waves_dark/wave_black.svg) repeat-x !important; +} + @keyframes wave { 0% { margin-left: 0; @@ -153,10 +182,18 @@ h1 { flex-direction: column; } +[data-theme="dark"] #projects .card { + border: #4E4F51 1px solid; +} + #projects .card:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } +[data-theme="dark"] #projects .card:hover { + box-shadow: 0 3px 3px rgba(0, 0, 0, 0.7); +} + #projects .card-header { box-shadow: none; font-size: 1.25rem; @@ -173,10 +210,21 @@ h1 { color: #7289DA; } +[data-theme="dark"] #projects .card-header-title { + /* Link color from settings.py */ + color: #99B0FF; +} + #projects .card:hover .card-header-title { + /* Bulma link-hover setting */ color: #363636; } +[data-theme="dark"] #projects .card:hover .card-header-title { + /* Bulma link-hover setting */ + color: #FFFFFF; +} + #projects .card-content { padding-top: 8px; padding-bottom: 1rem; @@ -218,21 +266,64 @@ h1 { text-align: center; } -#sponsors .columns { - display: block; - justify-content: center; - margin: auto; - max-width: 80%; +#sponsors .container { + max-width: 70%; } #sponsors a { - margin: auto; - display: inline-block; + border-radius: .2rem; + margin-bottom: .8rem; + position: relative; } #sponsors img { - width: auto; - height: auto; + max-height: 4rem; +} + +@media (min-width: 800px) { + #sponsors a.column.is-one-third:first-child { + margin-left: -.8rem; + margin-right: .8rem; + } + + #sponsors a.column.is-one-third:last-child { + margin-left: .8rem; + margin-right: -.8rem; + } + + #sponsors a.column.is-half { + width: calc(50% + .4rem); + } - max-height: 5rem; + #sponsors a.column.is-half:first-child { + margin-left: -.8rem; + margin-right: .4rem; + } + + #sponsors a.column.is-half:last-child { + margin-left: .4rem; + margin-right: -.8rem; + } + + #sponsors a { + height: 5rem; + padding: .4rem; + } + + #sponsors img { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: calc(100% - 0.8rem); + } + +} + +@media (max-width: 800px) { + #sponsors .columns { + margin-bottom: 1.5rem; + } } diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 0a4dfbb6..d42bbfc0 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -1,8 +1,3 @@ -body { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, white) -} - h2 { font-size: 2em; } @@ -3391,6 +3386,13 @@ mark { --font-secondary: 'Open Sans', sans-serif } +[data-theme="dark"] { + --cd-color-2: hsl(0, 0%, 34%); + --cd-color-2-h: 0; + --cd-color-2-s: 0%; + --cd-color-2-l: 34%; +} + @supports (--css: variables) { @media (min-width: 64rem) { :root { @@ -3424,6 +3426,10 @@ mark { background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); } +[data-theme="dark"] .cd-timeline { + background-color: #2C2F33; +} + .cd-timeline h2 { font-weight: 700 } @@ -3490,6 +3496,10 @@ mark { box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) } +[data-theme="dark"] .cd-timeline__img { + box-shadow: 0 0 0 4px var(--cd-color-2), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) +} + .cd-timeline__img i { font-size: 1.5em; color: white; @@ -3552,8 +3562,6 @@ mark { position: relative; margin-left: 1.25em; margin-left: var(--space-md); - background: hsl(0, 0%, 100%); - background: var(--color-white); border-radius: 0.25em; border-radius: var(--radius-md); padding: 1.25em; @@ -3571,7 +3579,7 @@ mark { height: 0; border: 7px solid transparent; border-right-color: hsl(0, 0%, 100%); - border-right-color: var(--color-white) + border-right-color: var(--cd-color-2) } .cd-timeline__content h2 { @@ -3599,15 +3607,10 @@ mark { height: 0; border: 7px solid transparent; border-left-color: hsl(0, 0%, 100%); - border-left-color: var(--color-white) + border-left-color: var(--cd-color-2) } } -.cd-timeline__date { - color: hsla(207, 10%, 55%, 0.7); - color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7) -} - @media (min-width: 64rem) { .cd-timeline__date { position: absolute; |