augusto
/
website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve responsiveness

This commit is contained in:
Augusto Gunsch 2022-03-30 06:32:25 -03:00
parent c7a26b42c6
commit 88401f6d9c
1 changed files with 24 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/stylesheet.css
View File

@ -16,14 +16,14 @@ body {
display: flex; display: flex;
margin: 1em; margin: 1em;
width: 100%; width: 100%;
border: 1px solid black;
font-family: "Noto Sans Mono", "Monaco", serif; font-family: "Noto Sans Mono", "Monaco", serif;
flex-direction: column; flex-direction: column;
} }
body header { header {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin: 1rem;
} }
header h1 { header h1 {
@ -31,14 +31,12 @@ header h1 {
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
display: block; display: block;
margin: 2rem; margin: 0;
} }
header nav { header nav {
display: flex; display: flex;
align-items: center; align-items: center;
margin 2rem;
margin-right: 4rem;
} }
nav a { nav a {
@ -60,16 +58,15 @@ main {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-evenly; justify-content: space-evenly;
flex-wrap: wrap-reverse;
margin-bottom: 3rem;
} }
main figure { main figure {
width: 40%; max-width: 40%;
margin: 2rem;
display: block; display: block;
position: relative;
font-size: 1.5rem; font-size: 1.5rem;
right: 4rem; margin: 0;
bottom: 1rem;
} }
main figure figcaption { main figure figcaption {
@ -79,11 +76,26 @@ main figure figcaption {
main span { main span {
text-align: right; text-align: right;
font-size: 3rem; font-size: 3rem;
position: relative;
bottom: 5rem;
} }
mark { mark {
background-color: #EDAF1F; background-color: #EDAF1F;
position: relative; position: relative;
} }
@media only screen and (max-width: 600px) {
main {
margin-bottom: 0;
}
header {
flex-direction: column;
align-items: center;
}
main figure {
max-width: 100%;
}
}