From: Kai Moritz Date: Tue, 27 Jun 2017 12:13:19 +0000 (+0200) Subject: WIP: Logo X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=refs%2Fheads%2Ffrontend-paralleldurcheinander;p=website WIP: Logo --- diff --git a/dist/less/base/head.less b/dist/less/base/head.less index 182bd616..dac97f30 100644 --- a/dist/less/base/head.less +++ b/dist/less/base/head.less @@ -4,20 +4,27 @@ } #logo { + position: relative; + display: inline-block; + font-size: 100%; /* Um das Rechnen einfacher zu gestalten */ margin: 0; - padding: 0 0 0 .230769231em; /* 30px */ + padding: 0 0 0 .1875em; /* 30px */ color: @normal; border: none; position: relative; - left: -.3em; + top: .5em; + left: -.875em; } #logo a.l:hover { color: @dunkler; border-style: none; } +#logo > a.l > img.l +{ + width: 6.25em; /** 100px */ +} #slogan { - display: block; color: @normal; } diff --git a/dist/less/base/typo.less b/dist/less/base/typo.less index 8e5e6031..511caf13 100644 --- a/dist/less/base/typo.less +++ b/dist/less/base/typo.less @@ -5,7 +5,7 @@ body .droid; letter-spacing: 0; line-height: 1.5em; - padding: .5em 1em 1em 1.5em; + padding: 0 1em 1em 1.5em; background-color: @hintergrund; } h1, h2, h3, h4, h5, h6 diff --git a/dist/less/phone/head.less b/dist/less/phone/head.less index 22d81010..162689cc 100644 --- a/dist/less/phone/head.less +++ b/dist/less/phone/head.less @@ -3,5 +3,7 @@ #slogan { color: @normal; + height: .3em; + top: -1.1em; } } diff --git a/dist/less/phone/layout.less b/dist/less/phone/layout.less index f2c4a238..7b276ba3 100644 --- a/dist/less/phone/layout.less +++ b/dist/less/phone/layout.less @@ -29,13 +29,16 @@ body #header { - margin: .5em 1em 1em 1.25em; + margin: .125em 1em 1em 1.25em; } #header > hr.h { display: none; } - +#logo +{ + font-size: 50%; +} /** Bereichsauswahl positionieren und stylen */ @@ -115,7 +118,7 @@ body overflow: hidden; width: 3.5em; height: 3em; - line-height: 3em; + line-height: 2.1em; color: @normal; border-style: none; } @@ -143,7 +146,7 @@ body top: 0; right: 0; left: 0; - padding: .6em 1em 999em 2.5em; + padding: .25em 1em 999em 2.5em; margin-bottom: -993em; z-index: 5; background-color: @heller; @@ -162,7 +165,7 @@ body overflow: hidden; width: 3.5em; height: 3em; - line-height: 3em; + line-height: 2.1em; color: @hintergrund; border-style: none; } diff --git a/dist/less/print/head.less b/dist/less/print/head.less index db11a6e2..0497540c 100644 --- a/dist/less/print/head.less +++ b/dist/less/print/head.less @@ -2,7 +2,13 @@ { padding-left: .0625em; } +#logo > a.l > img.l +{ + width: 3.125em; /** 50px */ +} #slogan { display: inline-block; + position: relative; + top: .4em; } diff --git a/dist/less/screen/head.less b/dist/less/screen/head.less index 5e7ff4df..e6eeb57f 100644 --- a/dist/less/screen/head.less +++ b/dist/less/screen/head.less @@ -3,6 +3,13 @@ padding: 0; z-index: 3; left: auto; + top: 0.3125em; /* 5px */ +} +#logo > a.l > img.l +{ + width: 12.5em; /** 200px */ + -webkit-filter: drop-shadow( -5px -5px 5px #fff ); + filter: drop-shadow( -5px -5px 5px #fff ); } #slogan { @@ -13,7 +20,7 @@ line-height: .6666666667em; /* 20px */ height: .6em; /* 18px */ padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */ - margin-left: 9em; /* 270px */ + margin-left: 2em; position: relative; z-index: 2; top: -1.3em; /* 39px */ diff --git a/dist/less/screen/layout.less b/dist/less/screen/layout.less index 9771f834..d01d0907 100644 --- a/dist/less/screen/layout.less +++ b/dist/less/screen/layout.less @@ -72,7 +72,7 @@ body #header { margin-left: -2.125em; - padding: 1em 0; + padding: .125em 0 1em 0; } #header > hr.h { @@ -162,8 +162,8 @@ body #breadcrumb { position: absolute; - top: 8.375em; - left: 6.9em; + top: 7.875em; /* 126px */ + left: 10em; z-index: 3; } #breadcrumb > a.hide @@ -174,7 +174,13 @@ body { display: none; } - +#breadcrumb > strong.b.title, +#breadcrumb > ol.b > li.b:first-child +{ + text-indent: -999em; + width: 0; + margin: 0; +} /** Footer positionieren */ diff --git a/dist/less/tablet/head.less b/dist/less/tablet/head.less index 2fb2f216..9f1379dd 100644 --- a/dist/less/tablet/head.less +++ b/dist/less/tablet/head.less @@ -2,6 +2,7 @@ { #logo { + font-size: 80%; } #slogan { @@ -13,7 +14,7 @@ { #logo { - font-size: 487.5%; /* 78px */ + font-size: 60%; } #slogan { diff --git a/dist/less/tablet/layout.less b/dist/less/tablet/layout.less index c63f9239..5698042d 100644 --- a/dist/less/tablet/layout.less +++ b/dist/less/tablet/layout.less @@ -90,16 +90,16 @@ body #header { - padding: 1em 3em 2em 5em; + padding: .125em 3em 2em 5em; @media (max-width: (@maxsmalltablet)) { margin-left: -1.5em; - padding: .5em 2em 2em 3em; + padding: .125em 2em 2em 3em; } @media (max-width: (@maxsmallertablet)) { margin-left: -1.2em; - padding: 1em 1em 2em 2.5em; + padding: .125em 1em 2em 2.5em; } } @@ -227,18 +227,18 @@ body .nomenu #breadcrumb, .onecolumn #breadcrumb { - left: 11.9em; + left: 15em; right: 3em; @media (max-width: (@maxsmalltablet)) { font-size: 87.5%; /* 14px */ top: 7.2em; - left: 9.8em; + left: 12.7142857em; /* 178px */ } @media (max-width: (@maxsmallertablet)) { - top: 5.8em; - left: 7em; + top: 6em; /* 84px */ + left: 5em; /*70px */ } } diff --git a/dist/less/tiny.less b/dist/less/tiny.less index d7fa6859..1f54b450 100644 --- a/dist/less/tiny.less +++ b/dist/less/tiny.less @@ -5,5 +5,16 @@ @import 'screen/wip.less'; @import 'screen/packs.less'; +@import 'tablet/head.less'; +@import 'tablet/404.less'; + +@import 'phone/typo.less'; +@import 'phone/layout.less'; +@import 'phone/head.less'; +@import 'phone/menu.less'; +@import 'phone/footer.less'; +@import 'phone/packs.less'; +@import 'phone/404.less'; + @import 'tiny/layout.less'; @import 'tiny/404.less'; diff --git a/dist/less/tiny/layout.less b/dist/less/tiny/layout.less index dcef10cc..805da7ae 100644 --- a/dist/less/tiny/layout.less +++ b/dist/less/tiny/layout.less @@ -4,6 +4,7 @@ body } #header { + font-size: 75%; margin: .25em .5em 1em 1em; } #nav:target @@ -31,25 +32,10 @@ body @media (max-width: 210px) { - #header - { - font-size: 75%; - } #nav:target { padding-top: 0; } - #breadcrumb, - #nav:target > a.hide - { - top: .1em; - right: .3em; - } - #breadcrumb > a.hide:before, - #nav:target > a.hide:before - { - font-size: 300%; /** Vielfaches von 12px */ - } } @media (max-width: 150px) { @@ -60,6 +46,7 @@ body #header > hr.h { display: block; + margin: 0; } #slogan { @@ -69,6 +56,8 @@ body #nav:target > a.hide { top: .2em; + line-heigth: 2.3em; + width: 2.4em; } #breadcrumb > a.hide:before, #nav:target > a.hide:before diff --git a/dist/thymeleaf/templates/layout.html b/dist/thymeleaf/templates/layout.html index 6ef00cb6..fce27a9e 100644 --- a/dist/thymeleaf/templates/layout.html +++ b/dist/thymeleaf/templates/layout.html @@ -44,7 +44,7 @@ >