infrastructure/conference-website
1
1
Fork 1
Code Issues 14 Pull Requests Releases Activity

UI: Conference website web-assets v2 upgrade #103970

Merged
Márton Lente merged 50 commits from ui/web-assets-v2-update into main 2024-09-23 12:34:43 +02:00
Conversation 20 Commits 50 Files Changed 47 +130 -123
18 changed files with 130 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 8bc02a5f5f - Show all commits

2
conference_main/static/conference_main/styles/_albums.sass
View File

@ -29,7 +29,7 @@
.album-info .album-info
@extend .p-4 @extend .p-4
text-shadow: 2px 2px 0 rgba(black, .33), 2px 2px 15px rgba(black, .9) text-shadow: .2rem .2rem 0 rgba(black, .33), .2rem .2rem var(--spacer) rgba(black, .9)
bottom: 0 bottom: 0
color: $white color: $white
left: 0 left: 0

15
conference_main/static/conference_main/styles/_attendee.sass
View File

@ -1,7 +1,8 @@
// TODO: optional change all explicit size values to modular sizing calculations
.attendees .attendees
--grid-items-width: 150px --grid-items-width: 15.0rem
--grid-items-per-row: 2 --grid-items-per-row: 2
--grid-gap-size: 20px --grid-gap-size: 2.0rem
display: grid display: grid
gap: var(--grid-gap-size) gap: var(--grid-gap-size)
@ -62,10 +63,10 @@
line-height: 1 line-height: 1
.attendee-portrait .attendee-portrait
--attendee-portrait-size: 90px --attendee-portrait-size: 9.0rem
+media-sm +media-sm
--attendee-portrait-size: 90px --attendee-portrait-size: 9.0rem
height: var(--attendee-portrait-size) height: var(--attendee-portrait-size)
+margin(auto, x) +margin(auto, x)
@ -78,17 +79,17 @@
filter: unset filter: unset
&.size-md &.size-md
--attendee-portrait-size: 80px --attendee-portrait-size: calc(var(--spacer) * 5)
+media-sm +media-sm
--attendee-portrait-size: 110px --attendee-portrait-size: 110px
--fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px) --fs-lg: clamp(1.2rem, 1.5vw + 1rem, 18px)
&.size-lg &.size-lg
--attendee-portrait-size: 150px --attendee-portrait-size: 15.0rem
+media-sm +media-sm
--attendee-portrait-size: 180px --attendee-portrait-size: 18.0rem
img img

7
conference_main/static/conference_main/styles/_event.sass
View File

@ -11,6 +11,7 @@
&:last-child &:last-child
border: none border: none
// TODO: cleanup remove rule unused
.event-name .event-name
font-size: 2vh font-size: 2vh
line-height: 1em line-height: 1em
@ -78,13 +79,13 @@
align-items: center align-items: center
background-color: var(--color-info-bg) background-color: var(--color-info-bg)
border-radius: var(--border-radius) border-radius: var(--border-radius)
box-shadow: 1px 2px 5px rgba(0, 0, 0, .1) box-shadow: .1rem .2rem var(--spacer-1) rgba(0, 0, 0, .1)
color: var(--color-info) color: var(--color-info)
content: 'UNDER REVIEW' content: 'UNDER REVIEW'
display: flex display: flex
font-size: 10px font-size: 10px
+fw-bold +fw-bold
position: absolute position: absolute
padding: 2px 10px 0 10px padding: .2rem var(--spacer-2) 0 var(--spacer-2)
top: -7px top: -7px
right: -5px right: calc(var(--spacer-1) * -1)

5
conference_main/static/conference_main/styles/_footer.sass
View File

@ -15,6 +15,7 @@ footer
flex-direction: row flex-direction: row
> ul > ul
align-items: center
+list-unstyled +list-unstyled
display: flex display: flex
flex-direction: column flex-direction: column
@ -47,9 +48,9 @@ footer
+fw-normal +fw-normal
.footer-logo .footer-logo
margin-top: -2px margin-top: -.2rem
svg svg
fill: var(--text-color-tertiary) fill: var(--text-color-tertiary)
height: auto height: auto
max-width: 60px max-width: var(--spacer-5)

6
conference_main/static/conference_main/styles/_homepage.sass
View File

