diff --git a/css/style.css b/css/style.css index 4ce631c..52cef6e 100755 --- a/css/style.css +++ b/css/style.css @@ -212,18 +212,6 @@ pre { #wrapper { background-color: #FDF7E7; } -.container-big { - padding-left: 1.6rem; - padding-right: 1.6rem; - max-width: 1600px; - margin: auto; } - -.container, .container-onecolumn { - padding-left: 1.6rem; - padding-right: 1.6rem; - max-width: 1200px; - margin: auto; } - .icon { display: inline-block; width: 1em; @@ -1204,12 +1192,15 @@ header h1 { font-style: oblique; padding: 0rem; line-height: 1rem; - max-width: 1200px; + max-width: 992px; margin: auto; text-align: center; } @media (min-width: 1200px) { header h1 { text-align: left; } } + @media (min-width: 1400px) { + header h1 { + max-width: 1200px; } } header h1 img { max-width: 560px; height: auto; @@ -1245,16 +1236,21 @@ header h1 { .dropdown-menu { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); } -.container-big { +.container, .container-big { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1200px; + max-width: 800px; margin: auto; } - + @media (min-width: 992px) { + .container, .container-big { + max-width: 992px; } } + @media (min-width: 1400px) { + .container, .container-big { + max-width: 1200px; } } .container-blog { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1200px; + max-width: 800px; margin: auto; display: grid; grid-template-columns: 1fr; @@ -1264,8 +1260,17 @@ header h1 { grid-template-areas: "main" "side"; } @media (min-width: 992px) { .container-blog { - grid-template-columns: auto 320px; + max-width: 992px; } } + @media (min-width: 1400px) { + .container-blog { + max-width: 1200px; } } + @media (min-width: 992px) { + .container-blog { + grid-template-columns: auto 280px; grid-template-areas: "main side"; } } + @media (min-width: 1600px) { + .container-blog { + grid-template-columns: auto 320px; } } .grid-2-elements { display: grid; grid-template-columns: 1fr; @@ -1294,7 +1299,7 @@ ul.tag-list { .container-preview { padding-left: 1.6rem; padding-right: 1.6rem; - max-width: 1200px; + max-width: 800px; margin: auto; display: grid; grid-template-columns: 1fr; @@ -1302,6 +1307,12 @@ ul.tag-list { row-gap: 1.6rem; column-gap: 3rem; grid-template-areas: "main" "side"; } + @media (min-width: 992px) { + .container-preview { + max-width: 992px; } } + @media (min-width: 1400px) { + .container-preview { + max-width: 1200px; } } @media (min-width: 992px) { .container-preview { grid-template-columns: 360px auto; @@ -1697,7 +1708,10 @@ iframe { html { margin-left: 0; } - @media (min-width: 992px) { + @media (min-width: 1200px) { + html { + margin-left: 280px; } } + @media (min-width: 1600px) { html { margin-left: 320px; } } #searchfield { @@ -1709,7 +1723,7 @@ html { position: fixed; top: 0; left: -100vw; - width: 320px; + width: 280px; height: 100vh; transition: left 0.2s; padding: 1rem; @@ -1718,9 +1732,12 @@ html { box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); } #mobile-sidebar.shown { left: 0; } - @media (min-width: 992px) { + @media (min-width: 1200px) { #mobile-sidebar { left: 0; } } + @media (min-width: 1600px) { + #mobile-sidebar { + width: 320px; } } img.myavatar { height: 140px; width: auto; @@ -1750,6 +1767,6 @@ img.myavatar { z-index: 12; } .menu-button:hover { background-color: #CB357D; } - @media (min-width: 992px) { + @media (min-width: 1200px) { .menu-button { display: none; } } diff --git a/scss/core/_containers.scss b/scss/core/_containers.scss index d36380f..d262240 100644 --- a/scss/core/_containers.scss +++ b/scss/core/_containers.scss @@ -1,11 +1,3 @@ #wrapper { background-color: $color-background; } - -.container-big { - @include container($container-size-large, $lineheight); -} - -.container, .container-onecolumn { - @include container($container-size, $lineheight); -} diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss index 0fbe9f4..0f96ee4 100644 --- a/scss/custom/_global.scss +++ b/scss/custom/_global.scss @@ -7,8 +7,15 @@ @mixin container-big() { padding-left: $lineheight; padding-right: $lineheight; - max-width: $container-size; + max-width: 800px; margin:auto; + @include lg() { + max-width: $container-size; + } + + @include xlbis() { + max-width: $container-size-large; + } } .no-pills { @@ -97,6 +104,10 @@ header h1 { text-align: left; } + @include xlbis() { + max-width: $container-size-large; + } + img { max-width: 560px; height: auto; @@ -143,7 +154,7 @@ header h1 { box-shadow: $narrow-shadow, $inset-shadow; } -.container-big { +.container, .container-big { @include container-big(); } @@ -160,9 +171,13 @@ header h1 { "side"; @include lg() { - grid-template-columns: auto 320px; + grid-template-columns: auto 280px; grid-template-areas: "main side"; } + + @include xxl() { + grid-template-columns: auto 320px; + } } .grid-2-elements { diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss index 4992fa3..d381c26 100644 --- a/scss/custom/_mobile.scss +++ b/scss/custom/_mobile.scss @@ -1,7 +1,11 @@ html { margin-left:0; - @include lg() { - margin-left:320px; + @include xl() { + margin-left:280px; + } + + @include xxl() { + margin-left: 320px; } } @@ -16,7 +20,7 @@ html { position: fixed; top:0; left:-100vw; - width: 320px; + width: 280px; height:100vh; transition: left 0.2s; padding: 1rem; @@ -25,10 +29,14 @@ html { left:0; } - @include lg() { + @include xl() { left:0; } + @include xxl() { + width: 320px; + } + z-index:10; box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6); } @@ -67,7 +75,7 @@ img.myavatar { background-color: $color-primary; } - @include lg() { + @include xl() { display: none; } } \ No newline at end of file diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss index 0dfe0e5..18639f3 100644 --- a/scss/definitions/_sizing.scss +++ b/scss/definitions/_sizing.scss @@ -28,8 +28,9 @@ $screen-sm-min: 576px; $screen-md-min: 768px; $screen-lg-min: 992px; $screen-xl-min: 1200px; +$screen-xlbis-min: 1400px; $screen-xxl-min: 1600px; // Containers size -$container-size: $screen-xl-min; -$container-size-large: $screen-xxl-min; +$container-size: $screen-lg-min; +$container-size-large: $screen-xl-min; \ No newline at end of file diff --git a/scss/mixins/_responsive.scss b/scss/mixins/_responsive.scss index 2a423a8..e65eebc 100644 --- a/scss/mixins/_responsive.scss +++ b/scss/mixins/_responsive.scss @@ -28,6 +28,13 @@ } } +// Extra large devices +@mixin xlbis { + @media (min-width: #{$screen-xlbis-min}) { + @content; + } +} + // Extra large desktops @mixin xxl { @media (min-width: #{$screen-xxl-min}) {