404-Fehlerseite layoutet
authorKai Moritz <kai@juplo.de>
Thu, 23 Jan 2014 00:00:27 +0000 (01:00 +0100)
committerKai Moritz <kai@juplo.de>
Tue, 19 Jan 2016 16:45:41 +0000 (17:45 +0100)
src/main/webapp/WEB-INF/404.jsp [new file with mode: 0644]
src/main/webapp/WEB-INF/views/404.html [deleted file]
src/main/webapp/WEB-INF/web.xml
src/main/webapp/WEB-INF/wro.xml
src/main/webapp/less/base.less
src/main/webapp/less/base/404.less [new file with mode: 0644]
src/main/webapp/less/phone/404.less [new file with mode: 0644]
src/main/webapp/less/screen.less
src/main/webapp/less/screen/head.less
src/main/webapp/less/tablet/404.less [new file with mode: 0644]
src/main/webapp/less/tiny/404.less [new file with mode: 0644]

diff --git a/src/main/webapp/WEB-INF/404.jsp b/src/main/webapp/WEB-INF/404.jsp
new file mode 100644 (file)
index 0000000..11c449f
--- /dev/null
@@ -0,0 +1,30 @@
+<%@page contentType="text/html;charset=UTF-8"%>
+<%@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="contentclass" value="nomenu withbackground" type="string"/>
+  <t:putAttribute name="title" value="404: Page not found" type="string"/>
+  <t:putAttribute name="breadcrumb">
+    <li class="b"><a class="b" href="${base}index.html">Home</a></li>
+    <li class="b"><strong class="b">???</strong></li>
+  </t:putAttribute>
+  <t:putAttribute name="maincontent" type="string">
+    <span class="background sehrhell" id="bs1">?</span>
+    <span class="background heller" id="bs2">?</span>
+    <span class="background sehrhell" id="bs3">?</span>
+    <span class="background heller" id="bs4">?</span>
+    <span class="background sehrhell" id="bs5">?</span>
+    <span class="background sehrhell" id="bs6">?</span>
+    <span class="background heller" id="bs7">?</span>
+    <span class="background heller" id="bs8">?</span>
+    <span class="background heller" id="bs9">?</span>
+    <p>We do not know, where you are.</p>
+    <p>And we do not know, why you are here.</p>
+    <p>But we can tell you: WE ARE SORRY!</p>
+    <p>Really.</p>
+  </t:putAttribute>
+  <t:putAttribute name="marginalcontent" type="string" value=""/>
+</t:insertDefinition>
diff --git a/src/main/webapp/WEB-INF/views/404.html b/src/main/webapp/WEB-INF/views/404.html
deleted file mode 100644 (file)
index ecd4153..0000000
+++ /dev/null
@@ -1,180 +0,0 @@
-<!DOCTYPE html>
-<html lang="en-US">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Page not found | juplo</title>
-    <link rel="profile" href="http://gmpg.org/xfn/11" />
-    <link rel="pingback" href="http://juplo.de/xmlrpc.php" />
-
-    <link rel="alternate" type="application/rss+xml" title="juplo &raquo; Feed" href="http://juplo.de/feed/" />
-<link rel="alternate" type="application/rss+xml" title="juplo &raquo; Comments Feed" href="http://juplo.de/comments/feed/" />
-
-            <script type="text/javascript">//<![CDATA[
-            // Google Analytics for WordPress by Yoast v4.3.3 | http://yoast.com/wordpress/google-analytics/
-            var _gaq = _gaq || [];
-            _gaq.push(['_setAccount', 'UA-571104-3']);
-                                           _gaq.push(['_trackPageview','/404.html?page=' + document.location.pathname + document.location.search + '&from=' + document.referrer]);
-            (function () {
-                var ga = document.createElement('script');
-                ga.type = 'text/javascript';
-                ga.async = true;
-                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-
-                var s = document.getElementsByTagName('script')[0];
-                s.parentNode.insertBefore(ga, s);
-            })();
-            //]]></script>
-                       <link rel='stylesheet' id='admin-bar-css'  href='http://juplo.de/wp-includes/css/admin-bar.min.css?ver=3.6.1' type='text/css' media='all' />
-<link rel='stylesheet' id='style-css'  href='http://juplo.de/wp-content/themes/juplo-theme/style.css?ver=3.6.1' type='text/css' media='all' />
-<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://juplo.de/xmlrpc.php?rsd" />
-<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://juplo.de/wp-includes/wlwmanifest.xml" /> 
-<meta name="generator" content="WordPress 3.6.1" />
-       <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
-<style type="text/css" media="print">#wpadminbar { display:none; }</style>
-<style type="text/css" media="screen">
-       html { margin-top: 28px !important; }
-       * html body { margin-top: 28px !important; }
-</style>
-
-    <link rel="stylesheet" type="text/css" href="/css/base.css" />
-    <style type="text/css">
-      @import '/css/screen.css' screen and (min-width: 960px);
-      @import '/css/phone.css' screen and (max-width: 599px);
-      @import '/css/tiny.css' screen and (max-width: 399px);
-    </style>
-    <script src="/js/base.js"></script>
-    <!--[if IE 8]>
-      <script src="/js/ie8.js"></script>
-    <![endif]-->
-    <!--[if IE 7]>
-      <script src="/js/ie7.js"></script>
-    <![endif]-->
-    <!--[if lt IE 7]>
-      <script src="/js/ie6.js"></script>
-    <![endif]-->
-
-  </head>
-  <body class="error404 logged-in admin-bar no-customize-support" onload="prettyPrint()">
-    <div id="page">
-      <header id="header">
-        <a href="http://juplo.de/" title="juplo" rel="home" id="logo">juplo</a>
-        <span id="slogan">Java bits from nerds for nerds</span>
-        <hr class="h"/>
-      </header>
-    <div class="fc cols_2">
-      <div class="content cf">
-        <div id="content" class="main">
-          <div id="content" class="site-content" role="main">
-            <article id="post-0" class="post error404 not-found">
-              <div class="entry-header">
-                <h1 class="entry-title">Oops! That page can&rsquo;t be found.</h1>
-              </div><!-- .entry-header -->
-   
-              <div class="entry-content">
-                <p>It looks like nothing was found at this location. Maybe try one of the links below or a search?</p>
-   
-                <form role="search" method="get" id="searchform" class="searchform" action="http://juplo.de/">
-                               <div>
-                                       <label class="screen-reader-text" for="s">Search for:</label>
-                                       <input type="text" value="" name="s" id="s" />
-                                       <input type="submit" id="searchsubmit" value="Search" />
-                               </div>
-                       </form>   
-                               <div class="widget widget_recent_entries">              <h2 class="widgettitle">Recent Posts</h2>               <ul>
-                                       <li>
-                               <a href="http://juplo.de/combining-jetty-maven-plugin-and-wro4j-maven-plugin-for-dynamic-reloading-of-less-resources/" title="Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources">Combining jetty-maven-plugin and wro4j-maven-plugin for Dynamic Reloading of LESS-Resources</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/hibernate4-maven-plugin-1-0-3-released/" title="hibernate4-maven-plugin 1.0.3 released!">hibernate4-maven-plugin 1.0.3 released!</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/log-out-from-wrong-account-with-maven-appengine-plugin/" title="Log out from wrong Account with maven-appengine-plugin">Log out from wrong Account with maven-appengine-plugin</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/bidirectional-association-with-elementcollection/" title="Bidirectional Association with @ElementCollection">Bidirectional Association with @ElementCollection</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/hibernate4-maven-plugin-1-0-2-release/" title="hibernate4-maven-plugin 1.0.2 released!">hibernate4-maven-plugin 1.0.2 released!</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/hibernate4-maven-plugin-1-0-1-released/" title="hibernate4-maven-plugin 1.0.1 released!">hibernate4-maven-plugin 1.0.1 released!</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/hibernate4-maven-plugin-1-0-released/" title="hibernate4-maven-plugin 1.0 released!">hibernate4-maven-plugin 1.0 released!</a>
-                                               </li>
-                                       <li>
-                               <a href="http://juplo.de/hibernate4-maven-plugin-a-simple-plugin-for-generating-a-database-schema-from-hibernate-4-mapping-annotations/" title="hibernate4-maven-plugin">hibernate4-maven-plugin</a>
-                                               </li>
-                               </ul>
-               </div>   
-              </div><!-- .entry-content -->
-            </article><!-- #post-0 .post .error404 .not-found -->
-          </div>
-        </div>
-              <div class="marginal">
-        <nav id="nav">
-          <hr />
-          <a id="navigation"></a>
-        </nav>
-        <div id="secondary" class="widget-area" role="complementary">
-                                <aside id="archives" class="widget">
-              <h1 class="widget-title">Archives</h1>
-              <ul>
-                       <li><a href='http://juplo.de/2013/12/' title='December 2013'>December 2013</a></li>
-       <li><a href='http://juplo.de/2013/10/' title='October 2013'>October 2013</a></li>
-       <li><a href='http://juplo.de/2013/08/' title='August 2013'>August 2013</a></li>
-       <li><a href='http://juplo.de/2013/01/' title='January 2013'>January 2013</a></li>
-       <li><a href='http://juplo.de/2012/11/' title='November 2012'>November 2012</a></li>
-              </ul>
-            </aside>
-            <aside id="categories" class="widget">
-              <h1 class="widget-title">Most Used Categories</h1>
-              <ul>
-                       <li class="cat-item cat-item-4"><a href="http://juplo.de/category/java/" title="View all posts filed under Java">Java</a> (7)
-</li>
-       <li class="cat-item cat-item-8"><a href="http://juplo.de/category/maven/" title="View all posts filed under Maven">Maven</a> (7)
-</li>
-       <li class="cat-item cat-item-6"><a href="http://juplo.de/category/hibernate/" title="View all posts filed under Hibernate">Hibernate</a> (6)
-</li>
-       <li class="cat-item cat-item-9"><a href="http://juplo.de/category/jpa/" title="View all posts filed under JPA">JPA</a> (1)
-</li>
-       <li class="cat-item cat-item-10"><a href="http://juplo.de/category/appengine/" title="View all posts filed under appengine">appengine</a> (1)
-</li>
-       <li class="cat-item cat-item-11"><a href="http://juplo.de/category/oauth2/" title="View all posts filed under oauth2">oauth2</a> (1)
-</li>
-       <li class="cat-item cat-item-12"><a href="http://juplo.de/category/jetty/" title="View all posts filed under Jetty">Jetty</a> (1)
-</li>
-       <li class="cat-item cat-item-13"><a href="http://juplo.de/category/wro4j/" title="View all posts filed under wro4j">wro4j</a> (1)
-</li>
-       <li class="cat-item cat-item-14"><a href="http://juplo.de/category/less/" title="View all posts filed under less">less</a> (1)
-</li>
-              </ul>
-            </aside>
-            <aside id="search" class="widget widget_search">
-              <h1 class="widget-title">Search</h1>
-              <form role="search" method="get" id="searchform" class="searchform" action="http://juplo.de/">
-                               <div>
-                                       <label class="screen-reader-text" for="s">Search for:</label>
-                                       <input type="text" value="" name="s" id="s" />
-                                       <input type="submit" id="searchsubmit" value="Search" />
-                               </div>
-                       </form>            </aside>
-                  </div><!-- #secondary .widget-area -->
-        <div id="tertiary" class="widget-area" role="supplementary">
-                  </div><!-- #tertiary .widget-area -->
-
-      </div>
-      </div>
-    </div>
-          <footer id="footer">
-        <hr />
-        <ul id="footerlinks">
-          <li class="f" id="copyright">© <strong>mo</strong> 2013</li>
-        </ul>
-      </footer>
-    </div>
-  </body>
-</html>
index 3be0c17..6a618b8 100644 (file)
@@ -58,4 +58,9 @@
     <url-pattern>*.html</url-pattern>
   </servlet-mapping>
 
