From 32afc29655610caab0fe85a6c9dfe1f9a9476f0f Mon Sep 17 00:00:00 2001
From: Kai Moritz <kai@juplo.de>
Date: Wed, 29 Jan 2014 15:11:12 +0100
Subject: [PATCH 1/1] =?utf8?q?Aufteilung=20f=C3=BCr=20den=20Inhalt=20von?=
 =?utf8?q?=20Seiten=20ohne=20Men=C3=BC=20umgesetzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 .../webapp/WEB-INF/templates/html-head.jsp    |  1 +
 src/main/webapp/WEB-INF/views/index.jsp       | 77 +++++++++++++++++++
 src/main/webapp/WEB-INF/wro.xml               | 20 ++++-
 src/main/webapp/less/base.less                |  1 +
 src/main/webapp/less/base/packs.less          | 27 +++++++
 src/main/webapp/less/phone/packs.less         | 10 +++
 src/main/webapp/less/screen.less              |  4 +-
 src/main/webapp/less/screen/content.less      | 26 +++++++
 8 files changed, 160 insertions(+), 6 deletions(-)
 create mode 100644 src/main/webapp/less/base/packs.less
 create mode 100644 src/main/webapp/less/phone/packs.less
 create mode 100644 src/main/webapp/less/screen/content.less

diff --git a/src/main/webapp/WEB-INF/templates/html-head.jsp b/src/main/webapp/WEB-INF/templates/html-head.jsp
index 61870cd5..9c78f015 100644
--- a/src/main/webapp/WEB-INF/templates/html-head.jsp
+++ b/src/main/webapp/WEB-INF/templates/html-head.jsp
@@ -10,6 +10,7 @@
 </style>
 <script src="${base}js/base.js"></script>
 <!--[if IE 8]>
+  <link rel="stylesheet" type="text/css" href="${base}css/ie8.css" />
   <script src="${base}js/ie8.js"></script>
 <![endif]-->
 <!--[if IE 7]>
diff --git a/src/main/webapp/WEB-INF/views/index.jsp b/src/main/webapp/WEB-INF/views/index.jsp
index 63afd669..a624ebcd 100644
--- a/src/main/webapp/WEB-INF/views/index.jsp
+++ b/src/main/webapp/WEB-INF/views/index.jsp
@@ -2,9 +2,86 @@
 <%@page pageEncoding="UTF-8"%>
 <%@page session="false" %>
 <%@taglib uri="http://tiles.apache.org/tags-tiles" prefix="t" %>
+<%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
+<s:url var="base" value="/" />
 <t:insertDefinition name="NOMENU">
   <t:putAttribute name="title" value="Branding" type="string"/>
   <t:putAttribute name="breadcrumb">
     <li class="b"><strong class="b">Home</strong></li>
   </t:putAttribute>
+  <t:putAttribute name="maincontent" type="string">
+    <p>Welcome on board!</p>
+    <hr />
+    <div class="mcontent cf">
+      <div class="mmain">
+        <h1>Projects</h1>
+        <div class="pack cf">
+          <div class="left">
+            <h2>hibernate4-maven-plugin</h2>
+            <p><strong>Lorem ipsum</strong> dolor <a href="${base}projects/typo.html">sit amet</a>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="${base}projects/html-experimente.html">exercitation</a> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          </div>
+          <div class="right">
+            <h2>fix-swf</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+              ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+              aliquip ex ea commodo consequat.
+            </p>
+          </div>
+        </div>
+        <div class="single">
+          <h2>accelerator</h2>
+          <p>
+            Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </p>
+        </div>
+        <div class="pack cf">
+          <div class="right">
+            <h2>jquery.openx</h2>
+            <p>
+              Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+          <div class="left">
+            <h2>Regex-Lab</h2>
+            <p>
+              Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+        <div class="pack cf">
+          <div class="left">
+            <h2>jquery.openx</h2>
+            <p>
+              Duis aute irure dolor in
+              reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+              pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+          <div class="right">
+            <h2>Regex-Lab</h2>
+            <p>
+              Excepteur sint occaecat cupidatat non proident, sunt in
+              culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="mmarginal">
+        <h1>Recent Blog-Entries</h1>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+    </div>
+    <h1>H2: Heading</h1>
+    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+  </t:putAttribute>
 </t:insertDefinition>
diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 52980f2f..fd178127 100644
--- a/src/main/webapp/WEB-INF/wro.xml
+++ b/src/main/webapp/WEB-INF/wro.xml
@@ -14,18 +14,18 @@
   <!-- Diese werden nur für die explizite Auswahl eines Stylings benötigt -->
   <group name="tablet">
     <css>/less/variables.less</css>
-    <css>/less/screen/typo.less</css>
-    <css>/less/screen/layout.less</css>
     <css>/less/screen/head.less</css>
     <css>/less/screen/menu.less</css>
+    <css>/less/screen/footer-sticky.less</css>
+    <css>/less/screen/typo.less</css>
+    <css>/less/screen/layout.less</css>
     <css>/less/screen/marginal.less</css>
     <css>/less/screen/footer.less</css>
