Browse Source

added mobile styles (only covering the basics)

master
Anika Henke 12 years ago
parent
commit
e17c22fad7
  1. 85
      css/mobile.css
  2. 2
      main.php
  3. 1
      style.ini

85
css/mobile.css

@ -0,0 +1,85 @@
/**
* This file provides style changes for small screens.
*
* @author Anika Henke <anika@selfthinker.org>
*/
@media only screen and (max-width: 42em) {
.mode_show #dokuwiki__aside {
width: 100%;
float: none;
margin-bottom: 1.4em;
}
#dokuwiki__aside > .pad {
margin: 0;
}
.mode_show #dokuwiki__content {
float: none;
margin-left: 0;
margin-right: 0;
}
.mode_show #dokuwiki__content > .pad {
margin-left: 0;
}
[dir=rtl] .mode_show #dokuwiki__content > .pad {
margin-right: 0;
}
#dokuwiki__header .headings {
margin: 2.1em 0 0;
}
#dokuwiki__header .tools {
margin-bottom: .7em;
}
#dokuwiki__header .headings,
#dokuwiki__header .tools,
#dokuwiki__header .tools li {
float: none;
text-align: left;
}
[dir=rtl] #dokuwiki__header .tools,
[dir=rtl] #dokuwiki__header .tools li {
float: none;
text-align: right;
}
[dir=rtl] #dokuwiki__header .headings {
float: none;
text-align: right;
}
#dokuwiki__sitetools ul {
padding: 0;
}
#dokuwiki__sitetools li {
margin: 0 1.5em 0 0;
}
[dir=rtl] #dokuwiki__sitetools li {
margin: 0 0 0 1.5em;
}
#dokuwiki__header div.breadcrumbs {
margin-bottom: .7em;
}
#dokuwiki__header ul.a11y.skip {
left: auto !important;
right: 1em !important;
top: 3.1em !important;
width: auto !important;
height: auto !important;
list-style: none;
padding: 0;
margin: 0;
}
[dir=rtl] #dokuwiki__header ul.a11y.skip {
right: auto !important;
left: 1em !important;
}
} /* /@media */

2
main.php

@ -51,7 +51,7 @@ $showTools = !tpl_getConf('hideTools') || ( tpl_getConf('hideTools') && $_SERVER
<p class="claim"><?php echo $conf['tagline'] ?></p> <p class="claim"><?php echo $conf['tagline'] ?></p>
<?php endif ?> <?php endif ?>
<ul class="a11y">
<ul class="a11y skip">
<li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content'] ?></a></li> <li><a href="#dokuwiki__content"><?php echo $lang['skip_to_content'] ?></a></li>
</ul> </ul>
<div class="clearer"></div> <div class="clearer"></div>

1
style.ini

@ -29,6 +29,7 @@ css/design.css = screen
css/content.css = screen css/content.css = screen
css/includes.css = screen css/includes.css = screen
css/mobile.css = all
css/print.css = print css/print.css = print

Loading…
Cancel
Save