+  <error-page>
+    <error-code>404</error-code>
+    <location>/WEB-INF/404.jsp</location>
+  </error-page>
+
 </web-app>
index 8ab7914..52980f2 100644 (file)
@@ -26,6 +26,7 @@
     <css>/less/tablet/head.less</css>
     <css>/less/tablet/menu.less</css>
     <css>/less/tablet/footer.less</css>
+    <css>/less/tablet/404.less</css>
   </group>
   <group name="phone">
     <css>/less/variables.less</css>
     <css>/less/screen/menu.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
+    <css>/less/tablet/404.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>
     <css>/less/phone/menu.less</css>
     <css>/less/phone/footer.less</css>
+    <css>/less/phone/404.less</css>
   </group>
   <group name="tiny">
     <css>/less/variables.less</css>
     <css>/less/screen/menu.less</css>
     <css>/less/screen/footer-sticky.less</css>
     <css>/less/tablet/head.less</css>
+    <css>/less/tablet/404.less</css>
     <css>/less/phone/typo.less</css>
     <css>/less/phone/layout.less</css>
     <css>/less/phone/head.less</css>
     <css>/less/phone/menu.less</css>
     <css>/less/phone/footer.less</css>
+    <css>/less/phone/404.less</css>
     <css>/less/tiny/layout.less</css>
