From c54cde964b459cb6767ef405c6fc631bd37fe37a Mon Sep 17 00:00:00 2001
From: Emil Miler <emil.miler@pedf.cuni.cz>
Date: Sun, 25 Oct 2020 17:29:58 +0100
Subject: [PATCH] =?UTF-8?q?Optimalizace=20z=C3=A1pisu=20styl=C5=AF=20pro?=
 =?UTF-8?q?=20telefon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/style.css | 70 +++++++++++++++++++++++----------------------------
 1 file changed, 32 insertions(+), 38 deletions(-)

diff --git a/css/style.css b/css/style.css
index 8911d6c..4b26af7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,41 +3,6 @@
 	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 {
 	margin:0;
 	padding:0;
@@ -46,6 +11,8 @@ html, body {
 body {
 	font-size:1.4em;
 	font-family:moderat-regular;
+	background:url(../img/header-pattern.svg) no-repeat left top;
+	background-size: 90% auto;
 }
 
 p { text-align:justify; }
@@ -59,25 +26,33 @@ p { text-align:justify; }
 h1 { color:#d63647; margin-bottom:0; clear:both; }
 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 .row { height:600px; margin:0; padding-bottom:150px; margin-bottom:-300px; }
 header .row img { max-height:500px; }
-header .row p { text-align:justify; }
+header .row p { text-align:justify; max-width:35%; }
 
 main {
 	padding-top:200px; margin-top:-200px;
 	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 {
 	background-color: #eee;
 	border: 3px solid #ddd;
 	border-radius: 2% 6% 5% 3% / 1% 1% 2% 6%;
 	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 {
 	content: '';
 	border: 2px solid #dfdfdf;
@@ -95,3 +70,22 @@ article:nth-child(1)::before {
 	transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(-1deg);
 	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; }
+}