Responzivita podle nového návrhu

sass/_mobile.scss

@@ -0,0 +1,49 @@
+@media screen and (max-width: 800px) {
+
+nav {
+	div.background { width: 100%; }
+	div.list { text-align: center; }
+}
+
+header {
+	h1 { display: none; }
+}
+
+main {
+	
+	section.meta {
+		flex-direction: column;
+
+		img {
+			max-width: 100%;
+			margin: 0;
+			margin-top: 1em;
+		}
+	}
+
+	section.software {
+		flex-direction: column;
+
+		.program { width: 100%; }
+	}
+}
+
+body.index {
+	background-position: -10vw -60vw;
+	background-size: 180vw auto;
+
+	main {
+		flex-direction: column;
+
+		section, aside { max-width: 100%; }
+		aside {
+			margin-top: 1em;
+			width: 100%;
+
+			a { padding: .6em 0; }
+		}
+		h2 { margin-top: 0; }
+	}
+}
+
+}

sass/style.scss

@@ -47,6 +47,8 @@ nav {
 		padding: 2em;
 		text-align: right;
 		margin: 0 auto;
+
+		ul { padding: 0; }
 	}
 
 	header { justify-content: flex-end; }
@@ -163,6 +165,7 @@ body.index {
 			display: flex;
 			flex-direction: column;
 			align-items: stretch;
+			width: 25%;
 			margin-top: 6em;
 
 			a {
@@ -181,3 +184,5 @@ body.index {
 		}
 	}
 }
+
+@import "mobile";