From 1e6b58efbc5cf46b5f558f2d2c5fee8c355d8dd0 Mon Sep 17 00:00:00 2001 From: Sebastian Wilzbach Date: Thu, 19 Jul 2018 14:18:43 +0200 Subject: [PATCH] Add a light frontpage layout --- public/styles/common.css | 16 ++++++ public/styles/top_p.css | 109 +++++++++++++++++++++++++-------------- views/layout-light.dt | 41 +++++++++++++++ views/start.dt | 2 +- 4 files changed, 129 insertions(+), 39 deletions(-) create mode 100644 views/layout-light.dt diff --git a/public/styles/common.css b/public/styles/common.css index c61a6a8d..d7f6f43c 100644 --- a/public/styles/common.css +++ b/public/styles/common.css @@ -759,3 +759,19 @@ Individual DUB package CSS definitions #front-view-all-btn { text-align: right; } + +/*Footer*/ + +#footer { + padding-top: 2em; + margin: 0 auto; + width: 740px; +} + +#footer ul { + list-style-type: none; +} +#footer li { + float: left; + padding: 16px; +} diff --git a/public/styles/top_p.css b/public/styles/top_p.css index f2d46995..aab0233c 100644 --- a/public/styles/top_p.css +++ b/public/styles/top_p.css @@ -71,41 +71,74 @@ h2 { /* Fontello icons */ -.icon-category-desktop:before { content: '\e800'; } -.icon-category-editor:before { content: '\e801'; } -.icon-category-web:before { content: '\e802'; } -.icon-category-audio:before { content: '\e803'; } -.icon-category-network:before { content: '\e804'; } -.icon-category-photo:before { content: '\e805'; } -.icon-category-productivity:before { content: '\e806'; } -.icon-category-unknown:before { content: '\e807'; } -.icon-category-video:before { content: '\e808'; } -.icon-category-i18n:before { content: '\e809'; } -.icon-category-library:before { content: '\e80a'; } -.icon-category-graphics:before { content: '\e80b'; } -.icon-category-generic:before { content: '\e80c'; } -.icon-category-auth:before { content: '\e80d'; } -.icon-category-cpu:before { content: '\e80e'; } -.icon-category-gc:before { content: '\e80f'; } -.icon-category-mem:before { content: '\e810'; } -.icon-category-data:before { content: '\e811'; } -.icon-category-std:before { content: '\e812'; } -.icon-category-mobile:before { content: '\e813'; } -.icon-category-communication:before { content: '\e814'; } -.icon-category-crypto:before { content: '\e82b'; } -.icon-search:before { content: '\f002'; } -.icon-category-scientific:before { content: '\f016'; } -.icon-link-ext:before { content: '\f08e'; } -.icon-category-binding:before { content: '\f097'; } -.icon-github-circled:before { content: '\f09b'; } -.icon-menu:before { content: '\f0c9'; } -.icon-down-dir:before { content: '\f0d7'; } -.icon-up-dir:before { content: '\f0d8'; } -.icon-category-game:before { content: '\f11b'; } -.icon-code:before { content: '\f121'; } -.icon-bitbucket:before { content: '\f171'; } -.icon-category-3d:before { content: '\f1b2'; } -.icon-category-database:before { content: '\f1c0'; } -.icon-category-server:before { content: '\f233'; } -.icon-category-development:before { content: '\f275'; } -.icon-gitlab:before { content: '\f296'; } +.icon-category-desktop:before { content: '\e800'; } /* '' */ +.icon-category-editor:before { content: '\e801'; } /* '' */ +.icon-category-web:before { content: '\e802'; } /* '' */ +.icon-category-audio:before { content: '\e803'; } /* '' */ +.icon-category-network:before { content: '\e804'; } /* '' */ +.icon-category-photo:before { content: '\e805'; } /* '' */ +.icon-category-productivity:before { content: '\e806'; } /* '' */ +.icon-category-unknown:before { content: '\e807'; } /* '' */ +.icon-category-video:before { content: '\e808'; } /* '' */ +.icon-category-i18n:before { content: '\e809'; } /* '' */ +.icon-category-library:before { content: '\e80a'; } /* '' */ +.icon-category-graphics:before { content: '\e80b'; } /* '' */ +.icon-category-generic:before { content: '\e80c'; } /* '' */ +.icon-category-auth:before { content: '\e80d'; } /* '' */ +.icon-category-cpu:before { content: '\e80e'; } /* '' */ +.icon-category-gc:before { content: '\e80f'; } /* '' */ +.icon-category-mem:before { content: '\e810'; } /* '' */ +.icon-category-data:before { content: '\e811'; } /* '' */ +.icon-category-std:before { content: '\e812'; } /* '' */ +.icon-category-mobile:before { content: '\e813'; } /* '' */ +.icon-category-communication:before { content: '\e814'; } /* '' */ +.icon-download:before { content: '\e815'; } /* '' */ +.icon-help-circled:before { content: '\e816'; } /* '' */ +.icon-category-crypto:before { content: '\e82b'; } /* '' */ +.icon-search:before { content: '\f002'; } /* '' */ +.icon-category-scientific:before { content: '\f016'; } /* '' */ +.icon-link-ext:before { content: '\f08e'; } /* '' */ +.icon-category-binding:before { content: '\f097'; } /* '' */ +.icon-github-circled:before { content: '\f09b'; } /* '' */ +.icon-menu:before { content: '\f0c9'; } /* '' */ +.icon-down-dir:before { content: '\f0d7'; } /* '' */ +.icon-up-dir:before { content: '\f0d8'; } /* '' */ +.icon-github:before { content: '\f113'; } /* '' */ +.icon-category-game:before { content: '\f11b'; } /* '' */ +.icon-code:before { content: '\f121'; } /* '' */ +.icon-bitbucket:before { content: '\f171'; } /* '' */ +.icon-category-3d:before { content: '\f1b2'; } /* '' */ +.icon-category-database:before { content: '\f1c0'; } /* '' */ +.icon-category-server:before { content: '\f233'; } /* '' */ +.icon-category-development:before { content: '\f275'; } /* '' */ +.icon-gitlab:before { content: '\f296'; } /* '' */ + + +/* search box */ + +#light .search-container +{ + font-size: 3em; +} + +#light #search-box +{ + display: block; + padding-left: 0em; + text-align: center; +} + +#light span#search-query { + width: 100%; + height: 3em; +} + +#light span#search-submit button { + height: 1.5em; + background: #969696; + padding: 0 0.1em; +} + +#light span#search-query input, #light span#search-submit button { + font-size: 2em; +} diff --git a/views/layout-light.dt b/views/layout-light.dt new file mode 100644 index 00000000..c2f7f4ec --- /dev/null +++ b/views/layout-light.dt @@ -0,0 +1,41 @@ +!!! 5 +html + head + block css + link(rel="stylesheet", type="text/css", href="#{req.rootDir}styles/common.css") + link(rel="stylesheet", type="text/css", href="#{req.rootDir}styles/top.css") + link(rel="stylesheet", type="text/css", href="#{req.rootDir}styles/top_p.css") + + link(rel="shortcut icon", href="#{req.rootDir}favicon.ico") + meta(name="viewport",content="width=device-width, initial-scale=1.0, minimum-scale=0.1, maximum-scale=10.0") + block title + title= title ~ " - DUB - The D package registry" + body#Home.doc + script document.body.className += ' have-javascript' + #light + .search-container + #search-box + form(method="GET", action="#{req.rootDir}search") + span#search-query + input#q(name="q", placeholder="Search for a package") + span#search-submit + button(type="submit") + i.fa.fa-search + + #content + block body + + #footer + ul + - import std.algorithm.searching : startsWith; + - import std.range : empty; + - import std.string : split; + - import std.typecons : tuple; + - auto listitems = [tuple("Documentation", "help-circled", "https://dub.pm"), tuple("Download", "download", "download"), tuple("GitHub (DUB)", "github-circled", "https://github.com/dlang/dub"),tuple("GitHub (DUB registry)", "github", "https://github.com/dlang/dub-registry")]; + - foreach(items; listitems) + li + i(class="fa icon-#{items[1]}") + a(href="#{items[2]}") + span=items[0] + + script(type="application/javascript", src="/scripts/menu.js") diff --git a/views/start.dt b/views/start.dt index 6811d2a7..ddea1c66 100644 --- a/views/start.dt +++ b/views/start.dt @@ -1,4 +1,4 @@ -extends layout +extends layout-light block title - import dubregistry.viewutils;