mobile layout

f47c4fad · Tomáš Hozman · 512a72b7 · f47c4fad · f47c4fad
Commit f47c4fad authored 2 years ago by Tomáš Hozman
--- a/content/index.html
+++ b/content/index.html
@@ -7,17 +7,17 @@
 		<!-- Author: Tomáš Valenta, https://blog.imaniti.org -->
 		<title>Voličské průkazy</title>
-		<meta name="description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta name="description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		<meta property="og:type" content="website">
 		<meta property="og:title" content="Voličské průkazy">
-		<meta property="og:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta property="og:description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		<meta property="og:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
 		<meta name="twitter:card" content="summary_large_image">
 		<meta property="twitter:domain" content="prukazy.pirati.cz">
 		<meta name="twitter:title" content="Voličské průkazy">
-		<meta name="twitter:description" content="Vol si jak chceš, kde chceš. My ti to zjednodušíme.">
+		<meta name="twitter:description" content="Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.">
 		<meta name="twitter:image" content="https://prukazy.pirati.cz/static/images/banner.webp">
 		<link
@@ -70,10 +70,10 @@
 		<main>
 			<div id="step1">
-				<h1>Vyřiďte si svůj voličský průkaz na prezidentské volby!</h1>
+				<h1>Vyřiď si svůj voličský průkaz na prezidentské volby!</h1>
 				<p id="intro-text">
 					Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.<br>
-					Vyplň náš jednoduchý formulář, stáhni si ho v PDF a pošli ho datovkou nebo dones osobně na úřad. Neboj se - vážíme si tvého soukromí, nesbíráme žádná osobní data a vše zpracovává tvůj prohlížeč.
+					Vyplň náš jednoduchý formulář, stáhni si ho v PDF a pošli ho datovkou nebo dones osobně na úřad. Neboj se - vážíme si tvého soukromí, nesbíráme žádná osobní data a vše zpracovává výhradně tvůj prohlížeč.
 				</p>
 				<div id="form-wrapper">

--- a/content/static/css/base.css
+++ b/content/static/css/base.css
-html, body {
+#address-autocomplete {
-	padding:0;
+	position:relative;
-	margin:0
+	text-align:center
 }
-body {
+#canvas-wrapper {
-	background:#000;
+	display:none;
-	font-family:"Open Sans",sans-serif;
+	object-fit:contain
 }
-a {
+#canvas-wrapper canvas {
-	color:#000
+	width:100%
 }
-a:hover,a:visited {
+#finish,#download-pdf {
-	color:#000
+	margin-top:20px
 }
-header {
+#form-wrapper {
-	height:70px;
-	padding:10px;
-	background:#000;
 	display:flex;
-	justify-content:center;
+	flex-direction:column;
-	color:#fff
+	gap:14px;
-}
+	margin-left:auto;
+	margin-right:auto;
-main {
+	max-width:750px;
-	border-top-left-radius:40px;
+	padding-bottom:20px
-	border-top-right-radius:40px;
-	background:#fff;
-	min-height:calc(100vh - 90px);
-}
-input,[aria-role="textbox"],textarea,select {
-	border:0;
-	font-size:unset;
-	padding:10px;
-	font-family:"Open Sans",sans-serif;
-	background: #dddcdc;
-}
-button,
-input[type="submit"],
-[aria-role="button"] {
-	background:#2f2f2f;
-	border:none;
-	color:#fff;
-	cursor:pointer;
-	display:inline-block;
-	font-size:unset;
-	padding:12px;
-	text-decoration:none;
-	transition:.15s
-}
-button[disabled],
-input[type="submit"][disabled],
-[aria-role="button"][disabled] {
-	background:#737373;
-	cursor:unset
 }
-button:not([disabled]):hover,
+#found-office,#not-found-office,#step3 {
-input[type="submit"]:not([disabled]):hover,
+	display:none
-[aria-role="button"]:not([disabled]):hover {
-	background:#333
 }
-textarea {
+#intro-text {
-	resize:none
+	border-bottom:1px solid #000;
+	font-size:large;
+	margin-bottom:14px;
+	padding-bottom:14px
 }
 #logo {
+	align-items:center;
 	display:flex;
 	flex-direction:row;
-	gap:12px;
+	gap:12px
-	align-items:center
-}
-#step1,#step2,#step3,#canvas-wrapper {
-	max-width:1000px;
-	margin-left:auto;
-	margin-right:auto;
-	padding-top:40px
 }
