aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static/css')
-rw-r--r--pydis_site/static/css/base/base.css15
-rw-r--r--pydis_site/static/css/collapsibles.css11
-rw-r--r--pydis_site/static/css/content/page.css13
-rw-r--r--pydis_site/static/css/events/base.css8
-rw-r--r--pydis_site/static/css/home/index.css10
-rw-r--r--pydis_site/static/css/resources/resources.css298
-rw-r--r--pydis_site/static/css/resources/resources_list.css55
-rw-r--r--pydis_site/static/css/staff/logs.css3
8 files changed, 322 insertions, 91 deletions
diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index f3fe1e44..4b36b7ce 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -78,12 +78,20 @@ main.site-content {
color: #00000000;
}
+#netcup-logo {
+ padding-left: 15px;
+ background: url(https://www.netcup-wiki.de/static/assets/images/netcup_logo_white.svg) no-repeat center;
+ background-size: 60px;
+ background-position: 0px 3px;
+ color: #00000000;
+}
+
#django-logo {
padding-bottom: 2px;
- background: url(https://static.djangoproject.com/img/logos/django-logo-negative.png) no-repeat center;
- filter: grayscale(1) invert(0.02);
+ background: url(https://static.djangoproject.com/img/logos/django-logo-negative.svg) no-repeat center;
+ filter: grayscale(1) invert(0.09);
background-size: 52px 25.5px;
- background-position: -1px -2px;
+ background-position: -2px -1px;
color: #00000000;
}
@@ -92,6 +100,7 @@ main.site-content {
height: 20px;
background: url(https://bulma.io/images/bulma-logo-white.png) no-repeat center;
background-size: 60px;
+ background-position: 0px 3px;
color: #00000000;
}
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
new file mode 100644
index 00000000..1d73fa00
--- /dev/null
+++ b/pydis_site/static/css/collapsibles.css
@@ -0,0 +1,11 @@
+.collapsible {
+ cursor: pointer;
+ width: 100%;
+ border: none;
+ outline: none;
+}
+
+.collapsible-content {
+ transition: max-height 0.3s ease-out;
+ overflow: hidden;
+}
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 2d4bd325..d831f86d 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -77,16 +77,3 @@ ul.menu-list.toc {
li img {
margin-top: 0.5em;
}
-
-.collapsible {
- cursor: pointer;
- width: 100%;
- border: none;
- outline: none;
-}
-
-.collapsible-content {
- overflow: hidden;
- max-height: 0;
- transition: max-height 0.2s ease-out;
-}
diff --git a/pydis_site/static/css/events/base.css b/pydis_site/static/css/events/base.css
index 266bca1d..9e244ed9 100644
--- a/pydis_site/static/css/events/base.css
+++ b/pydis_site/static/css/events/base.css
@@ -10,3 +10,11 @@ pre {
*/
background-color: #282c34;
}
+
+.panel .panel-heading {
+ /*
+ * Remove whitespace between the panel heading and the first item in a panel,
+ * since it makes the first panel item taller than the others.
+ */
+ margin-bottom: 0 !important
+}
diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css
index 7ec8af74..e117a35b 100644
--- a/pydis_site/static/css/home/index.css
+++ b/pydis_site/static/css/home/index.css
@@ -49,11 +49,16 @@ h1 {
margin: auto auto;
}
-#wave-hero-right 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;
+ transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+}
+
+#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);
}
#wave-hero .wave {
@@ -121,8 +126,7 @@ h1 {
margin: 0 4% 0 4%;
background-color: #3EB2EF;
color: white;
- font-size: 15px;
- line-height: 33px;
+ line-height: 31px;
border:none;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index cf4cb472..96d06111 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,293 @@
-.box, .tile.is-parent {
- transition: 0.1s ease-out;
+/* Colors for icons */
+i.resource-icon.is-orangered {
+ color: #FE640A;
}
-.box {
- min-height: 15vh;
+i.resource-icon.is-blurple {
+ color: #7289DA;
}
-.tile.is-parent:hover .box {
- box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+i.resource-icon.is-teal {
+ color: #95DBE5;
}
-.tile.is-parent:hover {
- padding: 0.65rem 0.85rem 0.85rem 0.65rem;
- filter: saturate(1.1) brightness(1.1);
+i.resource-icon.is-youtube-red {
+ color: #BB0000;
+}
+i.resource-icon.is-black {
+ color: #2c3334;
+}
+
+/* Colors when icons are hovered */
+i.resource-icon.is-hoverable:hover {
+ filter: brightness(125%);
+}
+i.resource-icon.is-hoverable.is-black:hover {
+ filter: brightness(170%);
+}
+i.resource-icon.is-hoverable.is-teal:hover {
+ filter: brightness(80%);
+}
+
+/* Icon padding */
+.breadcrumb-section {
+ padding: 1rem;
+}
+i.has-icon-padding {
+ padding: 0 10px 25px 0;
+}
+#tab-content p {
+ display: none;
+}
+#tab-content p.is-active {
+display: block;
+}
+
+/* Disable highlighting for all text in the filters. */
+.filter-checkbox,
+.filter-panel label,
+.card-header span {
+ user-select: none
+}
+
+/* Remove pointless margin in panel header */
+#filter-panel-header {
+ margin-bottom: 0;
+}
+
+/* Full width filter cards */
+#resource-filtering-panel .card .collapsible-content .card-content {
+ padding:0
+}
+
+/* Don't round the corners of the collapsibles */
+.filter-category-header {
+ border-radius: 0;
+}
+
+/* Make the checkboxes indent under the filter headers */
+.filter-category-header .card-header .card-header-title {
+ padding-left: 0;
+}
+.filter-panel {
+ padding-left: 1.5rem;
+}
+.filter-checkbox {
+ margin-right: 0.25em !important;
+}
+
+/* Style the search bar */
+#resource-search {
+ margin: 0.25em 0.25em 0 0.25em;
+}
+
+/* Center the 404 div */
+.no-resources-found {
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ margin-top: 1em;
+}
+
+/* Make sure jQuery will use flex when setting `show()` again. */
+.no-resources-found[style*='display: block'] {
+ display: flex !important;
+}
+
+/* By default, we hide the search tag. We'll add it only when there's a search happening. */
+.tag.search-query {
+ display: none;
+ min-width: fit-content;
+ max-width: fit-content;
+ padding-right: 2em;
+}
+.tag.search-query .inner {
+ display: inline-block;
+ padding: 0;
+ max-width: 16.5rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ line-height: 2em;
+}
+.tag.search-query i {
+ margin: 0 !important;
+ display: inline-block;
+ line-height: 2em;
+ float: left;
+ padding-right: 1em;
+}
+
+/* Don't allow the tag pool to exceed its parent containers width. */
+#tag-pool {
+ max-width: 100%;
+}
+
+/* Disable clicking on the checkbox itself. */
+/* Instead, we want to let the anchor tag handle clicks. */
+.filter-checkbox {
+ pointer-events: none;
+}
+
+/* Blurple category icons */
+i.is-primary {
+ color: #7289da;
}
-#readingBlock {
- background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);
+/* A little space above the filter card, please! */
+.filter-tags {
+ padding-bottom: .5em;
}
-#interactiveBlock {
- background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);
+/* Style the close all filters button */
+.close-filters-button {
+ margin-left: auto;
+ display:none;
+}
+.close-filters-button a {
+ height: fit-content;
+ width: fit-content;
+ margin-right: 6px;
+}
+.close-filters-button a i {
+ color: #939bb3;
+}
+.close-filters-button a i:hover {
+ filter: brightness(115%);
+}
+
+/* When hovering title anchors, just make the color a lighter primary, not black. */
+.resource-box a:hover {
+ filter: brightness(120%);
+ color: #7289DA;
+}
+
+/* Set default display to inline-flex, for centering. */
+span.filter-box-tag {
+ display: none;
+ align-items: center;
+ cursor: pointer;
+ user-select: none;
+}
+
+/* Make sure jQuery will use inline-flex when setting `show()` again. */
+span.filter-box-tag[style*='display: block'] {
+ display: inline-flex !important;
+}
+
+/* Make resource tags clickable */
+.resource-tag {
+ cursor: pointer;
+ user-select: none;
+}
+
+/* Give the resource tags a bit of breathing room */
+.resource-tag-container {
+ padding-left: 1.5rem;
+}
+
+/* When hovering tags, brighten them a bit. */
+.resource-tag:hover,
+.filter-box-tag:hover {
+ filter: brightness(95%);
+}
+
+/* Move the x down 1 pixel to align center */
+button.delete {
+ margin-top: 1px;
+}
+
+/* Colors for delete button x's */
+button.delete.is-primary::before,
+button.delete.is-primary::after {
+ background-color: #2a45a2;
+}
+button.delete.is-success::before,
+button.delete.is-success::after {
+ background-color: #2c9659;
+}
+button.delete.is-danger::before,
+button.delete.is-danger::after {
+ background-color: #c32841;
+}
+button.delete.is-info::before,
+button.delete.is-info::after {
+ background-color: #237fbd;
+}
+
+/* Give outlines to active tags */
+span.filter-box-tag,
+span.resource-tag.active,
+.tag.search-query {
+ outline-width: 1px;
+ outline-style: solid;
+}
+
+/* Disable transitions */
+.no-transition {
+ -webkit-transition: none !important;
+ -moz-transition: none !important;
+ -o-transition: none !important;
+ transition: none !important;
+}
+
+/* Make filter tags sparkle when selected! */
+@keyframes glow_success {
+ from { box-shadow: 0 0 2px 2px #aef4af; }
+ 33% { box-shadow: 0 0 2px 2px #87af7a; }
+ 66% { box-shadow: 0 0 2px 2px #9ceaac; }
+ to { box-shadow: 0 0 2px 2px #7cbf64; }
+}
+
+@keyframes glow_primary {
+ from { box-shadow: 0 0 2px 2px #aeb8f3; }
+ 33% { box-shadow: 0 0 2px 2px #909ed9; }
+ 66% { box-shadow: 0 0 2px 2px #6d7ed4; }
+ to { box-shadow: 0 0 2px 2px #6383b3; }
+}
+
+@keyframes glow_danger {
+ from { box-shadow: 0 0 2px 2px #c9495f; }
+ 33% { box-shadow: 0 0 2px 2px #92486f; }
+ 66% { box-shadow: 0 0 2px 2px #d455ba; }
+ to { box-shadow: 0 0 2px 2px #ff8192; }
+}
+@keyframes glow_info {
+ from { box-shadow: 0 0 2px 2px #4592c9; }
+ 33% { box-shadow: 0 0 2px 2px #6196bb; }
+ 66% { box-shadow: 0 0 2px 2px #5adade; }
+ to { box-shadow: 0 0 2px 2px #6bcfdc; }
+}
+
+span.resource-tag.active.is-primary {
+ animation: glow_primary 4s infinite alternate;
+}
+span.resource-tag.active.has-background-danger-light {
+ animation: glow_danger 4s infinite alternate;
+}
+span.resource-tag.active.has-background-success-light {
+ animation: glow_success 4s infinite alternate;
+}
+span.resource-tag.active.has-background-info-light {
+ animation: glow_info 4s infinite alternate;
}
-#communitiesBlock {
- background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);
+/* Smaller filter category headers when on mobile */
+@media screen and (max-width: 480px) {
+ .filter-category-header .card-header .card-header-title {
+ font-size: 14px;
+ padding: 0;
+ }
+ .filter-panel {
+ padding-top: 4px;
+ padding-bottom: 4px;
+ }
+ .tag.search-query .inner {
+ max-width: 16.2rem;
+ }
}
-#podcastsBlock {
- background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);
+/* Constrain the width of the filterbox */
+@media screen and (min-width: 769px) {
+ .filtering-column {
+ max-width: 25rem;
+ min-width: 18rem;
+ }
}
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
deleted file mode 100644
index 33129c87..00000000
--- a/pydis_site/static/css/resources/resources_list.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.breadcrumb-section {
- padding: 1rem;
-}
-
-i.resource-icon.is-orangered {
- color: #FE640A;
-}
-
-i.resource-icon.is-orangered:hover {
- color: #fe9840;
-}
-
-i.resource-icon.is-blurple {
- color: #7289DA;
-}
-
-i.resource-icon.is-blurple:hover {
- color: #93a8da;
-}
-
-i.resource-icon.is-teal {
- color: #95DBE5;
-}
-
-i.resource-icon.is-teal:hover {
- color: #a9f5ff;
-}
-
-i.resource-icon.is-youtube-red {
- color: #BB0000;
-}
-
-i.resource-icon.is-youtube-red:hover {
- color: #f80000;
-}
-
-i.resource-icon.is-amazon-orange {
- color: #FF9900;
-}
-
-i.resource-icon.is-amazon-orange:hover {
- color: #ffb71a;
-}
-
-i.resource-icon.is-black {
- color: #000000;
-}
-
-i.resource-icon.is-black {
- color: #191919;
-}
-
-i.has-icon-padding {
- padding: 0 10px 25px 0;
-}
diff --git a/pydis_site/static/css/staff/logs.css b/pydis_site/static/css/staff/logs.css
index acf4f1f7..56a12380 100644
--- a/pydis_site/static/css/staff/logs.css
+++ b/pydis_site/static/css/staff/logs.css
@@ -25,7 +25,10 @@ main.site-content {
.discord-message:first-child {
border-top: 1px;
+}
+.discord-message-content {
+ overflow-wrap: break-word;
}
.discord-message-header {