- {% include layout/header.html %} - - {% comment %} - {% if page.nav-position == "top" or page.nav-position == "all" %} {% include layout/topnav.html %} - {% endif %} - {% endcomment %}
diff --git a/scss/_variables.scss b/scss/_variables.scss index 29df6827..835f3f34 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -105,6 +105,9 @@ $avatar-sizes: ( "xl": 6rem ) !default; +/** +Fonts + */ $font-size-base: 1rem !default; $font-weight-base: 400 !default; $line-height-base: 1.375 !default; @@ -116,7 +119,7 @@ Typography */ $headings-font-weight: 600 !default; -$small-font-size: 80% !default; +$small-font-size: 87.5% !default; $h1-font-size: $font-size-base * 1.875 !default; $h2-font-size: $font-size-base * 1.5 !default; @@ -129,13 +132,51 @@ $blockquote-font-size: $h4-font-size !default; $lead-font-size: $h3-font-size !default; /** -Ribbons +Sizing */ -$ribbon-margin: .25rem !default; +$spacer: 1rem !default; +$spacers: ( + 0: 0rem, + 1: .25rem, + 2: .5rem, + 4: 1rem, + 5: 1.5rem, + 6: 2rem, + 7: 2.5rem, + 8: 3rem, +) !default; -$loader-size: 2.5rem !default; +$size-spacers: ( + 9: 4rem, + 10: 5rem, + 11: 6rem, + 12: 8rem, + 13: 10rem, + 14: 12rem, + 15: 14rem, + 16: 16rem, + 17: 18rem, + 18: 20rem, + auto: auto, + px: 1px, + full: 100% +) !default; + +$size-max-spacers: ( + xs: 20rem, + sm: 24rem, + md: 28rem, + lg: 32rem, + xl: 36rem, + 2 xl: 42rem, + 3 xl: 48rem, + 4 xl: 56rem, + 5 xl: 64rem, + 6 xl: 72rem, + full: 100% +) !default; -$sizes: ( +$sizes-percentage: ( 1: 1%, 25: 25%, 50: 50%, @@ -144,6 +185,13 @@ $sizes: ( auto: auto ) !default; +/** +Ribbons + */ +$ribbon-margin: .25rem !default; + +$loader-size: 2.5rem !default; + $generate-social-colors: true !default; $generate-color-hues: true !default; $generate-colors: true !default; diff --git a/scss/utils/_sizing.scss b/scss/utils/_sizing.scss index eec4bc21..a136537c 100644 --- a/scss/utils/_sizing.scss +++ b/scss/utils/_sizing.scss @@ -10,41 +10,21 @@ .min-w-0 { min-width: 0 !important; } .min-w-full { min-width: 100% !important; } -.h-1 { height: .25rem !important; } -.h-2 { height: .5rem !important; } -.h-3 { height: .75rem !important; } -.h-4 { height: 1rem !important; } -.h-6 { height: 1.5rem !important; } -.h-8 { height: 2rem !important; } -.h-10 { height: 2.5rem !important; } -.h-12 { height: 3rem !important; } -.h-16 { height: 4rem !important; } -.h-24 { height: 6rem !important; } -.h-32 { height: 8rem !important; } -.h-48 { height: 12rem !important; } -.h-64 { height: 16rem !important; } -.h-auto { height: auto !important; } -.h-px { height: 1px !important; } -.h-full { height: 100% !important; } -.h-screen { height: 100vh !important; } +@each $size-name, $size in $sizes-percentage { + .w-#{$size-name}p { width: $size !important; } + .h-#{$size-name}p { height: $size !important; } +} + +@each $size-name, $size in map_merge($spacers, $size-spacers) { + .w-#{$size-name} { width: $size !important; } + .h-#{$size-name} { height: $size !important; } +} -.w-1 { width: .25rem !important; } -.w-2 { width: .5rem !important; } -.w-3 { width: .75rem !important; } -.w-4 { width: 1rem !important; } -.w-6 { width: 1.5rem !important; } -.w-8 { width: 2rem !important; } -.w-10 { width: 2.5rem !important; } -.w-12 { width: 3rem !important; } -.w-16 { width: 4rem !important; } -.w-24 { width: 6rem !important; } -.w-32 { width: 8rem !important; } -.w-48 { width: 12rem !important; } -.w-64 { width: 16rem !important; } -.w-auto { width: auto !important; } -.w-px { width: 1px !important; } - -.w-full { width: 100% !important; } +.h-screen { height: 100vh !important; } .w-screen { width: 100vw !important; } +@each $size-name, $size in $size-max-spacers { + .max-w-#{$size-name} { max-width: $size !important; } + .max-h-#{$size-name} { max-height: $size !important; } +} -- GitLab