Reviews the nixos.org main page

.gitignore

@@ -13,12 +13,15 @@
 /nixos/nix-pills/
 /nixos/nix-pills-raw
 /nixos/options.json.gz
+/nixos/options.json
 /nixos/screenshots/nixos-*-small.png
 
 /nixpkgs/manual/
 /nixpkgs/manual-raw
 /nixpkgs/packages-unstable.json.gz
 /nixpkgs/packages.json.gz
+/nixpkgs/packages-unstable.json
+/nixpkgs/packages.json
 
 /blogs.json
 /blogs.xml

Makefile

@@ -10,7 +10,8 @@ default: all
 HTML = index.html news.html \
   nix/index.html nix/about.html nix/download.html \
   nixpkgs/index.html nixpkgs/download.html \
-  nixos/about.html nixos/download.html nixos/support.html nixos/community.html nixos/packages.html nixos/options.html \
+  nixos/index.html nixos/about.html nixos/download.html nixos/support.html \
+  nixos/community.html nixos/packages.html nixos/options.html \
   nixos/security.html nixos/foundation.html \
   nixos/wiki.html \
   patchelf.html hydra/index.html \

css/nixos-site.css

@@ -36,6 +36,15 @@ p {
     text-decoration: none;
 }
 
+.navbar .brand {
+	padding-bottom: 0;
+}
+
+.dropdown .caret {
+	vertical-align: middle;
+	margin-top: -3px;
+}
+
 .logo {
     margin-top: -5px;
     padding-right: 5px;
@@ -49,6 +58,77 @@ p {
     margin: 1em 3em 1em 0em;
 }
 
+/* Holds semantic titles on the main page. */
+.nixos-org-index > h1,
+.nixos-org-index > h2 {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    text-indent: -999em;
+}
+.nixos-org-index > hr {
+    margin-bottom: 0;
+}
+
+.nixos-org-index .more-about .learn-more {
+    display: block;
+    /*text-align: right;*/
+}
+
+.nixos-org-index .and-more ul {
+	list-style-type: none;
+	margin: 0;
+}
+.nixos-org-index .and-more ul li {
+	margin: 0;
+}
+
+@media (max-width: 767px) {
+    .jumbotron-two > div > div::after {
+        content: "";
+        display: block;
+        clear: both;
+    }
+    .jumbotron-two .learn-more {
+        float: right;
+    }
+}
+@media (min-width: 768px) {
+    /* Punny name, as it is both the second jumobtron implementation
+       and a two elements side-by-side thing. */
+    .jumbotron-two {
+        display: table;
+		/* 14px/20px equivalent */
+		line-height: 1.429;
+    }
+    .jumbotron-two p {
+		font-size: 1.2em;
+	}
+    .jumbotron-two > div {
+        display: table-row;
+    }
+    .jumbotron-two > div > div {
+        width: 50%;
+        position: relative;
+        display: table-cell;
+        padding-bottom: 35px;
+    }
+    .jumbotron-two > div > div:not(:first-child) {
+        padding-left: 15px;
+    }
+    .jumbotron-two > div > div:not(:last-child) {
+        padding-right: 15px;
+    }
+    .jumbotron-two .learn-more {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+    }
+    .jumbotron-two div:not(:last-child) > .learn-more {
+        right: 15px;
+    }
+}
+
 h2, div.docbook h1 {
     font-weight: normal;
     font-size: 200%;
@@ -283,12 +363,12 @@ div.search-details td.nix {
 }
 
 #search-results .description.docbook p > .docbook-important {
-	margin-top: 0.5rem;
+    margin-top: 0.5rem;
 }
 
 #search-results .description.docbook .docbook-important {
-	border-left: #F89406 solid 0.3rem;
-	padding-left: 0.5rem;
+    border-left: #F89406 solid 0.3rem;
+    padding-left: 0.5rem;
 }
 
 /* Manual. */

donation.tt

