Add colorful shininess

html/style.css

@@ -1,6 +1,108 @@
+html, body {
+	margin: 0;
+	background: #EFEFEF;
+}
+
+html {
+	padding: 0;
+	width: 100%;
+}
+
+body {
+    padding: 0 2em;
+	width: auto;
+}
+
+h1:first-child {
+	margin-top: 0;
+}
+
 pre {
-    background-color: #f4f4f8;
-    border: 1px solid #ededf2;
+    background-color: #F4F4F8;
+    border: 1px solid #EDEDF2;
     padding: 0.6ex;
 }
 
+img {
+    max-width: 100%;
+}
+
+.pretty-box {
+	border: 0.2em solid;
+	background-style: solid;
+	border-radius: 1em;
+	box-shadow: 0.5em 0.5em 1em #888888;
+	padding: 2em;
+}
+
+#header {
+    font-family: sans-serif;
+    font-weight: bold;
+    border-radius: 0 0 4em 4em;
+    margin: -2em auto 0; /*extra top padding and negative margin preserves bleed-off illusion for shadow*/
+    padding: 3em 3em 1em;
+    line-height: 2em;
+    overflow: hidden;
+    background: #C0E472;
+	border-color: #8BC313;
+	border-top: none;
+}
+
+#header a {
+    float: left;
+    color: #000000;
+    text-decoration: none;
+	font-size: 2em;
+}
+
+#header #search {
+    float: right;
+	width: 42%;
+	min-width: 18em;
+}
+
+#header #search label {
+	float: left;
+	font-size: 1.25em;
+}
+
+#query {
+    z-index: 100;
+    position: relative;
+}
+
+#search div {
+	overflow: hidden;
+	border: 0.1em solid #8BC313;
+	border-radius: 0.5em;
+	padding: 0 0.5em;
+	background-color: #FFFFFF;
+}
+
+#header #query {
+    outline: none;
+	border: none;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+}
+
+#content {
+	margin: 2em auto;
+	overflow: hidden;
+	max-width: 800px;
+	background: #FFFFFF;
+	border-color: #F2C100;
+}
+
+#footer {
+    margin: 0 auto;
+	padding: 0 1em 0;
+    overflow: hidden;
+	background: #E47286;
+	border-color: #E43B59;
+	border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+

htmlify.pl

@@ -17,11 +17,8 @@
 my $tg;
 my %methods-by-type;
 my $footer = footer-html;
-my $head   = q[
-<link rel="icon" href="/favicon.ico" type="favicon.ico" />
-<link rel="stylesheet" type="text/css" href="/style.css" media="screen" title="default" />
-];
-
+my $head   = slurp 'template/head.html';
+my $header = slurp 'template/header.html';
 
 sub url-munge($_) {
     return $_ if m{^ <[a..z]>+ '://'};
@@ -34,8 +31,8 @@
     return $_;
 }
 
-sub p2h($pod, Str:D :$head = '', Str:D :$header = '') {
-    pod2html($pod, :url(&url-munge), :$footer, :head($OUTER::head ~ $head), :$header);
+sub p2h($pod) {
+    pod2html($pod, :url(&url-munge), :$head, :$header, :$footer);
 }
 
 sub pod-gist(Pod::Block $pod, $level = 0) {
@@ -426,8 +423,8 @@ (Bool :$debug, Bool :$typegraph = False)
     my $template = slurp("template/search_template.js");
     my @items;
     my sub fix-url ($raw) {
-        $raw ~~ /^.(.*?)('#'.*)?$/;
-        $0 ~ '.html' ~ ($1||'')
+        $raw #~~ /^.(.*?)('#'.*)?$/;
+        #$0 ~ '.html' ~ ($1||'')
     };
     @items.push: $dr.lookup('language', :by<kind>).sort(*.name).map({
         "\{ label: \"Language: {.name}\", value: \"{.name}\", url: \"{ fix-url(.url) }\" \}"
@@ -564,7 +561,7 @@ (Bool :$debug, Bool :$typegraph = False)
 sub write-index-file($dr) {
     say 'Writing html/index.html ...';
     my %routine-seen;
-    my $pod = pod-with-title('Perl 6 Documentation',
+    my $pod = pod-with-title('Index',
         Pod::Block::Para.new(
             content => ['Official Perl 6 documentation'],
         ),
@@ -583,11 +580,7 @@ (Bool :$debug, Bool :$typegraph = False)
             pod-item(pod-link(.name, .url))
         }),
     );
-    spurt 'html/index.html', p2h(
-        $pod,
-        head => slurp('template/index_head.html'),
-        header => slurp('template/index_header.html'),
-    );
+    spurt 'html/index.html', p2h($pod);
 }
 
 sub write-routine-file($dr, $name) {
@@ -621,8 +614,8 @@ (Bool :$debug, Bool :$typegraph = False)
 
 sub footer-html() {
     state $dt = ~DateTime.now;
-    qq[
-    <div class="FOOTER">
+    my $footer = slurp 'template/footer_template.html';
+    my $footer_content = qq[
         <p>
             Generated on $dt from the sources at
             <a href="https://github.com/perl6/doc">perl6/doc on github</a>.
@@ -631,6 +624,6 @@ (Bool :$debug, Bool :$typegraph = False)
             This is a work in progress to document Perl 6, and known to be
             incomplete. Your contribution is appreciated.
         </p>
-    </div>
     ];
+    $footer.subst('CONTENT', $footer_content);
 }

template/footer_template.html

@@ -0,0 +1,4 @@
+</div>
+<div id="footer" class="pretty-box">
+CONTENT
+</div>

template/head.html

@@ -0,0 +1,12 @@
+<link rel="icon" href="/favicon.ico" type="favicon.ico" />
+<link rel="stylesheet" type="text/css" href="/style.css" media="screen" title="default" />
+<link type="text/css" href="/css/custom-theme/jquery-ui-1.8.21.custom.css" rel="stylesheet" />
+<script type="text/javascript" src="/js/jquery-1.7.2.min.js"></script>
+<script type="text/javascript" src="/js/jquery-ui-1.8.21.custom.min.js"></script>
+<script type="text/javascript">
+  function search_select (url) {
+    window.location.href = url;
+  }
+  search_position = { my: "right top", at: "right bottom", collision: "none" };
+</script>
+<script type="text/javascript" src="/js/search.js"></script>

template/header.html

@@ -0,0 +1,8 @@
+<div id="header" class="pretty-box">
+    <a href="/">Perl 6 Documentation</a>
+    <div id="search" class="ui-widget">
+        <label for="query">Search&nbsp;</label>
+        <div><input id="query" title="Enter Perl 6 document to search for"></div>
+    </div>
+</div>
+<div id="content" class="pretty-box">