@ -3,8 +3,10 @@
.bcon-logo .bcon-logo
text-shadow: none text-shadow: none
// TODO: Revise logo img size for BCON 2024. Set sizing by height
img img
max-width: 300px max-width: 30.0rem
.bcon-date, .bcon-date,
.bcon-place .bcon-place
@ -22,7 +24,7 @@
.location-map .location-map
background-color: var(--color-bg) background-color: var(--color-bg)
border-radius: var(--border-radius) border-radius: var(--border-radius)
height: 420px height: 42.0rem
iframe iframe
border-radius: var(--border-radius) border-radius: var(--border-radius)

8
conference_main/static/conference_main/styles/_icons.sass
View File

@ -1,9 +1,9 @@
.icon .icon
max-width: 1rem max-width: var(--spacer)
position: relative position: relative
width: 1rem width: var(--spacer)
* *
max-width: 1rem max-width: var(--spacer)
position: relative position: relative
width: 1rem width: var(--spacer)

2
conference_main/static/conference_main/styles/_live.sass
View File

@ -11,5 +11,5 @@
iframe iframe
@extend .rounded @extend .rounded
@extend .pt-3 @extend .pt-3
height: 450px height: 44.8rem
width: 100% width: 100%

2
conference_main/static/conference_main/styles/_messages.sass
View File

@ -11,7 +11,7 @@
.message-preview-content .message-preview-content
flex: 1 flex: 1
margin-left: 1rem +margin(3, left)
opacity: .6 opacity: .6
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis

4
conference_main/static/conference_main/styles/_navigation.sass
View File

@ -46,7 +46,7 @@ body.is-scrolled
white-space: nowrap white-space: nowrap
span span
margin: -2px 0 margin: -.2rem 0
+fw-bold +fw-bold
.navbar-brand .navbar-brand
@ -54,7 +54,7 @@ body.is-scrolled
img img
@extend .img-fluid @extend .img-fluid
max-height: 22px max-height: var(--spacer-4)
image-rendering: optimize-contrast image-rendering: optimize-contrast
image-rendering: -webkit-optimize-contrast image-rendering: -webkit-optimize-contrast

18
conference_main/static/conference_main/styles/_panel.sass
View File

@ -13,7 +13,7 @@
background-color: hsla(210deg, 16%, 43%, .1) background-color: hsla(210deg, 16%, 43%, .1)
border-bottom: 3px solid hsla(210deg, 16%, 3%, .7) border-bottom: 3px solid hsla(210deg, 16%, 3%, .7)
display: grid display: grid
gap: 1rem gap: var(--spacer)
grid-template-columns: 8% 60% 12% 20% grid-template-columns: 8% 60% 12% 20%
+padding(2, y) +padding(2, y)
@ -154,7 +154,7 @@
.board-logo .board-logo
img img
max-height: 1.8rem max-height: calc(var(--spacer) * 2)
.panel-social .panel-social
column-count: 3 column-count: 3
@ -168,22 +168,22 @@
align-content: center align-content: center
background-image: linear-gradient(45deg, hsl(197, 100%, 37%), hsl(197, 100%, 67%)) background-image: linear-gradient(45deg, hsl(197, 100%, 37%), hsl(197, 100%, 67%))
border-radius: var(--border-radius) border-radius: var(--border-radius)
box-shadow: inset 0 -2px 0 0 black box-shadow: inset 0 -.2rem 0 0 black
+margin(1) +margin(1)
display: flex display: flex
justify-content: space-between justify-content: space-between
text-shadow: 1px 1px 3px rgba(black, .2), 2px 2px 20px rgba(black, .2) text-shadow: .1rem .1rem var(--spacer-1) rgba(black, .2), .2rem .2rem 2.0rem rgba(black, .2)
ul ul
background-color: hsl(0, 0%, 5%) background-color: hsl(0, 0%, 5%)
column-count: 2 column-count: 2
column-gap: 2px column-gap: .2rem
+list-unstyled +list-unstyled
margin: 0 margin: 0
padding: 0 padding: 0
.social-tweet .social-tweet
border-bottom: 2px solid black border-bottom: .2rem solid black
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
break-inside: avoid break-inside: avoid
color: hsl(210deg, 16%, 84%) color: hsl(210deg, 16%, 84%)
@ -200,7 +200,7 @@
color: white color: white
.tw-media img .tw-media img
box-shadow: 0 0 5px 0 rgba(black, .2) box-shadow: 0 0 var(--spacer-1) 0 rgba(black, .2)
img img
max-height: 40vh max-height: 40vh
@ -221,8 +221,8 @@
img img
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
min-width: 28px min-width: calc(var(--spacer) * 2)
width: 28px width: calc(var(--spacer) * 2)
.tw-date .tw-date
margin-left: auto margin-left: auto

