diff --git a/sass/includes/_dimensions.sass b/sass/includes/_dimensions.sass new file mode 100644 index 0000000..1fbd757 --- /dev/null +++ b/sass/includes/_dimensions.sass @@ -0,0 +1,7 @@ +@mixin thin + @media screen and (max-width: 499px) + @content + +@mixin wide + @media screen and (min-width: 500px) + @content diff --git a/sass/includes/channel-page.sass b/sass/includes/channel-page.sass index ce88db4..20da6c6 100644 --- a/sass/includes/channel-page.sass +++ b/sass/includes/channel-page.sass @@ -1,5 +1,6 @@ @use "colors.sass" as c @use "video-list-item.sass" as * +@use "_dimensions.sass" as dimensions .channel-page padding: 40px 20px 20px @@ -22,6 +23,10 @@ .info display: flex + flex-wrap: wrap + + +dimensions.thin + display: block .thumbnail-image $size: 120px diff --git a/sass/includes/nav.sass b/sass/includes/nav.sass index 35a047e..f5e66dd 100644 --- a/sass/includes/nav.sass +++ b/sass/includes/nav.sass @@ -1,9 +1,6 @@ @use "colors.sass" as c @use "buttons.sass" as * - -@mixin thin - @media screen and (max-width: 499px) - @content +@use "_dimensions.sass" as dimensions .main-nav background-color: c.$bg-accent @@ -11,13 +8,13 @@ padding: 8px box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1) - +thin + +dimensions.thin display: block .links display: flex - +thin + +dimensions.thin margin-bottom: 4px padding: 1px diff --git a/sass/includes/video-list-item.sass b/sass/includes/video-list-item.sass index 7086c5d..6b6ac57 100644 --- a/sass/includes/video-list-item.sass +++ b/sass/includes/video-list-item.sass @@ -1,12 +1,5 @@ @use "colors.sass" as c - -@mixin thin - @media screen and (max-width: 499px) - @content - -@mixin wide - @media screen and (min-width: 500px) - @content +@use "_dimensions.sass" as dimensions @mixin video-list-item display: grid @@ -77,7 +70,7 @@ .title font-size: 17px - +wide + +dimensions.wide grid-gap: 16px grid-template-columns: auto 1fr margin-bottom: 20px @@ -116,7 +109,7 @@ font-size: 15px color: c.$fg-dim - +thin + +dimensions.thin .description display: none