projects / website / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: de5db62)
Einfache Unterstützung für unterschiedliche Bildschirmgrößen aktiviert
authorKai Moritz <kai@juplo.de>
Mon, 9 Dec 2013 12:38:41 +0000 (13:38 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 19 Jan 2016 16:45:35 +0000 (17:45 +0100)
Als erste grundsätzliche Unterstützung stark unterschiedlicher
Bildschirmgrößen wurde das Stadard-Layout für die Media-Klasse "screen" für
eine Größe der Anzeigefläche < 960px deaktiviert, so dass dann nur die
Styling-Anweisungen aus dem base-Layout angewendet werden.

Außerdem wurde das Standard-Layout künstlich auf eine maximale Breie von
1000px gestutzt. Bei einer größeren Anzeigefläche wird das Layout dann
jetzt vorerst in einer Breite von 1000px zentriert angezeigt.

src/main/webapp/WEB-INF/templates/html5page.jsp patch | blob | history
src/main/webapp/less/screen/layout.less patch | blob | history
src/main/webapp/less/screen/navigation.less patch | blob | history

diff --git a/src/main/webapp/WEB-INF/templates/html5page.jsp b/src/main/webapp/WEB-INF/templates/html5page.jsp
index 10ba76d..46f581e 100644 (file)
--- a/src/main/webapp/WEB-INF/templates/html5page.jsp
+++ b/src/main/webapp/WEB-INF/templates/html5page.jsp
@@ -10,7 +10,7 @@
     <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/" />
     <link rel="stylesheet" type="text/css" href="css/base.css" />
     <style type="text/css">
-      @import 'css/screen.css' screen
+      @import 'css/screen.css' screen and (min-width: 960px)
     </style>
     <!--[if IE 8]>
       <script src="js/ie8.js"></script>
@@ -23,41 +23,43 @@
     <![endif]-->
   </head>
   <body>
-    <header id="header">
-      <a href="/" title="Home" id="logo">juplo</a>
-      <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
-      <hr class="h" />
-    </header>
-    <div id="breadcrumb">
-      <strong class="b title">You are here:</strong>
-      <ol class="b">
-        <t:insertAttribute name="breadcrumb"/>
-      </ol>
-      <a class="hide" href="#navigation">Jump to navigation</a>
-      <div class="b"></div>
-    </div>
-    <div class="content <t:getAsString name="contentclass"/> cf">
-      <section id="content" class="main">
-        <h1><t:getAsString name="title"/></h1>
-        <t:insertAttribute name="maincontent"/>
-      </section>
-      <div class="marginal">
-        <nav id="nav">
-          <hr />
-          <a id="navigation"></a>
-          <t:insertAttribute name="navigation"/>
-          <hr />
-        </nav>
-        <t:insertAttribute name="marginalcontent" ignore="true"/>
+    <div id="page">
+      <header id="header">
+        <a href="/" title="Home" id="logo">juplo</a>
+        <span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
+        <hr class="h" />
+      </header>
+      <div id="breadcrumb">
+        <strong class="b title">You are here:</strong>
+        <ol class="b">
+          <t:insertAttribute name="breadcrumb"/>
+        </ol>
+        <a class="hide" href="#navigation">Jump to navigation</a>
+        <div class="b"></div>
+      </div>
+      <div class="content <t:getAsString name="contentclass"/> cf">
+        <section id="content" class="main">
+          <h1><t:getAsString name="title"/></h1>
+          <t:insertAttribute name="maincontent"/>
+        </section>
+        <div class="marginal">
+          <nav id="nav">
+            <hr />
+            <a id="navigation"></a>
+            <t:insertAttribute name="navigation"/>
+            <hr />
+          </nav>
+          <t:insertAttribute name="marginalcontent" ignore="true"/>
+        </div>
       </div>
+      <footer id="footer">
+        <hr />
+        <ul id="footerlinks">
+          <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
+          <li class="f"><a class="f" href="contact.html">Contact</a></li>
+          <li class="f"><a class="f" href="impressum.html">Impressum</a></li>
+        </ul>
+      </footer>
     </div>
-    <footer id="footer">
-      <hr />
-      <ul id="footerlinks">
-        <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
-        <li class="f"><a class="f" href="contact.html">Contact</a></li>
-        <li class="f"><a class="f" href="impressum.html">Impressum</a></li>
-      </ul>
-    </footer>
   </body>
 </html>
diff --git a/src/main/webapp/less/screen/layout.less b/src/main/webapp/less/screen/layout.less
index 10d147f..b5cc0f1 100644 (file)
--- a/src/main/webapp/less/screen/layout.less
+++ b/src/main/webapp/less/screen/layout.less
@@ -61,3 +61,11 @@
 
 /** Always display vertical scroll-bars */
 body { overflow-y: scroll; }
+
+/** Center content, when screen is bigger than 1240 */
+#page
+{
+  position: relative;
+  max-width: 1000px;
+  margin: 0 auto;
+}
diff --git a/src/main/webapp/less/screen/navigation.less b/src/main/webapp/less/screen/navigation.less
index c3760e5..5a82b53 100644 (file)
--- a/src/main/webapp/less/screen/navigation.less
+++ b/src/main/webapp/less/screen/navigation.less
@@ -57,8 +57,8 @@
 #breadcrumb
 {
   position: absolute;
-  top: 8.4em;
-  left: 13.4em;
+  top: 7.375em;
+  left: 6.9em;
   z-index: 3;
 }
 #breadcrumb > strong.b
Unnamed repository; edit this file 'description' to name the repository.