diff options
Diffstat (limited to 'scss/pysite')
22 files changed, 788 insertions, 0 deletions
diff --git a/scss/pysite/_fonts.scss b/scss/pysite/_fonts.scss new file mode 100644 index 00000000..51c88e96 --- /dev/null +++ b/scss/pysite/_fonts.scss @@ -0,0 +1,20 @@ +// Styling related to specific font-faces. +// scss-lint:disable QualifyingElement UrlFormat + +@font-face { + font-family: "Fira Code"; + + src: url("https://unpkg.com/firacode/distr/eot/FiraCode-Regular.eot"); + src: url("https://unpkg.com/firacode/distr/eot/FiraCode-Regular.eot?#iefix") format("embedded-opentype"), + url("https://unpkg.com/firacode/distr/woff2/FiraCode-Regular.woff2") format("woff2"), + url("https://unpkg.com/firacode/distr/woff/FiraCode-Regular.woff") format("woff"), + url("https://unpkg.com/firacode/distr/ttf/FiraCode-Regular.ttf") format("truetype"); +} + +.fira-code { + font-family: 'Fira Code', "monospace", Fallback; +} + +textarea.fira-code { + line-height: 1.3 !important; +} diff --git a/scss/pysite/_mixins.scss b/scss/pysite/_mixins.scss new file mode 100644 index 00000000..a7883a23 --- /dev/null +++ b/scss/pysite/_mixins.scss @@ -0,0 +1,43 @@ +// scss-lint:disable VendorPrefix + +@mixin linear_gradient_background($base_colour, $start_colour, $end_colour) { + // Apply a linear gradient background to a selector + // scss-lint:disable DuplicateProperty NameFormat + + background: $base_colour; + background: -webkit-linear-gradient(top, $start_colour 3%, $end_colour 100%); + background: -moz-linear-gradient(top, $start_colour 3%, $end_colour 100%); + background: -ms-linear-gradient(top, $start_colour 3%, $end_colour 100%); + background: -o-linear-gradient(top, $start_colour 3%, $end_colour 100%); + background: -webkit-gradient(linear, top, bottom, color-stop(3%, $start_colour), color-stop(100%, $end_colour)); + background: linear-gradient(to bottom, $start_colour 3%, $end_colour 100%); + + // Why is this a thing? + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$base_colour}', endColorstr='#{$end_colour}', GradientType=0); +} + +@mixin box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) { + // Apply a box shadow to a selector + -webkit-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour; + -moz-box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour; + box-shadow: $offset_x $offset_y $blur_radius $spread_radius $colour; +} + +@mixin inset_box_shadow($offset_x, $offset_y, $colour, $blur_radius: 0, $spread_radius: 0) { + // Apply an inset box shadow to a selector + -webkit-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour; + -moz-box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour; + box-shadow: inset $offset_x $offset_y $blur_radius $spread_radius $colour; +} + +@mixin border_radius($radius) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + border-radius: $radius; +} + +@mixin transition($type, $time, $effect) { + transition: $type $time $effect; + -moz-transition: $type $time $effect; + -webkit-transition: $type $time $effect; +} diff --git a/scss/pysite/_uikit_shim.scss b/scss/pysite/_uikit_shim.scss new file mode 100644 index 00000000..38e58abc --- /dev/null +++ b/scss/pysite/_uikit_shim.scss @@ -0,0 +1,110 @@ +// Styling that modifies things that are already provided +// by UIKit. This file is intended to be imported from the +// main `style.scss`. + + +@import "variables"; + +$button_dark_background_colour: rgba(0, 0, 0, .95); +$button_dark_border_colour: rgba(34, 34, 34, .93); +$button_dark_hover_background_colour: rgba(0, 0, 0, .70); + +$button_darkish_background_colour: rgba(0, 0, 0, .11); +$button_darkish_border_colour: rgba(34, 34, 34, .09); +$button_darkish_hover_background_colour: rgba(0, 0, 0, .22); + +$dropbar_background_colour: #222222; +$nav_header_colour: #666666; + +.uk-offcanvas-content { + flex: 1 0 auto; +} + +.uk-background-secondary .uk-navbar-dropdown-nav { + .uk-active a { + color: $white; + } + + .uk-nav-header { + color: $nav_header_colour; + font-size: 120%; + font-weight: bold; + padding: 0; + text-transform: none; + + &.uk-active { + color: $white; + } + } + + .uk-navbar-dropbar { + background: $dropbar_background_colour; + } +} + +.uk-navbar-container, +.uk-sticky-placeholder, +.uk-navbar-nav > li > a, +.uk-navbar-left > a { + height: 70px; +} + +.uk-navbar-dropdown { + overflow-y: auto; + top: 45px !important; +} + +.uk-article-title { + margin-bottom: 0 !important; +} + +.uk-article-meta { + margin-left: 2px; + margin-top: 0 !important; +} + +.uk-section { + padding-bottom: 30px; + padding-top: 20px; +} + +.uk-heading-divider .uk-article-meta { + margin-bottom: 0; +} + +footer { + // scss-lint:disable QualifyingElement + flex-shrink: 0; + + div.uk-section { + padding: 0; + + div.uk-text-center { + margin-top: 20px; + } + } +} + +.uk-button-dark { + background: $button_dark_background_colour; + border: 1px solid $button_dark_border_colour; + color: $white; + + :hover { + background: $button_dark_hover_background_colour; + } +} + +.uk-button-darkish { // Technically our own style, but uses the uk prefix + background: $button_darkish_background_colour; + border: 1px solid $button_darkish_border_colour; + + :hover { + background: $button_darkish_hover_background_colour; + } +} + +.uk-navbar-container { + padding-left: 40px; + padding-right: 40px; +} diff --git a/scss/pysite/_variables.scss b/scss/pysite/_variables.scss new file mode 100644 index 00000000..4b249387 --- /dev/null +++ b/scss/pysite/_variables.scss @@ -0,0 +1,8 @@ +// Variables for use throughout the site's SCSS files + + +$white: #FFFFFF; +$black: #000000; +$red: #FF0000; + +$primary_background: #7289DA; diff --git a/scss/pysite/pages/_rst.scss b/scss/pysite/pages/_rst.scss new file mode 100644 index 00000000..8274eb5f --- /dev/null +++ b/scss/pysite/pages/_rst.scss @@ -0,0 +1,19 @@ +// Page-specific styling for pages that make use of embedded +// RST documents that have been parsed into HTML. + + +$page_classes: ( + uses-rst, // All pages that declare their use of the RST parser +); + +@each $class in $page_classes { + .#{$class} { + .document li p { + margin-bottom: 0; + } + + .document img { + margin-bottom: 20px; + } + } +} diff --git a/scss/pysite/pages/errors/_common.scss b/scss/pysite/pages/errors/_common.scss new file mode 100644 index 00000000..27dac785 --- /dev/null +++ b/scss/pysite/pages/errors/_common.scss @@ -0,0 +1,131 @@ +@import "mixins"; +@import "variables"; + +$close_button_background: #FF5F4F; + +$error_header_color: #E84149; + +$half_opacity_black: rgba(0, 0, 0, .5); + +$maximize_button_background: #19CC32; +$minimize_button_background: #F9C206; + +$muted_background: #E8E8E8; + +$top_bar_background_gradient_1: #F1F1F1; +$top_bar_background_gradient_2: #E9E9E9; +$top_bar_background_gradient_3: #D8D8D8; +$top_bar_bottom_border: #BDBCC1; +$top_bar_shadow_colour: rgba(255, 255, 255, .76); + +$window_border: #C1C2C2; + +$page_classes: ( + blueprint-error, // All error pages +); + +@each $class in $page_classes { + .#{$class} { + .window { + @include border_radius(4px); + @include box_shadow(0, 4px, $half_opacity_black, 12px); + + border: 1px solid $window_border; + height: 500px; + margin: 20px auto auto; + width: 100%; + } + + .inside { + background: $black; + height: 100%; + padding-right: 20px; + } + + .block { + background: $black; + width: 100%; + } + + .top, + .panel { + float: left; + } + + .top { + @include linear_gradient_background($top_bar_background_gradient_1, $top_bar_background_gradient_2, $top_bar_background_gradient_3); + @include inset_box_shadow(0, 1px, $top_bar_shadow_colour, 1px, 0); + + border-bottom: 2px solid $top_bar_bottom_border; + overflow: hidden; + padding: 7px 0; + position: relative; + width: 100%; + } + + .panel { + padding-left: 9px; + padding-top: 2px; + } + + // Window buttons + + #terminal-close, + #second-button, + #third-button { + @include border_radius(6px); + + cursor: pointer; + display: inline-block; + float: left; + height: 12px; + margin-right: 7px; + width: 12px; + } + + #terminal-close { + background: $close_button_background; + } + + #second-button { + background: $minimize_button_background; + } + + #third-button { + background: $maximize_button_background; + } + + #terminal { + background-color: $black; + color: $white; + height: 100%; + width: 100%; + + code { + white-space: pre-wrap; + } + } + + pre { + border: 0; + border-radius: 3px; + } + + .uk-background-muted, + .error-header { + background-color: $muted_background !important; + } + + .error-header { + color: $error_header_color; + font-family: monospace; + } + + code, + pre { + overflow-wrap: break-word; + width: 100%; + word-wrap: break-word; + } + } +} diff --git a/scss/pysite/pages/main/_index.scss b/scss/pysite/pages/main/_index.scss new file mode 100644 index 00000000..36a046cf --- /dev/null +++ b/scss/pysite/pages/main/_index.scss @@ -0,0 +1,11 @@ +$page_classes: ( + page-main-index, +); + +@each $class in $page_classes { + .#{$class} { + #invite-button { + padding: 0; + } + } +} diff --git a/scss/pysite/pages/main/about/_partners.scss b/scss/pysite/pages/main/about/_partners.scss new file mode 100644 index 00000000..280d9a46 --- /dev/null +++ b/scss/pysite/pages/main/about/_partners.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-main-about-partners, +); + +@each $class in $page_classes { + .#{$class} { + #partner-cards .uk-card-default { + margin-top: 2em; + text-align: center; + } + } +} diff --git a/scss/pysite/pages/main/about/_privacy.scss b/scss/pysite/pages/main/about/_privacy.scss new file mode 100644 index 00000000..b4203f8d --- /dev/null +++ b/scss/pysite/pages/main/about/_privacy.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-main-about-privacy, +); + +@each $class in $page_classes { + .#{$class} { + td, + th { + max-width: 30rem; + } + } +} diff --git a/scss/pysite/pages/main/info/_resources.scss b/scss/pysite/pages/main/info/_resources.scss new file mode 100644 index 00000000..ec2854d7 --- /dev/null +++ b/scss/pysite/pages/main/info/_resources.scss @@ -0,0 +1,29 @@ +$page_classes: ( + page-main-info-resources, +); + +@each $class in $page_classes { + .#{$class} { + .payment-icon { + margin-right: 1em; + + img { + height: 2em; + } + } + + .payment-description { + height: 3.7rem; + margin-right: .5rem; + vertical-align: text-bottom; + } + + .resource-title { + margin-bottom: -1rem; + + div { + padding-bottom: 0; + } + } + } +} diff --git a/scss/pysite/pages/main/jams/_index.scss b/scss/pysite/pages/main/jams/_index.scss new file mode 100644 index 00000000..80e6fd3d --- /dev/null +++ b/scss/pysite/pages/main/jams/_index.scss @@ -0,0 +1,11 @@ +$page_classes: ( + page-main-jams-index, +); + +@each $class in $page_classes { + .#{$class} { + .date-separator { + vertical-align: middle; + } + } +} diff --git a/scss/pysite/pages/main/jams/_join.scss b/scss/pysite/pages/main/jams/_join.scss new file mode 100644 index 00000000..6281edee --- /dev/null +++ b/scss/pysite/pages/main/jams/_join.scss @@ -0,0 +1,33 @@ +$page_classes: ( + page-main-jams-join, +); + +@each $class in $page_classes { + .#{$class} { + .question-label { + margin-top: 0; + } + + .checkbox-label { + padding-left: .7rem; + } + + .radio-label { + padding-left: .7rem; + padding-right: 1rem; + } + + .range-label { + padding-left: .3rem; + } + + .textarea { + min-height: 15rem; + resize: vertical; + } + + .slider-label { + margin-right: 1rem; + } + } +} diff --git a/scss/pysite/pages/staff/jams/_edit_ending.scss b/scss/pysite/pages/staff/jams/_edit_ending.scss new file mode 100644 index 00000000..c21d3bd8 --- /dev/null +++ b/scss/pysite/pages/staff/jams/_edit_ending.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-jams-edit-ending, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + #editor { + min-height: 50vh; + resize: vertical; + } + } +} diff --git a/scss/pysite/pages/staff/jams/_edit_info.scss b/scss/pysite/pages/staff/jams/_edit_info.scss new file mode 100644 index 00000000..5863c2bb --- /dev/null +++ b/scss/pysite/pages/staff/jams/_edit_info.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-jams-edit-info, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .editor { + min-height: 30vh; + resize: vertical; + } + } +} diff --git a/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss b/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss new file mode 100644 index 00000000..2847b3d5 --- /dev/null +++ b/scss/pysite/pages/staff/jams/forms/_preamble_edit.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-jams-forms-preamble-edit, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .editor { + min-height: 30vh; + resize: vertical; + } + } +} diff --git a/scss/pysite/pages/staff/jams/forms/_questions_view.scss b/scss/pysite/pages/staff/jams/forms/_questions_view.scss new file mode 100644 index 00000000..eea8eab2 --- /dev/null +++ b/scss/pysite/pages/staff/jams/forms/_questions_view.scss @@ -0,0 +1,13 @@ +$page_classes: ( + page-staff-jams-forms-questions, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .delete-question-button, + .edit-question-button { + padding-left: 5px; + padding-right: 5px; + } + } +} diff --git a/scss/pysite/pages/staff/jams/forms/_view.scss b/scss/pysite/pages/staff/jams/forms/_view.scss new file mode 100644 index 00000000..f0a233f3 --- /dev/null +++ b/scss/pysite/pages/staff/jams/forms/_view.scss @@ -0,0 +1,13 @@ +$page_classes: ( + page-staff-jams-forms-view, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .delete-question-button, + .edit-question-button { + padding-left: 5px; + padding-right: 5px; + } + } +} diff --git a/scss/pysite/pages/staff/jams/infractions/_view.scss b/scss/pysite/pages/staff/jams/infractions/_view.scss new file mode 100644 index 00000000..bcee8fdf --- /dev/null +++ b/scss/pysite/pages/staff/jams/infractions/_view.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-jams-infractions, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .delete-infraction-button { + padding-left: 5px; + padding-right: 5px; + } + } +} diff --git a/scss/pysite/pages/staff/tables/_edit.scss b/scss/pysite/pages/staff/tables/_edit.scss new file mode 100644 index 00000000..17b1fecd --- /dev/null +++ b/scss/pysite/pages/staff/tables/_edit.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-tables-edit, +); + +@each $class in $page_classes { + .#{$class} { + #editor { + min-height: 50vh; + resize: vertical; + } + } +} diff --git a/scss/pysite/pages/staff/tables/_table.scss b/scss/pysite/pages/staff/tables/_table.scss new file mode 100644 index 00000000..cfe5b658 --- /dev/null +++ b/scss/pysite/pages/staff/tables/_table.scss @@ -0,0 +1,12 @@ +$page_classes: ( + page-staff-tables-table, +); + +@each $class in $page_classes { + .#{$class} { + .delete-infraction-button { + padding-left: 5px; + padding-right: 5px; + } + } +} diff --git a/scss/pysite/pages/wiki/_common.scss b/scss/pysite/pages/wiki/_common.scss new file mode 100644 index 00000000..c5ab3a2f --- /dev/null +++ b/scss/pysite/pages/wiki/_common.scss @@ -0,0 +1,82 @@ +@import "variables"; + +$quote_colour: #99AAB5; +$sidebar_button_border_colour: rgba(0, 0, 0, .11); + +$page_classes: ( + blueprint-wiki, // All wiki pages +); + +@each $class in $page_classes { + .#{$class} { + .quote { + border-left: 3px solid $primary_background; + color: $quote_colour; + margin-bottom: 1rem; + padding-left: 20px; + } + + #wiki-nav .uk-nav-divider { + min-width: 8rem; + } + + #wiki-sidebar { + transition: width ease 1s; + } + + #wiki-page { + overflow-x: hidden; + } + + #wiki-sidebar-button { + align-items: center; + border: 1px solid $sidebar_button_border_colour; + color: $white; + height: 3rem; + justify-content: center; + min-height: 3rem; + min-width: 3rem; + width: 3rem; + } + + #doc-view { + width: calc(100% - 6rem); + } + + @media (max-width: 639px) { + #doc-view { + width: calc(100% - 1rem); + } + } + + #editor { + min-height: 50vh; + resize: vertical; + } + + .sidebar-search-input { + border-left: 0; + border-right: 0; + margin-top: 5px; + padding-right: 0; + } + + .search-button { + border: 0; + width: 100%; + } + + .content { + flex-grow: 1; + margin: 0 1rem 1rem; + } + + .location-input { + margin-left: 15px; + } + + .preview-title { + padding: 1rem 1rem .1rem; + } + } +} diff --git a/scss/pysite/style.scss b/scss/pysite/style.scss new file mode 100644 index 00000000..09396faf --- /dev/null +++ b/scss/pysite/style.scss @@ -0,0 +1,169 @@ +// General imports, for styles that apply to all pages +// scss-lint:disable QualifyingElement + +@import "fonts"; +@import "mixins"; +@import "uikit_shim"; +@import "variables"; + +/* + Page-specific styling imports + + You can target pages in the following ways: + + * For specific pages, take the view name, prefix it with + "page-" and replace all the dots with dashes. This will + give you a class that only matches that page. + * For all pages under a specific blueprint, take the blueprint + name, prefix it with "blueprint-" and replace all the dots with + dashes. This will give you a class that matches every page + under that blueprint. + + For example: + "main.index.jams" -> ".page-main-index-jams" + "wiki" -> ".blueprint-wiki" + + Additionally, you can use your own class names for categories of pages. + For example, you might provide a "uses-rst" class, which you would then + make use of in your templates by putting it in a "page_classes" block. + + For example: + {% block page_classes %}uses-rst{% endblock %} + + If you do this, make sure you document it on the wiki! +*/ + + +// Styles useful across all pages +@import "pages/rst"; + +// Sectional: Errors Blueprint +@import "pages/errors/common"; + +// Sectional: Main Blueprint +@import "pages/main/index"; + +@import "pages/main/about/partners"; +@import "pages/main/about/privacy"; + +@import "pages/main/info/resources"; + +@import "pages/main/jams/index"; +@import "pages/main/jams/join"; + +// Sectional: Staff Blueprint +@import "pages/staff/jams/edit_ending"; +@import "pages/staff/jams/edit_info"; + +@import "pages/staff/jams/forms/preamble_edit"; +@import "pages/staff/jams/forms/questions_view"; +@import "pages/staff/jams/forms/view"; + +@import "pages/staff/jams/infractions/view"; + +@import "pages/staff/tables/edit"; +@import "pages/staff/tables/table"; + +// Sectional: Wiki Blueprint +@import "pages/wiki/common"; + +/* + Custom styling using our own classes and IDs. If instead you're + modifying existing UIKit styles to better suit our site, you should + put it in the UIKit shim file instead. +*/ + +$table_border_colour: rgb(229, 229, 229); + +html { + height: 100%; + + body { + display: flex; + flex-direction: column; + height: 100%; + } +} + +.navbar-logo { + height: 60%; + margin-left: -10px; + margin-top: 2px; + max-width: 110%; + padding-left: 3px; +} + +.hover-title a { + @include transition(opacity, 200ms, ease-in-out); + + opacity: 0; + visibility: hidden; +} + +.hover-title:hover a { + @include transition(opacity, 200ms, ease-in-out); + + opacity: 1; + visibility: visible; +} + +.debug-mode-item { + color: $primary_background !important; +} + +.sponsor-logo { + max-width: 15rem; +} + +.cursor-default { + cursor: default !important; +} + +.full-width { + width: 100%; +} + +// Forms + +select { + -webkit-appearance: unset !important; + + left: auto !important; + opacity: 1 !important; + position: relative !important; + top: auto !important; +} + +div.danger-input * { + border-color: $red !important; + color: $red; + + transition: color .5s ease, + border-color .5s ease; +} + +// Tables + +table.table-bordered { + border: 1px solid $table_border_colour !important; +} + +tr.thick-bottom-border { + border-bottom: 3px solid $table_border_colour !important; +} + +td.left-border, +th.left-border { + border-left: 1px solid $table_border_colour !important; +} + +td.right-border, +th.right-border { + border-right: 1px solid $table_border_colour !important; +} + +// Flash of Unstyled Content fixes + +.prevent-fouc { + display: none; +} |