projects
/
website
/ commitdiff
commit
grep
author
committer
pickaxe
?
search:
re
summary
|
shortlog
|
log
|
commit
| commitdiff |
tree
raw
|
patch
|
inline
| side by side (parent:
ef2107a
)
WIP: Logo
frontend-paralleldurcheinander
author
Kai Moritz
<kai@juplo.de>
Tue, 27 Jun 2017 12:13:19 +0000
(14:13 +0200)
committer
Kai Moritz
<kai@juplo.de>
Tue, 27 Jun 2017 12:21:03 +0000
(14:21 +0200)
12 files changed:
dist/less/base/head.less
patch
|
blob
|
history
dist/less/base/typo.less
patch
|
blob
|
history
dist/less/phone/head.less
patch
|
blob
|
history
dist/less/phone/layout.less
patch
|
blob
|
history
dist/less/print/head.less
patch
|
blob
|
history
dist/less/screen/head.less
patch
|
blob
|
history
dist/less/screen/layout.less
patch
|
blob
|
history
dist/less/tablet/head.less
patch
|
blob
|
history
dist/less/tablet/layout.less
patch
|
blob
|
history
dist/less/tiny.less
patch
|
blob
|
history
dist/less/tiny/layout.less
patch
|
blob
|
history
dist/thymeleaf/templates/layout.html
patch
|
blob
|
history
diff --git
a/dist/less/base/head.less
b/dist/less/base/head.less
index
182bd61
..
dac97f3
100644
(file)
--- a/
dist/less/base/head.less
+++ b/
dist/less/base/head.less
@@
-4,20
+4,27
@@
}
#logo
{
}
#logo
{
+ position: relative;
+ display: inline-block;
+ font-size: 100%; /* Um das Rechnen einfacher zu gestalten */
margin: 0;
margin: 0;
- padding: 0 0 0 .
230769231
em; /* 30px */
+ padding: 0 0 0 .
1875
em; /* 30px */
color: @normal;
border: none;
position: relative;
color: @normal;
border: none;
position: relative;
- left: -.3em;
+ top: .5em;
+ left: -.875em;
}
#logo a.l:hover
{
color: @dunkler;
border-style: none;
}
}
#logo a.l:hover
{
color: @dunkler;
border-style: none;
}
+#logo > a.l > img.l
+{
+ width: 6.25em; /** 100px */
+}
#slogan
{
#slogan
{
- display: block;
color: @normal;
}
color: @normal;
}
diff --git
a/dist/less/base/typo.less
b/dist/less/base/typo.less
index
8e5e603
..
511caf1
100644
(file)
--- 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;
.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
background-color: @hintergrund;
}
h1, h2, h3, h4, h5, h6
diff --git
a/dist/less/phone/head.less
b/dist/less/phone/head.less
index
22d8101
..
162689c
100644
(file)
--- a/
dist/less/phone/head.less
+++ b/
dist/less/phone/head.less
@@
-3,5
+3,7
@@
#slogan
{
color: @normal;
#slogan
{
color: @normal;
+ height: .3em;
+ top: -1.1em;
}
}
}
}
diff --git
a/dist/less/phone/layout.less
b/dist/less/phone/layout.less
index
f2c4a23
..
7b276ba
100644
(file)
--- a/
dist/less/phone/layout.less
+++ b/
dist/less/phone/layout.less
@@
-29,13
+29,16
@@
body
#header
{
#header
{
- margin: .5em 1em 1em 1.25em;
+ margin: .
12
5em 1em 1em 1.25em;
}
#header > hr.h
{
display: none;
}
}
#header > hr.h
{
display: none;
}
-
+#logo
+{
+ font-size: 50%;
+}
/** Bereichsauswahl positionieren und stylen */
/** Bereichsauswahl positionieren und stylen */
@@
-115,7
+118,7
@@
body
overflow: hidden;
width: 3.5em;
height: 3em;
overflow: hidden;
width: 3.5em;
height: 3em;
- line-height:
3
em;
+ line-height:
2.1
em;
color: @normal;
border-style: none;
}
color: @normal;
border-style: none;
}
@@
-143,7
+146,7
@@
body
top: 0;
right: 0;
left: 0;
top: 0;
right: 0;
left: 0;
- padding: .
6
em 1em 999em 2.5em;
+ padding: .
25
em 1em 999em 2.5em;
margin-bottom: -993em;
z-index: 5;
background-color: @heller;
margin-bottom: -993em;
z-index: 5;
background-color: @heller;
@@
-162,7
+165,7
@@
body
overflow: hidden;
width: 3.5em;
height: 3em;
overflow: hidden;
width: 3.5em;
height: 3em;
- line-height:
3
em;
+ line-height:
2.1
em;
color: @hintergrund;
border-style: none;
}
color: @hintergrund;
border-style: none;
}
diff --git
a/dist/less/print/head.less
b/dist/less/print/head.less
index
db11a6e
..
0497540
100644
(file)
--- a/
dist/less/print/head.less
+++ b/
dist/less/print/head.less
@@
-2,7
+2,13
@@
{
padding-left: .0625em;
}
{
padding-left: .0625em;
}
+#logo > a.l > img.l
+{
+ width: 3.125em; /** 50px */
+}
#slogan
{
display: inline-block;
#slogan
{
display: inline-block;
+ position: relative;
+ top: .4em;
}
}
diff --git
a/dist/less/screen/head.less
b/dist/less/screen/head.less
index
5e7ff4d
..
e6eeb57
100644
(file)
--- a/
dist/less/screen/head.less
+++ b/
dist/less/screen/head.less
@@
-3,6
+3,13
@@
padding: 0;
z-index: 3;
left: auto;
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
{
}
#slogan
{
@@
-13,7
+20,7
@@
line-height: .6666666667em; /* 20px */
height: .6em; /* 18px */
padding: .066666667em .066666667em 0 0; /** 2px 2px 0 0 */
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 */
position: relative;
z-index: 2;
top: -1.3em; /* 39px */
diff --git
a/dist/less/screen/layout.less
b/dist/less/screen/layout.less
index
9771f83
..
d01d090
100644
(file)
--- a/
dist/less/screen/layout.less
+++ b/
dist/less/screen/layout.less
@@
-72,7
+72,7
@@
body
#header
{
margin-left: -2.125em;
#header
{
margin-left: -2.125em;
- padding: 1em 0;
+ padding:
.125em 0
1em 0;
}
#header > hr.h
{
}
#header > hr.h
{
@@
-162,8
+162,8
@@
body
#breadcrumb
{
position: absolute;
#breadcrumb
{
position: absolute;
- top:
8.375em;
- left:
6.9
em;
+ top:
7.875em; /* 126px */
+ left:
10
em;
z-index: 3;
}
#breadcrumb > a.hide
z-index: 3;
}
#breadcrumb > a.hide
@@
-174,7
+174,13
@@
body
{
display: none;
}
{
display: none;
}
-
+#breadcrumb > strong.b.title,
+#breadcrumb > ol.b > li.b:first-child
+{
+ text-indent: -999em;
+ width: 0;
+ margin: 0;
+}
/** Footer positionieren */
/** Footer positionieren */
diff --git
a/dist/less/tablet/head.less
b/dist/less/tablet/head.less
index
2fb2f21
..
9f1379d
100644
(file)
--- a/
dist/less/tablet/head.less
+++ b/
dist/less/tablet/head.less
@@
-2,6
+2,7
@@
{
#logo
{
{
#logo
{
+ font-size: 80%;
}
#slogan
{
}
#slogan
{
@@
-13,7
+14,7
@@
{
#logo
{
{
#logo
{
- font-size:
487.5%; /* 78px */
+ font-size:
60%;
}
#slogan
{
}
#slogan
{
diff --git
a/dist/less/tablet/layout.less
b/dist/less/tablet/layout.less
index
c63f923
..
5698042
100644
(file)
--- a/
dist/less/tablet/layout.less
+++ b/
dist/less/tablet/layout.less
@@
-90,16
+90,16
@@
body
#header
{
#header
{
- padding:
1
em 3em 2em 5em;
+ padding:
.125
em 3em 2em 5em;
@media (max-width: (@maxsmalltablet))
{
margin-left: -1.5em;
@media (max-width: (@maxsmalltablet))
{
margin-left: -1.5em;
- padding: .5em 2em 2em 3em;
+ padding: .
12
5em 2em 2em 3em;
}
@media (max-width: (@maxsmallertablet))
{
margin-left: -1.2em;
}
@media (max-width: (@maxsmallertablet))
{
margin-left: -1.2em;
- padding:
1
em 1em 2em 2.5em;
+ padding:
.125
em 1em 2em 2.5em;
}
}
}
}
@@
-227,18
+227,18
@@
body
.nomenu #breadcrumb,
.onecolumn #breadcrumb
{
.nomenu #breadcrumb,
.onecolumn #breadcrumb
{
- left: 1
1.9
em;
+ left: 1
5
em;
right: 3em;
@media (max-width: (@maxsmalltablet))
{
font-size: 87.5%; /* 14px */
top: 7.2em;
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))
{
}
@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
d7fa685
..
1f54b45
100644
(file)
--- a/
dist/less/tiny.less
+++ b/
dist/less/tiny.less
@@
-5,5
+5,16
@@
@import 'screen/wip.less';
@import 'screen/packs.less';
@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';
@import 'tiny/layout.less';
@import 'tiny/404.less';
diff --git
a/dist/less/tiny/layout.less
b/dist/less/tiny/layout.less
index
dcef10c
..
805da7a
100644
(file)
--- a/
dist/less/tiny/layout.less
+++ b/
dist/less/tiny/layout.less
@@
-4,6
+4,7
@@
body
}
#header
{
}
#header
{
+ font-size: 75%;
margin: .25em .5em 1em 1em;
}
#nav:target
margin: .25em .5em 1em 1em;
}
#nav:target
@@
-31,25
+32,10
@@
body
@media (max-width: 210px)
{
@media (max-width: 210px)
{
- #header
- {
- font-size: 75%;
- }
#nav:target
{
padding-top: 0;
}
#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)
{
}
@media (max-width: 150px)
{
@@
-60,6
+46,7
@@
body
#header > hr.h
{
display: block;
#header > hr.h
{
display: block;
+ margin: 0;
}
#slogan
{
}
#slogan
{
@@
-69,6
+56,8
@@
body
#nav:target > a.hide
{
top: .2em;
#nav:target > a.hide
{
top: .2em;
+ line-heigth: 2.3em;
+ width: 2.4em;
}
#breadcrumb > a.hide:before,
#nav:target > a.hide:before
}
#breadcrumb > a.hide:before,
#nav:target > a.hide:before
diff --git
a/dist/thymeleaf/templates/layout.html
b/dist/thymeleaf/templates/layout.html
index
6ef00cb
..
fce27a9
100644
(file)
--- a/
dist/thymeleaf/templates/layout.html
+++ b/
dist/thymeleaf/templates/layout.html
@@
-44,7
+44,7
@@
>
<div id="page" class="cf">
<header id="header">
>
<div id="page" class="cf">
<header id="header">
- <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l"><img src="/img/logo.svg" alt="juplo"/></a></h1>
+ <h1 id="logo" layout:fragment="header"><a href="../index.html" th:href="@{/}" title="Home" class="l"><img
class="l"
src="/img/logo.svg" alt="juplo"/></a></h1>
<span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
<hr class="h" />
</header>
<span id="slogan"><strong>Java</strong> bits from nerds for nerds</span>
<hr class="h" />
</header>