Mehrspaltige Darstellung in Haupt-Contentbereich überarbeitet

diff --git a/src/main/webapp/less/base.less b/src/main/webapp/less/base.less
index 360752c..fb94486 100644 (file)
--- a/src/main/webapp/less/base.less
+++ b/src/main/webapp/less/base.less
@@ -8,6 +8,5 @@
 @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
deleted file mode 100644 (file)
index 0936a2f..0000000
--- a/src/main/webapp/less/base/packs.less
+++ /dev/null
@@ -1,40 +0,0 @@
-.pack
-{
-  overflow: hidden;
-}
-.pack > .p.left,
-.pack > .p.right
-{
-  width: 48%;
-  padding: 0 0 999em 0;
-  margin: 0 0 -999em 0;
-}
-.pack.bg > .p.left,
-.pack.bg > .p.right
-{
-  width: 42%;
-  padding-left: 3%;
-  padding-right: 3%;
-  background-color: @sehrhell;
-}
-.pack > .p.left
-{
-  float: left;
-}
-.pack > .p.right
-{
-  float: right;
-}
-.pack > .p img.p
-{
-  width: 91.9118%;
-}
-.single
-{
-  padding: 3%;
-  margin: 3% 0;
-}
-.single.bg
-{
-  background-color: @sehrhell;
-}

diff --git a/src/main/webapp/less/phone/packs.less b/src/main/webapp/less/phone/packs.less
index b87a563..687fe70 100644 (file)
--- a/src/main/webapp/less/phone/packs.less
+++ b/src/main/webapp/less/phone/packs.less
@@ -1,10 +1,12 @@
-.pack > .left,
-.pack > .right
+.pack > .p.left,
+.pack > .p.right,
+.pack.bg > .p.left,
+.pack.bg > .p.right,
+.single,
+.single.bg

 {
 {

-  @media (max-width: 410px)
-  {
-    width: 94%;
-    padding-bottom: 0;
-    margin: 3% 0;
-  }
+  float: none;
+  width: auto;
+  padding: 3%;
+  margin: 0 0 3% 0;

 }
 }

diff --git a/src/main/webapp/less/screen.less b/src/main/webapp/less/screen.less
index 7102445..5a81cba 100644 (file)
--- a/src/main/webapp/less/screen.less
+++ b/src/main/webapp/less/screen.less
@@ -2,6 +2,7 @@
 @import 'screen/menu.less';
 @import 'screen/footer-sticky.less';
 @import 'screen/wip.less';
 @import 'screen/menu.less';
 @import 'screen/footer-sticky.less';
 @import 'screen/wip.less';

+@import 'screen/packs.less';

 
 @media (min-width: (@minscreen))
 {
 
 @media (min-width: (@minscreen))
 {


@@ -21,6 +22,10 @@
   @import 'screen/faux-column.less';
   @import 'screen/marginal.less';
   @import 'screen/content.less';
   @import 'screen/faux-column.less';
   @import 'screen/marginal.less';
   @import 'screen/content.less';

+  @media (max-width: 1079px)
+  {
+    @import 'phone/packs.less';
+  }

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

diff --git a/src/main/webapp/less/screen/packs.less b/src/main/webapp/less/screen/packs.less
new file mode 100644 (file)
index 0000000..ed92ec8
--- /dev/null
+++ b/src/main/webapp/less/screen/packs.less
@@ -0,0 +1,37 @@
+.pack
+{
+  overflow: hidden;
+}
+.pack > .p.left,
+.pack > .p.right
+{
+  width: 42%;
+  padding: 3% 3% 999em 3%;
+  margin: 0 0 -999em 0;
+}
+.pack.bg > .p.left,
+.pack.bg > .p.right
+{
+  background-color: @sehrhell;
+}
+.pack > .p.left
+{
+  float: left;
+}
+.pack > .p.right
+{
+  float: right;
+}
+.pack > .p img.p
+{
+  width: 91.9118%;
+}
+.single
+{
+  padding: 3%;
+  margin: 3% 0;
+}
+.single.bg
+{
+  background-color: @sehrhell;
+}

diff --git a/src/main/webapp/thymeleaf/index.html b/src/main/webapp/thymeleaf/index.html
index 020e746..e0256eb 100644 (file)
--- a/src/main/webapp/thymeleaf/index.html
+++ b/src/main/webapp/thymeleaf/index.html
@@ -29,7 +29,7 @@
     <main class="main" layout:fragment="maincontent">
       <div class="pack bg cf">
         <div class="p left">
     <main class="main" layout:fragment="maincontent">
       <div class="pack bg cf">
         <div class="p left">

-          <h2>hibernate4-maven-plugin</h2>
+          <h1>hibernate4-maven-plugin</h1>

           <p>
             <strong>Lorem ipsum</strong> dolor
             <a href="projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,
           <p>
             <strong>Lorem ipsum</strong> dolor
             <a href="projects/typo.html" th:href="@{/projects/typo.html}">sit amet</a>,


@@ -44,7 +44,7 @@
           </p>
         </div>
         <div class="p right">
           </p>
         </div>
         <div class="p right">

-          <h2>fix-swf</h2>
+          <h1>fix-swf</h1>

           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
           <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim


@@ -54,7 +54,7 @@
         </div>
       </div>
       <div class="single">
         </div>
       </div>
       <div class="single">

-        <h2>accelerator</h2>
+        <h1>accelerator</h1>

         <p>
           Duis aute irure dolor in
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
         <p>
           Duis aute irure dolor in
           reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla


@@ -64,7 +64,7 @@
       </div>
       <div class="pack bg cf">
         <div class="p right">
       </div>
       <div class="pack bg cf">
         <div class="p right">

-          <h2>jquery.openx</h2>
+          <h1>jquery.openx</h1>

           <p>
             Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           <p>
             Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla


@@ -73,7 +73,7 @@
           </p>
         </div>
         <div class="p left">
           </p>
         </div>
         <div class="p left">

-          <h2>Regex-Lab</h2>
+          <h1>Regex-Lab</h1>

           <p>
             Excepteur sint occaecat cupidatat non proident, sunt in
             culpa qui officia deserunt mollit anim id est laborum.
           <p>
             Excepteur sint occaecat cupidatat non proident, sunt in
             culpa qui officia deserunt mollit anim id est laborum.


@@ -82,7 +82,7 @@
       </div>
       <div class="pack cf">
         <div class="p left">
       </div>
       <div class="pack cf">
         <div class="p left">

-          <h2>jquery.openx</h2>
+          <h1>jquery.openx</h1>

           <p>
             Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
           <p>
             Duis aute irure dolor in
             reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla


@@ -91,7 +91,7 @@
           </p>
         </div>
         <div class="p right">
           </p>
         </div>
         <div class="p right">

-          <h2>Regex-Lab</h2>
+          <h1>Regex-Lab</h1>

           <p>
             Excepteur sint occaecat cupidatat non proident, sunt in
             culpa qui officia deserunt mollit anim id est laborum.
           <p>
             Excepteur sint occaecat cupidatat non proident, sunt in
             culpa qui officia deserunt mollit anim id est laborum.