Merge pull request #43 from CouscousPHP/website-templates

Added a "Templates" page to the website
CouscousPHP · Nov 29, 2014 · 8b57d83 · 8b57d83
2 parents bb4d70f + aa13670
commit 8b57d83
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 9 deletions.
diff --git a/templates.md b/templates.md
@@ -0,0 +1,3 @@
+---
+layout: templates
+---
diff --git a/website/default.twig b/website/default.twig
@@ -39,6 +39,7 @@
                 <ul class="nav navbar-nav navbar-right">
                     <li><a href="{{ baseUrl }}/">Home</a></li>
                     <li><a href="{{ baseUrl }}/docs/getting-started.html">Getting started</a></li>
+                    <li><a href="{{ baseUrl }}/templates.html">Templates</a></li>
                     <li><a href="{{ baseUrl }}/docs/">Documentation</a></li>
                     <li>
                         <a href="https://github.com/CouscousPHP/Couscous">

diff --git a/website/home-portfolio.twig b/website/home-portfolio.twig
@@ -1,4 +1,4 @@
-<section id="portfolio">
+<section id="portfolio" class="portfolio bg-light-gray">
     <div class="container">
         <div class="row">
             <div class="col-lg-12 text-center">
@@ -16,11 +16,11 @@
                             <i class="fa fa-search fa-3x"></i>
                         </div>
                     </div>
-                    <img src="img/portfolio/php-di.png" class="img-responsive" alt="PHP-DI">
+                    <img src="img/portfolio/php-di.png" class="img-responsive">
                 </a>
                 <div class="portfolio-caption">
                     <h4>PHP-DI</h4>
-                    <p class="text-muted">The PHP dependency injection container for humans</p>
+                    <p class="text-muted">The PHP dependency injection container for humans.</p>
                 </div>
             </div>
             <div class="col-md-4 col-sm-6 portfolio-item">
@@ -30,7 +30,7 @@
                             <i class="fa fa-search fa-3x"></i>
                         </div>
                     </div>
-                    <img src="img/portfolio/myclabs-work.png" class="img-responsive" alt="PHP-DI">
+                    <img src="img/portfolio/myclabs-work.png" class="img-responsive">
                 </a>
                 <div class="portfolio-caption">
                     <h4>MyCLabs\Work</h4>
@@ -44,7 +44,7 @@
                             <i class="fa fa-search fa-3x"></i>
                         </div>
                     </div>
-                    <img src="img/portfolio/pr.png" class="img-responsive" alt="PHP-DI">
+                    <img src="img/portfolio/pr.png" class="img-responsive">
                 </a>
                 <div class="portfolio-caption">
                     <h4>Add your own</h4>

diff --git a/website/home.twig b/website/home.twig
@@ -14,7 +14,7 @@
         </div>
     </header>
 
-    <section id="wat">
+    <section id="wat" class="bg-light-gray">
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">
@@ -107,7 +107,7 @@
         </div>
     </section>
 
-    <section id="wat" class="bg-light-gray">
+    <section>
         <div class="container">
             <div class="row">
                 <div class="col-lg-12 text-center">

diff --git a/website/less/portfolio.less b/website/less/portfolio.less
@@ -1,6 +1,6 @@
 // Portfolio Section
 
-#portfolio {
+.portfolio {
   .portfolio-item {
     margin: 0 0 15px;
     right: 0;
@@ -39,6 +39,9 @@
           }
         }
       }
+      img {
+        border: 1px solid #ddd;
+      }
     }
     .portfolio-caption {
       max-width: 400px;
@@ -64,7 +67,7 @@
 }
 
 @media(min-width:767px) {
-  #portfolio {
+  .portfolio {
     .portfolio-item {
       margin: 0 0 30px;
     }

diff --git a/website/templates.twig b/website/templates.twig
@@ -0,0 +1,62 @@
+{% extends "default.twig" %}
+
+{% block content %}
+
+    <section id="templates" class="portfolio bg-light-gray">
+        <div class="container">
+            <div class="row">
+                <div class="col-lg-12 text-center">
+                    <h2 class="section-heading">Templates</h2>
+                    <h3 class="section-subheading text-muted">
+                        Here is a growing list of Couscous templates you can use for your website.
+                    </h3>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-md-4 col-sm-6 portfolio-item">
+                    <a href="https://github.com/CouscousPHP/Template-Default" class="portfolio-link">
+                        <div class="portfolio-hover">
+                            <div class="portfolio-hover-content">
+                                <i class="fa fa-search fa-3x"></i>
+                            </div>
+                        </div>
+                        <img src="https://raw.githubusercontent.com/CouscousPHP/Template-Default/master/screenshot.png" class="img-responsive">
+                    </a>
+                    <div class="portfolio-caption">
+                        <h4>Default template</h4>
+                        <p class="text-muted">The default Couscous template.</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 portfolio-item">
+                    <a href="https://github.com/CouscousPHP/Template-Basic" class="portfolio-link">
+                        <div class="portfolio-hover">
+                            <div class="portfolio-hover-content">
+                                <i class="fa fa-search fa-3x"></i>
+                            </div>
+                        </div>
+                        <img src="https://raw.githubusercontent.com/CouscousPHP/Template-Basic/master/screenshot.png" class="img-responsive">
+                    </a>
+                    <div class="portfolio-caption">
+                        <h4>Basic template</h4>
+                        <p class="text-muted">A basic template to get you started to write your own.</p>
+                    </div>
+                </div>
+                <div class="col-md-4 col-sm-6 portfolio-item">
+                    <a href="https://github.com/CouscousPHP/Couscous" class="portfolio-link">
+                        <div class="portfolio-hover">
+                            <div class="portfolio-hover-content">
+                                <i class="fa fa-search fa-3x"></i>
+                            </div>
+                        </div>
+                        <img src="img/portfolio/pr.png" class="img-responsive">
+                    </a>
+                    <div class="portfolio-caption">
+                        <h4>Add your own</h4>
+                        <p class="text-muted">Send a pull request to add your own to the list.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+{% endblock %}