aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static')
-rw-r--r--pydis_site/static/css/base/base.css16
-rw-r--r--pydis_site/static/css/home/index.css248
2 files changed, 150 insertions, 114 deletions
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index 42bbc8cf..306a3def 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -12,7 +12,7 @@ main.site-content {
flex: 1;
}
-div.card.has-equal-height {
+.card.has-equal-height {
height: 100%;
display: flex;
flex-direction: column;
@@ -117,3 +117,17 @@ button.is-size-navbar-menu, a.is-size-navbar-menu {
.codehilite-wrap {
margin-bottom: 1em;
}
+
+/* 16:9 aspect ratio fixing */
+.force-aspect-container {
+ position: relative;
+ padding-bottom: 56.25%;
+}
+
+.force-aspect-content {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index cb79a6e6..58ca8888 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -1,146 +1,86 @@
-.discord-banner {
- border-radius: 0.5rem;
+h1 {
+ padding-bottom: 0.5em;
}
-.hero-image {
- width: 20rem;
- margin: auto;
-}
-
-.hero-body {
- padding-top: 1rem;
- padding-bottom: 1rem;
-}
-
-.section-sp img {
- height: 5rem;
- margin-right: 2rem;
-}
+/* Mobile-only notice banner */
-.video-container iframe,
-.video-container object,
-.video-container embed {
- width: 100%;
- height: calc(92vw * 0.5625);
- margin: 8px auto auto auto;
+#mobile-notice {
+ margin: 5px;
+ margin-bottom: -10px!important;
}
-div.card.github-card {
- box-shadow: none;
- border: #d1d5da 1px solid;
- border-radius: 3px;
-}
+/* Wave hero */
-div.repo-headline {
- font-size: 1.25rem;
- margin-bottom: 8px;
-}
-
-span.repo-language-dot {
- border-radius: 50%;
- height: 12px;
- width: 12px;
- top: 1px;
- display: inline-block;
+#wave-hero {
position: relative;
+ background-color: #7289DA;
+ color: #fff;
+ height: 32vw;
+ min-height: 270px;
+ max-height: 500px;
+ overflow-x: hidden;
+ width: 100%;
+ padding: 0;
}
-span.repo-language-dot.python {
- background-color: #3572A5;
-}
-
-span.repo-language-dot.html {
- background-color: #e34c26;
-}
-
-span.repo-language-dot.css {
- background-color: #563d7c;
-}
-
-span.repo-language-dot.javascript {
- background-color: #f1e05a;
-}
-
-#repo-footer-item {
- margin-left: 1.2rem;
+#wave-hero .container {
+ z-index: 4; /* keep hero contents above wave animations */
}
-#sponsors-hero {
- padding-top: 2rem;
- padding-bottom: 3rem;
+@media screen and (min-width: 769px) and (max-width: 1023px) {
+ #wave-hero .columns {
+ margin: 0 1em 0 1em; /* Stop cards touching canvas edges in table-view */
+ }
}
-.welcome-video {
+#wave-hero iframe {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
border-radius: 10px;
margin-top: 1em;
+ border: none;
}
-.welcome-video:hover {
+#wave-hero iframe:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
-.aspect-wrapper {
- position: relative;
- padding-bottom: 56.25%;
-}
-.aspect-content {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- position: absolute;
-}
-
-.hero-card img{
+#wave-hero-right img{
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23);
margin-top: 1em;
+ text-align: right;
}
-.main-head {
- position: relative;
- background-color: #7289DA;
- color: #fff;
- height: 32vw;
- min-height: 270px;
- max-height: 500px;
- overflow-x: hidden;
- width: 100%;
- padding: 0;
-}
-
-.bottom-wave {
- background: url(../../images/waves/wave_white.svg) repeat-x;
+#wave-hero .wave {
+ background: url(../../images/waves/wave_dark.svg) repeat-x;
position: absolute;
bottom: 0;
width: 6400px;
- height: 26px;
- animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
- transform: translate3d(0, 0, 0);
- z-index: 3;
+ animation-name: wave;
+ animation-timing-function: cubic-bezier(.36,.45,.63,.53);
+ animation-iteration-count: infinite;
+ transform: translate3d(0,0,0); /* Trigger 3D acceleration for smoother animation */
}
-.above-waves {
- z-index: 4;
+#front-wave {
+ animation-duration: 60s;
+ animation-delay: -50s;
+ opacity: 0.5;
+ height: 178px;
}
-.wave {
- background: url(../../images/waves/wave_dark.svg) repeat-x;
- position: absolute;
- bottom: 0;
- width: 6400px;
+#back-wave {
+ animation-duration: 65s;
height: 198px;
- animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
- transform: translate3d(0, 0, 0);
}
-.wave:nth-of-type(2) {
- animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite;
- opacity: 0.5;
- height: 178px;
- animation-delay: -50s;
+#bottom-wave {
+ animation-duration: 50s;
+ animation-delay: -10s;
+ background: url(../../images/waves/wave_white.svg) repeat-x !important;
+ height: 26px;
+ z-index: 3;
}
@keyframes wave {
@@ -152,18 +92,21 @@ span.repo-language-dot.javascript {
}
}
-.showcase {
+/* Showcase */
+
+#showcase {
margin: 0 1em;
}
-.mini-timeline {
+#showcase .mini-timeline {
height: 3px;
position: relative;
margin: 50px 0 50px 0;
background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00);
text-align: center;
}
-.mtl-item {
+
+#showcase .mini-timeline i {
display: inline-block;
vertical-align: middle;
width: 30px;
@@ -181,12 +124,91 @@ span.repo-language-dot.javascript {
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
-.mtl-item:hover {
+#showcase .mini-timeline i:hover {
box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23);
transform: scale(1.5);
}
-.notice {
- margin: 5px;
- margin-bottom: -10px!important;
+/* Projects */
+
+#projects {
+ padding-top: 0;
+}
+
+#projects .card {
+ box-shadow: none;
+ border: #d1d5da 1px solid;
+ border-radius: 3px;
+ transition: all 0.2s cubic-bezier(.25,.8,.25,1);
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
+
+#projects .card:hover {
+ box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+#projects .card-header {
+ box-shadow: none;
+ font-size: 1.25rem;
+ padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+#projects .card-header-icon {
+ font-size: 1.5rem;
+ padding: 0 1rem 0 0;
+}
+
+#projects .card-header-title {
+ padding: 0;
+ color: #7289DA;
+}
+
+#projects .card:hover .card-header-title {
+ color: #363636;
+}
+
+#projects .card-content {
+ padding-top: 8px;
+ padding-bottom: 1rem;
+}
+
+#projects .card-footer {
+ margin-top: auto;
+ border: none;
+}
+
+#projects .card-footer-item {
+ border: none;
+}
+
+#projects .card-footer-item i {
+ margin-right: 0.5rem;
+}
+
+#projects .repo-language-dot {
+ border-radius: 50%;
+ height: 12px;
+ width: 12px;
+ top: -1px;
+ display: inline-block;
+ position: relative;
+}
+
+#projects .repo-language-dot.python { background-color: #3572A5; }
+#projects .repo-language-dot.html { background-color: #e34c26; }
+#projects .repo-language-dot.css { background-color: #563d7c; }
+#projects .repo-language-dot.javascript { background-color: #f1e05a; }
+
+/* Sponsors */
+
+#sponsors .hero-body {
+ padding-top: 2rem;
+ padding-bottom: 3rem;
+}
+
+#sponsors img {
+ height: 5rem;
+ margin-right: 2rem;
}
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-18 08:55:50 +0000