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; } diff --git a/app/templates/base.html b/app/templates/base.html index 504563e..050448b 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -12,64 +12,65 @@ + {% endif %} + {% endfor %} + + +
+ + {% block flash_messages %} {%- with messages = get_flashed_messages(with_categories=true) -%} diff --git a/app/templates/index.html b/app/templates/index.html index 43cd866..62bdb94 100644 --- a/app/templates/index.html +++ b/app/templates/index.html @@ -4,8 +4,9 @@ Dashboard {% endblock %} -{% block content %} -
+{% block container %} +
+

Content DB

@@ -19,16 +20,26 @@ Dashboard -

+ +
+
{% endfor %} +
{% endblock %}