Rücksprung-Link zum Seitenanfang eingebaut und für Phone-Navigation verwendet
authorKai Moritz <km@feder-software.de>
Thu, 30 Jan 2014 10:59:54 +0000 (11:59 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 19 Jan 2016 16:45:41 +0000 (17:45 +0100)
src/main/webapp/WEB-INF/templates/html-head.jsp
src/main/webapp/WEB-INF/templates/html5page.jsp
src/main/webapp/less/phone/layout.less

index 9c78f01..1b74015 100644 (file)
@@ -3,7 +3,7 @@
 <%@page session="false" %>
 <%@taglib uri="http://www.springframework.org/tags" prefix="s"%>
 <s:url var="base" value="/" />
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="stylesheet" type="text/css" href="${base}css/base.css" />
 <style type="text/css">
   @import '${base}css/screen.css' screen;
index 9a5ea5e..1ccd625 100644 (file)
@@ -12,6 +12,7 @@
     <t:insertAttribute name="htmlhead"/>
   </head>
   <body class="<t:getAsString name="contentclass"/>" onload="prettyPrint()">
+    <a id="top"></a>
     <div id="page" class="cf">
       <header id="header">
         <h1 id="logo"><a href="${base}index.html" title="Home" class="l">juplo</a></h1>
@@ -35,6 +36,7 @@
           <nav id="nav">
             <hr class="n"/>
             <a id="navigation"></a>
+            <a class="hide" href="#top" title="Show Content">Jump back to the top of the page</a>
             <t:insertAttribute name="navigation"/>
             <hr class="n"/>
           </nav>
index a106ad5..6d6521a 100644 (file)
@@ -131,6 +131,38 @@ body
 }
 
 
+/** Inhalts-Sprunglink reaktivieren und stylen */
+
+#nav > a.hide
+{
+  position: relative;
+  float: right;
+  left: auto;
+  top: .5em;
+  display: block;
+  overflow: hidden;
+  width: 2.142857143em; /** 30px */
+  height: 2.5em;
+  line-height: 2.5em;
+  color: @dunkel;
+  border-style: none;
+}
+#nav > a.hide:before
+{
+  content: "";
+  font-family: 'symbols';
+  font-size: 210%; /** Vielfaches von 14px */
+  padding: 0 0 1em 0;
+  margin: 0 1em 0 0;
+}
+#nav > a.hide:hover,
+#nav > a.hide:focus,
+#nav > a.hide:active
+{
+  color: @dunkler;
+}
+
+
 /** Footer positionieren */
 
 #footer