<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 and (min-width: 960px);
+ @import '${base}css/screen.css' screen and (min-width: 750px);
+ @import '${base}css/tablet.css' screen and (min-width: 750px) and (max-width: 939px);
@import '${base}css/phone.css' screen and (max-width: 599px);
@import '${base}css/tiny.css' screen and (max-width: 399px);
</style>
<![endif]-->
</head>
<body onload="prettyPrint()">
- <div id="page" class="<t:getAsString name="contentclass"/>">
+ <div id="page" class="<t:getAsString name="contentclass"/> cf">
<header id="header">
<a href="${base}index.html" title="Home" id="logo">juplo</a>
<span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@page session="false" %>
-<h1>Other nasty but marginal stuff</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>
+<div class="m">
+ <h1>Other nasty but marginal stuff</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>
+</div>
<li class="b"><strong class="b">Contact</strong></li>
</t:putAttribute>
<t:putAttribute name="maincontent" type="string" value="TODO..."/>
- <t:putAttribute name="marginalcontent" type="string" value=""/>
</t:insertDefinition>
<css>/less/screen/footer.less</css>
</group>
+ <group name="tablet">
+ <css>/less/tablet/layout.less</css>
+ <css>/less/tablet/footer.less</css>
+ </group>
+
<group name="phone">
<css>/less/phone/typo.less</css>
<css>/less/phone/navigation.less</css>
{
position: absolute;
top: 0;
+ right: 0; /** Hier eigentlich nicht nötig, aber für Tablet-Style erforderrlich! */
width: 100%;
}
.cols_2 > .content #nav
--- /dev/null
+@import '../variables.less';
+
+.cols_1 > #footer
+{
+ margin: 0 0 0 -5em;
+ padding: 2em 3em 2em 5em;
+ background-color: @heller;
+}
+.cols_1 > #footer > #footerlinks
+{
+ position: static;
+ border-style: none;
+}
+.cols_1 > #footer > #footerlinks > li.f
+{
+ line-height: 1em;
+ margin: 0 1em 0 0;
+ padding: 0;
+}
+.cols_1 > #footer > #footerlinks > li.f > a.f
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+}
+.cols_1 > #footer > #footerlinks > li#copyright
+{
+ position: static;
+ float: right;
+ font-size: 137.5%;
+ margin: 0;
+}
+.cols_2 > #footer > #footer
+{
+ padding: 0;
+}
+.cols_2 > #footer > #footerlinks
+{
+ position: static;
+ border-style: none;
+ margin: 4em 0 0 2em;
+}
+.cols_2 > #footer > #footerlinks > li.f
+{
+ line-height: 1em;
+ display: block;
+ margin: 0;
+ color: @hintergrund;
+}
+.cols_2 > #footer > #footerlinks > li#copyright
+{
+ line-height: 1em;
+ font-size: 137.5%;
+ top: auto;
+ bottom: 1em;
+ right: -9em;
+}
+.cols_2 > #footer > #footerlinks a.f
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+}
+.cols_2 > #footer > #footerlinks a.f:hover
+{
+ color: @hintergrund;
+ border-color: @hintergrund;
+ border-style: solid;
+}
--- /dev/null
+@import '../variables.less';
+
+body
+{
+ padding: 0 0 0 5em;
+}
+
+.cols_1
+{
+ padding-right: 3em;
+}
+.cols_1 > .content
+{
+ padding-bottom: 5.5em;
+}
+.cols_2 > .content
+{
+ padding: 0 15em 0 0;
+ margin-right: -15em;
+}
+.cols_2 > .content.cf:before,
+.cols_2 > .content.cf:after
+{
+ clear: none;
+ content: none;
+ display: inline;
+}
+.cols_2 > .content > .main
+{
+ float: none;
+ margin-right: -15em;
+ width: auto;
+ background-color: @hintergrund;
+ border-right: 3em solid @hintergrund;
+ /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
+ Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
+ heraus... */
+ border-top: 1px solid @hintergrund;
+ border-bottom: 1px solid @hintergrund;
+}
+.cols_1 > .content > .marginal
+{
+ margin: 2em -3em 0 -5em;
+}
+.cols_1 > .content > .marginal div.m
+{
+ margin: -.125em 3em 0 5em;
+ padding: 2em 0;
+ background-color: @heller;
+ border-bottom: .125em solid @hintergrund;
+}
+.cols_2 > .content > .marginal
+{
+ float: left;
+ margin: 0 0 0 -5em;
+ padding: 2em 0 5em 5em;
+ position: static;
+ width: 100%;
+ border-top: 3em solid @hintergrund;
+}
+.cols_2 > .content > .marginal > div.m
+{
+ margin-right: -12em;
+}
+.cols_2 > .content #nav
+{
+ position: static;
+ width: auto;
+ border-right: .125em solid @hintergrund;
+}
+.cols_2 > .content #nav > #menu
+{
+ position: absolute;
+ top: -7em; /** 112px */
+ right: 3em;
+ margin: 0;
+}
+
+/** Faux-Column-Hack-Eigengewächs anpassen */
+#page.cols_2
+{
+ max-width: none;
+ border-right-width: 15em;
+}
+.cols_2 > #header
+{
+ margin-right: -15em;
+ border-right: 3em solid @hintergrund;
+}
+.cols_2 > #breadcrumb
+{
+ right: -15em;
+}
+.cols_2 > #footer
+{
+ position: static;
+ float: right;
+ margin-right: -15em;
+ padding: 0;
+ width: 15em;
+ background-color: @heller;
+ border-top: 3em solid @hintergrund;
+}
+
projects / website / commitdiff