pedf
/
oli
Archived
2
0
Fork 0
Code Pull Requests Releases Activity

Optimalizace zápisu stylů pro telefon

Browse Source
master
Emil Miler 4 years ago
parent b0d18b7021
commit c54cde964b
1 changed files with 32 additions and 38 deletions
Show Stats Download Patch File Download Diff File

70
css/style.css
Unescape Escape View File

@ -3,41 +3,6 @@
src:url(../fonts/moderat-regular.otf) src:url(../fonts/moderat-regular.otf)
} }
@media screen and (max-width: 699px) {
body { background:none; }
header { width:100%; }
header .logo { padding-top:30px; width:100%; box-sizing:border-box; }
header .row p { width:100%; }
main { background:none; }
.row { flex-direction:column; margin:4em 0; }
.row:nth-child(even) { flex-direction:column-reverse; }
.row img { max-height:80%; max-width:80%; margin:1em 0; }
article { max-width:100%; align-self:center !important; padding:1em; }
article h2 { margin-top:auto; font-size:2em; }
article:nth-child(1) h2 { margin-right:auto; text-align:right; }
article:nth-child(2) h2 { margin-left:auto; }
}
@media screen and (min-width: 700px) {
body { background:url(../img/header-pattern.svg) no-repeat left top; background-size: 90% auto; }
header { width:auto; }
header .logo { max-width:150px; padding-top:150px; }
header .row p { max-width:35%; }
main { background:url(../img/timeline.svg) no-repeat center top; background-size: auto 100%; }
.row { flex-direction:row; margin:5em 0; }
.row img { max-height:130%; max-width:40%; }
article { max-width:35%; padding:2em; }
article h2 { margin-top:-1.7em; font-size:2em; }
article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; }
article:nth-child(2) h2 { margin-left:-1.5em; }
}
html, body { html, body {
margin:0; margin:0;
padding:0; padding:0;
@ -46,6 +11,8 @@ html, body {
body { body {
font-size:1.4em; font-size:1.4em;
font-family:moderat-regular; font-family:moderat-regular;
background:url(../img/header-pattern.svg) no-repeat left top;
background-size: 90% auto;
} }
p { text-align:justify; } p { text-align:justify; }
@ -59,25 +26,33 @@ p { text-align:justify; }
h1 { color:#d63647; margin-bottom:0; clear:both; } h1 { color:#d63647; margin-bottom:0; clear:both; }
h2, h3 { color:#68c7d2; } h2, h3 { color:#68c7d2; }
header .logo { padding:30px; float:right; text-align:center; } header { width:auto; }
header .logo { padding:30px; float:right; text-align:center; max-width:150px; padding-top:150px; }
header .logo img { max-width:150px; } header .logo img { max-width:150px; }
header .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; } header .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; }
header .row img { max-height:500px; } header .row img { max-height:500px; }
header .row p { text-align:justify; } header .row p { text-align:justify; max-width:35%; }
main { main {
padding-top:200px; margin-top:-200px; padding-top:200px; margin-top:-200px;
padding-bottom:100px; margin-bottom:-100px; padding-bottom:100px; margin-bottom:-100px;
background:url(../img/timeline.svg) no-repeat center top;
background-size: auto 100%;
} }
.row { height:auto; width:100%; display:flex; justify-content:space-between; align-items:center; } .row { height:auto; width:100%; display:flex; justify-content:space-between; align-items:center; flex-direction:row; margin:5em 0; }
.row img { max-height:130%; max-width:40%; }
article { article {
background-color: #eee; background-color: #eee;
border: 3px solid #ddd; border: 3px solid #ddd;
border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%; border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%;
position: relative; position: relative;
max-width:35%; padding:2em;
} }
article h2 { margin-top:-1.7em; font-size:2em; }
article:nth-child(1) h2 { margin-right:-1.5em; text-align:right; }
article:nth-child(2) h2 { margin-left:-1.5em; }
article::before { article::before {
content: ''; content: '';
border: 2px solid #dfdfdf; border: 2px solid #dfdfdf;
@ -95,3 +70,22 @@ article:nth-child(1)::before {
transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg); transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg);
border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%; border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
} }
@media screen and (max-width: 699px) {
body { background:none; }
header { width:100%; }
header .logo { padding-top:30px; width:100%; box-sizing:border-box; }
header .row p { width:100%; }
main { background:none; }
.row { flex-direction:column; margin:4em 0; }
.row:nth-child(even) { flex-direction:column-reverse; }
.row img { max-height:80%; max-width:80%; margin:1em 0; }
article { max-width:100%; align-self:center !important; padding:1em; }
article h2 { margin-top:auto; font-size:2em; }
article:nth-child(1) h2 { margin-right:auto; text-align:right; }
article:nth-child(2) h2 { margin-left:auto; }
}