@@ -1,3 +1,4 @@
+[%# Fragment imported in other pages. %]
 <p>You can donate to the NixOS foundation by using the PayPal button below:</p>
 
 <p>

index.tt

@@ -1,53 +1,101 @@
-[% WRAPPER layout.tt title="NixOS Linux" hideTitle=1 menu='nixos' %]
+[% WRAPPER layout.tt title="NixOS Linux" hideTitle=1 menu='organization' %]
 [% USE JSON.Escape %]
 [% USE IO.All %]
 [% USE HTML %]
 [% USE String %]
 
 <link rel="alternate" type="application/rss+xml" title="RSS" href="/news-rss.xml" />
 
-<div class="jumbotron">
-  <img class="right-logo" src="[%root%]logo/nixos-logo-only-hires.png" alt="NixOS Logo"/>
+<div class="nixos-org-index">
+  [%# Title for the site, used to keep the document tree rooted at h1. %]
   <h1>NixOS</h1>
-  <h2>The Purely Functional Linux Distribution</h2>
-
-  <p class="lead">NixOS is a Linux distribution with a unique approach
-  to package and configuration management.  Built on top of the <a
-  href="[%root%]nix">Nix package manager</a>, it is completely
-  declarative, makes upgrading systems reliable, and has <a
-  href="[%root%]nixos/about.html">many other advantages</a>.</p>
-
-  <div class="get-nixos get-button">
-  <a class="btn btn-large btn-success"
-  href="[%root%]nixos/download.html"><i class="fa
-  fa-cloud-download"></i> Get NixOS</a>
-  </div>
-</div>
-
-<hr />
-
-<div class="row-fluid">
-  <div class="span4">
-    <h2>Declarative</h2>
-    <p>NixOS has a completely <strong>declarative</strong> approach to
-    configuration management: you write a specification of the desired
-    configuration of your system in NixOS’s modular language, and
-    NixOS takes care of making it happen.</p>
-  </div>
-  <div class="span4">
-    <h2>Reliable</h2>
-    <p>NixOS has <strong>atomic upgrades and rollbacks</strong>.  It’s
-    always safe to try an upgrade or configuration change: if things
-    go wrong, you can always roll back to the previous
-    configuration.</p>
-  </div>
-  <div class="span4">
-    <h2>DevOps-friendly</h2>
-    <p>Declarative specs and safe upgrades make NixOS a great system
-    for DevOps use.  <a
-    href="[%root%]nixops"><strong>NixOps</strong></a>, the NixOS cloud
-    deployment tool, allows you to provision and manage networks of
-    NixOS machines in environments like Amazon EC2 and VirtualBox.</p>
+
+  <div class="jumbotron-two"><div>
+    <div class="intro-nix">
+      <h2>What is Nix?</h2>
+
+      <p>
+      Nix is a powerful package manager for Linux and other Unix systems
+      that makes package management reliable and reproducible.  It
+      provides atomic upgrades and rollbacks, side-by-side installation
+      of multiple versions of a package, multi-user package management
+      and easy setup of build environments.
+      </p>
+
+      <div class="learn-more">
+        <a class="btn btn-success" href="[%root%]nix/">
+          <i class="fa fa-chevron-right"></i> Learn more about Nix
+        </a>
+      </div>
+    </div>
+    <div class="intro-nixos">
+      <h2>What is NixOS?</h2>
+
+      <p>NixOS is a Linux distribution with a unique approach
+      to package and configuration management.  Built on top of the <a
+      href="[%root%]nix">Nix package manager</a>, it is completely
+      declarative, makes upgrading systems reliable, and has <a
+      href="[%root%]nixos/about.html">many other advantages</a>.</p>
+
+      <div class="learn-more">
+        <a class="btn btn-success" href="[%root%]nixos/">
+          <i class="fa fa-chevron-right"></i> Learn more about NixOS
+        </a>
+      </div>
+    </div>
+  </div></div>
+
+  <hr />
+
+  <h2>More about NixOS</h2>
+
+  <div class="row-fluid more-about">
+    <div class="span4">
+      <h3>Nixpkgs</h3>
+      <p>
+        The Nix Packages collection (Nixpkgs) is the ever growing
+        packages collection for the Nix package manager, released
+        under a permissive MIT/X11 license.
+      </p>
+      <a class="learn-more" href="[%root%]/nixpkgs">
+        More about Nixpkgs
+        <i class="fa fa-angle-right"></i>
+      </a>
+    </div>
+    <div class="span4">
+      <h3>NixOps</h3>
+      <p>
+        NixOps is a tool for deploying sets of NixOS Linux machines,
+        bare-metal or to the cloud. It extends NixOS’s declarative
+        approach to system configura-tion management to networks and
+        provisioning.
+      </p>
+      <a class="learn-more" href="[%root%]/nixops">
+        More about NixOps
+        <i class="fa fa-angle-right"></i>
+      </a>
+    </div>
+    <div class="span4 and-more">
+      <h3>About the community</h3>
+      <p>
+        Sometimes, it helps to talk with someone.  Our community
+        is there whether you want to help or get support.
+      </p>
+      <ul>
+        <li>
+          <a href="[%root%]/nixos/community.html">
+            Get in touch
+            <i class="fa fa-angle-right"></i>
+          </a>
+        </li>
+        <li>
+          <a href="[%root%]/nixos/support.html">
+            Getting support
+            <i class="fa fa-angle-right"></i>
+          </a>
+        </li>
+      </ul>
+    </div>
   </div>
 </div>
 

layout.tt

@@ -59,7 +59,9 @@
               <b class="caret"></b>
             </a>
             <ul class="dropdown-menu">
-              <li><a href="[%root%]">NixOS</a></li>
+              [%# Using %root% for / will not work as expected. %]
+              <li><a href="/">Site Home</a></li>
+              <li><a href="[%root%]nixos">NixOS</a></li>
               <li><a href="[%root%]nix">Nix</a></li>
               <li><a href="[%root%]nixops">NixOps</a></li>
               <li><a href="[%root%]nixpkgs">Nixpkgs</a></li>
@@ -126,6 +128,10 @@
             [% ELSIF menu == 'patchelf' %]
               <ul class="nav pull-right">
                 <li><a href="https://github.com/NixOS/patchelf"><i class="fa fa-github"></i></a></li>
+            [% ELSIF menu == 'organization' %]
+              <ul class="nav pull-right">
+                <li><a href="https://github.com/NixOS/nixpkgs"><i class="fa fa-github"></i></a></li>
+                <li><a href="https://twitter.com/nixos_org"><i class="fa fa-twitter"></i></a></li>
             [% ELSE %]
               <ul class="nav pull-right">
             [% END %]

news.tt

@@ -1,4 +1,4 @@
-[% WRAPPER layout.tt title="News" menu='nixos' %]
+[% WRAPPER layout.tt title="News" menu='organization' %]
 
 [% INSERT "all-news.xhtml" %]
 

nixos/index.tt

@@ -0,0 +1,54 @@
+[% WRAPPER layout.tt title="NixOS Linux" hideTitle=1 menu='nixos' %]
+[% USE JSON.Escape %]
+[% USE IO.All %]
+[% USE HTML %]
+[% USE String %]
+
+<link rel="alternate" type="application/rss+xml" title="RSS" href="/news-rss.xml" />
+
+<div class="jumbotron">
+  <img class="right-logo" src="[%root%]logo/nixos-logo-only-hires.png" alt="NixOS Logo"/>
+  <h1>NixOS</h1>
+  <h2>The Purely Functional Linux Distribution</h2>
+
+  <p class="lead">NixOS is a Linux distribution with a unique approach
+  to package and configuration management.  Built on top of the <a
+  href="[%root%]nix">Nix package manager</a>, it is completely
+  declarative, makes upgrading systems reliable, and has <a
+  href="[%root%]nixos/about.html">many other advantages</a>.</p>
+
+  <div class="get-nixos get-button">
+  <a class="btn btn-large btn-success"
+  href="[%root%]nixos/download.html"><i class="fa
+  fa-cloud-download"></i> Get NixOS</a>
+  </div>
+</div>
+
+<hr />
+
+<div class="row-fluid">
+  <div class="span4">
+    <h2>Declarative</h2>
+    <p>NixOS has a completely <strong>declarative</strong> approach to
+    configuration management: you write a specification of the desired
+    configuration of your system in NixOS’s modular language, and
+    NixOS takes care of making it happen.</p>
+  </div>
+  <div class="span4">
+    <h2>Reliable</h2>
+    <p>NixOS has <strong>atomic upgrades and rollbacks</strong>.  It’s
+    always safe to try an upgrade or configuration change: if things
+    go wrong, you can always roll back to the previous
+    configuration.</p>
+  </div>
+  <div class="span4">
+    <h2>DevOps-friendly</h2>
+    <p>Declarative specs and safe upgrades make NixOS a great system
+    for DevOps use.  <a
+    href="[%root%]nixops"><strong>NixOps</strong></a>, the NixOS cloud
+    deployment tool, allows you to provision and manage networks of
+    NixOS machines in environments like Amazon EC2 and VirtualBox.</p>
+  </div>
+</div>
+
+[% END %]