77
conference_main/static/conference_main/styles/_schedule.sass
View File

@ -3,7 +3,6 @@ $col-time-width: 8%
.schedule-container .schedule-container
.event-speakers .event-speakers
+margin(1, y) +margin(1, y)
line-height: 16px
.schedule-container+footer .schedule-container+footer
margin-top: 0 margin-top: 0
@ -26,7 +25,7 @@ $col-time-width: 8%
align-items: baseline align-items: baseline
.btn-group .btn-group
gap: .33rem gap: var(--spacer-1)
.btn-toggle .btn-toggle
border-radius: var(--border-radius) border-radius: var(--border-radius)
@ -39,7 +38,7 @@ $col-time-width: 8%
display: flex display: flex
flex-direction: column flex-direction: column
flex-wrap: wrap flex-wrap: wrap
gap: .33rem gap: var(--spacer-1)
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)
flex-direction: row flex-direction: row
@ -57,23 +56,23 @@ $col-time-width: 8%
&.toggle &.toggle
i i
border-radius: 5px border-radius: var(--spacer)
background-color: white background-color: white
color: currentColor color: currentColor
height: 14px height: var(--spacer)
+margin(1, right) +margin(1, right)
position: relative position: relative
transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed) transition: background-color ease-in-out var(--transition-speed), box-shadow ease-in-out var(--transition-speed)
width: 14px width: var(--spacer)
&:before &:before
font-weight: bold font-weight: bold
left: -5px left: calc(var(--spacer-1) * -1)
opacity: 0 opacity: 0
transform: scale(0) transform: scale(0)
position: relative position: relative
transition: opacity ease-in-out var(--transition-speed), transform ease-in-out var(--transition-speed) transition: opacity ease-in-out var(--transition-speed), transform ease-in-out var(--transition-speed)
top: -5px top: calc(var(--spacer-1) * -1)
input:checked input:checked
&~label i &~label i
@ -139,7 +138,7 @@ $col-time-width: 8%
background-color: var(--color-accent-bg-hover) background-color: var(--color-accent-bg-hover)
.schedule-day-toggles .schedule-day-toggles
gap: .5rem gap: var(--spacer-1)
+padding(2, y) +padding(2, y)
position: sticky position: sticky
top: 0 top: 0
@ -150,7 +149,7 @@ $col-time-width: 8%
body.is-scrolled body.is-scrolled
.schedule-day-toggles .schedule-day-toggles
box-shadow: 0 10px 30px rgba(black, .1) box-shadow: 0 var(--spacer) calc(var(--spacer) * 2) rgba(black, .1)
position: fixed position: fixed
.days-header .days-header
@ -218,6 +217,7 @@ body.is-scrolled
.row-rulers-lg .row-rulers-lg
@include media-breakpoint-up(lg) @include media-breakpoint-up(lg)
+padding(3, y) +padding(3, y)
// TODO: revise border top height
border-top: calc(var(--border-width) * 2) solid rgba(black, .05) border-top: calc(var(--border-width) * 2) solid rgba(black, .05)
.col-rulers .col-rulers
@ -296,9 +296,10 @@ body.is-scrolled
/* Vertical schedule scrolls to this during conference days. */ /* Vertical schedule scrolls to this during conference days. */
.time-line-break .time-line-break
scroll-margin-top: 3.33rem scroll-margin-top: calc(var(--spacer) * 2)
+media-lg +media-lg
scroll-margin-top: 5.66rem scroll-margin-top: calc(var(--spacer) * 3.5)
.time-header-lg .time-header-lg
@extend .col-time @extend .col-time
@ -334,10 +335,10 @@ body.is-scrolled
@extend .col-day @extend .col-day
@extend .row-rulers @extend .row-rulers
@extend .row-rulers-lg @extend .row-rulers-lg
scroll-margin-top: 3.33rem scroll-margin-top: calc(var(--spacer) * 2)
+media-lg +media-lg
scroll-margin-top: 6.33rem scroll-margin-top: calc(var(--spacer) * 4)
&[data-completely-no-events] &[data-completely-no-events]
display: none display: none
@ -360,17 +361,17 @@ body.is-scrolled
/* Current-time slot. */ /* Current-time slot. */
&.happening-now &.happening-now
background-color: var(--color-accent-bg) background-color: var(--color-accent-bg)
box-shadow: 0 0 0 3px inset var(--color-accent-bg-hover) box-shadow: 0 0 0 var(--spacer-1) inset var(--color-accent-bg-hover)
position: relative position: relative
/* Draw an horizontal line across the entire schedule. */ /* Draw an horizontal line across the entire schedule. */
&:before &:before
background-color: var(--color-accent) background-color: var(--color-accent)
content: '' content: ''
height: 3px height: var(--spacer-1)
left: -50% left: -50%
position: absolute position: absolute
top: -3px top: calc(var(--spacer-1) * -1)
transform: translateX(-50%) transform: translateX(-50%)
width: 300vw width: 300vw
@ -456,7 +457,7 @@ body.is-scrolled
/* Ongoing events.. */ /* Ongoing events.. */
&.happening-now &.happening-now
background-color: white !important background-color: white !important
box-shadow: 0 5px 15px var(--color-accent-bg-hover), 0 0 20px rgba(white, .5) box-shadow: 0 var(--spacer-1) var(--spacer) var(--color-accent-bg-hover), 0 0 2.0rem rgba(white, .5)
.event-name .event-name
color: black color: black
@ -468,13 +469,13 @@ body.is-scrolled
visibility: visible visibility: visible
&.is-overlapping &.is-overlapping
box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.35), 0px 15px 20px -1px rgba(0,0,0,0.025) box-shadow: 0 .1rem var(--spacer-1) 0 rgba(0,0,0,0.35), 0 var(--spacer) 2.0rem -.1rem rgba(0,0,0,0.025)
top: 10px top: var(--spacer-2)
&+.is-overlapping &+.is-overlapping
top: 20px top: 2.0rem
.event-name .event-name
line-height: 22px line-height: var(--spacer-4)
.event-details .event-details
display: flex display: flex
@ -509,7 +510,8 @@ body.is-scrolled
display: none display: none
+media-xl +media-xl
--thumbnail-width: 150px --thumbnail-width: 15.0rem
border-bottom-left-radius: var(--border-radius-lg) border-bottom-left-radius: var(--border-radius-lg)
border-top-left-radius: var(--border-radius-lg) border-top-left-radius: var(--border-radius-lg)
border-top-right-radius: 0 border-top-right-radius: 0
@ -537,9 +539,9 @@ body.is-scrolled
.event-border .event-border
background-color: var(--color-bg) background-color: var(--color-bg)
border-radius: 99rem border-radius: calc(var(--spacer) * 10)
+margin(2, top) +margin(2, top)
height: 4px height: var(--spacer-1)
position: absolute position: absolute
width: 100% width: 100%
@ -554,7 +556,8 @@ body.is-scrolled
align-items: center align-items: center
display: flex display: flex
flex-wrap: wrap flex-wrap: wrap
gap: .5rem gap: var(--spacer-1)
line-height: var(--spacer-4)
+list-unstyled +list-unstyled
margin-bottom: 0 margin-bottom: 0
width: 100% width: 100%
@ -577,19 +580,19 @@ body.is-scrolled
background-color: red background-color: red
border-radius: 50% border-radius: 50%
display: none display: none
height: 12px height: 1.2rem
left: .25rem left: var(--spacer-1)
position: absolute position: absolute
top: .25rem top: var(--spacer-1)
visibility: hidden visibility: hidden
width: 12px width: 1.2rem
.event-speakers .event-speakers
color: var(--text-color-secondary) color: var(--text-color-secondary)
.event-tags .event-tags
color: var(--text-color-secondary) color: var(--text-color-secondary)
gap: 1rem gap: var(--spacer)
.event-category .event-category
&-workshop, &-tutorial &-workshop, &-tutorial
@ -610,12 +613,12 @@ body.is-scrolled
/* Horizontal display. */ /* Horizontal display. */
.schedule-container.horizontal .schedule-container.horizontal
--channel-height: 124px --channel-height: calc(var(--spacer) * 9)
--channel-separator: 2px solid hsla(210deg, 16%, 43%, .2) --channel-separator: .2rem solid hsla(210deg, 16%, 43%, .2)
--time-slots-height: 40px --time-slots-height: calc(var(--spacer) * 2.5)
--time-line-hour: 6px 0 0 0 hsla(210deg, 16%, 43%, .1) --time-line-hour: .6rem 0 0 0 hsla(210deg, 16%, 43%, .1)
--time-line-halfhour: 2px dotted hsla(210deg, 16%, 43%, .2) --time-line-halfhour: .2rem dotted hsla(210deg, 16%, 43%, .2)
left: 0 left: 0
overflow: hidden overflow: hidden
@ -756,7 +759,7 @@ body.is-scrolled
color: white color: white
strong strong
left: 1rem left: var(--spacer)
position: sticky position: sticky
/* 30min mark on each hour. */ /* 30min mark on each hour. */

