Commit fe2e5481 authored by Guus Hoekman's avatar Guus Hoekman

new version of bulma, league comparison

parent a00197e2
Pipeline #87371816 passed with stage
in 1 minute and 56 seconds
......@@ -2,7 +2,7 @@
<div class="container">
<div class="columns is-desktop">
<div class="column">
<i class="far fa-fw fa-duck"></i> Made by <a href="https://guushoekman.com">Guus Hoekman</a>
<i class="far fa-fw fa-duck"></i> Made by <a href="https://guushoekman.com">Guus Hoekman</a>, data scraper by <a href="https://github.com/ryanvmenezes">Ryan Menezes</a>
<br>
<a class="button is-info coffee" href="/coffee.html">
<span class="icon">
......
......@@ -17,8 +17,7 @@ layout: base
</div>
<div class="dropdown-menu" id="seasons" role="menu">
<div class="dropdown-content">
{% for league in site.leagues %}{% if league.code == page.code %}{% if league.layout == "league" %}<a href="{{ league.url }}" class="dropdown-item{% if league.season == page.season %} is-active{% endif %}">{{ league.season }}</a>{% else if league.layout == "league-comparison" %}<a href="{{ league.url }}" class="dropdown-item compare-seasons">Compare all seasons</a>{% endif %}{% endif %}
{% endfor %}
{% for league in site.leagues -%}{% if league.code == page.code -%}{% if league.layout == "league" -%}<a href="{{ league.url }}" class="dropdown-item{% if league.season == page.season %} is-active{% endif %}">{{ league.season }}</a>{% else if league.layout == "league-comparison" -%}<a href="{{ league.url }}" class="dropdown-item compare-seasons">Compare all seasons</a>{% endif %}{% endif %}{% endfor %}
</div>
</div>
</div>
......
$body-background-color: $white !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
$body-overflow-x: hidden !default
$body-overflow-y: scroll !default
$body-color: $text !default
$body-font-size: 1em !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default
......@@ -11,6 +16,8 @@ $code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default
$code-size: 0.875em !default
$small-font-size: 0.875em !default
$hr-background-color: $background !default
$hr-height: 2px !default
$hr-margin: 1.5rem 0 !default
......@@ -18,14 +25,18 @@ $hr-margin: 1.5rem 0 !default
$strong-color: $text-strong !default
$strong-weight: $weight-bold !default
$pre-font-size: 0.875em !default
$pre-padding: 1.25rem 1.5rem !default
$pre-code-font-size: 1em !default
html
background-color: $body-background-color
font-size: $body-size
-moz-osx-font-smoothing: grayscale
-webkit-font-smoothing: antialiased
min-width: 300px
overflow-x: hidden
overflow-y: scroll
min-width: $body-min-width
overflow-x: $body-overflow-x
overflow-y: $body-overflow-y
text-rendering: $body-rendering
text-size-adjust: 100%
......@@ -53,7 +64,7 @@ pre
body
color: $body-color
font-size: 1rem
font-size: $body-font-size
font-weight: $body-weight
line-height: $body-line-height
......@@ -91,7 +102,7 @@ input[type="radio"]
vertical-align: baseline
small
font-size: 0.875em
font-size: $small-font-size
span
font-style: inherit
......@@ -103,25 +114,29 @@ strong
// Block
fieldset
border: none
pre
+overflow-touch
background-color: $pre-background
color: $pre
font-size: 0.875em
font-size: $pre-font-size
overflow-x: auto
padding: 1.25rem 1.5rem
padding: $pre-padding
white-space: pre
word-wrap: normal
code
background-color: transparent
color: currentColor
font-size: 1em
font-size: $pre-code-font-size
padding: 0
table
td,
th
text-align: left
vertical-align: top
&:not([align])
text-align: left
th
color: $text-strong
......@@ -115,11 +115,28 @@ $alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'rig
font-weight: $weight-light !important
.has-text-weight-normal
font-weight: $weight-normal !important
.has-text-weight-medium
font-weight: $weight-medium !important
.has-text-weight-semibold
font-weight: $weight-semibold !important
.has-text-weight-bold
font-weight: $weight-bold !important
.is-family-primary
font-family: $family-primary !important
.is-family-secondary
font-family: $family-secondary !important
.is-family-sans-serif
font-family: $family-sans-serif !important
.is-family-monospace
font-family: $family-monospace !important
.is-family-code
font-family: $family-code !important
// Visibility
$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
......@@ -259,3 +276,6 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-unselectable
@extend %unselectable
.is-relative
position: relative !important
/*! minireset.css v0.0.3 | MIT License | github.com/jgthms/minireset.css */
/*! minireset.css v0.0.4 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
......@@ -59,11 +59,16 @@ html
// Media
img,
audio,
embed,
iframe,
object,
video
height: auto
max-width: 100%
audio
max-width: 100%
// Iframe
iframe
border: 0
......@@ -76,4 +81,5 @@ table
td,
th
padding: 0
text-align: left
&:not([align])
text-align: left
@charset "utf-8"
/*! bulma.io v0.7.2 | MIT License | github.com/jgthms/bulma */
/*! bulma.io v0.7.5 | MIT License | github.com/jgthms/bulma */
@import "utilities/_all"
@import "base/_all"
@import "elements/_all"
......
@charset "utf-8"
@import "breadcrumb.sass"
// @import "breadcrumb.sass"
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
// @import "level.sass"
// @import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"
@import "modal.sass"
// @import "menu.sass"
// @import "message.sass"
// @import "modal.sass"
@import "navbar.sass"
@import "pagination.sass"
@import "panel.sass"
// @import "pagination.sass"
// @import "panel.sass"
@import "tabs.sass"
......@@ -4,13 +4,18 @@ $card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-padding: 0.75rem !default
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default
$card-header-weight: $weight-bold !default
$card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default
$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border !default
$card-footer-padding: 0.75rem !default
$card-media-margin: $block-spacing !default
.card
background-color: $card-background-color
......@@ -31,7 +36,7 @@ $card-footer-border-top: 1px solid $border !default
display: flex
flex-grow: 1
font-weight: $card-header-weight
padding: 0.75rem
padding: $card-header-padding
&.is-centered
justify-content: center
......@@ -40,7 +45,7 @@ $card-footer-border-top: 1px solid $border !default
cursor: pointer
display: flex
justify-content: center
padding: 0.75rem
padding: $card-header-padding
.card-image
display: block
......@@ -48,7 +53,7 @@ $card-footer-border-top: 1px solid $border !default
.card-content
background-color: $card-content-background-color
padding: 1.5rem
padding: $card-content-padding
.card-footer
background-color: $card-footer-background-color
......@@ -63,7 +68,7 @@ $card-footer-border-top: 1px solid $border !default
flex-grow: 1
flex-shrink: 0
justify-content: center
padding: 0.75rem
padding: $card-footer-padding
&:not(:last-child)
border-right: $card-footer-border-top
......@@ -71,4 +76,4 @@ $card-footer-border-top: 1px solid $border !default
.card
.media:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $card-media-margin
$dropdown-menu-min-width: 12rem !default
$dropdown-content-background-color: $white !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-z: 20 !default
......@@ -35,7 +39,7 @@ $dropdown-divider-background-color: $border !default
.dropdown-menu
display: none
left: 0
min-width: 12rem
min-width: $dropdown-menu-min-width
padding-top: $dropdown-content-offset
position: absolute
top: 100%
......@@ -45,8 +49,8 @@ $dropdown-divider-background-color: $border !default
background-color: $dropdown-content-background-color
border-radius: $dropdown-content-radius
box-shadow: $dropdown-content-shadow
padding-bottom: 0.5rem
padding-top: 0.5rem
padding-bottom: $dropdown-content-padding-bottom
padding-top: $dropdown-content-padding-top
.dropdown-item
color: $dropdown-item-color
......
$level-item-spacing: ($block-spacing / 2) !default
.level
@extend %block
align-items: center
......@@ -18,7 +20,7 @@
.level-item
&:not(:last-child)
margin-bottom: 0
margin-right: 0.75rem
margin-right: $level-item-spacing
&:not(.is-narrow)
flex-grow: 1
// Responsiveness
......@@ -41,7 +43,7 @@
// Responsiveness
+mobile
&:not(:last-child)
margin-bottom: 0.75rem
margin-bottom: $level-item-spacing
.level-left,
.level-right
......@@ -55,7 +57,7 @@
// Responsiveness
+tablet
&:not(:last-child)
margin-right: 0.75rem
margin-right: $level-item-spacing
.level-left
align-items: center
......
......@@ -26,8 +26,8 @@ $list-item-hover-background-color: $background !default
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
&:last-child
border-top-left-radius: $list-radius
border-top-right-radius: $list-radius
border-bottom-left-radius: $list-radius
border-bottom-right-radius: $list-radius
&:not(:last-child)
border-bottom: $list-item-border
&.is-active
......@@ -36,4 +36,4 @@ $list-item-hover-background-color: $background !default
a.list-item
background-color: $list-item-hover-background-color
cursor: pointer
\ No newline at end of file
cursor: pointer
......@@ -6,8 +6,15 @@ $menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default
$menu-list-border-left: 1px solid $border !default
$menu-list-line-height: 1.25 !default
$menu-list-link-padding: 0.5em 0.75em !default
$menu-nested-list-margin: 0.75em !default
$menu-nested-list-padding-left: 0.75em !default
$menu-label-color: $text-light !default
$menu-label-font-size: 0.75em !default
$menu-label-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default
.menu
font-size: $size-normal
......@@ -20,12 +27,12 @@ $menu-label-color: $text-light !default
font-size: $size-large
.menu-list
line-height: 1.25
line-height: $menu-list-line-height
a
border-radius: $menu-item-radius
color: $menu-item-color
display: block
padding: 0.5em 0.75em
padding: $menu-list-link-padding
&:hover
background-color: $menu-item-hover-background-color
color: $menu-item-hover-color
......@@ -36,15 +43,15 @@ $menu-label-color: $text-light !default
li
ul
border-left: $menu-list-border-left
margin: 0.75em
padding-left: 0.75em
margin: $menu-nested-list-margin
padding-left: $menu-nested-list-padding-left
.menu-label
color: $menu-label-color
font-size: 0.75em
letter-spacing: 0.1em
font-size: $menu-label-font-size
letter-spacing: $menu-label-letter-spacing
text-transform: uppercase
&:not(:first-child)
margin-top: 1em
margin-top: $menu-label-spacing
&:not(:last-child)
margin-bottom: 1em
margin-bottom: $menu-label-spacing
......@@ -17,6 +17,7 @@ $message-body-pre-background-color: $white !default
$message-body-pre-code-background-color: transparent !default
$message-header-body-border-width: 0 !default
$message-colors: $colors !default
.message
@extend %block
......@@ -25,7 +26,7 @@ $message-header-body-border-width: 0 !default
font-size: $size-normal
strong
color: currentColor
a:not(.button):not(.tag)
a:not(.button):not(.tag):not(.dropdown-item)
color: currentColor
text-decoration: underline
// Sizes
......@@ -36,7 +37,7 @@ $message-header-body-border-width: 0 !default
&.is-large
font-size: $size-large
// Colors
@each $name, $pair in $colors
@each $name, $pair in $message-colors
$color: nth($pair, 1)
$color-invert: nth($pair, 2)
$color-lightning: max((100% - lightness($color)) - 2%, 0%)
......
......@@ -102,7 +102,7 @@ $modal-card-body-padding: 20px !default
border-top: $modal-card-foot-border-top
.button
&:not(:last-child)
margin-right: 10px
margin-right: 0.5em
.modal-card-body
+overflow-touch
......
......@@ -69,6 +69,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
......@@ -86,6 +87,7 @@ $navbar-breakpoint: $desktop !default
color: $color-invert
& > a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: darken($color, 5%)
......@@ -93,6 +95,7 @@ $navbar-breakpoint: $desktop !default
.navbar-link
&::after
border-color: $color-invert
.navbar-item.has-dropdown:focus .navbar-link,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-item.has-dropdown.is-active .navbar-link
background-color: darken($color, 5%)
......@@ -135,6 +138,7 @@ body
.navbar-brand
a.navbar-item
&:focus,
&:hover
background-color: transparent
......@@ -167,6 +171,8 @@ body
a.navbar-item,
.navbar-link
cursor: pointer
&:focus,
&:focus-within,
&:hover,
&.is-active
background-color: $navbar-item-hover-background-color
......@@ -187,6 +193,7 @@ a.navbar-item,
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:focus,
&:hover
background-color: $navbar-tab-hover-background-color
border-bottom-color: $navbar-tab-hover-border-bottom-color
......@@ -286,16 +293,20 @@ a.navbar-item,
&.is-transparent
a.navbar-item,
.navbar-link
&:focus,
&:hover,
&.is-active
background-color: transparent !important
.navbar-item.has-dropdown
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-link
background-color: transparent !important
.navbar-dropdown
a.navbar-item
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
......@@ -323,6 +334,8 @@ a.navbar-item,
box-shadow: 0 -8px 8px rgba($black, 0.1)
top: auto
&.is-active,
&.is-hoverable:focus,
&.is-hoverable:focus-within,
&.is-hoverable:hover
.navbar-dropdown
display: block
......@@ -358,6 +371,7 @@ a.navbar-item,
white-space: nowrap
a.navbar-item
padding-right: 3rem
&:focus,
&:hover
background-color: $navbar-dropdown-item-hover-background-color
color: $navbar-dropdown-item-hover-color
......@@ -413,10 +427,17 @@ a.navbar-item,
.navbar-link
&.is-active
color: $navbar-item-active-color
&.is-active:not(:hover)
&.is-active:not(:focus):not(:hover)
background-color: $navbar-item-active-background-color
.navbar-item.has-dropdown
&:focus,
&:hover,
&.is-active
.navbar-link
background-color: $navbar-item-hover-background-color
// Combination
.hero
&.is-fullheight-with-navbar
min-height: calc(100vh - #{$navbar-height})
......@@ -3,6 +3,11 @@ $pagination-border-color: $grey-lighter !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default
$pagination-item-font-size: 1em !default
$pagination-item-margin: 0.25rem !default
$pagination-item-padding-left: 0.5em !default
$pagination-item-padding-right: 0.5em !default
$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default
......@@ -56,11 +61,11 @@ $pagination-shadow-inset: inset 0 1px 2px rgba($black, 0.2)
.pagination-ellipsis
@extend %control
@extend %unselectable
font-size: 1em
padding-left: 0.5em
padding-right: 0.5em
font-size: $pagination-item-font-size
justify-content: center
margin: 0.25rem
margin: $pagination-item-margin
padding-left: $pagination-item-padding-left
padding-right: $pagination-item-padding-right
text-align: center
.pagination-previous,
......
$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border !default
$panel-heading-background-color: $background !default
......@@ -8,6 +9,7 @@ $panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-light !default
$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default
......@@ -26,7 +28,7 @@ $panel-icon-color: $text-light !default
.panel
font-size: $size-normal
&:not(:last-child)
margin-bottom: 1.5rem
margin-bottom: $panel-margin
.panel-heading,
.panel-tabs,
......@@ -49,7 +51,7 @@ $panel-icon-color: $text-light !default
.panel-tabs
align-items: flex-end
display: flex
font-size: 0.875em
font-size: $panel-tabs-font-size
justify-content: center
a
border-bottom: $panel-tab-border-bottom
......
......@@ -4,13 +4,12 @@
@import "button.sass"
@import "container.sass"
@import "content.sass"
@import "form.sass"
@import "icon.sass"
@import "image.sass"
@import "notification.sass"
@import "progress.sass"
// @import "progress.sass"
@import "table.sass"
@import "tag.sass"
// @import "tag.sass"
@import "title.sass"
@import "other.sass"
// @import "other.sass"
$button-color: $grey-darker !default
$button-background-color: $white !default
$button-family: false !default
$button-border-color: $grey-lighter !default
$button-border-width: $control-border-width !default
......@@ -35,6 +36,8 @@ $button-static-border-color: $grey-lighter !default
=button-small
border-radius: $radius-small
font-size: $size-small
=button-normal
font-size: $size-normal
=button-medium
font-size: $size-medium
=button-large
......@@ -48,6 +51,8 @@ $button-static-border-color: $grey-lighter !default
border-width: $button-border-width
color: $button-color
cursor: pointer
@if $button-family
font-family: $button-family
justify-content: center
padding-bottom: $button-padding-vertical
padding-left: $button-padding-horizontal
......@@ -104,7 +109,8 @@ $button-static-border-color: $grey-lighter !default
&.is-active
background-color: darken($button-text-hover-background-color, 5%)
color: $button-text-hover-color
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: transparent
border-color: transparent
box-shadow: none
......@@ -131,16 +137,19 @@ $button-static-border-color: $grey-lighter !default
background-color: darken($color, 5%)
border-color: transparent
color: $color-invert
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $color
border-color: transparent
box-shadow: none
&.is-inverted
background-color: $color-invert
color: $color
&:hover
&:hover,
&.is-hovered
background-color: darken($color-invert, 5%)
&[disabled]
&[disabled],
fieldset[disabled] &
background-color: $color-invert
border-color: transparent
box-shadow: none
......@@ -153,14 +162,23 @@ $button-static-border-color: $grey-lighter !default
border-color: $color
color: $color
&:hover,
&:focus
&.is-hovered,
&:focus,
&.is-focused
background-color: $color
border-color: $color
color: $color-invert
&.is-loading
&::after
border-color: transparent transparent $color $color !important