From 961e41a36e71c645cf1dacdae546227b180b5935 Mon Sep 17 00:00:00 2001 From: Jason Meller Date: Fri, 15 Dec 2017 17:40:14 -0500 Subject: [PATCH] Better website fixes (#10) --- themes/micromdm/layouts/index.html | 16 ++--- themes/micromdm/layouts/partials/home.html | 2 +- themes/micromdm/static/css/micromdm.css | 71 +++++++++++++++++++--- 3 files changed, 70 insertions(+), 19 deletions(-) diff --git a/themes/micromdm/layouts/index.html b/themes/micromdm/layouts/index.html index caceded0..62159ad0 100644 --- a/themes/micromdm/layouts/index.html +++ b/themes/micromdm/layouts/index.html @@ -1,11 +1,11 @@ - {{ partial "head.html" . }} - -
- {{ partial "navigation.html" . }} - {{ partial "home.html" . }} - {{ partial "footer.html" . }} -
- + {{ partial "head.html" . }} + +
+ {{ partial "navigation.html" . }} + {{ partial "home.html" . }} +
+ {{ partial "footer.html" . }} + diff --git a/themes/micromdm/layouts/partials/home.html b/themes/micromdm/layouts/partials/home.html index 4e004fe8..77426541 100644 --- a/themes/micromdm/layouts/partials/home.html +++ b/themes/micromdm/layouts/partials/home.html @@ -7,7 +7,7 @@

MicroMDM is a project which provides an open source Mobile Device Management server for Apple devices. Our goal is to create a performant and extensible - device management solution for enterprise and education environments. + device management solution for enterprise and education.

Get Started with MicroMDM diff --git a/themes/micromdm/static/css/micromdm.css b/themes/micromdm/static/css/micromdm.css index 7f85ebfb..1e7f8838 100644 --- a/themes/micromdm/static/css/micromdm.css +++ b/themes/micromdm/static/css/micromdm.css @@ -20,7 +20,7 @@ /* Global */ body { position: relative; - font-family: "system"; + font-family: "system", "Helvetica Neue", "Helvetica", "Arial", sans-serif; color: #202532; margin: 0; } @@ -43,11 +43,12 @@ p { } section { - min-width: 100%; + min-width: 1280px; } /* Navigation */ .primary-header { + min-width: 1200px; margin: 16px auto; padding: 0 40px; position: relative; @@ -57,7 +58,7 @@ section { font-size: 16px; color: #a8b9cd; position: absolute; - right: 3%; + right: 40px; top: 15px; } @@ -128,6 +129,10 @@ section p { .hero { margin-top: 210px; + position: relative; + padding-bottom: 180px; + z-index: 3; + background: #fff; } .hero__title { @@ -138,6 +143,12 @@ section p { margin-bottom: 0; } +.hero__text { + text-align: center; + font-size: 22px; + max-width: 580px; +} + .hero__subtitle { text-align: center; font-size: 24px; @@ -159,14 +170,31 @@ section p { text-align: center; font-size: 24px; display: block; - margin: 65px 0 180px 0; + margin: 65px 0 0 0; } .documentation { - max-width: 97%; background-color: #f9f9fb; padding: 80px 0; - margin-top: 48px; + position: relative; +} + +.documentation::before { + content: ''; + display: block; + width: 1200px; + height: 94px; + filter: blur(36px); + background: rgba(32, 37, 50, 0.06); + box-shadow: 0 0 66px 0 rgba(32, 37, 50, 0.06); + position: relative; + z-index: 9; + border-radius: 100%; + position: absolute; + top: -40px; + left: 50%; + margin-left: -600px; + z-index: 1; } .documentation__header { @@ -178,6 +206,7 @@ section p { .documentation__items { list-style: none; padding: 48px 20px; + width: 1200px; border-radius: 10px; background-color: #fff; box-shadow: 0 8px 20px 0 rgba(32, 37, 50, 0.14); @@ -243,8 +272,11 @@ section p { /* Blog Teaser */ .blog-teaser { - padding: 80px 0; + padding: 40px 0 128px; margin-top: 48px; + z-index: 3; + position: relative; + background: #fff; } .blog-teaser__header { @@ -317,7 +349,25 @@ section p { .do-more { background-color: #f9f9fb; padding: 80px 0; - margin-top: 48px; + position: relative; +} + +.do-more::before { + content: ''; + display: block; + width: 1200px; + height: 94px; + filter: blur(36px); + background: rgba(32, 37, 50, 0.06); + box-shadow: 0 0 66px 0 rgba(32, 37, 50, 0.06); + position: relative; + z-index: 9; + border-radius: 100%; + position: absolute; + top: -40px; + left: 50%; + margin-left: -600px; + z-index: 1; } .do-more__header { @@ -327,7 +377,7 @@ section p { } .do-more__items { - width: 100%; + width: 1000px; margin: 0 auto; display: flex; margin: 0 auto; @@ -378,10 +428,11 @@ section p { background: #4a9dff; color: #fff; padding-top: 65px; + min-width: 1280px; } .primary-footer__container { - width 100%; + width: 1170px; margin: 0 auto; position: relative; }