fix(css): ameliore responsive
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Kazhnuz
parent
b0a902a89d
commit
ef5483dd7e
6 changed files with 81 additions and 41 deletions
|
|
@ -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; } }
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
html {
|
||||
margin-left:0;
|
||||
@include lg() {
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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}) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue