First part of design saved.

Author: mikeckennedy

src/ch8-adding_design/final/pypi_design/.idea/misc.xml

@@ -0,0 +1,2 @@
+body {
+}

src/ch8-adding_design/final/pypi_design/.idea/modules.xml

@@ -0,0 +1,81 @@
+body {
+    color: #222;
+    background: #fff;
+    margin: 0px;
+    padding: 0px;
+}
+
+.starter-template .content .lead .font-normal {
+    color: #000;
+}
+
+.starter-template .content .lead,
+.starter-template .content h1 .smaller {
+    color: #2495f2;
+}
+
+.starter-template .links ul li a, a {
+    color: #2495f2;
+    text-decoration: none;
+}
+
+.starter-template .links ul li:hover .icon-muted,
+.starter-template .links ul li a:hover, a:hover {
+    color: #000;
+}
+
+.starter-template .links ul li:hover a, a:hover {
+    text-decoration: underline;
+}
+
+.starter-template .links ul li .icon-muted {
+    color: #2495f2;
+}
+
+.starter-template .copyright {
+    color: #666;
+}
+
+.starter-template {
+    margin-top: 0px;
+}
+
+.navbar {
+    border-radius: 0px;
+}
+
+.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
+    border-color: #02377c;
+    color: white;
+}
+
+.navbar-inverse {
+    background-color: #0073b7;
+    border-color: #0067a3;
+}
+
+.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
+    color: #fff;
+    background-color: #024bbf;
+}
+
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+    color: #fff;
+}
+
+.navbar-inverse .navbar-brand:hover {
+    text-decoration: underline;
+}
+
+.navbar-inverse .navbar-toggle {
+    border-color: #eee;
+}
+
+.navbar {
+    margin-bottom: 0px;
+}
+
+.starter-template .content {
+    margin-left: 0px;
+}

src/ch8-adding_design/final/pypi_design/.idea/pypi_design.iml

@@ -2,12 +2,42 @@
     <div metal:fill-slot="content">
 
         <div class="content">
-            <h1>Some packages</h1>
-            <div class="package" tal:repeat="p packages">
-                <span class="title">${p.name}</span>
-                <span class="version" tal:condition="p.version">${p.version}</span>
-                <span class="version" tal:condition="not p.version">0.0.0</span>
+
+            <div class="hero">
+                <h1>
+                    Find, install and publish Python packages <br>
+                    with the Python Package Index
+                </h1>
+
+                <input type="text" class="form-control"
+                placeholder=" Search projects">
+
+                <br>
+                <br>
+                <br>
+                Or <a href="#">browse projects</a>
+            </div>
+
+            <div class="pypi-stats">
+                <div class="stat">0 projects</div>
+                <div class="stat">0 releases</div>
+                <div class="stat">0 users</div>
             </div>
+
+            <div class="container project-list">
+                <div class="row">
+                    <div class="col-md-3"></div>
+                    <div class="col-md-6">
+                        <div class="project" tal:repeat="p packages">
+                            <div class="title"><a href="">${p.name}</a> ${p.version}</div>
+                            <div class="desc">THE DESCRIPTION TBD</div>
+                        </div>
+                    </div>
+                    <div class="col-md-3"></div>
+                </div>
+            </div>
+
+
         </div>
 
     </div>

src/ch8-adding_design/final/pypi_design/pypi/static/css/home.css

@@ -6,15 +6,17 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="pyramid web application">
     <meta name="author" content="Pylons Project">
-    <link rel="shortcut icon" href="${request.static_url('pypi:static/pyramid-16x16.png')}">
+    <link rel="shortcut icon" href="${request.static_url('pypi:static/img/pyramid-16x16.png')}">
 
-    <title>Cookiecutter Starter project for the Pyramid Web Framework</title>
+    <title>Python Package Index (demo)</title>
 
     <!-- Bootstrap core CSS -->
     <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 
     <!-- Custom styles for this scaffold -->
-    <link href="${request.static_url('pypi:static/theme.css')}" rel="stylesheet">
+    <link href="${request.static_url('pypi:static/css/theme.css')}" rel="stylesheet">
+    <link href="${request.static_url('pypi:static/css/theme-overrides.css')}" rel="stylesheet">
+    <link href="${request.static_url('pypi:static/css/site.css')}" rel="stylesheet">
 
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
@@ -28,29 +30,7 @@
   <body>
 
     <div class="starter-template">
-      <div class="container">
-        <div class="row">
-          <div class="col-md-2">
-            <img class="logo img-responsive" src="${request.static_url('pypi:static/pyramid.png')}" alt="pyramid web framework">
-          </div>
-          <div class="col-md-10">
-            <div metal:define-slot="content">No content</div>
-          </div>
-        </div>
-        <div class="row">
-          <div class="links">
-            <ul>
-              <li><a href="/">Home</a></li>
-              <li><a href="/about">About</a></li>
-            </ul>
-          </div>
-        </div>
-        <div class="row">
-          <div class="copyright">
-            Copyright &copy; Pylons Project
-          </div>
-        </div>
-      </div>
+      <div metal:define-slot="content">No content</div>
     </div>