More layouting

resources/public/css/screen.css

@@ -11,10 +11,37 @@
   border-right: 2px solid gray;
 }
 
-.entry {
+div.entry {
   display: inline;
   white-space: nowrap;
   width:200px;
   height: 200px;
   vertical-align: top;
+  position: relative;
+}
+
+div.entry img {
+  vertical-align: top;
+}
+
+.open-entry img {
+  padding-bottom: 100px;
+}
+.open-entry div.shadow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: black;
+  opacity: 0.4;
+  width: 200px;
+  height: 200px;
+}
+.open-entry div.details {
+  position: absolute;
+  top: 200px;
+  height: 100px;
+  background-color: black;
+
+  left: -200px; /* TODO: Make dynamic */
+  width: 800px; /* TODO: Make dynamic */
 }

src/ldview/routes/home.clj

@@ -3,13 +3,9 @@
   (:require [ldview.views.layout :as layout]
             [ldview.util :as util]))
 
-; Just for now ...
+(defn entries-page []
-(defn waiting-page []
-  (layout/render "waiting.html"))
-
-(defn home-page []
   (layout/render
-    "home.html" {:content (util/md->html "/md/docs.md")}))
+    "entries.html"))
 
 (defroutes home-routes
-  (GET "/" [] (waiting-page)))
+  (GET "/" [] (entries-page)))

src/ldview/views/templates/entries.html

@@ -1,4 +1,23 @@
-{% extends "ldview/views/templates/base.html" %}
+{% extends "ldview/views/templates/layout.html" %}
 {% block content %}
 <div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry open-entry">
+  <div class="shadow"></div>
+  <div class="details"></div>
+  <img src="{{servlet-context}}/img/sample.png" alt="entry-#" />
+</div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
+<div class="entry"><img src="{{servlet-context}}/img/sample.png" alt="entry-#" /></div>
 {% endblock %}

src/ldview/views/templates/home.html

@@ -1,4 +0,0 @@
-{% extends "ldview/views/templates/base.html" %}
-{% block content %}
-    {{content|safe}}
-{% endblock %}

src/ldview/views/templates/waiting.html

@@ -1,4 +0,0 @@
-{% extends "ldview/views/templates/base.html" %}
-{% block content %}
-  <p>Smething big is comming soon ...</p>
-{% endblock %}