6
conference_main/static/conference_main/styles/_sponsors.sass
View File

@ -1,7 +1,7 @@
.sponsors-container .sponsors-container
--sponsor-level-1-max-size: 300px --sponsor-level-1-max-size: calc(var(--spacer) * 18.75)
--sponsor-level-2-max-size: 265px --sponsor-level-2-max-size: calc(var(--spacer) * 16.75)
--sponsor-level-3-max-size: 215px --sponsor-level-3-max-size: calc(var(--spacer) * 13.5)
background-color: var(--color-bg) background-color: var(--color-bg)
border-top: var(--border-width) solid var(--color-bg-tertiary) border-top: var(--border-width) solid var(--color-bg-tertiary)

34
conference_main/static/conference_main/styles/_utils.sass
View File

@ -50,7 +50,7 @@
content: ' ' content: ' '
=box-shadow-card =box-shadow-card
box-shadow: rgba(0,0,0,0.05) 0px 1px 4px 0px, rgba(0,0,0,0.025) 0px 15px 20px -1px box-shadow: rgba(0,0,0,0.05) 0 .1rem var(--spacer-1) 0, rgba(0,0,0,0.025) 0 var(--spacer) 2.0rem -.1rem
=box-card =box-card
+box-shadow-card +box-shadow-card
@ -155,28 +155,28 @@
=list-bullets =list-bullets
ul ul
padding-left: 20px padding-left: 2.0rem
list-style: none list-style: none
li:before li:before
content: '·' content: '·'
font-weight: 400 font-weight: 400
position: relative position: relative
left: -10px left: -1.0rem
@mixin button($background-color, $text-color, $filled: false, $type: false) @mixin button($background-color, $text-color, $filled: false, $type: false)
background-color: transparent background-color: transparent
border: none border: none
border-radius: var(--border-radius-lg) border-radius: var(--border-radius-lg)
box-shadow: inset 0 0 0 2px $text-color box-shadow: inset 0 0 0 .2rem $text-color
color: $text-color !important color: $text-color !important
display: inline-block display: inline-block
padding: padding:
bottom: 7px bottom: var(--spacer-2)
left: 20px left: 2.0rem
right: 20px right: 2.0rem
top: 7px top: var(--spacer-2)
position: relative position: relative
text-decoration: none !important text-decoration: none !important
transition: color 250ms ease-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out transition: color 250ms ease-out, background-color 150ms ease-in-out, box-shadow 150ms ease-in-out
@ -184,24 +184,24 @@
@if $filled @if $filled
background-color: $background-color background-color: $background-color
box-shadow: inset 0 0 0 2px darken($background-color, 6%) box-shadow: inset 0 0 0 .2rem darken($background-color, 6%)
&:focus &:focus
color: white !important color: white !important
&:hover &:hover
background-color: rgba($background-color, .1) background-color: rgba($background-color, .1)
box-shadow: inset 0 0 0 2px lighten($text-color, 10%) box-shadow: inset 0 0 0 .2rem lighten($text-color, 10%)
color: lighten($text-color, 5%) color: lighten($text-color, 5%)
cursor: pointer cursor: pointer
text-decoration: none text-decoration: none
@if $filled @if $filled
background-color: lighten($background-color, 10%) background-color: lighten($background-color, 10%)
box-shadow: inset 0 0 0 1px lighten($background-color, 5%) box-shadow: inset 0 0 0 .1rem lighten($background-color, 5%)
&:active, &:focus &:active, &:focus
box-shadow: inset 0 0 0 1px lighten($background-color, 10%) box-shadow: inset 0 0 0 .1rem lighten($background-color, 10%)
background-color: rgba($background-color, .3) background-color: rgba($background-color, .3)
color: hsl(hue($text-color), 100%, 85%) color: hsl(hue($text-color), 100%, 85%)
@ -214,11 +214,11 @@
i i
display: inline-block display: inline-block
margin-right: 10px +margin(2, right)
min-width: 16px min-width: var(--spacer)
svg svg
max-width: 12px max-width: 1.2rem
small small
font-size: .6em font-size: .6em
@ -232,8 +232,8 @@
=input-text-generic =input-text-generic
border: thin solid $gray-600 border: thin solid $gray-600
border-radius: 3px border-radius: var(--spacer-1)
padding: 10px +padding(2)
=inputs-generic =inputs-generic
textarea, textarea,