-    <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/typo.less</css>
     <css>/less/tablet/layout.less</css>
-    <css>/less/tablet/head.less</css>
     <css>/less/tablet/menu.less</css>
     <css>/less/tablet/footer.less</css>
+    <css>/less/tablet/head.less</css>
     <css>/less/tablet/404.less</css>
   </group>
   <group name="phone">
@@ -40,6 +40,7 @@
     <css>/less/phone/head.less</css>
     <css>/less/phone/menu.less</css>
     <css>/less/phone/footer.less</css>
+    <css>/less/phone/packs.less</css>
     <css>/less/phone/404.less</css>
   </group>
   <group name="tiny">
@@ -54,6 +55,7 @@
     <css>/less/phone/head.less</css>
     <css>/less/phone/menu.less</css>
     <css>/less/phone/footer.less</css>
+    <css>/less/phone/packs.less</css>
     <css>/less/phone/404.less</css>
     <css>/less/tiny/layout.less</css>
     <css>/less/tiny/404.less</css>
@@ -68,6 +70,16 @@
   </group>
 
   <group name="ie8">
+    <css>/less/variables.less</css>
+    <css>/less/screen/head.less</css>
+    <css>/less/screen/menu.less</css>
+    <css>/less/screen/footer-sticky.less</css>
+    <css>/less/screen/typo.less</css>
+    <css>/less/screen/layout.less</css>
+    <css>/less/screen/marginal.less</css>
+    <css>/less/screen/footer.less</css>
+    <css>/less/screen/faux-column.less</css>
+    <css>/less/screen/content.less</css>
     <js>/js/html5shiv.js</js>
   </group>
 
diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
index fb944862..360752ce 100644
--- a/src/main/webapp/less/base.less
+++ b/src/main/webapp/less/base.less
@@ -8,5 +8,6 @@
 @import 'base/prettify.less';
 @import 'base/marginal.less';
 @import 'base/footer.less';
+@import 'base/packs.less';
 @import 'base/formulare.less';
 @import 'base/404.less';
diff --git a/src/main/webapp/less/base/packs.less b/src/main/webapp/less/base/packs.less
new file mode 100644
index 00000000..5d335bbc
--- /dev/null
+++ b/src/main/webapp/less/base/packs.less
@@ -0,0 +1,27 @@
+.pack
+{
+  margin: 3% 0;
+  overflow: hidden;
+}
+.pack > .left,
+.pack > .right
+{
+  width: 42%;
+  padding: 0 3% 999em 3%;
+  margin: 0 0 -999em 0;
+  background-color: @sehrhell;
+}
+.pack > .left
+{
+  float: left;
+}
+.pack > .right
+{
+  float: right;
+}
+.single
+{
+  padding: 3%;
+  margin: 3% 0;
+  background-color: @sehrhell;
+}
diff --git a/src/main/webapp/less/phone/packs.less b/src/main/webapp/less/phone/packs.less
new file mode 100644
index 00000000..b87a5637
--- /dev/null
+++ b/src/main/webapp/less/phone/packs.less
@@ -0,0 +1,10 @@
+.pack > .left,
+.pack > .right
+{
+  @media (max-width: 410px)
+  {
+    width: 94%;
+    padding-bottom: 0;
+    margin: 3% 0;
+  }
+}
diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index 29f8e788..040c3c80 100644
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -6,10 +6,8 @@
 {
   @import 'screen/typo.less';
   @import 'screen/layout.less';
-  @import 'screen/head.less';
   @import 'screen/marginal.less';
   @import 'screen/footer.less';
-  @import 'screen/footer-sticky.less';
   @media (max-width: @maxtablet)
   {
     @import 'tablet/typo.less';
@@ -21,6 +19,7 @@
 @media (min-width: @maxtablet + 1)
 {
   @import 'screen/faux-column.less';
+  @import 'screen/content.less';
 }
 
 @media (max-width: @maxtablet)
@@ -36,6 +35,7 @@
   @import 'phone/head.less';
   @import 'phone/menu.less';
   @import 'phone/footer.less';
+  @import 'phone/packs.less';
   @import 'phone/404.less';
 }
 
diff --git a/src/main/webapp/less/screen/content.less b/src/main/webapp/less/screen/content.less
new file mode 100644
index 00000000..35786c32
--- /dev/null
+++ b/src/main/webapp/less/screen/content.less
@@ -0,0 +1,26 @@
+.mcontent
+{
+  position: relative;
+  padding: 0 24.375em 0 0;
+}
+.mcontent > .mmain
+{
+  float: left;
+  min-height: 1em;
+  position: relative;
+  width: 100%;
+  border-right: .125em solid @normal;
+}
+.mcontent > .mmarginal
+{
+  float: left;
+  margin: 0 -27em 0 -.125em;
+  padding: 0 2em 1.0625em 2em;
+  position: relative;
+  width: 20.375em;
+  border-left: .125em solid @normal;
+}
+.mcontent > .mmain > *
+{
+  margin-right: 5%;
+}
-- 
2.20.1