fermdez/SW
fermdez/SW
1
1
Fork 0
Code Issues Pull Requests Packages repo.project_board Releases Wiki Activity

Improvements in the Responsive Layout

Browse Source
This commit is contained in:
Fernando Méndez 2021-03-17 11:01:05 +01:00 committed by GitHub
parent 00cde61b10
commit 24bfe4c0fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 19 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
assets/css/main.css
View File

@ -149,7 +149,7 @@ table a{
} }
/* Responsive layout: makes the three columns stack on top of each other instead of next to each other */ /* Responsive layout: makes the three columns stack on top of each other instead of next to each other */
@media (max-width: 800px) { @media (max-width: 1000px) {
.column.side, .column.middle, .column.left, .column.right{ .column.side, .column.middle, .column.left, .column.right{
width: 100%; width: 100%;
} }
@ -175,16 +175,10 @@ table a{
overflow-x: auto; overflow-x: auto;
overflow-y: auto; overflow-y: auto;
} }
.code h1{ .code h1, .code h2{
color: #dadada; color: #dadada;
} }
.code h2 { .code h3, .code h4 {
color: #dadada;
}
.code h3 {
color: #d3ebff;
}
.code h4 {
color: #d3ebff; color: #d3ebff;
} }
.code p { .code p {
@ -229,7 +223,7 @@ table a{
/* Sketches */ /* Sketches */
.sketches{ .sketches {
text-align: center; text-align: center;
display: block; display: block;
line-height: 1.25em; line-height: 1.25em;
@ -239,22 +233,10 @@ table a{
border-radius: 3px; border-radius: 3px;
height: 680px; height: 680px;
} }
.sketches h1 { .sketches h1, .sketches h2, .sketches h3, .sketches h4, .sketches p {
color: #dadada; color: #dadada;
} }
.sketches h2 { .sketches img {
color: #dadada;
}
.sketches h3 {
color: #dadada;
}
.sketches h4 {
color: #dadada;
}
.sketches p {
color: #dadada;
}
.sketches img{
width: 550px; width: 550px;
height: 550px; height: 550px;
} }
@ -262,6 +244,16 @@ table a{
color: #d3ebff; color: #d3ebff;
} }
/* Responsive layout */ /* Responsive layout */
@media (max-width: 1500px) {
.column.side .sketches, .column.middle .sketches {
width: 100%;
height: 500px;
}
.column.side .sketches img, .column.middle .sketches img{
width: 100%;
height: 75%;
}
}
@media (max-width: 1150px) { @media (max-width: 1150px) {
.sketches img{ .sketches img{
width: 100%; width: 100%;