kazhnuz.space/kspace-bludit-theme
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

fix(css): ameliore responsive
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Kazhnuz 2024-06-10 21:44:34 +02:00
parent b0a902a89d
commit ef5483dd7e
6 changed files with 81 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
css/style.css
View file

@ -212,18 +212,6 @@ pre {
#wrapper { #wrapper {
background-color: #FDF7E7; } 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 { .icon {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
@ -1204,12 +1192,15 @@ header h1 {
font-style: oblique; font-style: oblique;
padding: 0rem; padding: 0rem;
line-height: 1rem; line-height: 1rem;
max-width: 1200px; max-width: 992px;
margin: auto; margin: auto;
text-align: center; } text-align: center; }
@media (min-width: 1200px) { @media (min-width: 1200px) {
header h1 { header h1 {
text-align: left; } } text-align: left; } }
@media (min-width: 1400px) {
header h1 {
max-width: 1200px; } }
header h1 img { header h1 img {
max-width: 560px; max-width: 560px;
height: auto; height: auto;
@ -1245,16 +1236,21 @@ header h1 {
.dropdown-menu { .dropdown-menu {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); } 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-left: 1.6rem;
padding-right: 1.6rem; padding-right: 1.6rem;
max-width: 1200px; max-width: 800px;
margin: auto; } margin: auto; }
@media (min-width: 992px) {
.container, .container-big {
max-width: 992px; } }
@media (min-width: 1400px) {
.container, .container-big {
max-width: 1200px; } }
.container-blog { .container-blog {
padding-left: 1.6rem; padding-left: 1.6rem;
padding-right: 1.6rem; padding-right: 1.6rem;
max-width: 1200px; max-width: 800px;
margin: auto; margin: auto;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -1264,8 +1260,17 @@ header h1 {
grid-template-areas: "main" "side"; } grid-template-areas: "main" "side"; }
@media (min-width: 992px) { @media (min-width: 992px) {
.container-blog { .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"; } } grid-template-areas: "main side"; } }
@media (min-width: 1600px) {
.container-blog {
grid-template-columns: auto 320px; } }
.grid-2-elements { .grid-2-elements {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -1294,7 +1299,7 @@ ul.tag-list {
.container-preview { .container-preview {
padding-left: 1.6rem; padding-left: 1.6rem;
padding-right: 1.6rem; padding-right: 1.6rem;
max-width: 1200px; max-width: 800px;
margin: auto; margin: auto;
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -1302,6 +1307,12 @@ ul.tag-list {
row-gap: 1.6rem; row-gap: 1.6rem;
column-gap: 3rem; column-gap: 3rem;
grid-template-areas: "main" "side"; } 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) { @media (min-width: 992px) {
.container-preview { .container-preview {
grid-template-columns: 360px auto; grid-template-columns: 360px auto;
@ -1697,7 +1708,10 @@ iframe {
html { html {
margin-left: 0; } margin-left: 0; }
@media (min-width: 992px) { @media (min-width: 1200px) {
html {
margin-left: 280px; } }
@media (min-width: 1600px) {
html { html {
margin-left: 320px; } } margin-left: 320px; } }
#searchfield { #searchfield {
@ -1709,7 +1723,7 @@ html {
position: fixed; position: fixed;
top: 0; top: 0;
left: -100vw; left: -100vw;
width: 320px; width: 280px;
height: 100vh; height: 100vh;
transition: left 0.2s; transition: left 0.2s;
padding: 1rem; padding: 1rem;
@ -1718,9 +1732,12 @@ html {
box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); } box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); }
#mobile-sidebar.shown { #mobile-sidebar.shown {
left: 0; } left: 0; }
@media (min-width: 992px) { @media (min-width: 1200px) {
#mobile-sidebar { #mobile-sidebar {
left: 0; } } left: 0; } }
@media (min-width: 1600px) {
#mobile-sidebar {
width: 320px; } }
img.myavatar { img.myavatar {
height: 140px; height: 140px;
width: auto; width: auto;
@ -1750,6 +1767,6 @@ img.myavatar {
z-index: 12; } z-index: 12; }
.menu-button:hover { .menu-button:hover {
background-color: #CB357D; } background-color: #CB357D; }
@media (min-width: 992px) { @media (min-width: 1200px) {
.menu-button { .menu-button {
display: none; } } display: none; } }

8
scss/core/_containers.scss
View file

@ -1,11 +1,3 @@
#wrapper { #wrapper {
background-color: $color-background; background-color: $color-background;
} }
.container-big {
@include container($container-size-large, $lineheight);
}
.container, .container-onecolumn {
@include container($container-size, $lineheight);
}

21
scss/custom/_global.scss
View file

@ -7,8 +7,15 @@
@mixin container-big() { @mixin container-big() {
padding-left: $lineheight; padding-left: $lineheight;
padding-right: $lineheight; padding-right: $lineheight;
max-width: $container-size; max-width: 800px;
margin:auto; margin:auto;
@include lg() {
max-width: $container-size;
}
@include xlbis() {
max-width: $container-size-large;
}
} }
.no-pills { .no-pills {
@ -97,6 +104,10 @@ header h1 {
text-align: left; text-align: left;
} }
@include xlbis() {
max-width: $container-size-large;
}
img { img {
max-width: 560px; max-width: 560px;
height: auto; height: auto;
@ -143,7 +154,7 @@ header h1 {
box-shadow: $narrow-shadow, $inset-shadow; box-shadow: $narrow-shadow, $inset-shadow;
} }
.container-big { .container, .container-big {
@include container-big(); @include container-big();
} }
@ -160,9 +171,13 @@ header h1 {
"side"; "side";
@include lg() { @include lg() {
grid-template-columns: auto 320px; grid-template-columns: auto 280px;
grid-template-areas: "main side"; grid-template-areas: "main side";
} }
@include xxl() {
grid-template-columns: auto 320px;
}
} }
.grid-2-elements { .grid-2-elements {

16
scss/custom/_mobile.scss
View file

@ -1,6 +1,10 @@
html { html {
margin-left:0; margin-left:0;
@include lg() { @include xl() {
margin-left:280px;
}
@include xxl() {
margin-left: 320px; margin-left: 320px;
} }
} }
@ -16,7 +20,7 @@ html {
position: fixed; position: fixed;
top:0; top:0;
left:-100vw; left:-100vw;
width: 320px; width: 280px;
height:100vh; height:100vh;
transition: left 0.2s; transition: left 0.2s;
padding: 1rem; padding: 1rem;
@ -25,10 +29,14 @@ html {
left:0; left:0;
} }
@include lg() { @include xl() {
left:0; left:0;
} }
@include xxl() {
width: 320px;
}
z-index:10; z-index:10;
box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6); box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6);
} }
@ -67,7 +75,7 @@ img.myavatar {
background-color: $color-primary; background-color: $color-primary;
} }
@include lg() { @include xl() {
display: none; display: none;
} }
} }

5
scss/definitions/_sizing.scss
View file

@ -28,8 +28,9 @@ $screen-sm-min: 576px;
$screen-md-min: 768px; $screen-md-min: 768px;
$screen-lg-min: 992px; $screen-lg-min: 992px;
$screen-xl-min: 1200px; $screen-xl-min: 1200px;
$screen-xlbis-min: 1400px;
$screen-xxl-min: 1600px; $screen-xxl-min: 1600px;
// Containers size // Containers size
$container-size: $screen-xl-min; $container-size: $screen-lg-min;
$container-size-large: $screen-xxl-min; $container-size-large: $screen-xl-min;

7
scss/mixins/_responsive.scss
View file

@ -28,6 +28,13 @@
} }
} }
// Extra large devices
@mixin xlbis {
@media (min-width: #{$screen-xlbis-min}) {
@content;
}
}
// Extra large desktops // Extra large desktops
@mixin xxl { @mixin xxl {
@media (min-width: #{$screen-xxl-min}) { @media (min-width: #{$screen-xxl-min}) {