projects
/
website
/ blobdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
Tablet-Layout vereinfacht und Sticky-Footer-Hack aus Phone-Layout übernommen
[website]
/
src
/
main
/
webapp
/
less
/
tablet
/
layout.less
diff --git
a/src/main/webapp/less/tablet/layout.less
b/src/main/webapp/less/tablet/layout.less
index
0597607
..
ddaa34a
100644
(file)
--- a/
src/main/webapp/less/tablet/layout.less
+++ b/
src/main/webapp/less/tablet/layout.less
@@
-1,38
+1,24
@@
body
{
body
{
- padding: 0 0 0 5em;
- @media (max-width: @maxsmalltablet)
- {
- padding: 0 0 0 3.5em;
- }
- @media (max-width: @maxsmallertablet)
- {
- padding: 0 0 0 2.5em;
- }
+ padding: 0;
+}
+#page
+{
+ overflow: hidden;
}
}
-.cols_1
+.cols_1
> .content
{
{
- padding-
right: 3
em;
+ padding-
bottom: 5
em;
@media (max-width: @maxsmalltablet)
{
@media (max-width: @maxsmalltablet)
{
- padding-
right: 2
em;
+ padding-
bottom: 4
em;
}
@media (max-width: @maxsmallertablet)
{
}
@media (max-width: @maxsmallertablet)
{
- padding-
right: 1
em;
+ padding-
bottom: 3.25
em;
}
}
}
}
-.cols_1 > .content
-{
- padding-bottom: 5.5em;
-}
-.cols_2 > .content
-{
- padding: 0 15em 0 0;
- margin-right: -15em;
- z-index: 2;
-}
.cols_2 > .content.cf:before,
.cols_2 > .content.cf:after
{
.cols_2 > .content.cf:before,
.cols_2 > .content.cf:after
{
@@
-40,21
+26,19
@@
body
content: none;
display: inline;
}
content: none;
display: inline;
}
+.cols_1 > .content > .main,
.cols_2 > .content > .main
{
float: none;
.cols_2 > .content > .main
{
float: none;
- margin-right: -15em;
width: auto;
width: auto;
- background-color: @hintergrund;
- border-right: 3em solid @hintergrund;
+ padding: 0 3em 0 5em;
@media (max-width: @maxsmalltablet)
{
@media (max-width: @maxsmalltablet)
{
- margin-top: -.5em;
- border-right-width: 2em;
+ padding: 0 2em 0 3.5em;
}
@media (max-width: @maxsmallertablet)
{
}
@media (max-width: @maxsmallertablet)
{
-
border-right-width: 1
em;
+
padding: 0 1em 0 2.5
em;
}
/** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
}
/** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
@@
-64,73
+48,98
@@
body
}
.cols_1 > .content > .marginal
{
}
.cols_1 > .content > .marginal
{
- margin: 2em -3em 0 -5em;
+ margin: 3em 0 -999em 0;
+ padding: 0 3em 999em 5em;
+ @media (max-width: @maxsmalltablet)
+ {
+ padding-left: 3.5em;
+ padding-right: 2em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ padding-left: 2.5em;
+ padding-right: 1em;
+ }
}
.cols_1 > .content > .marginal aside.m
{
}
.cols_1 > .content > .marginal aside.m
{
- margin: -.125em 3em 0 5em;
padding: 2em 0;
padding: 2em 0;
- background-color: @heller;
border-bottom: .125em solid @hintergrund;
}
.cols_2 > .content > .marginal
{
border-bottom: .125em solid @hintergrund;
}
.cols_2 > .content > .marginal
{
- float: left;
- margin: 0 0 0 -5em;
- padding: 2em 0 5em 5em;
- position: static;
+ margin: 3em 0 -994em -15em;
+ padding: 2em 0 999em 0;
width: 100%;
width: 100%;
-
border-top: 3em solid @hintergrund
;
+
position: static
;
}
.cols_2 > .content > .marginal > aside.m
{
}
.cols_2 > .content > .marginal > aside.m
{
- margin-right: -12em;
+ margin: 0 -12em 0 17.5em;
+ @media (max-width: @maxsmalltablet)
+ {
+ margin-right: -13em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ margin-right: -14em;
+ }
}
}
-.cols_2 > .content #nav
+.cols_2 > .content
> .marginal >
#nav
{
position: static;
{
position: static;
- width: auto;
border-right: .125em solid @hintergrund;
border-right: .125em solid @hintergrund;
+ margin-left: 20em;
+ @media (max-width: @maxsmalltablet)
+ {
+ margin-left: 18.5em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ margin-left: 17.5em;
+ }
+ width: auto;
}
}
-.cols_2 > .content #nav > #menu
+
+
+/** Faux-Column-Hack-Eigengewächs zurücksetzen */
+#header
{
{
- position: absolute;
- top: -7em; /** 112px */
- right: 3em;
- margin: 0;
+ padding: 1em 3em 0 5em;
+ @media (max-width: @maxsmalltablet)
+ {
+ margin-left: -1.5em;
+ padding: 1em 2em 0 3.5em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ margin-left: -1.2em;
+ padding: 1em 1em 0 2.5em;
+ }
}
}
-/** Faux-Column-Hack-Eigengewächs anpassen */
#page.cols_2
{
max-width: none;
#page.cols_2
{
max-width: none;
- border-right-
width: 15em
;
+ border-right-
style: none
;
}
.cols_2 > #header
{
}
.cols_2 > #header
{
- margin-right: -15em;
- border-right: 3em solid @hintergrund;
- @media (max-width: @maxsmalltablet)
- {
- border-right-width: 2em;
- }
- @media (max-width: @maxsmallertablet)
- {
- border-right-width: 1em;
- }
+ margin-right: 0;
+ border-right-style: none;
}
}
-.cols_2 >
#breadcrumb
+.cols_2 >
.content
{
{
- right: -15em;
+ margin: 0;
+ padding: 0;
}
.cols_2 > #footer
{
position: static;
float: right;
}
.cols_2 > #footer
{
position: static;
float: right;
- margin
-right:
-15em;
- padding: 0;
+ margin
: 3em 0 -999em
-15em;
+ padding: 0
0 999em 0
;
width: 15em;
background-color: @heller;
width: 15em;
background-color: @heller;
- border-top: 3em solid @hintergrund;
}
}