em --> rem + font-size in responsive

This commit is contained in:
Silke Pisulla 2017-01-05 15:26:31 +01:00
commit b6b228b16d
7 changed files with 142 additions and 69 deletions

View file

@ -57,8 +57,6 @@
}
}
}
}

View file

@ -25,7 +25,7 @@
color: @color-nav;
&:first-of-type {
padding-top: .3rem;
padding-top: .3em;
}
}
@ -34,8 +34,8 @@
display: list-item;
list-style-type: square;
color: @color-nav;
padding-top: .1rem;
padding-bottom: .1rem;
padding-top: .1em;
padding-bottom: .1em;
transition: @transition color;
&:hover,
@ -52,7 +52,7 @@
position: relative;
list-style-type: none;
margin: 0;
padding: 0 0 .3rem 0;
padding: 0 0 .3em;
counter-increment: nav-counter;
&::after {
@ -70,7 +70,7 @@
position: relative;
z-index: 1;
margin-top: -1px;
padding: .5rem 0 .5rem (@icon-size + 1);
padding: .5em 0 .5em (@icon-size + 1);
&::before {
content: counter(nav-counter);
@ -117,13 +117,13 @@
border: 1px solid transparent;
border-radius: 2px;
margin-bottom: -.3rem;
padding: .6rem 0 .7rem (@icon-size + 1);
padding: .6em 0 .6em (@icon-size + 1);
transition: @transition color, @transition background-color, @transition border-color;
&::before {
content: counter(nav-counter);
position: absolute;
top: -.1rem;
top: -.1em;
left: 0;
display: flex;
display: -webkit-flex;
@ -193,6 +193,11 @@
}
}
}
+ ul {
margin-top: .5em;
margin-bottom: .25em;
}
}
+ ul {
@ -216,12 +221,17 @@
@media @screen_min-xlg {
#dokuwiki__aside.main-sidebar {
.nav-main {
.li {
font-size: .88rem;
padding: .1rem 0;
> ul > li > .li * {
font-size: .9rem;
}
> * {
font-size: .88rem;
.li {
font-size: .8rem;
padding: .1em 0;
* {
font-size: inherit;
font-weight: inherit;
}
}
}
@ -237,7 +247,7 @@
.nav-main {
.li {
font-size: 1rem;
padding: .15rem .25rem;
padding: .15em .25rem;
> * {
font-size: 1rem;

View file

@ -8,7 +8,7 @@
.nav-usertools {
&.has-bar {
margin-top: @height-context-bar;
padding-top: .5rem;
padding-top: .5em;
}
@ -16,7 +16,7 @@
ul {
float: right;
padding: 0;
margin: .2rem -.2rem 0 0;
margin: .2em -.2rem 0 0;
li {
.btn-usertools-wrapper(); // uniform li
@ -50,7 +50,7 @@
&.user {
border: 1px solid @color-border;
border-radius: @border-radius;
padding: .3rem .25rem;
padding: .3em .25rem;
bdi {
color: @color-nav;
@ -123,7 +123,7 @@
box-sizing: border-box;
font-size: 1.4em;
cursor: pointer;
margin: .2rem 0 0;
margin: .2em 0 0;
}
/* icon register new user */

View file

@ -8,24 +8,23 @@
.side-tools.main-sidebar {
@icon-size: 2rem;
> nav{
margin-top: 1rem;
> ul{
> nav {
margin-top: 1em;
> ul {
margin-bottom: 0;
}
}
h6 { //background-color: pink;// hier activ !!!
h6 {
position: relative;
width: auto;
height: auto;
color: @color-nav;
font-size: .88rem;
font-weight: normal;
padding: .5rem 0 .5rem (@icon-size + 1);
padding: .5em 0 .5em (@icon-size + 1.1);
&::before {
//background-color: gold;
content: 'A';
position: absolute;
top: 0;
@ -50,10 +49,15 @@
top: 15%;
bottom: 15%;
width: 1px;
left: (@icon-size + .5);
left: (@icon-size + .6);
background-color: @color-border;
transition: @transition background-color;
}
+ ul {
margin-top: .5em;
margin-bottom: .25em;
}
}
@ -69,8 +73,8 @@
display: list-item;
list-style-type: square;
color: @color-nav;
padding-top: .1rem;
padding-bottom: .1rem;
padding-top: .1em;
padding-bottom: .1em;
transition: @transition color;
&:hover,
@ -81,7 +85,7 @@
}
&:first-of-type {
padding-top: .3rem;
padding-top: .3em;
}
}
}
@ -92,13 +96,21 @@
@media @screen_min-xlg {
.side-tools.main-sidebar {
h6 {
font-size: .9rem;
* {
font-size: inherit;
}
}
li {
font-size: 100%;
padding-top: .1rem;
padding-bottom: .1rem;
padding-top: .1em;
padding-bottom: .1em;
> * {
font-size: .88rem;
font-size: .8rem;
}
}
}
@ -106,18 +118,17 @@
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1199px */
/* max-width: 1439px */
@media @screen_max-xlg {
.site-tools.main-sidebar {
.side-tools.main-sidebar {
h6 {
font-size: 1rem;
}
li {
font-size: 1rem;
padding-top: .15rem;
padding-bottom: .15rem;
padding: .15em .25rem;
> * {
font-size: 1rem;

View file

@ -5,12 +5,11 @@
* @author Jana Deutschlaender <deutschlaender@cosmocode.de>
*/
html, body{
html, body {
background-color: @color-site-bg;
}
a{
a {
color: @ini_existing;
}
@ -80,7 +79,6 @@ a{
margin-right: 0;
}
caption,
figcaption,
summary,
@ -89,6 +87,7 @@ legend {
margin: 0 0 .35em;
line-height: 1.2;
}
h1,
h2,
h3,
@ -100,6 +99,7 @@ h6 {
line-height: 1.2;
clear: both;
}
[dir=rtl] h1,
[dir=rtl] h2,
[dir=rtl] h3,
@ -113,41 +113,53 @@ h1 {
font-size: 1.4rem;
margin: 0 0 0.444em;
}
h2 {
font-size: 1.12rem;
margin: 0 0 0.666em;
}
h3 {
font-size: 1rem;
margin: 0 0 0.888em;
}
h4 {
font-size: .93rem;
margin: 0 0 1.0em;
}
h5 {
font-size: .88rem;
margin: 0 0 1.1428em;
}
h6 {
font-size: .83rem;
margin: 0 0 1.333em;
}
p{
p {
font-size: .83rem;
line-height: 135%;
a, span, strong{
font-size: inherit;
}
}
label, legend{
font-size: .83rem;
a, span, strong{
a,
span,
strong {
font-size: inherit;
}
}
label,
legend {
font-size: .88rem;
a,
span,
strong {
font-size: inherit;
}
}
p,
ul,
@ -163,7 +175,7 @@ fieldset,
address {
font-size: .88rem;
line-height: 140%;
margin: 0 0 1.4em 0; /* bottom margin = line-height */
margin: 0 0 1.4em; /* bottom margin = line-height */
padding: 0;
}
@ -227,13 +239,29 @@ li li {
font-size: 100%;
}
ul { list-style: square outside; }
ol { list-style: decimal outside; }
ol ol { list-style-type: lower-alpha; }
ol ol ol { list-style-type: upper-roman; }
ol ol ol ol { list-style-type: upper-alpha; }
ol ol ol ol ol { list-style-type: lower-roman; }
ul {
list-style: square outside;
}
ol {
list-style: decimal outside;
}
ol ol {
list-style-type: lower-alpha;
}
ol ol ol {
list-style-type: upper-roman;
}
ol ol ol ol {
list-style-type: upper-alpha;
}
ol ol ol ol ol {
list-style-type: lower-roman;
}
table {
border-collapse: collapse;
@ -388,7 +416,7 @@ sup {
}
small {
font-size: .8em;
font-size: .9em;
}
@ -522,7 +550,7 @@ button:focus,
.qq-upload-button:hover {
border-color: #999;
background-color: #ddd;
background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+);
background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%);
}

View file

@ -150,7 +150,7 @@
color: @color-nav;
font-size: .8rem;
padding: 0;
margin: 0 .2rem 0 .1rem;
margin: 0 .2rem;
* {
font-size: .8rem;
@ -160,7 +160,7 @@
.btn-usertools-num () {
.num {
position: absolute;
right: -.5em;
right: -.4rem;
top: -.4em;
background-color: @button_background;
border-radius: 2px;
@ -169,7 +169,7 @@
font-weight: 400;
text-align: center;
line-height: 1;
padding: .2em .3em .1em;
padding: .2em .2rem .1em;
transition: @transition color, @transition background-color;
}
@ -190,7 +190,7 @@
.hide-text-show-before();
color: inherit;
font-size: 1.3em;
font-size: 1rem;
margin-top: .2rem;
}

View file

@ -35,6 +35,7 @@
sup {
float: right;
font-size: 1em;
}
input,
@ -47,6 +48,8 @@
}
input[type="checkbox"] {
width: 1.5rem;
height: 1.5rem;
background-image: none;
}
@ -54,12 +57,13 @@
float: left;
width: 50%;
text-align: right;
line-height: @line-height-default;
padding-top: .2em;
padding-right: @grid;
&:not([class]) {
font-weight: bold;
margin-top: .4em;
margin-top: .5em;
+ input,
+ select {
@ -106,12 +110,34 @@
/* neutralize #icke__page .content ul, #icke__page .content ol */
#icke__page .content ul.autocompletion {
//margin: 0;
//padding: 0.3em;
#icke__page .content ul.autocompletion {}
ul.autocompletion li {}
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* min-width: 1440px */
@media @screen_min-xlg {
.dokuwiki form.bureaucracy__plugin {
p {
font-size: .9rem;
}
}
}
ul.autocompletion li {
//list-style-type: none;
/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
/* max-width: 1439px */
@media @screen_max-xlg {
.dokuwiki form.bureaucracy__plugin {
p,
label,
button[type="submit"] {
font-size: 1rem;
}
}
}