pedf
/
spin
Archived
1
0
Fork 0
Code Releases Activity

Základy responzivity

Browse Source 
Sekce s fázemi projektu byla vynechána, protože bude předělána.
master
Emil Miler 3 years ago
parent dd6e1c3434
commit 9d19d37cae
1 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File

43
style.css
Unescape Escape View File

@ -35,7 +35,7 @@ header {
justify-content: center; justify-content: center;
padding: 1em; padding: 1em;
font-size: 1.5rem; font-size: 1.5em;
} }
header p { header p {
max-width: var(--width); max-width: var(--width);
@ -50,7 +50,7 @@ header .arrow:hover { transform: scale(1.3) }
main section { main section {
margin-bottom: 10rem; margin-bottom: 10em;
padding: 1em; padding: 1em;
} }
@ -97,6 +97,7 @@ main .team .list {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
grid-column-gap: 2em; grid-column-gap: 2em;
grid-row-gap: 1em;
} }
main .team figure { main .team figure {
background-color: #fff; background-color: #fff;
@ -119,7 +120,9 @@ main .team figure label {
main .articles .header { main .articles .header {
display: grid; display: grid;
grid-template-columns: 1fr 4fr; grid-template-columns: 1fr 4fr;
grid-column-gap: 1em;
align-items: baseline; align-items: baseline;
margin-bottom: 4em; margin-bottom: 4em;
border-bottom: 1px solid var(--color-blue); border-bottom: 1px solid var(--color-blue);
} }
@ -186,3 +189,39 @@ footer img:hover { transform: scale(1.1) }
transform: translate(0); transform: translate(0);
} }
@media only screen and (max-width: 1000px) {
header { font-size: 1em }
header .arrow { height: 3em }
main section { margin-bottom: 5em }
main .quotations figure,
main .quotations figure blockquote {
margin-left: 0;
margin-right: 0;
}
main .quotations figure { padding: 1em }
main .quotations figure figcaption {
max-width: 100%;
text-align: left;
}
main .team .list {
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
}
main .articles .list { grid-template-columns: 1fr }
footer { margin: 5em auto }
.modal .content {
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
transform: translate(0);
}
}