Improvements in the Responsive Layout

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

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 */
@media (max-width: 800px) {
@media (max-width: 1000px) {
.column.side, .column.middle, .column.left, .column.right{
width: 100%;
}
@ -175,16 +175,10 @@ table a{
overflow-x: auto;
overflow-y: auto;
}
.code h1{
.code h1, .code h2{
color: #dadada;
}
.code h2 {
color: #dadada;
}
.code h3 {
color: #d3ebff;
}
.code h4 {
.code h3, .code h4 {
color: #d3ebff;
}
.code p {
@ -229,7 +223,7 @@ table a{
/* Sketches */
.sketches{
.sketches {
text-align: center;
display: block;
line-height: 1.25em;
@ -239,22 +233,10 @@ table a{
border-radius: 3px;
height: 680px;
}
.sketches h1 {
.sketches h1, .sketches h2, .sketches h3, .sketches h4, .sketches p {
color: #dadada;
}
.sketches h2 {
color: #dadada;
}
.sketches h3 {
color: #dadada;
}
.sketches h4 {
color: #dadada;
}
.sketches p {
color: #dadada;
}
.sketches img{
.sketches img {
width: 550px;
height: 550px;
}
@ -262,6 +244,16 @@ table a{
color: #d3ebff;
}
/* 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) {
.sketches img{
width: 100%;