-#found-office,#not-found-office {
+#show-document {
-	display:none
+	display:block;
+	margin-bottom:17.5px
 }
-#step2 {
+#signature-bottom {
-	display:none;
+	align-items:flex-end;
-	text-align:center
+	display:flex;
+	justify-content:space-between;
+	margin:5px
 }
 #signature-info-wrapper {
@@ -103,13 +63,11 @@ textarea {
 	justify-content:center
 }
-#signature-info-wrapper input,
+#signature-info-wrapper input,#signature-info-wrapper [aria-role="textbox"],#signature-info-wrapper textarea,#signature-info-wrapper select,#current-date {
-#signature-info-wrapper [aria-role="textbox"],
-#signature-info-wrapper textarea,
-#signature-info-wrapper select,
-#current-date {
 	background:unset;
 	border-bottom:1px dotted #000;
+	flex:1 1 0;
+	min-width:0;
 	padding:12px
 }
@@ -121,55 +79,21 @@ textarea {
 	max-width:600px
 }
-#signature-bottom {
+#step1,#step2,#step3,#canvas-wrapper {
-	align-items:flex-end;
-	display:flex;
-	justify-content:space-between;
-	margin:5px
-}
-#intro-text {
-	border-bottom:1px solid #000;
-	font-size:large;
-	margin-bottom:14px;
-	padding-bottom:14px
-}
-#form-wrapper {
-	display:flex;
-	flex-direction:column;
-	gap:14px;
-	max-width:750px;
 	margin-left:auto;
 	margin-right:auto;
-	padding-bottom:20px
+	max-width:1000px;
-}
+	padding-top:40px
-#address-autocomplete {
-	position:relative;
-	text-align:center
-}
-#show-document {
-	display:block;
-	margin-bottom:17.5px
 }
-#canvas-wrapper {
+#step2 {
 	display:none;
-	object-fit:contain;
+	text-align:center
-}
-#step3 {
-	display:none
-}
-#canvas-wrapper canvas {
-	width:100%;
 }
-#finish,#download-pdf {
+.button-small {
-	margin-top:20px
+	font-size:small;
+	padding:4px 7px
 }
 .input-group {
@@ -180,7 +104,7 @@ textarea {
 }
 .input-group input {
-	flex:1 1 0px;
+	flex:1 1 0;
 	min-width:0
 }
@@ -189,16 +113,84 @@ textarea {
 }
 .input-single-with-label {
+	align-items:center;
 	display:flex;
-	gap:14px;
+	gap:14px
-	align-items:center
 }
 .input-single-with-label input {
-	flex:1 1 0px
+	flex:1 1 0
 }
-.button-small {
+a,a:hover,a:visited {
-	font-size:small;
+	color:#000
-	padding:4px 7px
+}
+body {
+	background:#000;
+	font-family:"Open Sans",sans-serif
+}
+button,input[type="submit"],[aria-role="button"] {
+	background:#2f2f2f;
+	border:none;
+	color:#fff;
+	cursor:pointer;
+	display:inline-block;
+	font-size:unset;
+	padding:12px;
+	text-decoration:none;
+	transition:.15s
+}
+button:not([disabled]):hover,input[type="submit"]:not([disabled]):hover,[aria-role="button"]:not([disabled]):hover {
+	background:#333
+}
+button[disabled],input[type="submit"][disabled],[aria-role="button"][disabled] {
+	background:#737373;
+	cursor:unset
+}
+header {
+	background:#000;
+	color:#fff;
+	display:flex;
+	height:70px;
+	justify-content:center;
+	padding:10px
+}
+html,body {
+	margin:0;
+	padding:0
+}
+input,[aria-role="textbox"],textarea,select {
+	background:#dddcdc;
+	border:0;
+	font-family:"Open Sans",sans-serif;
+	font-size:medium;
+	padding:10px
+}
+main {
+	background:#fff;
+	border-top-left-radius:40px;
+	border-top-right-radius:40px;
+	min-height:calc(100vh - 90px)
+}
+textarea {
+	resize:none
+}
+@media screen and (max-width:1200px) {
+	#step1,#step2,#step3,#canvas-wrapper {
+		padding-top:0
+	}
+	main {
+		padding:20px
+	}
 }