Aufteilung für den Inhalt von Seiten ohne Menü umgesetzt

diff --git a/src/main/webapp/WEB-INF/templates/html-head.jsp b/src/main/webapp/WEB-INF/templates/html-head.jsp
index 61870cd..9c78f01 100644 (file)
--- 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]>
 </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]>
   <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 63afd66..a624ebc 100644 (file)
--- 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" %>
 <%@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: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>
 </t:insertDefinition>

diff --git a/src/main/webapp/WEB-INF/wro.xml b/src/main/webapp/WEB-INF/wro.xml
index 52980f2..fd17812 100644 (file)
--- 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>
   <!-- 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/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/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/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/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">
     <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/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">
     <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/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>
     <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">
   </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>
 
     <js>/js/html5shiv.js</js>
   </group>
 

diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
index fb94486..360752c 100644 (file)
--- 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/prettify.less';
 @import 'base/marginal.less';
 @import 'base/footer.less';

+@import 'base/packs.less';

 @import 'base/formulare.less';
 @import 'base/404.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 (file)
index 0000000..5d335bb
--- /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 (file)
index 0000000..b87a563
--- /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 29f8e78..040c3c8 100644 (file)
--- 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/typo.less';
   @import 'screen/layout.less';

-  @import 'screen/head.less';

   @import 'screen/marginal.less';
   @import 'screen/footer.less';
   @import 'screen/marginal.less';
   @import 'screen/footer.less';

-  @import 'screen/footer-sticky.less';

   @media (max-width: @maxtablet)
   {
     @import 'tablet/typo.less';
   @media (max-width: @maxtablet)
   {
     @import 'tablet/typo.less';


@@ -21,6 +19,7 @@
 @media (min-width: @maxtablet + 1)
 {
   @import 'screen/faux-column.less';
 @media (min-width: @maxtablet + 1)
 {
   @import 'screen/faux-column.less';

+  @import 'screen/content.less';

 }
 
 @media (max-width: @maxtablet)
 }
 
 @media (max-width: @maxtablet)


@@ -36,6 +35,7 @@
   @import 'phone/head.less';
   @import 'phone/menu.less';
   @import 'phone/footer.less';
   @import 'phone/head.less';
   @import 'phone/menu.less';
   @import 'phone/footer.less';

+  @import 'phone/packs.less';

   @import 'phone/404.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 (file)
index 0000000..35786c3
--- /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%;
+}