Improve CSS and overall design

5 files changed, 61 insertions, 28 deletions

diff --git a/app/scss/components.scss b/app/scss/components.scss
index 26102a0..c55a539 100644
--- a/app/scss/components.scss
+++ b/app/scss/components.scss
@@ -1,4 +1,3 @@
-
 h1 {
 	margin: 0;
 }
diff --git a/app/scss/nav.scss b/app/scss/nav.scss
index 0cf60ea..be70681 100644
--- a/app/scss/nav.scss
+++ b/app/scss/nav.scss
@@ -37,6 +37,10 @@ nav li a {
 	border-left: 1px solid #444;
 }
 
+nav ul li:last-child a {
+	border-right: 1px solid #444;
+}
+
 nav a:hover {
 	color: #eee;
 	background: #444;
@@ -61,8 +65,7 @@ li.dropdown {
 	background: #333;
 	z-index: 1;
 	right: 0;
-    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
-	// display: none;
+	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.4);
 }
 
 .dropdown:hover ul {
diff --git a/app/scss/packagegrid.scss b/app/scss/packagegrid.scss
index f1de7c8..5686b22 100644
--- a/app/scss/packagegrid.scss
+++ b/app/scss/packagegrid.scss
@@ -4,18 +4,17 @@
 	flex-direction: row;
 	flex-grow: 1;
 	flex-shrink: 1;
-	
 	padding: 0;
 	margin: 0;
 }
 
 .packagegrid li {
 	flex: 1;
-	display: block;	
-	min-width: 246px;
-	min-height: 164px;
+	display: block;
+	min-width: 300px;
+	min-height: 200px;
 	padding: 1;
-	margin: 5px;	
+	margin: 7px;
 }
 
 .packagegrid a {
@@ -24,18 +23,52 @@
 	border-radius: 7px;
 	position: relative;
 	overflow: hidden;
-    	background-size: cover;
+	background-size: cover;
 	background-repeat: no-repeat;
-    	background-position: center;
+	background-position: center;
 }
 
+.packagegrid a:hover {
+	// box-shadow: 0px 0px 16px 6px rgba(0,0,0,0.4);
+}
 
-.packagegrid a span {
+.packagegridscrub {
 	position: absolute;
-	left: 0;
+	top: 50%;
 	right: 0;
 	bottom: 0;
+	left: 0;
 	padding: 5px;
-	background: rgba(255, 255, 255, 0.3);
-	color: black;
+	background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.5));
+}
+
+.packagegridinfo {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: 1em;
+}
+
+.packagegridinfo h3 {
+	color: white;
+}
+
+.packagegridinfo p {
+	display: none;
+	color: #ddd;
+	font-weight: normal;
+}
+
+.packagegrid a:hover .packagegridinfo {
+	top: 0;
+}
+
+.packagegrid a:hover p {
+	display: block;
+}
+
+.packagegrid a:hover .packagegridscrub {
+	top: 0;
+	background: rgba(0,0,0,0.8);
 }
diff --git a/app/scss/packages.scss b/app/scss/packages.scss
index 04230cd..1d13547 100644
--- a/app/scss/packages.scss
+++ b/app/scss/packages.scss
@@ -1,4 +1,3 @@
-
 .screenshot_list, .screenshot_list li, .screenshot_list li a {
 	list-style: none;
 	margin: 0;
diff --git a/app/scss/page.scss b/app/scss/page.scss
index ab6d3c4..f43da7d 100644
--- a/app/scss/page.scss
+++ b/app/scss/page.scss
@@ -6,16 +6,25 @@ html, body {
 	margin: 0;
 }
 
-nav, main, #alerts {
+.container, main, #alerts, footer {
 	width: 90%;
-	max-width: 960px;
+	max-width: 1024px;
 	margin: auto;
 	padding: 0;
 	display: block;
 }
 
+main {
+	padding: 7px 0;
+}
+
+header h1, header p, header form {
+	padding: 0 10px;
+	margin-left: 0;
+}
+
 header {
-	padding: 20px;
+	padding: 30px;
 	background: #258;
 }
 
@@ -23,16 +32,6 @@ header p {
 	max-width: 400px;
 }
 
-
-/* Footer */
-
-footer {
-	width: 80%;
-	max-width: 860px;
-	margin: auto;
-	padding: 50px 0 20px 0;
-}
-
 footer a {
 	color: #666;
 }