+    <css>/less/tiny/404.less</css>
   </group>
   <group name="seitenaufteilung">
     <css>/less/variables.less</css>
index f3a0585..fb94486 100644 (file)
@@ -9,3 +9,4 @@
 @import 'base/marginal.less';
 @import 'base/footer.less';
 @import 'base/formulare.less';
+@import 'base/404.less';
diff --git a/src/main/webapp/less/base/404.less b/src/main/webapp/less/base/404.less
new file mode 100644 (file)
index 0000000..176ae54
--- /dev/null
@@ -0,0 +1,91 @@
+.withbackground .content > .marginal > #nav
+{
+  z-index: 2;
+}
+.withbackground .content > .main
+{
+  display: block;
+}
+.withbackground .content > .main > *
+{
+  position: relative;
+  z-index: 3;
+}
+#footer
+{
+  z-index: 3;
+}
+.withbackground .content > .main > .background
+{
+  .bpreplay;
+  display: block;
+  position: absolute;
+  z-index: 1;
+  line-height: .8em;
+  height: .8em;
+  overflow: hidden;
+}
+.withbackground .content > .main > .heller
+{
+  color: @heller;
+  z-index: 2;
+}
+.withbackground .content > .main > .sehrhell
+{
+  color: @sehrhell;
+  text-shadow: .02em .01em 0 @hintergrund;
+}
+#bs1
+{
+  font-size: 2000%;
+  top: 55%;
+  left: 11%;
+}
+#bs2
+{
+  font-size: 2600%;
+  top: 30%;
+  right: -1%;
+}
+#bs3
+{
+  font-size: 5000%;
+  top: -5%;
+  right: -5%;
+}
+#bs4
+{
+  font-size: 600%;
+  top: 0;
+  left: 50%;
+}
+#bs5
+{
+  font-size: 3600%;
+  top: 13%;
+  left: 35%;
+}
+#bs6
+{
+  font-size: 2000%;
+  top: 0%;
+  left: 23%;
+}
+#bs7
+{
+  font-size: 600%;
+  top: 72%;
+  left: 5%;
+}
+#bs8
+{
+  font-size: 2200%;
+  top: 10%;
+  right: 27%;
+}
+#bs9
+{
+  font-size: 1200%;
+  bottom: 26%;
+  left: 36%;
+}
diff --git a/src/main/webapp/less/phone/404.less b/src/main/webapp/less/phone/404.less
new file mode 100644 (file)
index 0000000..96fe274
--- /dev/null
@@ -0,0 +1,62 @@
+.withbackground .content
+{
+  position: relative;
+}
+.withbackground .content > .main
+{
+  z-index: 1;
+}
+.withbackground .content > .marginal
+{
+  position: relative;
+  z-index: 3;
+  border-top: .142857143em solid @hintergrund; /** 2px */
+}
+#bs1
+{
+  top: -3%;
+}
+#bs2
+{
+  font-size: 2000%;
+  top: 0%;
+  right: 3%;
+}
+#bs4
+{
+  top: 5%;
+  left: 57%;
+  @media (max-width: 410px)
+  {
+    display: none;
+  }
+}
+#bs6
+{
+  font-size: 1700%;
+  bottom: -10%;
+  left: 45%;
+}
+#bs7
+{
+  top: 20%;
+  left: 2%;
+  @media (max-width: 410px)
+  {
+    top: 34%;
+    left: 30%;
+  }
+}
+#bs5,
+#bs8
+{
+  display: none;
+}
+#bs9
+{
+  top: 20%;
+  @media (max-width: 410px)
+  {
+    display: none;
+  }
+}
index 1b64192..29f8e78 100644 (file)
@@ -26,6 +26,7 @@
 @media (max-width: @maxtablet)
 {
   @import 'tablet/head.less';
+  @import 'tablet/404.less';
 }
 
 @media (max-width: @maxphone)
   @import 'phone/head.less';
   @import 'phone/menu.less';
   @import 'phone/footer.less';
