From 7551a4fa7bbc23233619d308af5f504ee4436cbf Mon Sep 17 00:00:00 2001 From: Jason Meller Date: Thu, 7 Dec 2017 21:48:00 -0500 Subject: [PATCH] Update the website theme (#6) --- themes/micromdm/layouts/_default/list.html | 33 +- themes/micromdm/layouts/_default/single.html | 34 +- themes/micromdm/layouts/index.html | 46 +- themes/micromdm/layouts/partials/footer.html | 21 +- themes/micromdm/layouts/partials/head.html | 25 + themes/micromdm/layouts/partials/header.html | 35 -- themes/micromdm/layouts/partials/home.html | 125 +++++ .../micromdm/layouts/partials/navigation.html | 24 + themes/micromdm/layouts/partials/sidebar.html | 17 - themes/micromdm/static/css/micromdm.css | 461 +++++++++++++++--- themes/micromdm/static/css/normalize.css | 0 themes/micromdm/static/images/api.svg | 22 + themes/micromdm/static/images/branch.svg | 13 + .../micromdm/static/images/logo-inverted.svg | 23 + themes/micromdm/static/images/logo.svg | 7 + .../micromdm/static/images/micromdm-docs.svg | 38 ++ themes/micromdm/static/images/octocat.svg | 31 ++ themes/micromdm/static/images/slack-logo.svg | 33 ++ themes/micromdm/static/images/wiki-logo.svg | 39 ++ 19 files changed, 856 insertions(+), 171 deletions(-) create mode 100644 themes/micromdm/layouts/partials/head.html delete mode 100644 themes/micromdm/layouts/partials/header.html create mode 100644 themes/micromdm/layouts/partials/home.html create mode 100644 themes/micromdm/layouts/partials/navigation.html delete mode 100644 themes/micromdm/layouts/partials/sidebar.html create mode 100644 themes/micromdm/static/css/normalize.css create mode 100644 themes/micromdm/static/images/api.svg create mode 100644 themes/micromdm/static/images/branch.svg create mode 100644 themes/micromdm/static/images/logo-inverted.svg create mode 100644 themes/micromdm/static/images/logo.svg create mode 100644 themes/micromdm/static/images/micromdm-docs.svg create mode 100644 themes/micromdm/static/images/octocat.svg create mode 100644 themes/micromdm/static/images/slack-logo.svg create mode 100644 themes/micromdm/static/images/wiki-logo.svg diff --git a/themes/micromdm/layouts/_default/list.html b/themes/micromdm/layouts/_default/list.html index 91957be0..1c9c790b 100644 --- a/themes/micromdm/layouts/_default/list.html +++ b/themes/micromdm/layouts/_default/list.html @@ -1,13 +1,20 @@ -{{ partial "header.html" . }} -
- {{ range .Data.Pages }} -
- {{ .Title }} -
- {{ .Date.Format "Mon, Jan 2, 2006" }} -
-
- {{ end}} -
- {{ partial "footer.html" . }} - + + + {{ partial "head.html" . }} + +
+ {{ partial "navigation.html" . }} +
+ {{ range .Data.Pages }} +
+ {{ .Title }} +
+ {{ .Date.Format "Mon, Jan 2, 2006" }} +
+
+ {{ end}} +
+
+ {{ partial "footer.html" . }} + + diff --git a/themes/micromdm/layouts/_default/single.html b/themes/micromdm/layouts/_default/single.html index 0889ad75..72d57da1 100644 --- a/themes/micromdm/layouts/_default/single.html +++ b/themes/micromdm/layouts/_default/single.html @@ -1,15 +1,21 @@ -{{ partial "header.html" . }} -
-

{{ .Title }}

- {{ if eq .Type "blog" }} - Author: {{ .Params.author }} -
- Date: {{ .Date.Format "Mon, Jan 2, 2006" }} -
- Reading Time: {{ .ReadingTime }} minutes - {{ end }} - {{ .Content }} -
- {{ partial "footer.html" . }} - + + + {{ partial "head.html" . }} + +
+ {{ partial "navigation.html" . }} +
+

{{ .Title }}

+ {{ if eq .Type "blog" }} + Author: {{ .Params.author }} +
+ Date: {{ .Date.Format "Mon, Jan 2, 2006" }} +
+ Reading Time: {{ .ReadingTime }} minutes + {{ end }} + {{ .Content }} +
+
+ {{ partial "footer.html" . }} + diff --git a/themes/micromdm/layouts/index.html b/themes/micromdm/layouts/index.html index f7b0f795..62159ad0 100644 --- a/themes/micromdm/layouts/index.html +++ b/themes/micromdm/layouts/index.html @@ -1,37 +1,11 @@ -{{ partial "header.html" . }} - -

- MicroMDM is an experimental project to build a Mobile Device Management server for Apple devices. Our goal is to create a performant and extensible device management solution for enterprise and education environments. - -

News

- {{ range first 1 .Data.Pages }} -
-

{{ .Title }}

- {{ .Summary }} - {{ if .Truncated }} - Read More… - {{ end }} -
- {{ end }} - -

Documentation

- -

- -

Community

-

- The community around open source MDM is small but growing. If you’re interested in the project and looking to chat with other MDM developers(and users), the best place to start is the MacAdmins Slack Team. Some of the channels you can join are #micromdm, #dep and #mdm. -

-

- - We also maintain a list of related projects, blog posts and talks on the micromdm wiki page. - - -{{ partial "footer.html" . }} - + + + {{ partial "head.html" . }} + +
+ {{ partial "navigation.html" . }} + {{ partial "home.html" . }} +
+ {{ partial "footer.html" . }} + - diff --git a/themes/micromdm/layouts/partials/footer.html b/themes/micromdm/layouts/partials/footer.html index 245b1cac..df95243e 100644 --- a/themes/micromdm/layouts/partials/footer.html +++ b/themes/micromdm/layouts/partials/footer.html @@ -1,3 +1,23 @@ + diff --git a/themes/micromdm/layouts/partials/head.html b/themes/micromdm/layouts/partials/head.html new file mode 100644 index 00000000..a6e0038a --- /dev/null +++ b/themes/micromdm/layouts/partials/head.html @@ -0,0 +1,25 @@ + + + {{ .Hugo.Generator }} + + {{ if .IsHome }} + {{ .Site.Title }} + {{ else }} + {{ .Title }} · {{ .Site.Title }} + {{ end }} + + + + + + + + + + + + + + + + diff --git a/themes/micromdm/layouts/partials/header.html b/themes/micromdm/layouts/partials/header.html deleted file mode 100644 index d9f96053..00000000 --- a/themes/micromdm/layouts/partials/header.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - {{ .Hugo.Generator }} - - {{ if .IsHome }} - {{ .Site.Title }} - {{ else }} - {{ .Title }} · {{ .Site.Title }} - {{ end }} - - - - - - - - - - - - - - - - - - -
- - {{ partial "sidebar.html" . }} diff --git a/themes/micromdm/layouts/partials/home.html b/themes/micromdm/layouts/partials/home.html new file mode 100644 index 00000000..c593ec93 --- /dev/null +++ b/themes/micromdm/layouts/partials/home.html @@ -0,0 +1,125 @@ +
+

MicroMDM

+

bootstrap your mac deployment

+ +

+ MicroMDM is an experimental project to build a Mobile Device Management + server for Apple devices. Our goal is to create a performant and extensible + device management solution for enterprise and education environments. +

+ Get Started with MicroMDM +
+ +
+

Documentation

+
    +
  • +
    +

    Get started easily

    + +
    +

    + Praesent cursus sollicitudin pretium. Phasellus id massa ac augue + lacinia euismod at ac tortor. Quisque id elit ex. Mauris elementum + feugiat velit at sollicitudin. Etiam suscipit mauris eu tellus + consequat convallis. +

    + View the Quickstart Guide +
    • +
  • +
    +

    Join the Community

    + +
    +

    + In elit turpis, facilisis vel lacinia vitae, scelerisque a nulla. + Vivamus eget nisl turpis. Nunc tortor quam, volutpat quis leo sit amet, + pellentesque tincidunt ante. +

    + Join Us On Slack +
    • +
  • +
    +

    Contribute to microMDM

    + +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere + felis fringilla nisl cursus, sed feugiat odio consectetur. + ellentesque vitae magna sodales nibh pretium facilisis sed eget lacus. +

    + Read the Contribution Guide +
    • +
+
+ +
+

What's new with MicroMDM?

+ {{ range first 1 .Data.Pages }} + + {{ end }} +
+ +
+

Do more with MicroMDM

+
    +
  • +
    + +

    Check out the API

    +
    +

    + In elit turpis, facilisis vel lacinia vitae, scelerisque a nulla. + Vivamus eget nisl turpis. Nunc tortor quam, volutpat quis leo sit amet, + pellentesque tincidunt ante. +

    + Explore the API +
    • +
  • +
    + +

    Review the Code

    +
    +

    + Praesent cursus sollicitudin pretium. Phasellus id massa ac augue + lacinia euismod at ac tortor. +

    + View the Source Code +
    • +
  • +
    + +

    Contribute to microMDM

    +
    +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. In posuere + felis fringilla nisl cursus, sed feugiat odio consectetur. + ellentesque vitae magna sodales nibh pretium facilisis sed eget lacus. +

    + Read the Contribution Guide +
    • +
+ +
diff --git a/themes/micromdm/layouts/partials/navigation.html b/themes/micromdm/layouts/partials/navigation.html new file mode 100644 index 00000000..1ac82f4b --- /dev/null +++ b/themes/micromdm/layouts/partials/navigation.html @@ -0,0 +1,24 @@ +
+ + +
diff --git a/themes/micromdm/layouts/partials/sidebar.html b/themes/micromdm/layouts/partials/sidebar.html deleted file mode 100644 index 53454e1d..00000000 --- a/themes/micromdm/layouts/partials/sidebar.html +++ /dev/null @@ -1,17 +0,0 @@ - diff --git a/themes/micromdm/static/css/micromdm.css b/themes/micromdm/static/css/micromdm.css index 32d71226..d76f7283 100644 --- a/themes/micromdm/static/css/micromdm.css +++ b/themes/micromdm/static/css/micromdm.css @@ -1,83 +1,434 @@ -html, body { - height: 100%; +@font-face { + font-family: system; + font-style: bold; + font-weight: 700; + src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Ubuntu Bold"), local("Segoe UI Bold"), local("Roboto-Bold"), local("DroidSans"), local("Tahoma"); } +@font-face { + font-family: system; + font-weight: 900; + src: local(".SFNSText-Heavy"), local(".HelveticaNeueDeskInterface-Heavy"), local(".LucidaGrandeUI"), local("Ubuntu Heavy"), local("Segoe UI Heavy"), local("Roboto-Heavy"), local("DroidSans"), local("Tahoma"); +} + +@font-face { + font-family: system; + font-weight: 400; + src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma"); +} + +/* Global */ body { - display: flex; - flex-direction: column; - font: 14px Roboto, arial, sans-serif; - line-height: 1.45; - margin: 0; - padding: 0; + position: relative; + font-family: "system"; + color: #202532; + margin: 0; } -.container { - margin: 0 auto; - max-width: 50em; - width: 100%; - text-align: left; +main { + min-height: calc(100vh - 308px); } -h1 { - display: block; - font-size: 2em; - font-weight: bold; +a { + font-weight: bold; + color: #4a9dff; + text-decoration: none; } -#sidebar { - float: right; - padding-left: 20px; - width: 40%; - max-width: 250px; - background: rgba(73, 188, 255, 0.6); - margin: 20px 0 20px 20px; +p { + max-width: 700px; + font-size: 22px; + line-height: 1.45; + letter-spacing: -0.3px; } -#sidebar ul, #sidebar li { - display: block; - list-style-type: disc; +section { + min-width: 1280px; } - -#sidebar h4 { - color: black; +/* Navigation */ +.primary-header { + width: 1280px; + margin: 16px auto; + padding: 0 40px; + position: relative; } -#sidebar a { - color: blue; - text-decoration: none; - cursor: auto; +.primary-nav { + font-size: 16px; + color: #a8b9cd; + position: absolute; + right: 0; + top: 15px; } - -.logo { - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; +.primary-nav__items { + list-style: none; + margin: 0; + padding: 0; } -.logo img { - max-width: 100%; - height: 4em; - margin-right: 10px; +.primary-nav__item { + display: inline-block; + margin-left: 50px; +} + +.primary-nav__item > a { + text-decoration: none; + color: #a8b9cd; + transition: 0.3s all; +} + +.primary-nav__item > a:hover { + text-decoration: none; + color: #4a9dff; +} + +section p { + margin: 0 auto; +} + +/* Blog List */ + +.blog-post-list { + width: 700px; + margin: 100px auto 0 auto; + text-align: center; +} + +.blog-post-list-box { + margin: 40px 0; +} + +.blog-post-list-box > a { + font-size: 28px; +} + +.blog-post-list-box > .post-date { + display: block; + margin-top: 10px; + font-size: 20px; +} + +.post { + width: 700px; + margin: 0 auto; + margin-top: 100px; +} + +.post ul { + font-size: 22px; + line-height: 1.45; +} + +.post img { + max-width: 700px; +} + +/* Hero */ + +.hero { + margin-top: 210px; +} + +.hero__title { + text-align: center; + font-size: 48px; + font-weight: 900; + letter-spacing: -0.9px; + margin-bottom: 0; +} + +.hero__subtitle { + text-align: center; + font-size: 24px; + margin-top: 10px; + font-weight: normal; +} + +.hero__logo { + margin: 60px 0; + text-align: center; +} + +.hero__logo-image { + width: 204px; + height: 192px; +} + +.hero__cta { + text-align: center; + font-size: 24px; + display: block; + margin: 65px 0 180px 0; +} + +.documentation { + background-color: #f9f9fb; + padding: 80px 0; + margin-top: 48px; +} + +.documentation__header { + text-align: center; + margin: 0 0 68px; + font-size: 42px; +} + +.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); + margin: 0 auto; + display: flex; +} + +.documentation__item { + margin: 0; + padding: 0; + display: inline-block; + width: 397px; + text-align: center; + vertical-align: top; + position: relative; + flex: 1; +} + +.documentation__item::after { + content: ''; + border-radius: 2px; + background-color: rgba(74, 157, 255, 0.1); + width: 2px; + position: absolute; + top: 0; + right: 0; + bottom: 0; +} + +.documentation__item:last-child:after { + display: none; +} + +.documentation__item-header { + height: 200px; +} + +.documentation__item-image { + height: 140px; +} + +.documentation__item-title { + margin: 0 0 25px; + font-size: 24px; +} + +.documentation__item-description { + font-size: 18px; + line-height: 1.67; + text-align: center; + width: 300px; + margin-bottom: 50px; +} + +.documentation__item-cta { + display: block; + text-align: center; + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +/* Blog Teaser */ +.blog-teaser { + padding: 80px 0; + margin-top: 48px; +} + +.blog-teaser__header { + font-size: 42px; + text-align: center; +} + +.blog-teaser__header::after { + content: ''; + display: block; + margin: 0 auto; + margin-top: 23px; + width: 600px; + height: 2px; + background-color: rgba(74, 157, 255, 0.1); +} + +.blog-post { + width: 640px; + margin: 0 auto; +} + +.blog-post__title { + font-weight: normal; + font-size: 32px; +} + +.blog-post__preview { + font-weight: normal; + font-size: 18px; + line-height: 1.44; +} + +.blog-post__actions { + position: relative; + margin-top: 13px; + font-size: 18px; + letter-spacing: -0.2px; + height: 48px; +} + +.blog-post__additional-actions { + position: absolute; + top: 0; + right: -20px; +} + +.blog-post__read-more-link { + position: absolute; + bottom: 0; } -code { - background: #EFEFEF; - font-family: Go, Menlo, monospace; +.blog-post__view-all-link { + display: inline-block; + margin-right: 20px; } -pre { - background: #EFEFEF; - line-height: 1.4em; - font-family: Go, Menlo, monospace; - padding: 10px; - border-radius: 7px; +.blog-post__view-all-link::after { + content: ''; + display: inline-block; + position: relative; + top: 15px; + left: 10px; + width: 2px; + height: 44px; + background-color: rgba(74, 157, 255, 0.2); +} + +.do-more { + background-color: #f9f9fb; + padding: 80px 0; + margin-top: 48px; +} + +.do-more__header { + text-align: center; + font-size: 42px; + margin: 0 0 50px; +} + +.do-more__items { + width: 1000px; + margin: 0 auto; + display: flex; + margin: 0 auto; + padding: 0; + list-style: none; +} + +.do-more__item { + flex: 1; + margin: 0; + padding: 0; + position: relative; +} + +.do-more__item:nth-child(2n) { + margin: 0 50px; } -.screenshot img { - width: 100%; +.do-more__item-description { + font-size: 16px; + line-height: 1.88; + margin-bottom: 70px; +} + +.do-more__item-header { + text-align: center; +} + +.do-more__item-cta { + position: absolute; + bottom: 0; + left: 0; + right: 0; + text-align: center; + background: #4a9dff; + color: #fff; + height: 40px; + font-weight: 400; + border-radius: 3px; + line-height: 40px; + font-size: 16px; +} + +/* Footer */ +.primary-footer { + height: 243px; + background: #4a9dff; + color: #fff; + padding-top: 65px; +} + +.primary-footer__container { + width: 1170px; + margin: 0 auto; + position: relative; +} + +.primary-footer__logo { + position: absolute; + top: 0; +} + +.primary-footer__logo-text { + vertical-align: top; + font-weight: normal; + position: relative; + top: 15px; + left: 7px; +} + + +.primary-footer__navigation { + position: absolute; + right: 0; + top: 0; +} + +.primary-footer__navigation-items { + list-style: none; + display: inline-block; + width: 200px; + margin: 0 0 0 116px; + padding: 0; + vertical-align: top; + font-size: 16px; +} + +.primary-footer__navigation-header { + font-size: 18px; + font-weight: bold; + letter-spacing: 0.8px; +} + + +.primary-footer__navigation-item { + height: 30px; +} + +.primary-footer a { + font-weight: normal; + color: #fff; } diff --git a/themes/micromdm/static/css/normalize.css b/themes/micromdm/static/css/normalize.css new file mode 100644 index 00000000..e69de29b diff --git a/themes/micromdm/static/images/api.svg b/themes/micromdm/static/images/api.svg new file mode 100644 index 00000000..e9043dd2 --- /dev/null +++ b/themes/micromdm/static/images/api.svg @@ -0,0 +1,22 @@ + + + + api-160 + Created with Sketch. + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/branch.svg b/themes/micromdm/static/images/branch.svg new file mode 100644 index 00000000..9ccd7b68 --- /dev/null +++ b/themes/micromdm/static/images/branch.svg @@ -0,0 +1,13 @@ + + + + branch-160 + Created with Sketch. + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/logo-inverted.svg b/themes/micromdm/static/images/logo-inverted.svg new file mode 100644 index 00000000..3651d747 --- /dev/null +++ b/themes/micromdm/static/images/logo-inverted.svg @@ -0,0 +1,23 @@ + + + + micromdm-logo-sm-invert + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/logo.svg b/themes/micromdm/static/images/logo.svg new file mode 100644 index 00000000..ea2f8fc6 --- /dev/null +++ b/themes/micromdm/static/images/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/themes/micromdm/static/images/micromdm-docs.svg b/themes/micromdm/static/images/micromdm-docs.svg new file mode 100644 index 00000000..150228b5 --- /dev/null +++ b/themes/micromdm/static/images/micromdm-docs.svg @@ -0,0 +1,38 @@ + + + + micromdm-docs + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/octocat.svg b/themes/micromdm/static/images/octocat.svg new file mode 100644 index 00000000..80ebb839 --- /dev/null +++ b/themes/micromdm/static/images/octocat.svg @@ -0,0 +1,31 @@ + + + + octocat-160 + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/slack-logo.svg b/themes/micromdm/static/images/slack-logo.svg new file mode 100644 index 00000000..ffa2327d --- /dev/null +++ b/themes/micromdm/static/images/slack-logo.svg @@ -0,0 +1,33 @@ + + + + slack-140 + Created with Sketch. + + + + + + + + + + \ No newline at end of file diff --git a/themes/micromdm/static/images/wiki-logo.svg b/themes/micromdm/static/images/wiki-logo.svg new file mode 100644 index 00000000..463129b6 --- /dev/null +++ b/themes/micromdm/static/images/wiki-logo.svg @@ -0,0 +1,39 @@ + + + + wiki-140 + Created with Sketch. + + + + + + + + + + + + + \ No newline at end of file