[WIP] Add a light frontpage layout

public/fonts/fontello_config.json

@@ -233,6 +233,24 @@
       "css": "link-ext",
       "code": 61582,
       "src": "fontawesome"
+    },
+    {
+      "uid": "5e0a374728ffa8d0ae1f331a8f648231",
+      "css": "github",
+      "code": 61715,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "9a76bc135eac17d2c8b8ad4a5774fc87",
+      "css": "download",
+      "code": 59413,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "17ebadd1e3f274ff0205601eef7b9cc4",
+      "css": "help-circled",
+      "code": 59414,
+      "src": "fontawesome"
     }
   ]
 }

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;
+}

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;
+}

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")

views/start.dt

@@ -1,4 +1,4 @@
-extends layout
+extends layout-light
 
 block title
 	- import dubregistry.viewutils;