14
conference_main/static/conference_main/styles/bcon20la/_buttons.scss
View File

@ -1,28 +1,28 @@
.btn { .btn {
background: rgba(black, .25); background: rgba(black, .25);
border: 2px solid $neon-green; border: .2rem solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5); box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
border-color: $neon-green!important; border-color: $neon-green!important;
color: white; color: white;
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
background: rgba(black, .25); background: rgba(black, .25);
background-color:rgba(black, .25)!important; background-color:rgba(black, .25)!important;
border-color: $neon-green!important; border-color: $neon-green!important;
box-shadow: 0px 0px 15px 0px rgba($neon-green-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-green-glow, 0.75)!important; box-shadow: 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-green-glow, 0.75)!important;
text-decoration: none; text-decoration: none;
border: 2px solid $neon-green; border: .2rem solid $neon-green;
} }
&.btn-secondary { &.btn-secondary {
border-color: $neon-pink; border-color: $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5); box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
border-color: $neon-pink!important; border-color: $neon-pink!important;
&:hover, &:focus, &:active{ &:hover, &:focus, &:active{
background: rgba(black, .25)!important; background: rgba(black, .25)!important;
background-color:rgba(black, .25)!important; background-color:rgba(black, .25)!important;
border-color: $neon-pink!important; border-color: $neon-pink!important;
box-shadow: 0px 0px 15px 0px rgba($neon-pink-glow, 0.75), inset 0px 0px 15px 0px rgba($neon-pink-glow, 0.75)!important; box-shadow: 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75), inset 0 0 var(--spacer) 0 rgba($neon-pink-glow, 0.75)!important;
text-decoration: none; text-decoration: none;
border: 2px solid $neon-pink; border: .2rem solid $neon-pink;
} }
} }
} }

