pro/2022_WEBSITE_kosmopolit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

deplacement des media querries en dernier css

Browse Source
This commit is contained in:
hugogogo
2021-04-22 16:34:55 +02:00
parent 5e15e53650
commit b84f3e7b36
4 changed files with 99 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
styles/images.css
View File

@@ -72,10 +72,10 @@
.image img { .image img {
height: 400px; height: 400px;
width: auto; width: auto;
margin-right: calc(var(--gap-unit) * 2 );
} }
.image h1, .image h2, .image h3, .image p { .image h1, .image h2, .image h3, .image p {
min-width: 280px; min-width: 280px;
margin-left: calc(var(--gap-unit) * 2 );
} }
/*images in full page*/ /*images in full page*/
.image.full img { .image.full img {

96
styles/media.css Normal file
View File

@@ -0,0 +1,96 @@
/* RESPONSIVE DESIGN */
@media only screen and (max-width: 1000px) {
html {
font-size: var(--small-font-size);
}
.container_main {
flex-direction: column;
}
.container_main > * {
margin: 20px;
}
.aside_left {
position: relative;
}
/*NAVBAR*/
nav.navbar {
flex-direction: column;
height: auto;
}
.navbar .nav_left a {
display: none;
display: flex;
margin-left: 0px;
width: 100%;
}
.navbar .nav_left a p {
margin-left: 20px;
}
.navbar .nav_right {
display: none;
display: flex;
}
.navbar .nav_left a#nav_logo {
display: flex;
margin-bottom: 40px;
width: auto;
}
.navbar .nav_left {
flex-direction: column;
height: auto;
}
.navbar .nav_right {
margin: 20px 0px 20px 27px;
width: 150px;
}
/*burger menu*/
nav.navbar::before {
content: "";
position: absolute;
right: 20px;
top: 10px;
width: 26px;
height: 14px;
border-top: 2px solid lightgrey;
border-bottom: 2px solid lightgrey;
cursor: pointer;
}
nav.navbar::after {
content: "";
position: absolute;
right: 20px;
top: 18px;
width: 26px;
height: 2px;
border-top: 2px solid lightgrey;
pointer-events: none;
display: none;
}
nav.navbar:hover .nav_right {
display: none;
}
nav.navbar:hover .nav_left a {
display: none;
}
nav.navbar:hover .nav_left a#nav_logo {
display: flex;
margin-bottom: 0px;
}
/*MAIN*/
main {
max-width: 90%;
}
main .image {
flex-wrap: wrap;
}
main .image img {
margin-bottom: 20px;
}
.image h1, .image h2, .image h3, .image p {
margin-left: 0px;
}
}

90
styles/skeleton.css vendored
View File

@@ -79,95 +79,5 @@ footer iframe {
top: 0; top: 0;
} }
/* RESPONSIVE DESIGNi */
@media only screen and (max-width: 1000px) {
html {
font-size: var(--small-font-size);
}
.container_main {
flex-direction: column;
}
.container_main > * {
margin: 20px;
}
.aside_left {
position: relative;
}
/*NAVBAR*/
nav.navbar {
flex-direction: column;
height: auto;
}
.navbar .nav_left a {
display: none;
display: flex;
margin-left: 0px;
width: 100%;
}
.navbar .nav_left a p {
margin-left: 20px;
}
.navbar .nav_right {
display: none;
display: flex;
}
.navbar .nav_left a#nav_logo {
display: flex;
margin-bottom: 40px;
width: auto;
}
.navbar .nav_left {
flex-direction: column;
height: auto;
}
.navbar .nav_right {
margin: 20px 0px 20px 27px;
width: 150px;
}
/*burger menu*/
nav.navbar::before {
content: "";
position: absolute;
right: 20px;
top: 10px;
width: 26px;
height: 14px;
border-top: 2px solid lightgrey;
border-bottom: 2px solid lightgrey;
cursor: pointer;
}
nav.navbar::after {
content: "";
position: absolute;
right: 20px;
top: 18px;
width: 26px;
height: 2px;
border-top: 2px solid lightgrey;
pointer-events: none;
display: none;
}
nav.navbar:hover .nav_right {
display: none;
}
nav.navbar:hover .nav_left a {
display: none;
}
nav.navbar:hover .nav_left a#nav_logo {
display: flex;
margin-bottom: 0px;
}
/*MAIN*/
main {
max-width: 90%;
}
main .image {
flex-wrap: wrap;
}
main .image img {
margin-bottom: 20px;
}
}

2
styles/style.css
View File

@@ -15,5 +15,7 @@
@import url(./text.css); @import url(./text.css);
@import url(./images.css); @import url(./images.css);
@import url(./media.css);
@import url(./load.css); @import url(./load.css);