css-team: list commands

git-svn-id: svn+ssh://atelier.inf.usi.ch/home/bevilj/group-1@64 a672b425-5310-4d7a-af5c-997e18724b81

site/_config.yml

@@ -12,4 +12,5 @@ url: "" # the base hostname & protocol for your site
 future: true
 collections:
   authors:
+
   

site/_includes/header.html

@@ -10,9 +10,9 @@
   <nav class="nav-menu">
     <div>Learn
       <ul>
-        <li><a href="#">Basic commands</a></li>
-        <li><a href="#">Intermediate commands</a></li>
-        <li><a href="#">Advanced commands</a></li>
+        <li><a href="{{ site.baseurl }}/pages/topic/cmd/basic.html">Basic commands</a></li>
+        <li><a href="{{ site.baseurl }}/pages/topic/cmd/interm.html">Intermediate commands</a></li>
+        <li><a href="{{ site.baseurl }}/pages/topic/cmd/advanced.html">Advanced commands</a></li>
         <li><a href="#">Filesystem</a></li>
         <li><a href="#">Scripting</a></li>
       </ul>

site/_layouts/topic.html

@@ -8,12 +8,14 @@ layout: main
   </header>
 
   <div class="post-content">
+    {{ content }}
   	<ol>
     {% for item in site.pages %}
     	{% if item.category == page.category and item.layout != "topic" %}
-    		<li>{{ item.title }}</li>
-    	{% endif  %}
+    		<li class="list-commands"><a href="{{ item.url }}">{{ item.title }}</a></li>
+    	{% endif %}
     {% endfor %}
     </ol>
   </div>
+
 </article>

site/_sass/_header.scss

@@ -1,3 +1,7 @@
+header{
+  z-index:1;
+}
+
 .menuDesktop {
   background-color: #131313;
   display: flex;
@@ -58,7 +62,7 @@
       text-decoration: none;
       color: inherit;
     }
-    
+
     ul:hover {
       display: block;
     }

site/_sass/_topics.scss

@@ -0,0 +1,41 @@
+ol {
+   list-style: none;
+   counter-reset: command;
+   background-color: #bdbdbd;
+   border-radius: 50px;
+   width: 50%;
+ }
+
+ .list-commands {
+   counter-increment: command;
+   margin-bottom: 5px;
+
+   a{
+   	height:29px;
+   	width:calc(100% - 2em - 20px);
+   	text-decoration: none;
+    font-size: 2.5vh;
+    font-weight: bold;
+    display: inline-block;
+    margin-left:20px;
+   }
+ }
+
+ .list-commands:before {
+   content: counter(command);
+    background: #6a6;
+    border-radius: 100%;
+    height: 33px;
+    width: 33px;
+    font-size: 3vh;
+    text-align: center;
+    display: inline-block;
+ }
+
+ ol:hover{
+ 	background-color: #646464;
+ }
+
+
+
+

site/main.scss

@@ -4,4 +4,5 @@ category: nosearch
 @import "global";
 @import "header";
 @import "footer";
+@import "topics";
 @import "syntax-highlighting";

site/pages/topic/cmd/advanced.html

@@ -0,0 +1,5 @@
+---
+layout: topic
+category: advanced
+title: Advanced Commands
+---

site/pages/topic/cmd/basic.html

@@ -0,0 +1,7 @@
+---
+layout: topic
+category: basic
+title: Basic Commands
+---
+
+<p class="boh">Here we will learn some basic commands...</p>

site/pages/topic/cmd/interm.html

@@ -0,0 +1,5 @@
+---
+layout: topic
+category: intermediate
+title: Intermediate Commands
+---