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 {
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; } }

8
scss/core/_containers.scss
View file

@ -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);
}

21
scss/custom/_global.scss
View file

@ -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 {

18
scss/custom/_mobile.scss
View file

@ -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;
}
}

5
scss/definitions/_sizing.scss
View file

@ -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;

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
@mixin xxl {
@media (min-width: #{$screen-xxl-min}) {