From b80db34cdb72c5331772d2d2de156d1652d78803 Mon Sep 17 00:00:00 2001
From: Sebastian Lay <mail@sebastian-lay.de>
Date: Wed, 1 Sep 2021 14:24:05 +0200
Subject: [PATCH] Improved responsive behaviour

---
 css/style.css | 36 +++++++++++++++++++++++++++++++-----
 index.html    |  2 +-
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/css/style.css b/css/style.css
index e1dbe31..52f08ad 100644
--- a/css/style.css
+++ b/css/style.css
@@ -123,6 +123,10 @@ input, button, select {
   background: #fff;
 }
 
+.search {
+  width: 200px;
+}
+
 button {
   cursor: pointer;
 }
@@ -158,6 +162,12 @@ nav button:last-child {
   margin-right: 0;
 }
 
+aside {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
 aside > section {
   display: flex;
   align-items: stretch;
@@ -301,19 +311,31 @@ p span a:last-child {
   margin-right: 0;
 }
 
+header a {
+  display: inline-block;
+}
+
 [v-cloak] {
   display: none;
 }
 
 /* media queries */
 
+@media (max-width: 1200px) {
+
+main > aside {
+  flex-direction: column;
+}
+
+}
+
 @media (max-width: 1000px) {
 
-  body {
-    padding: 30px;
-  }
-  
-  }
+body {
+  padding: 30px;
+}
+
+}
 
 @media (max-width: 670px) {
 
@@ -348,4 +370,8 @@ input, button, select {
   margin: 0 0 5px 0;
 }
 
+.search {
+  width: auto;
+}
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 2d24c87..dd08c86 100644
--- a/index.html
+++ b/index.html
@@ -38,7 +38,7 @@
     <main>
       <aside>
         <section>
-          <input placeholder="search" v-model="search" aria-label="search" />
+          <input placeholder="search" v-model="search" aria-label="search" class="search" />
           <select v-model="type" aria-label="film type">
             <option value="all">all types</option> 
             <option value="black & white">black & white</option>