12
conference_main/static/conference_main/styles/bcon20la/_cards.scss
View File

@ -1,7 +1,7 @@
.card { .card {
background: rgba(black, 0.25); background: rgba(black, 0.25);
border: 2px solid $neon-green; border: .2rem solid $neon-green;
box-shadow: -5px 5px 10px 0px rgba($neon-green-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-green-glow, 0.5); box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-green-glow, 0.5);
color: white; color: white;
a { a {
@ -13,8 +13,8 @@
} }
&.card-yellow { &.card-yellow {
border: 2px solid $neon-yellow; border: .2rem solid $neon-yellow;
box-shadow: -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-yellow-glow, 0.5); box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-yellow-glow, 0.5);
a { a {
&:not(.btn) { &:not(.btn) {
&:hover { &:hover {
@ -25,8 +25,8 @@
} }
&.card-pink { &.card-pink {
border: 2px solid $neon-pink; border: .2rem solid $neon-pink;
box-shadow: -5px 5px 10px 0px rgba($neon-pink-glow, 0.5), inset -5px 5px 10px 0px rgba($neon-pink-glow, 0.5); box-shadow: calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5), inset calc(var(--spacer-1) * -1) var(--spacer-1) var(--spacer-2) 0 rgba($neon-pink-glow, 0.5);
a { a {
&:not(.btn) { &:not(.btn) {
&:hover { &:hover {

6
conference_main/static/conference_main/styles/bcon20la/_header.scss
View File

@ -1,11 +1,11 @@
.full-height-header{ .full-height-header{
height: calc(100vh - 40px); height: calc(100vh - var(--spacer) * 2.5);
} }
.jumbotron{ .jumbotron{
background-attachment: fixed; background-attachment: fixed;
background-position: top center; background-position: top center;
padding: 90px 0 0; padding: 9.0rem 0 0;
.container{ .container{
height: 100%; height: 100%;
} }
@ -13,7 +13,7 @@
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
flex-direction: column; flex-direction: column;
min-height: 90px; min-height: 9.0rem;
background-position: top center; background-position: top center;
.hero-overlay{ .hero-overlay{
background-position: top center; background-position: top center;

14
conference_main/static/conference_main/styles/fullscreen.sass
View File

@ -17,13 +17,13 @@ body
.dz-preview .dz-preview
position: relative position: relative
display: inline-block display: inline-block
width: 120px width: calc(var(--spacer) * 7.5)
margin: 0.5em margin: 0.5em
.dz-progress .dz-progress
display: block display: block
height: 15px height: var(--spacer)
border: 1px solid #aaa border: .1rem solid #aaa
.dz-upload .dz-upload
display: block display: block
@ -45,11 +45,11 @@ body
.dz-error-mark, .dz-success-mark .dz-error-mark, .dz-success-mark
position: absolute position: absolute
display: none display: none
top: 30px top: calc(var(--spacer) * 2)
width: 54px width: 5.4rem
height: 58px height: 5.8rem
left: 50% left: 50%
margin-left: -27px margin-left: calc(var(--spacer) * -2)
#photo-upload #photo-upload
width: 100vw width: 100vw

21
conference_main/static/conference_main/styles/main.sass
View File

@ -21,7 +21,6 @@ $font-path: '/static/assets/fonts'
--body-color-bg: #e9ecef --body-color-bg: #e9ecef
--color-bg: var(--body-color-bg) --color-bg: var(--body-color-bg)
--navbar-bg: #1e1e1e --navbar-bg: #1e1e1e
--navbar-primary-height: 45px
--table-border-color: var(--color-bg-tertiary) --table-border-color: var(--color-bg-tertiary)
--table-row-bg-color: var(--color-bg-secondary) --table-row-bg-color: var(--color-bg-secondary)
@ -34,10 +33,10 @@ $font-path: '/static/assets/fonts'
--color-cat-panel-bg: hsl(58deg, 40%, 86%) --color-cat-panel-bg: hsl(58deg, 40%, 86%)
--color-cat-roundtable: hsl(203deg, 19%, 55%) --color-cat-roundtable: hsl(203deg, 19%, 55%)
--page-with-header-content-offset: 10rem --page-with-header-content-offset: calc(var(--spacer) * 10)
+media-sm +media-sm
--page-with-header-content-offset: 8rem --page-with-header-content-offset: calc(var(--spacer) * 8)
body.is-scrolled body.is-scrolled
.navbar .navbar
@ -52,13 +51,13 @@ body.is-scrolled
z-index: 1 z-index: 1
.hero-compact .hero-compact
max-height: 180px max-height: calc(var(--spacer) * 11.25)
min-height: initial min-height: initial
.btn-float-right .btn-float-right
position: absolute position: absolute
right: 2rem right: calc(var(--spacer) * 2)
top: 1rem top: var(--spacer)
z-index: var(--zindex-fixed) z-index: var(--zindex-fixed)
.video-container .video-container
@ -118,13 +117,13 @@ button.going-star
.vote-stars-login .vote-stars-login
@extend .btn @extend .btn
padding: 0.3rem !important +margin(1, bottom)
margin-bottom: 0.5rem padding: var(--spacer-1) !important
.favorite-star-login .favorite-star-login
@extend .btn @extend .btn
padding: 0.3rem $spacer !important +margin(1, bottom)
margin-bottom: 0.5rem padding: var(--spacer-1) $spacer !important
.vote-stars .vote-stars
// We use flex and order to arrange the stars in the right order. This is // We use flex and order to arrange the stars in the right order. This is
@ -167,9 +166,9 @@ button.going-star
background: rgba(0, 0, 0, 0.5) background: rgba(0, 0, 0, 0.5)
.hero-content .hero-content
+padding(5, top)
position: relative position: relative
z-index: 10 z-index: 10
padding-top: 5rem
.flatpage .flatpage
+padding(3) +padding(3)