aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass/include
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass/include')
-rw-r--r--client/src/sass/include/_mixins.scss10
-rw-r--r--client/src/sass/include/_variables.scss3
2 files changed, 9 insertions, 4 deletions
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index e37b89c62..bf844ac5d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -886,14 +886,16 @@
886 } 886 }
887} 887}
888 888
889// applies 16:9 ratio to a child element (using $selector) only using 889// applies ratio (default to 16:9) to a child element (using $selector) only using
890// an immediate's parent size. This allows 16:9 ratio without explicit 890// an immediate's parent size. This allows to set a ratio without explicit
891// dimensions, as width/height cannot be computed from each other. 891// dimensions, as width/height cannot be computed from each other.
892@mixin large-screen-ratio ($selector: 'div') { 892@mixin block-ratio ($selector: 'div', $inverted-ratio: 9/16) {
893 $padding-percent: percentage($inverted-ratio);
894
893 position: relative; 895 position: relative;
894 height: 0; 896 height: 0;
895 width: 100%; 897 width: 100%;
896 padding-top: 56%; 898 padding-top: $padding-percent;
897 899
898 #{$selector} { 900 #{$selector} {
899 position: absolute; 901 position: absolute;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index c451febdc..3501b305f 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -52,6 +52,9 @@ $sub-menu-background-color: #F7F7F7;
52$sub-menu-height: 81px; 52$sub-menu-height: 81px;
53 53
54$channel-background-color: #f6ede8; 54$channel-background-color: #f6ede8;
55
56$banner-inverted-ratio: 1/5;
57
55$max-channels-width: 1200px; 58$max-channels-width: 1200px;
56 59
57$footer-height: 30px; 60$footer-height: 30px;