+  @import 'phone/404.less';
 }
 
 @media (max-width: @maxtiny)
 {
   @import 'tiny/layout.less';
+  @import 'tiny/404.less';
 }
index 414e06d..f0baa25 100644 (file)
@@ -5,7 +5,7 @@
   padding: 0;
   line-height: 1em;
   text-shadow: .092307692em .046153846em 0 @hintergrund; /** 12px 6px */
-  z-index: 1;
+  z-index: 3;
   left: auto;
 }
 #slogan
@@ -19,7 +19,7 @@
   padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */
   margin-left: 9em; /* 270px */
   position: relative;
-  z-index: 0;
+  z-index: 2;
   top: -1.3em; /* 39px */
   text-align: right;
   overflow: hidden;
diff --git a/src/main/webapp/less/tablet/404.less b/src/main/webapp/less/tablet/404.less
new file mode 100644 (file)
index 0000000..4cd1fe5
--- /dev/null
@@ -0,0 +1,25 @@
+.withbackground .content
+{
+  position: relative;
+  top: auto;
+  bottom: auto;
+  left: auto;
+  rigth: auto;
+}
+#bs3
+{
+  display: none;
+}
+#bs5
+{
+  left: auto;
+  right: 13%;
+}
+#bs7
+{
+  bottom: 21%;
+}
+#bs8
+{
+  display: none;
+}
diff --git a/src/main/webapp/less/tiny/404.less b/src/main/webapp/less/tiny/404.less
new file mode 100644 (file)
index 0000000..3830a8f
--- /dev/null
@@ -0,0 +1,19 @@
+.withbackground .content > .marginal
+{
+  border-top: .166666666666em solid @hintergrund; /** 2px */
+}
+#bs1
+{
+  top: -2%;
+  left: 57%;
+}
+#bs2,
+#bs6
+{
+  display: none;
+}
+#bs7
+{
+  top: 32%;
+  left: 46%;
+}