update Argon Glow to v0.010

replaces pr #38

.gitattributes

@@ -0,0 +1,2 @@
+/.* export-ignore
+/_test export-ignore

.github/auto-comment.yml

@@ -0,0 +1,9 @@
+# auto replies used by probot/auto-comment
+
+issuesOpened: >
+  Thank you for opening this issue.
+
+  [CosmoCode](https://www.cosmocode.de) is a software company in Berlin providing services for wiki, app and web development. As such we can't guarantee quick responses for issues opened on our Open Source projects.
+
+  If you require certain features or bugs fixed, you can always hire us. Feel free to contact us at dokuwiki@cosmocode.de for an offer.
+

.gitignore

@@ -0,0 +1,5 @@
+._COPYING
+._.DS_Store
+/._*
+._*
+fonts/icons/fontello

LICENSE

@@ -0,0 +1,339 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, write to the Free Software Foundation, Inc.,
+    51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Ty Coon>, 1 April 1989
+  Ty Coon, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

README

@@ -1,7 +1,27 @@
-sprintDoc Template (FIXME URL)
-for DokuWiki [https://www.dokuwiki.org]
-by Jana Deutschlaender <deutschlaender@cosmocode.de>
+sprintdoc template for DokuWiki
 
+modern, responsive template that integrates multiple plugins
 
-Version: see template.info.txt
-License: GPL2, see COPYING
+All documentation for this template can be found at
+https://www.dokuwiki.org/template:sprintdoc
+
+If you install this template manually, make sure it is installed in
+lib/tpl/sprintdoc/ - if the folder is called different it
+will not work!
+
+Please refer to http://www.dokuwiki.org/extensions for additional info
+on how to install extensions in DokuWiki.
+
+----
+Copyright (C) Jana Deutschlaender <dokuwiki@cosmocode.de>
+
+This program is free software; you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation; version 2 of the License
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+See the LICENSING file for details

README.md

@@ -1 +0,0 @@
-# sprintDoc Template for dokuwiki

Template.php

@@ -0,0 +1,325 @@
+<?php
+
+namespace dokuwiki\template\sprintdoc;
+
+/**
+ * Class Template
+ *
+ * provides additional logic for the sprintdoc template
+ *
+ * @package dokuwiki\template\sprintdoc
+ */
+class Template {
+
+    /** @var array loaded plugins */
+    protected $plugins = array(
+        'sqlite' => null,
+        'tagging' => null,
+        'magicmatcher' => null,
+        'tplinc' => null,
+        'sitemapnavi' => null,
+    );
+
+    /** @var string the type of special navigation to use */
+    protected $nav = '';
+
+
+    /**
+     * Get the singleton instance
+     *
+     * @return Template
+     */
+    public static function getInstance() {
+        static $instance = null;
+        if($instance === null) $instance = new Template();
+        return $instance;
+    }
+
+    /**
+     * Template constructor.
+     */
+    protected function __construct() {
+        $this->initializePlugins();
+        $this->initNavigationCookie();
+
+        /** @var \Doku_Event_Handler */
+        global $EVENT_HANDLER;
+        $EVENT_HANDLER->register_hook('PLUGIN_TPLINC_LOCATIONS_SET', 'BEFORE', $this, 'registerIncludes');
+    }
+
+    /**
+     * Load all the plugins we support directly
+     */
+    protected function initializePlugins() {
+        $this->plugins['sqlite'] = plugin_load('helper', 'sqlite');
+        if($this->plugins['sqlite']) {
+            $this->plugins['tagging'] = plugin_load('helper', 'tagging');
+            $this->plugins['magicmatcher'] = plugin_load('syntax', 'magicmatcher_issuelist');
+        }
+        $this->plugins['tplinc'] = plugin_load('helper', 'tplinc');
+        $this->plugins['sitemapnavi'] = plugin_load('helper', 'sitemapnavi');
+    }
+
+    /**
+     * Makes include position info available to the tplinc plugin
+     *
+     * @param \Doku_Event $event
+     */
+    public function registerIncludes(\Doku_Event $event) {
+        $event->data['footer'] = 'Footer below the page content';
+        $event->data['sidebarfooter'] = 'Footer below the sidebar';
+        $event->data['sidebarheader'] = 'Header above the sidebar';
+        $event->data['navtop'] = 'Additional navigation items at the top';
+        $event->data['navbottom'] = 'Additional navigation items at the bottom';
+    }
+
+    /**
+     * Get the content to include from the tplinc plugin
+     *
+     * prefix and postfix are only added when there actually is any content
+     *
+     * @param string $location
+     * @param string $pre prepend this before the content
+     * @param string $post append this to the content
+     * @return string
+     */
+    public function getInclude($location, $pre = '', $post = '') {
+        if(!$this->plugins['tplinc']) return '';
+        $content = $this->plugins['tplinc']->renderIncludes($location);
+        if($content === '') return '';
+        return $pre . $content . $post;
+    }
+
+    /**
+     * Sets a cookie to remember the requested special navigation
+     */
+    protected function initNavigationCookie() {
+        if ($this->plugins['sitemapnavi'] === null) return;
+        global $INPUT;
+
+        $nav = $INPUT->str('nav');
+        if($nav) {
+            set_doku_pref('nav', $nav);
+            $this->nav = $INPUT->str('nav');
+        } else {
+            $this->nav = get_doku_pref('nav', 'sidebar');
+        }
+    }
+
+    /**
+     * Return the navigation for the sidebar
+     *
+     * Defaults to the standard sidebar mechanism, but supports also the sitemapnavi plugin
+     *
+     * @return string
+     */
+    public function getNavigation() {
+        global $ID;
+        global $conf;
+
+        // id of the current sidebar, each sidebar must have its own state
+        $header = sprintf('<div id="sidebarId" class="%s"></div>', md5(page_findnearest($conf['sidebar'])));
+        // add tabs if multiple navigation types available
+        if ($this->plugins['sitemapnavi'] !== null) {
+            $header .= '<ul class="sidebar-tabs">';
+            $header .= '<li class="' . ($this->nav === 'sidebar' ? 'active' : '') . '">' .
+                '<a href="' . wl($ID, ['nav' => 'sidebar']) . '">'.tpl_getLang('nav_sidebar').'</a></li>';
+            $header .= '<li class="' . ($this->nav === 'sitemap' ? 'active' : '') . '">' .
+                '<a href="' . wl($ID, ['nav' => 'sitemap']) . '">'.tpl_getLang('nav_sitemap').'</a></li>';
+            $header .= '</ul>';
+        }
+
+        // decide what to show
+        if ($this->nav === 'sitemap') {
+            // site tree created by sitemapnavi plugin
+            $nav = '<nav class="nav-sitemapnavi" id="plugin__sitemapnavi">';
+            $nav .= $this->plugins['sitemapnavi']->getSiteMap(':');
+            $nav .= '</nav>';
+        } else {
+            // main navigation, loaded from standard sidebar, fixed up by javascript
+            $nav = '<nav class="nav-main">';
+            // immeadiately hide the navigation (if javascript available)
+            // it will be restyled and made visible again by our script later
+            $nav .= '<script type="application/javascript">
+                        document.getElementsByClassName("nav-main")[0].style.visibility = "hidden";
+                     </script>';
+
+            $nav .= $this->getInclude('navtop');
+            $nav .= tpl_include_page($conf['sidebar'], false, true);
+            $nav .= $this->getInclude('navbottom');
+            $nav .= '</nav>';
+        }
+
+        return $header . $nav;
+    }
+
+    /**
+     * Default class defining is the sidebar should collapse
+     *
+     * @return string
+     */
+    public function fullWidthClass() {
+        global $ACT;
+        // no auto collapsing? empty class
+        if (!tpl_getConf('autocollapse')) return '';
+        // mode show? empty class
+        if ($ACT === "show") return '';
+        // anything else? wide content
+        return 'wide-content ';
+    }
+
+    /**
+     * Get all the tabs to display
+     *
+     * @return array
+     */
+    public function getMetaBoxTabs() {
+        global $lang, $INFO;
+        $tabs = array();
+
+        $toc = tpl_toc(true);
+        if($toc) {
+            $tabs[] = array(
+                'id' => 'spr__tab-toc',
+                'label' => $lang['toc'],
+                'tab' => $toc,
+                'count' => null,
+            );
+        }
+
+        if($this->plugins['tagging']) {
+            $tabs[] = array(
+                'id' => 'spr__tab-tags',
+                'label' => tpl_getLang('tab_tags'),
+                'tab' => $this->plugins['tagging']->tpl_tags(false),
+                'count' => count($this->plugins['tagging']->findItems(array('pid' => $INFO['id']), 'tag')),
+            );
+        }
+
+        if ($this->plugins['magicmatcher']) {
+            $tabs[] = array(
+                'id' => 'spr__tab-issues',
+                'label' => tpl_getLang('tab_issues'),
+                'tab' => $this->plugins['magicmatcher']->getIssueListHTML(),
+                'count' =>  $this->plugins['magicmatcher']->getCountIssues(),
+            );
+        }
+
+        return $tabs;
+    }
+
+    /**
+     * Creates an image tag and includes the first found image correctly resized
+     *
+     * @param string $tag
+     * @param array $attributes
+     * @param int $w
+     * @param int $h
+     * @param bool $crop
+     * @return string
+     */
+    public static function getResizedImgTag($tag, $attributes, $w, $h, $crop = true) {
+        $attr = '';
+        $medias = array();
+
+        // the attribute having an array defines where the image goes
+        foreach($attributes as $attribute => $data) {
+            if(is_array($data)) {
+                $medias = $data;
+                $attr = $attribute;
+            }
+        }
+        // if the image attribute could not be found return
+        if(!$attr || !$medias) return '';
+
+        // try all medias until an existing one is found
+        $media = '';
+        foreach($medias as $media) {
+            if(file_exists(mediaFN($media))) break;
+            $media = '';
+        }
+        if($media === '') return '';
+
+        // replace the array
+        $media = ml($media, array('w' => $w, 'h' => $h, 'crop' => (int) $crop), true, '&');
+        $attributes[$attr] = $media;
+
+        // return the full tag
+        return '<' . $tag . ' ' . buildAttributes($attributes) . ' />' . "\n";
+    }
+
+    /**
+     * Embed the main logo
+     *
+     * Tries a few different locations
+     */
+    public function mainLogo() {
+        global $conf;
+
+        // homepage logo should not link to itself (BITV accessibility requirement)
+        $linkit = (strcmp(wl(), $_SERVER['REQUEST_URI']) !== 0);
+        if($linkit) {
+            $title = $conf['title'] . tpl_getLang('adjunct_linked_logo_text');
+        } else {
+            $title = tpl_getLang('adjunct_start_logo_text') . $conf['title'];
+        }
+
+        $logo = <<<HTML
+<img class="mobile-hide dark-only" src="/_media/wiki:logo-on.svg" alt="EH22 DEMO">
+<img class="mobile-hide light-only" src="/_media/wiki:logo-off.svg" alt="EH22 DEMO">
+HTML;
+
+        // homepage logo should not link to itself (BITV accessibility requirement)
+        if($linkit) {
+            tpl_link(wl(), $logo, 'accesskey="h" title="[H]"');
+        } else {
+            echo $logo;
+        }
+    }
+
+    /**
+     * Add the current mode information to the hierarchical breadcrumbs
+     */
+    public function breadcrumbSuffix() {
+        global $ACT;
+        global $lang;
+        global $INPUT;
+        global $ID;
+        global $conf;
+        global $IMG;
+        if($ACT == 'show') return;
+
+        // find an apropriate label for the current mode
+        if($ACT) {
+            $label = tpl_getLang('mode_' . $ACT);
+            if(!$label) {
+                if(isset($lang['btn_' . $ACT])) {
+                    $label = $lang['btn_' . $ACT];
+                } else {
+                    $label = $ACT;
+                }
+            }
+        } else {
+            // actually we would need to create a proper namespace breadcrumb path here,
+            // but this is the most simplest thing we can do for now
+            if(defined('DOKU_MEDIADETAIL')) {
+                $label = hsc(noNS($IMG));
+            } else {
+                return;
+            }
+        }
+
+        if($ACT == 'admin' && $INPUT->has('page')) {
+            $link = wl($ID, array('do' => 'admin'));
+            echo '<bdi> : <a href="' . $link . '"><strong>' . $label . '</strong></a></bdi>';
+
+            /** @var \DokuWiki_Admin_Plugin $plugin */
+            $plugin = plugin_load('admin', $INPUT->str('page'));
+            if(!$plugin) return;
+
+            $label = $plugin->getMenuText($conf['lang']);
+        }
+
+        echo '<bdi><span class="curid"> : <strong>' . $label . '</strong></span></bdi>';
+    }
+}

conf/default.php

@@ -4,6 +4,8 @@
  *
  */
 
-$conf['discussionPage']   = 'discussion:@ID@';
-$conf['userPage']         = 'user:@USER@:';
-$conf['hideTools']        = 0;
+$conf['sidebar_sections'] = 'h1,h2,h3,h4,h5';
+$conf['header_layout'] = 'header-default';
+$conf['autocollapse'] = 1;
+$conf['closedwiki'] = 0;
+$conf['copyright'] = '';

conf/metadata.php

@@ -1,9 +1,23 @@
 <?php
-/*
- * configuration metadata
- *
- */
 
-$meta['discussionPage']   = array('string');
-$meta['userPage']         = array('string');
-$meta['hideTools']        = array('onoff');
+$meta['sidebar_sections'] = array(
+                                'multichoice',
+                                '_choices' => array(
+                                    'h1',
+                                    'h1,h2',
+                                    'h1,h2,h3,h4,h5',
+                                    'li.level1 > .li',
+                                ),
+                            );
+
+$meta['header_layout'] = array(
+                            'multichoice',
+                            '_choices' => array(
+                                'header-default',
+                                'header-compact',
+                            ),
+                        );
+
+$meta['autocollapse'] = array('onoff');
+$meta['closedwiki'] = array('onoff');
+$meta['copyright'] = array('');

css/area_content.less

@@ -1,6 +1,64 @@
 /**
  * This file provides the design styles for the page content.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+.picker {
+    z-index: 2; // position over .content
+}
+
+.content .row {
+    > .col-xs-12 {
+        z-index: 1;
+
+        background-color: var(--color-background);
+
+
+        #dokuwiki__content {
+            position: relative;
+
+            .page-content {
+                padding-top: @page-header_height;
+
+                .msg-area + * {
+                    clear: both;
+                    padding-top: 1em; // as h1
+                }
+            }
+        }
+    }
+    @media @screen_min-md {
+        > .col-xs-12 {
+            border-left: dashed 0.25em var(--color-shade-4);
+            border-radius: 0;
+        }
+    }
+}
+
+.main-content > .level2,
+.main-content > .level1,
+.main-content > .level3,
+.main-content > .level4,
+.main-content > .level5,
+.main-content > .level6 {
+    > p,
+    > ul > li .li {
+        a {
+            font-size: inherit;
+        }
+    }
+}
+
+.level1,
+.level2,
+.level3,
+.level4,
+.level5,
+.level6 {
+    line-height: @line-height-default;
+
+    div, p, th, td, textarea,
+    h1, h2, h3, h4, h5, h6,
+    dl, dt, dd, ol, ul, li {
+        line-height: @line-height-default;
+    }
+}

css/area_footer.less

@@ -1,5 +1,125 @@
 /**
  * This file provides the design styles for the page footer
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* no print */
+@media screen {
+    .page-footer {
+        min-height: @page-header_height;
+        background-color: var(--color-background);
+        border-top: 1px solid var(--color-shade-4);
+        border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+        color: var(--color-shade-4);
+        font-size: @font-size-default;
+        text-align: right;
+        padding: @margin-small @margin-default;
+
+        *,
+        a:link,
+        a:visited {
+            color: inherit;
+        }
+
+        bdi {
+            display: inline-block;
+            max-width: 100%;
+            overflow-x: auto;
+            overflow-y: hidden;
+            font-weight: bold;
+            vertical-align: bottom;
+        }
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            position: relative;
+            box-sizing: border-box;
+            background-color: var(--color-background);
+            margin-top: 5px; // for box-shadow of content
+            text-align: center;
+        }
+
+        p {
+            color: var(--color-shade-4);
+            font-size: @font-size-default;
+            margin: 0;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1024px */
+@media @screen_min-md {
+    #dokuwiki__footer {
+        .col-xs-12 {
+            float: right;
+            width: 100%;
+        }
+
+        .main-footer {
+            padding: @margin-default 0;
+        }
+    }
+
+    .showSidebar {
+        #dokuwiki__footer {
+            .col-xs-12 {
+                width: @ini_site_width;
+            }
+        }
+    }
+
+    .wide-content {
+        &.showSidebar {
+            #dokuwiki__footer {
+                .col-xs-12 {
+                    width: 100%;
+                    padding-left: @toggle-showsidebar_width;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+    #dokuwiki__footer {
+        .main-footer {
+            margin-top: .5rem;
+            padding: (@margin-default - .5) 0 @margin-default;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-xs {
+    .page-footer {
+        padding-left: @margin-small;
+        padding-right: @margin-small;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 480px */
+@media @screen_max-xxs {
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: @margin-small;
+                padding-right: @margin-small;
+            }
+        }
+    }
+}

css/area_footnotes.less

@@ -0,0 +1,55 @@
+/**
+ * This file provides the design styles for the footnotes.
+ */
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes section  */
+.dokuwiki div.footnotes {
+  div.fn {
+    margin-bottom: .2rem;
+    display: table;
+    vertical-align: top;
+
+    > sup,
+    .content {
+      display: table-cell;
+    }
+
+    > sup {
+      vertical-align: top;
+
+      // footnote anchor
+      a.fn_bot {
+        font-size: .86em;
+        padding-right: .2em;
+      }
+    }
+
+    .content {
+      vertical-align: top;
+      line-height: 135%;
+    }
+
+    // footnote text
+    div.content {
+      line-height: 135%;
+    }
+  }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* footnotes in content  */
+.main-content sup,
+.main-content > div > p sup,
+.main-content > div > ul > li .li sup {
+  a.fn_top {
+    font-size: .7rem;
+    font-weight: bold;
+    padding-right: .2em;
+  }
+}
+
+.insitu-footnote {
+  line-height: 130%;
+  z-index: 100;
+}

css/area_forms.less

@@ -0,0 +1,301 @@
+/**
+ * This file provides the design styles for forms.
+ */
+
+/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */
+form {
+    display: inline;
+    margin: 0;
+    padding: 0;
+
+    // multiline label
+    fieldset > label.block > span:first-child {
+        display: inline-block;
+
+        @media @screen_min-lg {
+            width: 48.8%;
+        }
+
+        @media @screen_max-lg {
+            width: 48.5%;
+        }
+    }
+}
+
+fieldset {
+    font-size: @font-size-default;
+    line-height: 140%;
+    border: 1px solid @ini_text_alt;
+    padding: .7rem 1rem;
+
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    + p {
+        padding-top: 1rem;
+    }
+}
+
+legend {
+    margin: 0;
+    padding: 0 .1em;
+}
+
+label {
+    vertical-align: baseline;
+    cursor: pointer;
+}
+
+input,
+textarea,
+button,
+select,
+optgroup,
+option,
+keygen,
+output,
+meter,
+progress {
+    font: inherit;
+    font-weight: normal;
+    color: var(--color-foreground);
+    background-color: var(--color-background);
+    line-height: normal;
+    margin: 0;
+    vertical-align: middle;
+    box-sizing: border-box;
+}
+
+select {
+    max-width: 100%;
+}
+
+textarea.edit {
+    font-size: @font-size-default;
+}
+
+optgroup {
+    font-style: italic;
+    font-weight: bold;
+}
+
+option {
+    font-style: normal;
+    font-weight: normal;
+}
+
+input,
+textarea,
+select,
+keygen {
+    min-height: @formfield_min-height;
+    border: 1px solid var(--color-shade-4);
+    border-radius: @fix_border-radius;
+    padding-left: .3rem;
+    padding-right: .3rem;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+    min-height: 1rem;
+}
+
+input[type="radio"],
+input[type="checkbox"],
+input[type="image"] {
+    padding: 0;
+    border-style: none;
+    //box-shadow: none; :in ie picture and checkbox disappear
+}
+
+input:active,
+input:focus,
+textarea:active,
+textarea:focus,
+select:active,
+select:focus,
+keygen:active,
+keygen:focus {
+    border-color: var(--color-shade-4);
+}
+
+input[type="file"] {
+    padding-top: .1rem;
+    padding-bottom: .1rem;
+}
+
+/* + + + + +  buttons  + + + + + */
+button {
+    background-color: #eee;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    cursor: pointer;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: #ddd;
+        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%);
+        border-color: #999;
+    }
+}
+
+/* + + +  all types of submit-buttons  + + + */
+form input[type=submit], // heredity 'adnewpage'
+a.button,
+input[type=submit],
+input[type=reset],
+button[type=submit],
+.qq-upload-button {
+    cursor: pointer;
+    box-shadow: none;
+    background-image: none;
+    background-color: var(--color-shade-1);
+    border: solid 0.1rem var(--color-shade-2);
+    border-radius: 0.5rem;
+    color: var(--color-foreground);
+    vertical-align: top;
+    padding: .3em @grid;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: transparent;
+        color: var(--color-glow-primary);
+        border-color: var(--color-glow-primary);
+        transition: var(--transition-glow);
+        filter: var(--filter-glow-primary);
+    }
+}
+
+button[type='reset'] {
+    min-height: @formfield_min-height;
+    vertical-align: middle;
+    padding: .3em 1rem;
+}
+
+input[type=submit],
+button[type=submit] {
+    min-height: @formfield_min-height;
+    vertical-align: middle;
+
+    &[disabled] {
+        cursor: default;
+
+        &:hover,
+        &:active,
+        &:focus {
+            box-shadow: none;
+            background-image: none;
+            background-color: @ini_button_background;
+            color: @ini_button_color;
+            border-color: @ini_button_background;
+        }
+    }
+
+    + span {
+        display: block;
+        margin-top: @grid;
+    }
+}
+
+/* + + +  all types of buttons not being submit-buttons  + + + */
+input.button,
+input[type=button] {
+    cursor: pointer;
+    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: @fix_border-radius;
+    color: #333;
+    padding: .1em .5em;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        border-color: #999;
+        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%);
+    }
+}
+
+/* + + +  all disabled buttons  + + + */
+input[disabled],
+button[disabled],
+select[disabled],
+textarea[disabled],
+option[disabled],
+input[readonly],
+button[readonly],
+select[readonly],
+textarea[readonly] {
+    cursor: auto;
+    background-color: var(--color-background);
+    opacity: .5;
+    border: 1px solid @ini_border;
+    border-radius: @fix_border-radius;
+    color: var(--color-shade-4);
+    font-weight: normal;
+    padding: .3em @grid;
+    transition: @transition background-color, @transition color;
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: #ddd;
+        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%);
+        border-color: #999;
+        color: #333;
+    }
+}
+
+input::-moz-focus-inner,
+button::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries - Styles for auth forms */
+@media @screen_max-xs {
+    .tpl_sprintdoc {
+        #dw__login,
+        #dw__register,
+        #dw__resendpwd {
+            fieldset {
+                width: 100%;
+
+                label.block {
+                    text-align: left;
+
+                    > span:first-child {
+                        width: 100%;
+                    }
+
+                    input.edit {
+                        width: 100%;
+                        margin-top: .5rem;
+                    }
+                }
+            }
+        }
+
+        #dw__login {
+            label[for="remember__me"] {
+                width: 100%;
+                margin-left: 0;
+            }
+        }
+    }
+}

css/area_header.less

@@ -1,5 +1,282 @@
 /**
  * This file provides the design styles for the page header.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
+
+#dokuwiki__header {
+    @header-font-opacity: 1;
+
+    @media @screen_max-xs {
+        min-height: 120px;
+    }
+
+    /* + + +  wiki logo  + + + */
+    @media @screen_min-md {
+        .logo {
+            padding: 1rem 0 .3rem;
+            text-align: center;
+
+            img {
+                height: 200px;
+                width: auto;
+                transition: transform 200ms ease-in-out;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                img {
+                    transform: scale(1.05);
+                }
+            }
+        }
+    }
+
+    @media @screen_max-md {
+        .logo {
+            //display: table-cell;
+            text-align: center;
+            width: 100%;
+
+            img {
+                max-height: 200px;
+            }
+
+            .mobile-only {
+                margin: .8rem 1rem .6rem 0;
+            }
+        }
+    }
+
+    /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
+    .main-title.desktop-only {
+        @media @screen_min-md {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        @media @screen_max-md {
+            display: block;
+        }
+
+        p.title {
+            @media @screen_max-md {
+                display: none;
+            }
+        }
+
+        p.claim {
+            @media @screen_max-md {
+                display: block;
+                padding-bottom: 1rem;
+            }
+
+            @media @screen_max-xs {
+                padding-right: (@toggle-size + @headericons-margin-xxs);
+            }
+        }
+    }
+
+    /* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
+    .main-title:not([class*="desktop-only"]) {
+        @media @screen_max-md {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        @media @screen_max-xs {
+            padding-right: (@toggle-size + @headericons-margin-xxs);
+        }
+    }
+
+    /* + + +  wiki title  + + + */
+    p.title {
+        background-color: var(--color-background);
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        line-height: @line-height-default;
+        margin-bottom: .5rem;
+
+        @media @screen_min-md {
+            font-size: @font-size-big;
+        }
+
+        @media @screen_max-md {
+            font-size: (@font-size-default + .25);
+            padding-top: .5rem;
+            padding-left: 1rem;
+        }
+    }
+
+    /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
+    @media @screen_min-md {
+        div.claim {
+            display: table-cell;
+            height: 100%;
+            vertical-align: middle;
+        }
+    }
+
+    /* + + +  wiki claim  + + + */
+    p.claim {
+        opacity: @header-font-opacity;
+        color: @ini_text_webframe;
+        font-size: @font-size-default;
+        margin-bottom: 0;
+
+        @media @screen_max-md {
+            padding-top: .5rem;
+        }
+    }
+
+    /* + + +  mobile nav togglelink  + + + */
+    .menu-togglelink {
+        position: relative;
+        margin: @headericons-margin-xxs -(@very-small-spacing) 0 0;
+
+        a {
+            .fontello();
+            .icon-menu();
+            .btn-hover();
+
+            display: block;
+            min-height: @toggle-size;
+            min-width: @toggle-size;
+            box-sizing: border-box;
+            border: 1px solid @ini_border;
+            border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+            font-size: 1rem;
+            text-align: center;
+            text-decoration: none;
+            line-height: 1;
+
+            &::before {
+                font-size: 1.5rem;
+                margin: .1rem 0 0;
+            }
+        }
+    }
+
+    /* + + +  mobile select for doku wiki tools   + + + */
+    .menu-tool-select {
+        position: relative;
+        z-index: 1000;
+        display: none;
+        @media @screen_max-xxs {
+            display: block;
+        }
+
+        select {
+            display:  block;
+            width:100%;
+        }
+    }
+
+    /* + + + + +  with magic matcher  + + + + + */
+    &.has-magicmatcher {
+        .logo {
+            @media @screen_min-md {
+                padding-top: 3rem;
+            }
+        }
+
+        .main-title.desktop-only {
+            @media @screen_min-md {
+                vertical-align: bottom;
+                padding-top: @height-context-bar;
+                padding-bottom: 1rem;
+            }
+
+            p.title {
+                @media @screen_min-md {
+                    margin-right: 16rem;
+                }
+            }
+
+            p.claim {
+                @media @screen_max-md {
+                    display: block;
+                    padding-bottom: 1rem;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + +  layout option compact  + + + + + */
+.header-compact {
+    #dokuwiki__header {
+        min-height: 2.7rem;
+        margin-bottom: 0.5rem;
+
+        .main-title.desktop-only p.claim,
+        p.claim {
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            max-width: 35em;
+        }
+
+        // desktop
+        @media @screen_min-md {
+            div.claim {
+                vertical-align: top;
+            }
+
+            .main-title.desktop-only {
+                vertical-align: top;
+            }
+
+            .main-title.desktop-only,
+            .logo {
+                padding-top: 0.4rem;
+            }
+
+            .logo img {
+                height: 3.6rem;
+            }
+        }
+
+        // mobile middle
+        @media @screen_max-md {
+
+            .main-title.desktop-only p.claim,
+            p.claim {
+                display: none;
+            }
+
+            .logo {
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 3rem;
+
+                .mobile-only {
+                    margin: .4rem;
+                    height: 1.75rem;
+                }
+            }
+
+            .main-title:not([class*="desktop-only"]) {
+                display: inline-block;
+                vertical-align: top;
+                padding-left: 1.75rem;
+            }
+
+            p.title {
+                font-size: 1rem;
+            }
+        }
+        
+        @media @screen_max-xxs {
+            min-height: 70px; // needed for menu select toolbar
+
+            .logo {
+                left: 2rem;
+            }
+
+            .menu-tool-select {
+                padding-top: .3rem;
+            }
+        }
+    }
+}

css/area_main-content-anchor.less

@@ -0,0 +1,36 @@
+#dokuwiki__content.main-content {
+    h1, h2, h3, h4, h5 {
+        a.anchor {
+            vertical-align: middle;
+            margin-left: 0.25em;
+            display: none;
+            position: absolute;
+
+            svg {
+                width: 1em;
+                height: 1em;
+                fill: var(--color-foreground);
+            }
+        }
+
+        &:hover {
+            a.anchor {
+                display: inline-block;
+                transition-property: filter, border-color;
+                transition-duration: 200ms;
+                transition-timing-function: ease-out;
+
+                &:hover {
+                    color: var(--color-glow-primary);
+                    filter: var(--filter-glow-primary);
+                    transition: var(--transition-glow);
+
+                    svg {
+                        fill: var(--color-glow-primary);
+                    }
+                }
+
+            }
+        }
+    }
+}

css/area_main-content-secedit.less

@@ -0,0 +1,56 @@
+/**
+ * This styles the "section editing button" (if not added by data-plugin)
+ */
+
+#dokuwiki__content.main-content {
+    .secedit:not([class*="plugin"]):not([class*="table"]) {
+        position: relative;
+        top: 0;
+        float: right;
+        margin-top: 0; // for best position of edit-tab beneath table
+
+        form div.no {
+            button {
+                margin-top: -.4rem;
+                margin-right: -0.4rem;
+                padding: 0.2rem 0.4rem;
+            }
+        }
+
+        // "section editing button"
+        button {
+            display: flex;
+            align-items: center;
+            background-color: transparent;
+            color: transparent;
+            border-color: transparent;
+
+            &::after {
+                content: '';
+                display: inline-block;
+                background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
+                height: 1em;
+                width: 1em;
+                background-size: contain;
+                border: solid 2px transparent;
+                border-radius: @ini_default_border_radius;
+                margin-left: @small-spacing;
+                margin-top: -1px;
+
+                color: var(--color-foreground);
+                mask-size: contain;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                background: currentColor !important;
+
+                mask-image: url('img/pencil.svg');
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                .fnActiveButton();
+            }
+        }
+    }
+}

css/area_main-content.less

@@ -0,0 +1,50 @@
+/**
+ * This file provides the design styles for the main-content.
+ */
+
+#dokuwiki__content.main-content {
+    div[class^="level"] {
+        p a.media {
+            img {
+                border: 1px dotted var(--color-background);
+
+            }
+            &:hover,
+            &:focus,
+            &:active {
+                img {
+                    border: 1px solid @ini_existing;
+                }
+            }
+        }
+    }
+
+    > div,
+    div[class^="level"] {
+        > ul,
+        > ol {
+            &:not([class="tabs"]) > li {
+                margin-bottom: @small-spacing;
+            }
+        }
+    }
+
+    .wikipagefooter {
+        > hr {
+            margin-top: 3em;
+            margin-bottom: .5em;
+            border-top: dashed @ini_border_light 2px;
+            border-bottom: none;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+// @media @screen_min-xlg {
+// }
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1199px */
+// @media @screen_max-xlg {
+// }

css/area_main-sidebar-nav.less

@@ -0,0 +1,408 @@
+/**
+ * This file provides the design styles the navigational elements in the sidebar
+ */
+
+#dokuwiki__aside {
+    @icon-size: @font-size-big;
+    @menu-margin: @icon-size + @margin-small * 2;
+
+    @media @screen_md-lg {
+        margin-left: -1.25rem;
+    }
+
+    @media @screen_max-md {
+        display: none;
+    }
+
+    ul {
+        padding-left: 0;
+    }
+
+    nav {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+
+        &.nav-main {
+            margin-bottom: @nav-margin;
+        }
+
+        > p {
+            color: var(--color-foreground);
+
+            &.noissue {
+                color: @ini_text_webframe;
+
+                * {
+                    color: inherit;
+                }
+            }
+        }
+
+        ul,
+        div.nav {
+            margin-bottom: 0;
+        }
+
+        li {
+            color: var(--color-foreground);
+
+            > div {
+                color: @ini_text_webframe;
+            }
+
+            &.toggler {
+                list-style: none;
+                margin-left: 0;
+            }
+        }
+
+        li:not([class]),
+        .li {
+            padding: .15em 0;
+
+
+            /* + + + + +  active  + + + + + */
+
+            span.curid {
+                font-weight: bold;
+            }
+        }
+    }
+
+    a, label {
+        &:link,
+        &:visited {
+            opacity: .9;
+            color: var(--color-foreground);
+        }
+
+        * {
+            color: var(--color-foreground);
+        }
+    }
+
+    /* + + +  the wrapper around the toggle to reserve space  + + + */
+
+    div.nav {
+        min-height: @icon-size + @margin-small;
+        background-color: var(--color-background);
+        border-radius: 0.5rem;
+
+        &.themeToggle input {
+            width: 0;
+            height: 0;
+            margin: 0;
+            padding: 0;
+            display: block;
+            opacity: 0;
+        }
+
+        // the toggle element
+        a, label {
+            border-radius: 0.5rem;
+            background-color: var(--color-shade-1);
+            transition: background-color 150ms;
+            color: var(--color-foreground);
+            font-size: 1.2em;
+            border: solid 0.1em var(--color-shade-1);
+            transition-property: filter, border-color;
+            transition-duration: 200ms;
+            transition-timing-function: ease-out;
+
+
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            width: 100%;
+            opacity: 1;
+            font-weight: normal;
+            margin: 0 0 @very-small-spacing;
+            padding: 0.4rem 0.1rem;
+            text-decoration: none;
+
+            span {
+                display: inline-block;
+                vertical-align: middle;
+                color: inherit;
+            }
+
+            span.ico {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                i[data-icon] {
+                    font-size: 1.5rem;
+                }
+            }
+
+
+            /* + + +  submenu entry is active  + + + */
+            /* + + +  toggle: open  + + + */
+
+            &.is-active, &.is-open {
+                background-color: var(--color-shade-2);
+                border-color: var(--color-shade-4);
+                color: var(--color-foreground);
+
+                span.ico {
+                    &:after {
+                        background-color: currentColor;
+                    }
+
+                    strong {
+                        border-color: currentColor;
+                    }
+
+                    svg {
+                        path {
+                            fill: currentColor;
+                        }
+                    }
+                }
+            }
+        }
+
+        &:hover,
+        &:focus-within {
+            position: relative; // always show label, even with collapsed sidebar
+            z-index: 100;
+
+            a, label {
+
+                width: 100%;
+                background-color: transparent;
+                border: solid 0.1em var(--color-glow-primary);
+                text-decoration: none;
+                color: var(--color-glow-primary);
+                filter: var(--filter-glow-primary);
+                transition: var(--transition-glow);
+
+
+                span.ico {
+                    &:after {
+                        background-color: currentColor;
+                    }
+
+                    strong {
+                        border-color: inherit;
+                    }
+
+                    svg {
+                        path {
+                            fill: currentColor;
+                        }
+                    }
+                }
+            }
+
+        }
+
+        span.ico {
+            position: relative;
+            display: table-cell;
+            width: (@menu-margin - .1);
+            min-width: (@menu-margin - .1);
+            height: @icon-size;
+            text-align: center;
+            vertical-align: middle;
+            color: inherit;
+
+            &::after {
+                @border-height: 1.5rem;
+
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 50%;
+                bottom: auto;
+                height: @border-height;
+                width: 1px;
+                background-color: currentColor;
+                margin-top: -(@border-height / 2);
+
+                // wordbreak too late in IE 10
+                @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+                    top: 0;
+                    bottom: .5rem;
+                    height: 100%;
+                    margin: 0;
+                }
+            }
+
+            // simple fake icon
+            strong {
+                display: inline-block;
+                width: @icon-size * 0.98;
+                height: @icon-size * 0.98;
+                border: 2px solid currentColor;
+                border-top-right-radius: 50%;
+                border-bottom-left-radius: 50%;
+                color: inherit;
+                font-size: @icon-size * 0.5;
+                line-height: @icon-size * 0.9;
+                vertical-align: baseline;
+                text-align: center;
+                margin: @icon-size * 0.05;
+                padding: 0 .05em .05em;
+            }
+
+            // real icon
+            svg {
+                width: @icon-size;
+                height: @icon-size;
+
+                path {
+                    fill: currentColor;
+                    transition: @transition all;
+                }
+            }
+        }
+
+        span.lbl {
+            display: table-cell;
+            font-size: inherit;
+            padding-left: .5rem;
+        }
+    }
+
+    /* + + + + +  the panel (hidden by default)  + + + + + */
+
+    div.nav-panel {
+        display: none;
+        margin-top: .5rem;
+        margin-left: @margin-small;
+
+        ul {
+            margin-bottom: 1rem;
+
+            ul {
+                margin-bottom: 0;
+                margin-left: 16px;
+            }
+        }
+
+        ul.toollist li {
+            margin-left: 0;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+@media @screen_min-xlg {
+    #dokuwiki__aside {
+        nav {
+            li:not([class]),
+            .li {
+                font-size: @font-size-head6;
+
+                * {
+                    font-size: inherit;
+                    font-weight: inherit;
+                }
+
+                a {
+                    font-size: (@font-size-head6 - .05);
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1440px */
+@media @screen_max-xlg {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 0;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+    #dokuwiki__aside {
+        div.nav {
+            a {
+                margin-left: 0;
+            }
+        }
+    }
+
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            display: block !important;
+            position: absolute;
+            left: 1.25rem; // left margin of content container
+            box-shadow: @box-shadow-right-bottom;
+            min-width: 45%;
+            max-width: 90%;
+            height: auto;
+            background: var(--color-background);
+
+            > nav {
+                position: relative;
+
+                &:first-child {
+                    margin-top: 1.2rem;
+                }
+
+                a,
+                label {
+                    font-size: @font-size-small;
+                }
+            }
+
+            a.nav {
+                border-radius: 0;
+                border-right-width: 0;
+                border-left-width: 0;
+            }
+
+            div.nav-panel,
+            a.nav {
+                margin-top: 0;
+                padding-right: .8em;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-xs {
+    body.show-mobile-sidebar {
+        .page-wrapper > .tools {
+            top: 2.5rem;
+        }
+
+        #dokuwiki__aside {
+            left: 1.25rem;
+            right: 1.25rem;
+            width: auto;
+            max-width: 100%;
+            margin-top: -1rem;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 480px */
+@media @screen_max-xxs {
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            left: 4px;
+            right: 4px;
+
+            > nav {
+                a {
+                    font-size: @font-size-default;
+                }
+            }
+        }
+    }
+}

css/area_main-sidebar-search.less

@@ -0,0 +1,241 @@
+/**
+ * This file provides the design styles for the quick search.
+ */
+
+.search.main-sidebar {
+    @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
+    @icon-size: @page-header_height;
+    @icon-search_font-size: @font-size-big;
+
+    @media @screen_md-lg {
+        margin-left: -(@menu-margin-lg);
+    }
+
+    p.toggleSearch a,
+    button[type="submit"] {
+        .hide-text-show-before();
+
+        position: relative;
+        width: @icon-size;
+        min-height: @icon-size;
+        overflow: visible;
+        background-image: none;
+        background-color: transparent; // fix
+        border: solid 1px transparent;
+        padding: 0;
+        transition: @transition color, @transition background-color, @transition border-color;
+        display: flex;
+        align-items: center;
+
+        &:hover,
+        &:focus,
+        &:active {
+            .fnActiveButton();
+
+            &::after{
+                background-color: var(--color-glow-primary);
+            }
+        }
+
+        &::before {
+            width: @icon-size;
+            height: 0.8em;
+            font-size: @icon-search_font-size;
+            text-align: center;
+            margin: 0;
+            color: var(--color-foreground);
+            content: '';
+            display: block;
+            mask-size: contain;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            background-color: currentColor;
+
+
+            mask-image: url('img/search.svg');
+        }
+    }
+
+    p.toggleSearch {
+        display: none;
+        padding: 0;
+
+        a {
+            min-width: (@toggle-showsidebar_width + 0.1); /* must be a bit a wider than @toggle-showsidebar_width to hide right border */
+            width: @main-ico-dummy;
+            border-radius: 0.5rem 0 0 0.5rem;
+            border-right: none;
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+            text-decoration: none;
+            box-sizing: border-box;
+
+            &::before {
+                width: 100%;
+                color: inherit;
+                text-align: center;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                border-right: none;
+                background-color: transparent;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
+            }
+        }
+    }
+
+    button[type="submit"] {
+        position: absolute;
+        top: 1px;
+        bottom: 1px;
+        right: 0;
+        height: auto;
+        min-height: (@icon-size - .2);
+        color: @quicksearch-button-color;
+    }
+
+    /* + + +  form  + + + */
+    form {
+        position: relative;
+        display: block;
+        margin: 0 0 @margin-default;
+
+        .no {
+            display: block;
+
+            #qsearch__in {
+                width: 100%;
+                padding-left: 10px;
+                padding-right: @icon-size;
+            }
+        }
+
+        input {
+            min-height: @icon-size;
+            box-sizing: border-box;
+        }
+
+        button[type="submit"] {
+            border: solid 1px transparent;
+            margin-left: -(@icon-size);
+
+            &::after {
+                content: '';
+                position: absolute;
+                top: 15%;
+                bottom: 15%;
+                width: 1px;
+                left: -1px;
+                background-color: var(--color-shade-4);
+                transition: @transition background-color;
+            }
+        }
+
+        div.ajax_qsearch {
+            box-shadow: none;
+            background-color: var(--color-shade-1);
+            padding: 0;
+            z-index: 300; // otherwise hidden behind sidebar in mobile view
+            border: solid 0.1em var(--color-shade-4);
+            border-radius: 0.5rem;
+
+            > strong {
+                color: var(--color-foreground);
+                padding: 0.25rem 0.5rem;
+                border-bottom: solid 0.1em var(--color-shade-4);
+            }
+
+            ul li {
+                color: var(--color-foreground);
+
+                a {
+                    display: block;
+                    padding: 0.25rem 0.5rem;
+                    overflow: hidden;
+                    color: inherit;
+                    text-overflow: ellipsis;
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: var(--color-shade-2);
+                    }
+                }
+            }
+        }
+    }
+
+    /* + + + + +  suggestionlist  + + + + + */
+    #qsearch__out {
+        left: auto;
+        top: auto;
+        width: 100%;
+        min-width: 20rem;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1024px */
+@media @screen_min-md {
+
+    // wide page content
+    .wide-content {
+        .search.main-sidebar {
+            p.toggleSearch {
+                position: relative;
+                display: block;
+                float: left;
+                width: auto;
+            }
+
+            form {
+                input {
+                    border: 0 none;
+                }
+
+                .no {
+                    #qsearch__in {
+                        width: 0;
+                        padding: 0;
+                        margin: 0;
+                    }
+
+                    button[type="submit"] {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-md {
+
+    // show when toggled
+    body.show-mobile-sidebar {
+        #dokuwiki__aside {
+            padding: 0 1rem;
+            border-radius: 0.5rem;
+        }
+
+        p.toggleSearch {
+            display: none !important;
+        }
+
+        .search.main-sidebar {
+            display: block !important;
+            position: relative;
+            margin-left: -1px;
+            margin-right: -1px;
+
+            form {
+                margin-bottom: 1rem;
+            }
+        }
+    }
+}

css/area_main-sidebar-tabs.less

@@ -0,0 +1,33 @@
+/**
+ * This file provides the design styles for tab list in sidebar
+ */
+
+/* default view */
+#dokuwiki__aside ul.sidebar-tabs {
+    margin-top: 0;
+    margin-bottom: @nav-margin;
+
+    border-bottom: 1px solid @ini_nav_menu_color;
+
+    white-space: nowrap;
+
+    li {
+        display: inline-block;
+        border: 1px solid @ini_nav_menu_color;
+        padding: 0.25em 0.5em;
+        margin-bottom: -1px;
+        margin-left: 0.5em;
+        border-top-right-radius: @fix_border-radius;
+        border-top-left-radius: @fix_border-radius;
+
+        &.active {
+            border-bottom: 1px solid var(--color-background);
+            font-weight: bold;
+        }
+    }
+}
+
+/* wide content view */
+.wide-content #dokuwiki__aside ul.sidebar-tabs {
+    visibility: hidden;
+}

css/area_msg.less

@@ -0,0 +1,88 @@
+/**
+ * This file provides the design styles for message block
+ */
+
+.msg-area {
+    clear: both;
+    padding-top: 1.6rem;
+
+    div {
+        line-height: 135%;
+    }
+
+    &:empty {
+        display: none;
+    }
+}
+
+div.success,
+div.error,
+div.info,
+div.notify {
+    display: block;
+    border: none;
+    border-left: solid 0.5rem var(--color-shade-4);
+    border-radius: 0.5rem;
+    padding: 1em;
+    background-image: none;
+    background-color: var(--color-shade-1);
+
+    &::before {
+        display: inline-block;
+        content: "";
+        margin: 0.3em 0.2em 0 0;
+        width: 1em;
+        height: 1em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+        vertical-align: top;
+    }
+
+    &.success {
+        color: var(--color-success);
+
+        &::before {
+            mask-image: url(img/tick_small.svg);
+        }
+    }
+
+    &.error {
+        border-left-color: var(--color-error);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-error);
+            mask-image: url(img/power.svg);
+        }
+    }
+
+    &.info {
+        color: var(--color-foreground);
+
+        &::before {
+            mask-image: url(img/info.svg);
+        }
+    }
+
+    &.notify {
+        border-left-color: var(--color-warning);
+        color: var(--color-foreground);
+
+        &::before {
+            background-color: var(--color-warning);
+            mask-image: url(img/warning.svg);
+        }
+    }
+
+    a {
+        text-decoration: underline;
+
+        &:hover,
+        &:focus,
+        &:active {
+            text-decoration: none;
+        }
+    }
+}

css/area_nav-breadcrumb.less

@@ -0,0 +1,86 @@
+/**
+ * This file provides the design styles for the breadcrumb
+ */
+
+.breadcrumbs {
+    position: relative;
+    min-height: @page-header_height;
+    box-sizing: border-box;
+    background-color: var(--color-background);
+    border-bottom: 1px solid var(--color-shade-4);
+    padding: 1rem 1.8rem .2rem;
+
+    @media @screen_max-xs {
+        padding-left: @margin-small;
+        padding-right: .75rem;
+    }
+
+    > p {
+        font-size: @font-size-small;
+        margin: 0;
+
+        @media @screen_max-xs{
+            width: 0;
+            position: relative;
+            overflow: hidden;
+            height: 1.6rem;
+        }
+
+        * {
+            font-size: @font-size-small;
+        }
+
+        .bchead {
+            .sr-only();
+        }
+
+        span.home {
+            margin-left: -.2rem; // reverse spacing in home icon --> content text and home icon aligned
+
+            .wide-content & {
+                margin-left: .4rem; //toggle link has position absolute, hover on home icon needs more space than left padding of breadcrumb
+            }
+
+            a {
+                .fontello();
+                .hide-text-show-before();
+                .icon-home();
+
+                min-height: 1.8em;
+                min-width: 1.9em;
+                width: auto;
+                box-sizing: border-box;
+                background-color: var(--color-shade-1);
+                border: solid .1em transparent;
+                border-radius: 0.5rem;
+                vertical-align: middle;
+                text-decoration: none;
+                margin-top: -.2em;
+                transition: var(--transition-glow);
+
+                &:before {
+                    color: var(--color-foreground);
+                    font-size: @font-size-default + (@font-scale-factor * 2);
+                    margin-top: .17rem;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    &:before {
+                        color: var(--color-glow-primary);
+                    }
+
+                    background-color: transparent;
+                    border-color: var(--color-glow-primary);
+                    color: var(--color-glow-primary);
+                    filter: var(--filter-glow-primary);
+                }
+            }
+        }
+
+        bdi {
+            padding: .1em .1em 0;
+        }
+    }
+}

css/area_nav-direct.less

@@ -1,11 +1,9 @@
 /**
  * This file provides the design styles for the direct / menu jump links.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 .nav-direct {
-    background-color: __nav_direct_background__;
+    background-color: @nav_direct_background;
     margin-top: -1px;
 
     p {
@@ -16,18 +14,17 @@
         top: -1px;
         width: 100%;
         height: 1px;
-        z-index: 200;
 
         a:link,
         a:visited {
             .sr-out();
 
-            box-shadow: __box_shadow__;
+            box-shadow: @box-shadow;
             display: block;
             width: 100%;
-            background-color: __nav_direct_background__;
-            border-bottom: 1px solid __shadow_color__;
-            color: __nav_direct_color__;
+            background-color: @nav_direct_background;
+            border-bottom: 1px solid @ini_border_light;
+            color: @nav_direct_color;
             line-height: @line-height-default;
             text-decoration: none;
             padding: 1em;

css/area_nav-metabox.less

@@ -0,0 +1,400 @@
+/**
+ * This file provides the design styles for the metatabbox
+ */
+
+#spr__meta-box {
+    .display-flex();
+    .flex-direction();
+    .justify-content(flex-end);
+
+    clear: none;
+    display: block;
+    position: relative;
+    float: right;
+
+    box-sizing: border-box;
+    max-width: 40%;
+    padding-bottom: 0.5rem;
+    height: 4rem !important;
+
+    color: var(--color-foreground);
+
+    // >= 1024
+    @media @screen_min-md {
+        height: @page-header_height;
+        border: 0 none;
+    }
+
+    // < 1024
+    @media @screen_max-md {
+        position: relative;
+        top: .2rem;
+        right: auto;
+        float: none;
+        max-width: 100%;
+        min-height: @page-header_height;
+        height: auto;
+        border: 0 none;
+    }
+
+    &.sticky {
+        position: fixed;
+        top: 0;
+
+        ul.meta-tabs > li > a {
+            border-top-color: var(--color-background);
+            border-bottom-color: var(--color-shade-4);
+            border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
+
+        }
+
+        .meta-content .tab-pane.active {
+            max-height: 80vh;
+            overflow: auto;
+        }
+    }
+
+    + .msg-area + a {
+        clear: right;
+        margin-top: 20px;
+    }
+
+    .tab-container {
+        display: table;
+
+        @media @screen_max-md {
+            display: block;
+            width: 100%;
+        }
+    }
+
+    .box-content {
+        position: relative;
+        height: 0;
+        overflow-y: visible;
+    }
+
+
+    /* + + + + +  tab controls  + + + + + */
+    ul.meta-tabs {
+        list-style: none;
+        line-height: 160%;
+        margin: 0;
+        padding: 0;
+
+        @media @screen_min-md {
+            white-space: nowrap;
+            text-align: right;
+        }
+
+        &::before,
+        &::after {
+            content: '';
+            clear: both;
+            display: table;
+            box-sizing: border-box;
+        }
+
+        > li:first-child {
+            > a {
+                margin-left: 0;
+            }
+        }
+
+        > li {
+            position: relative;
+            display: inline-block;
+            vertical-align: bottom;
+            margin: 0;
+
+            @media @screen_min-md {
+                margin-left: .3rem;
+            }
+
+            @media @screen_max-md {
+                margin-right: .4rem;
+                margin-bottom: .2rem;
+            }
+
+            > a {
+                cursor: pointer;
+                position: relative;
+                display: block;
+                font-size: @font-size-small;
+                transition: var(--transition-glow);
+                background-color: var(--color-shade-1);
+                border: solid 0.1em transparent;
+                border-radius: 0.5rem;
+                color: var(--color-foreground);
+                padding: .25em;
+                margin-left: 0;
+
+                @media @screen_max-md {
+                    top: 0;
+                    margin-top: .2rem;
+                }
+
+                * {
+                    cursor: pointer;
+                    color: inherit;
+                    font-size: inherit;
+                }
+
+                .prefix {
+                    position: relative;
+                    color: inherit;
+                    font-size: @font-size-small;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    text-decoration: none;
+                    background-color: transparent;
+                    border-color: var(--color-glow-secondary);
+                    color: var(--color-glow-secondary);
+                    filter: var(--filter-glow-secondary);
+                }
+            }
+
+            &.active {
+                > a {
+                    cursor: default;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  toggle content  + + + + + */
+    .meta-content {
+        margin-top: -1px;
+
+        @media @screen_max-md {
+            clear: both;
+            margin-top: 2px;
+        }
+
+        .tab-pane {
+            position: absolute;
+            top: 0;
+            right: 0;
+            display: none;
+            width: 100%;
+            background-color: var(--color-shade-1);
+            border: solid .1em transparent;
+            border-radius: 0.5rem;
+
+            @media @screen_min-xs {
+                min-width: 20em;
+            }
+
+            @media @screen_min-md {
+                margin-top: 0.5rem;
+            }
+
+            &.active {
+                display: block;
+            }
+
+            a {
+                color: var(--color-foreground);
+            }
+
+            > div {
+                font-size: @font-size-small;
+                padding: .8rem .5rem .5rem;
+
+                * {
+                    font-size: inherit;
+                }
+
+                p {
+                    padding-left: 1em;
+                }
+
+                ul {
+                    list-style: none;
+                    padding-left: 0;
+                }
+
+                li {
+                    list-style-image: none; // overwrite universally styles
+                    margin-left: 0;
+                    padding-left: 1em;
+                }
+            }
+
+            &#spr__tab-tags {
+                > div {
+                    ul {
+                        li {
+                            padding-left: 0;
+                        }
+                    }
+                }
+            }
+
+            #dw__toc {
+                width: auto;
+                float: none;
+                margin: 0;
+                padding: .6rem .5rem .5rem .8rem;
+                background-color: transparent;
+                color: var(--color-foreground);
+                border: solid .1em var(--color-shade-4);
+                border-radius: 0.5rem;
+
+                h3 {
+                    display: none;
+                }
+
+                > div {
+                    padding: 0;
+                }
+
+                > div ul.toc {
+                    font-size: @font-size-small;
+                    padding-left: .5em;
+
+                    a {
+                        font-size: @font-size-small;
+                        display: inline-block;
+                        padding-left: 10px;
+                        position: relative;
+                    }
+
+                    div.li {
+                        position: relative;
+                        padding: .15em 0;
+
+                        &::before {
+                            content: '';
+                            position: absolute;
+                            top: .6em;
+                            left: 0;
+                            display: inline-block;
+                            width: 4px;
+                            height: 4px;
+                            overflow: hidden;
+                            background-color: var(--color-shade-4);
+                        }
+                    }
+                }
+
+                > div > ul.toc {
+                    padding: 0;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  tab issues  + + + + + */
+    #spr__tab-issues {
+        ul.mmissuelist {
+            padding-left: 0;
+            margin-top: 1rem;
+
+            li {
+                &.noissue {
+                    font-size: @font-size-small;
+                    list-style-type: none;
+                    margin-left: 0;
+
+                    .li {
+                        font-size: @font-size-small;
+                        margin-left: .5rem;
+                    }
+                }
+
+                a {
+                    display: inline-block;
+                }
+            }
+
+            img {
+                vertical-align: bottom;
+                margin-right: .3rem;
+            }
+
+            .mm__status {
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
+
+            form {
+                vertical-align: text-top;
+            }
+        }
+    }
+
+    /* + + + + +  tab issues  + + + + + */
+    /* see plugins/magic-matcher.less   */
+    #spr__tab-issues {
+        ul.mmissuelist {
+            padding-left: 0;
+            margin-top: .5rem;
+            margin-bottom: .6rem;
+
+            li {
+                list-style-type: none;
+                margin-top: .3rem;
+                margin-left: .5rem;
+
+                &.noissue {
+                    list-style-type: none;
+                    margin-left: 0;
+                }
+            }
+
+            a {
+                display: inline-block;
+                font-size: @font-size-small;
+
+                * {
+                    font-size: inherit;
+                }
+            }
+
+            img {
+                vertical-align: bottom;
+                margin-right: .3rem;
+            }
+
+            .mm__status {
+                display: inline-block;
+                text-decoration: none;
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
+
+            form {
+                vertical-align: text-top;
+
+                button {
+                    background: @ini_button_background;
+                    border-color: @ini_button_background;
+                    color: @ini_button_color;
+                    font-size: @font-size-small;
+                    padding: .2em .3em;
+
+                    &[name="removeIssue"] {
+                        min-width: 20px;
+                        font-size: .94rem;
+                        font-weight: bold;
+                        line-height: 95%;
+                        text-align: center;
+                        padding: 0 .1rem .1rem;
+                        margin-left: .5rem;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background: @ini_button_color;
+                        color: @ini_button_background;
+                    }
+                }
+            }
+        }
+    }
+}

css/area_nav-page-attributes.less

@@ -0,0 +1,54 @@
+/**
+ * Page Attribute Icons in the breadcrumb bar
+ */
+.page-attributes {
+    list-style: none;
+    float: right;
+    margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed
+    padding: 0;
+    display: flex;
+    gap: 0.5rem;
+
+    > li {
+        margin: 0;
+        padding: 0;
+        border: 1px solid @wikiicons-border;
+        border-radius: @ini_default_border_radius;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: @transition background-color, @transition border-color, @transition color;
+
+        // override any plugin element styles
+        * {
+            margin: 0;
+            padding: 0;
+            line-height: normal;
+            display: block;
+        }
+
+        // number badge
+        .btn-usertools-num();
+
+        // icon
+        svg {
+            height: 1.5em;
+            width: 1.5em;
+
+            path {
+                fill: @ini_nav_menu_color;
+            }
+        }
+
+        // adjust colors on hover
+        &:hover {
+            background-color: @ini_nav_menu_hover_color;
+            border-color: @ini_nav_menu_hover_color;
+
+            svg path {
+                fill: @ini_nav_menu_hover_bg;
+            }
+        }
+    }
+}

css/area_nav-pagetools.less

@@ -0,0 +1,192 @@
+/**
+ * This file provides the design styles for the page specific tool bar.
+ */
+
+/*
+ FIXME
+.pagetools-item(edit, 1);
+.pagetools-item(create, 2);
+.pagetools-item(show, 4);
+.pagetools-item(source, 5);
+.pagetools-item(draft, 3);
+.pagetools-item(revs, 7, revisions);
+.pagetools-item(backlink, 8, backlink);
+.pagetools-item(top, 10);
+.pagetools-item(revert, 6, revert);
+.pagetools-item(subscribe, 9, subscribe);
+.pagetools-item(mediaManager, 11);
+.pagetools-item(back, 12);
+.pagetools-item(img_backto, 12);
+*/
+
+#dokuwiki__aside {
+    @media @screen_max-md {
+        display: none !important;
+    }
+}
+
+nav#dokuwiki__pagetools {
+    @toolbox-size: 30px;
+
+    @page-tools_svg-size: 25px;
+    @page-tools_svg-space: (@toolbox-size - @page-tools_svg-size) / 2;
+    @item-width: (@page-tools_svg-size + @page-tools_svg-space + @page-tools_svg-space);
+    @item-height: (@page-tools_svg-size + @page-tools_svg-space);
+
+    top: 3.05rem;
+    position: absolute;
+
+    width: @item-width;
+
+    @media @screen_min-md {
+        right: -2.5rem;
+    }
+
+    @media @screen_max-md {
+        right: 8px;
+    }
+
+    @media @screen_max-xxs {
+        display: none;
+    }
+    div.tools {
+        position: fixed;
+        width: @item-width;
+    }
+
+    ul {
+        position: absolute;
+        right: 0;
+        text-align: right;
+        margin: 0;
+        padding: 0;
+        /* add transparent border to prevent jumping when proper border is added on hover */
+        border: 1px solid transparent;
+
+        li {
+            padding: 0;
+            margin: 0;
+            list-style: none;
+
+            a {
+                display: inline-table;
+                /* add transparent border to prevent jumping when proper border is added on focus */
+                border: 1px solid transparent;
+                white-space: nowrap;
+                vertical-align: middle;
+                height: @item-height;
+
+                position: relative;
+                line-height: 20px;
+                font-size: @font-size-default;
+                padding: 2px 0 2px 2px;
+
+                @media @screen_min-md {
+                    color: @ini_nav_menu_color;
+                }
+
+                @media @screen_max-md {
+                    color: @ini_existing;
+                }
+
+                &::before {
+                    display: none;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                }
+
+                &:focus {
+                    box-shadow: none;
+                    background-image: none;
+                    color: var(--color-glow-primary);
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
+
+                    span {
+                        position: relative;
+                        display: inline;
+                        width: auto;
+                        height: auto;
+                    }
+
+                    svg {
+                        fill: var(--color-glow-primary);
+                    }
+                }
+
+                span {
+                    .sr-only();
+
+                    padding-right: .5rem;
+                    padding-left: .3rem;
+                }
+
+                svg {
+                    display: inline-block;
+                    width: @page-tools_svg-size;
+                    height: @page-tools_svg-size;
+                    vertical-align: middle;
+                    border: solid 1px transparent;
+                    margin: @page-tools_svg-space;
+                    fill: var(--color-foreground);
+                }
+
+                &.top {
+                    margin-top: 1em;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        ul {
+            box-shadow: @box-shadow; // @box-shadow-offset;
+            background-color: var(--color-shade-1);
+            border-color: var(--color-shade-4);
+            border-radius: 0.5rem;
+
+            li {
+                color: var(--color-foreground);
+
+                a {
+                    box-shadow: none;
+                    background-image: none;
+                    border-color: transparent;
+                    color: inherit;
+
+                    svg {
+                        border: solid 1px transparent;
+                        border-radius: @ini_default_border_radius;
+                        fill: var(--color-foreground);
+                        transition: @transition background-color, @transition border-color, @transition fill;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        color: var(--color-glow-primary);
+                        transition: var(--transition-glow);
+                        filter: var(--filter-glow-primary);
+
+                        svg {
+                            background-color: transparent;
+                            border: none;
+                            fill: var(--color-glow-primary);
+                        }
+                    }
+
+                    span {
+                        position: static;
+                        width: auto;
+                        height: auto;
+                        margin: auto;
+                    }
+                }
+            }
+        }
+    }
+}

css/area_nav-usertools.less

@@ -1,21 +1,351 @@
 /**
  * This file provides the design styles for the direct / menu jump links.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-.nav-usertools {
+#dokuwiki__usertools.nav-usertools {
+    @media @screen_min-md {
+        right: 1.25rem;
+    }
+
+    @media @screen_max-md {
+        position: absolute;
+        top: 0;
+        left: (@toggle-size + 1.25); // margin-left content
+        right: @headericons-margin-xxs;
+        margin-top: 0;
+        margin-right: 0;
+    }
+
+    &.has-bar {
+        @media @screen_min-md {
+            margin-top: @height-context-bar;
+            padding-top: .5em;
+        }
+    }
+
+    /* + + + + +  icon list  + + + + + */
     ul {
         float: right;
+        padding: 0;
+        margin: (@very-small-spacing * 2) -.25rem 0 0;
+
+        @media @screen_max-md {
+            margin-right: .5rem;
+        }
+
+        @media @screen_max-xxs {
+            margin-right: -.3rem;
+        }
+
         li {
-            display: inline-block;
+            .btn-usertools-wrapper(); // uniform li
+            .btn-usertools-num();
+
             float: right;
-            border: 1px solid @color-border;
-            *{
-                font-size: .8rem;
+
+            @media @screen_max-xs {
+                display: block;
+                float: none;
+
+                margin-bottom: @headericons-margin-xxs;
             }
-            a{
-                .profile;
+
+            @media @screen_max-xxs {
+                margin-bottom: (@headericons-margin-xxs - .2);
+                display: none;
+            }
+
+            > span,
+            > a {
+                display: block;
+                width: auto;
+                min-width: (@toggle-size + .25);
+                min-height: @toggle-size;
+                overflow: hidden;
+                border: 1px solid @wikiicons-border;
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                text-align: center;
+                margin: 0;
+
+                @media @screen_md-xlg {
+                    padding-top: .14rem;
+                }
+            }
+
+            /* !!! &.user-task FIND in plugins/do_tasks.less !!! */
+            &.user {
+                position: relative;
+                display: table-cell;
+                background-color: var(--color-shade-1);
+                border: solid 1px var(--color-shade-2);
+                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                color: var(--color-foreground);
+                padding-right: .3rem;
+
+                @media @screen_max-md {
+                    min-height: @toggle-size;
+                }
+
+                @media @screen_max-xs {
+                    position: absolute;
+                    top: @headericons-margin-xxs;
+                    right: (@toggle-size + @headericons-margin-xxs + 1); // 1.75rem + 1 + (button login/out margin-right)
+                    overflow: hidden;
+                    white-space: nowrap;
+                    margin: -1px 0 0;
+                }
+
+                @media @screen_max-xxs {
+                    left: -10px;
+                    right: 0;
+                    width: auto;
+                }
+
+                > a {
+                    .display-flex();
+                    .align-items();
+
+                    position: relative;
+                    height: 1rem; // for IE11
+                    overflow: visible;
+                    background: var(--color-shade-1); // for removing bg-image
+                    border: 0 none;
+                    color: var(--color-foreground);
+                    text-indent: 0;
+                    font-size: inherit;
+                    margin-right: -.3rem;
+                    padding: 0 .2em 0 0;
+
+                    @media @screen_min-xxlg {
+                        min-height: (@toggle-size - .1);
+                        margin-top: -.4rem;
+                    }
+
+                    @media @screen_max-xxlg {
+                        min-height: (@toggle-size - .15);
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-md {
+                        min-height: (@toggle-size - .1);
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-sm {
+                        margin-top: -.35rem;
+                    }
+
+                    @media @screen_max-xs {
+                        margin-top: -.4rem;
+                    }
+
+                    &::before {
+                        content: '';
+                        top: -1px;
+                        bottom: -1px;
+                        left: -1px;
+                        right: -1px;
+                        width: auto;
+                        opacity: 0;
+                        border: solid 1px var(--color-shade-2);
+                        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                        color: inherit;
+                        transform: none;
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: transparent;
+                        color: var(--color-glow-secondary);
+                        filter: var(--filter-glow-secondary);
+                        transition: var(--transition-glow);
+
+                        &::before {
+                            opacity: 1;
+                            filter: var(--filter-glow-secondary);
+                            border-color: var(--color-glow-secondary);
+                        }
+
+                        bdi,
+                        bdi:first-of-type {
+                            color: @ini_nav_menu_hover_bg;
+                        }
+                    }
+                }
+
+                bdi {
+                    display: inline-block;
+                    color: inherit;
+                }
+
+                bdi:first-of-type {
+                    .fontello();
+                    .icon-user-circle();
+
+                    position: relative;
+                    margin: 0 0 0 .25rem;
+                    padding: 0 .1rem 0 1.3rem;
+
+                    &::before {
+                        position: absolute;
+                        top: 2px;
+                        left: -2px;
+                        font-size: @font-size-default + (@font-scale-factor * 4);
+                        margin: 0;
+                    }
+                }
+            } // user
+        } // li
+
+        /* + + +  icons  + + + */
+        .menuitem, button {
+            padding: 2px 0 0 2px;
+            min-height: @toggle-size; // overrides button[type="submit"] styles
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+            border: solid 1px var(--color-shade-2); // overrides button[type="submit"] styles
+            .btn-hover();
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: transparent;
+                border-color: var(--color-glow-secondary);
+                color: var(--color-glow-secondary);
+                filter: var(--filter-glow-secondary);
+            }
+
+            &:hover svg,
+            &:active svg,
+            &:focus svg {
+                transition: @transition fill;
+                fill: var(--color-glow-secondary);
+            }
+
+            svg {
+                fill: var(--color-shade-1);
+                height: @font-size-default + (@font-scale-factor * 4);
+            }
+
+            span {
+                display: none;
+            }
+        }
+
+        a { // Pre-Greebo backwards compatibility, remove after transitioning to Greebo
+            .fontello();
+            .hide-text-show-before();
+            .btn-hover();
+
+            background-color: var(--color-shade-1);
+            cursor: pointer;
+            position: relative;
+            line-height: 1;
+            text-decoration: none;
+
+            &::before {
+                .center-middle();
+
+                content: "?";
+                cursor: pointer;
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                font-size: @font-size-default + (@font-scale-factor * 4);
+                line-height: 1;
+            }
+
+            /* icon register new user */
+            &.register {
+                .icon-user();
+            }
+
+            /* icon log-out */
+            &.logout {
+                .icon-logout();
+            }
+
+            /* icon log-in */
+            &.login {
+                .icon-login();
+            }
+
+            /* icon admin */
+            &.admin {
+                .icon-cog();
+
+                &::before {
+                    vertical-align: top;
+                }
+            }
+        } // a
+    } // ul
+} // nav-usertools
+
+/* + + + + +  layout option compact  + + + + + */
+.header-compact {
+    #dokuwiki__usertools.nav-usertools {
+
+        // mobile
+        @media @screen_max-md {
+            left: 6rem;
+
+            ul {
+                overflow: hidden;
+
+                li.user {
+                    color: var(--color-background);
+
+                    bdi {
+                        position: absolute;
+                        width: 0;
+                        padding: 0;
+                        text-indent: -10000px;
+
+                        &:before {
+                            transition: @transition background-color;
+                            background-color: var(--color-shade-1);
+                            color: var(--color-foreground);
+                            text-indent: 0;
+                        }
+                    }
+
+                    > a {
+                        padding: 0 .2em;
+                        color: @ini_nav_menu_hover_bg;
+
+                        bdi {
+                            &:before {
+                                background-color: var(--color-shade-1);
+                                color: var(--color-foreground);
+                            }
+                        }
+
+                        &:hover {
+                            color: var(--color-glow-secondary);
+
+                            bdi {
+                                &:before {
+                                    background-color: transparent;
+                                    color: var(--color-glow-secondary);
+                                }
+                            }
+                        }
+                    }
+
+                    bdi + bdi {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        @media @screen_max-sm {
+            ul li {
+                position: static;
+                float: right;
+                top: 0; right: 0;
             }
         }
     }

css/area_recent.less

@@ -0,0 +1,167 @@
+/**
+ * This file provides the design styles for page revisions
+ */
+
+.dokuwiki {
+
+    /* + + + + +  list of changes  + + + + + */
+    form.changes {
+        li {
+            .sizechange {
+                color: @color-editBox;
+
+                &.positive {
+                    background-color: var(--color-success);
+                    color: var(--color-background);
+                }
+
+                &.negative {
+                    background-color: var(--color-error);
+                    color: var(--color-foreground);
+                }
+            }
+        }
+
+        > .no > ul > li {
+            min-height: @formfield_min-height;
+            vertical-align: baseline;
+            margin-bottom: @small-spacing;
+
+            .li {
+                line-height: 150%;
+
+                > * {
+                    min-height: 10px;
+                }
+            }
+
+            a,
+            span,
+            img {
+                vertical-align: baseline;
+            }
+
+            img {
+                margin-left: @small-spacing;
+                margin-right: @small-spacing;
+            }
+
+            input[type="checkbox"] {
+                margin: 0 .5rem .2rem -1.5rem;
+            }
+
+            span.user bdi {
+                a {
+                    vertical-align: baseline;
+                }
+            }
+        }
+    }
+
+    /* + + + + +  view of differents  + + + + + */
+    a.difflink {
+        color: @ini_existing;
+
+        * {
+            color: inherit;
+        }
+    }
+
+    .diffnav {
+        a {
+            background-color: var(--color-background);
+            border: solid 1px var(--color-background);
+            border-radius: 0.5rem;
+            color: var(--color-foreground);
+
+            &::before {
+                background-color: inherit;
+                border: 0 none;
+                color: inherit;
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                background-color: transparent;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
+                transition: var(--transition-glow);
+                filter: var(--filter-glow-primary);
+
+                &::before {
+                    background-color: inherit;
+                    color: inherit;
+                }
+            }
+        }
+    }
+
+    table.diff {
+        background-color: var(--color-background);
+        border: none;
+
+        &.diff_inline {
+            border-top-width: 0;
+
+            .diffnav {
+                padding-top: 10px;
+                padding-bottom: 10px;
+            }
+        }
+
+        th {
+            background-color: var(--color-background);
+            color: var(--color-foreground);
+            padding-top: 10px;
+            padding-bottom: 10px;
+
+            &.minor {
+                color: #999;
+            }
+        }
+
+        td {
+            background-color: transparent;
+            color: var(--color-text-1);
+
+            &.diff-blockheader {
+                background-color: transparent;
+                color: var(--color-foreground);
+            }
+
+            &.diff-context {
+                background-color: transparent;
+                color: var(--color-text-1);
+            }
+        }
+
+        .diff-addedline {
+            background-color: var(--color-success-highlight);
+            color: var(--color-foreground);
+
+            strong {
+                background-color: transparent;
+                color: var(--color-success) !important;
+            }
+        }
+
+        .diff-deletedline {
+            background-color: var(--color-error-highlight);
+            color: var(--color-foreground);
+
+            * {
+                color: inherit;
+            }
+
+            strong {
+                background-color: transparent;
+                color: var(--color-error) !important;
+            }
+        }
+
+        .diff-lineheader {
+            background-color: transparent;
+        }
+    }
+}

css/area_search.less

@@ -0,0 +1,9 @@
+/**
+ * This file provides the design styles for the search results
+ */
+
+/* search hit in normal text */
+.dokuwiki .search_hit {
+    background-color: @ini_highlight;
+    color: @ini_highlight_text;
+}

css/area_tabs.less

@@ -0,0 +1,45 @@
+/**
+ * This file provides styles for tab boxes
+ */
+
+/* + + + + +  tabs  + + + + + */
+#dokuwiki__content {
+    ul.tabs {
+        li:not([class~="active"]) {
+            strong,
+            a {
+                transition: @transition background-color, @transition color;
+            }
+
+            a {
+                background-color: var(--color-shade-2);
+                color: var(--color-accent-1);
+            }
+            strong {
+                background-color: var(--color-shade-3);
+                color: inherit;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                color: var(--color-accent-3);
+            }
+        }
+    }
+
+    .tabs > ul {
+        li:not([class~="active"]) {
+            a {
+                color: @ini_text_neu;
+                transition: @transition background-color, @transition color;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                color: @ini_text;
+            }
+        }
+    }
+}

css/area_togglelink.less

@@ -0,0 +1,78 @@
+/**
+ * This file provides the design styles for the sidebar (navmain).
+ */
+
+.togglelink {
+    &.page_main-content {
+        position: absolute;
+        top: 0;
+        bottom: -1px;
+        width: 2rem;
+        left: -(@margin-default + 0.25rem);
+
+        @media @screen_max-md {
+            display: none;
+        }
+
+        a {
+            position: absolute;
+            inset: 0;
+
+            width: @margin-default;
+            height: 100%;
+            background-color: transparent;
+            border: solid 1px var(--color-shade-4);
+            border-right-style: none;
+            border-radius: 0.5rem 0 0 0.5rem;
+            color: var(--color-shade-4);
+            text-decoration: none;
+            transition: @transition color, @transition background-color, @transition border-color;
+
+            &::before {
+                content: '';
+                display: block;
+                position: absolute;
+                inset: 0.3rem;
+                mask-size: contain;
+                mask-position: center;
+                mask-repeat: no-repeat;
+                background-color: currentColor;
+                mask-image: url('img/arrow_left.svg');
+
+            }
+
+            &:hover,
+            &:focus,
+            &:active {
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
+                text-decoration: none;
+
+                * {
+                    color: inherit;
+                    text-decoration: none;
+                }
+
+                filter: var(--filter-glow-primary);
+                transition: var(--transition-glow);
+
+            }
+        }
+
+        /* + + +  toggle out  + + + */
+
+        .wide-content & {
+            left: 0;
+
+            a {
+                border-radius: 0 0.5rem 0.5rem 0;
+                border-style: solid;
+                border-left-style: none;
+
+                &::before {
+                    mask-image: url('img/arrow_right.svg');
+                }
+            }
+        }
+    }
+}

css/base.less

@@ -1,23 +1,104 @@
 /**
- * This file provides the basic vars and reset styles.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * This file provides the basic/reset styles.
  */
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font_family_screen:       "Athiti", ui-sans, sans-serif;
+@font_family_print:        "Athiti", ui-sans, sans-serif;
 
+@nav_direct_background:     var(--color-background);
+@nav_direct_color:         @ini_existing;
 
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@background_darker:        rgba(230,230,230, .2);
+@ini_sidebar_width:        (100 - @ini_site_width) - 4;
+
+@height-context-bar:       50px;
+
+@margin-small:             1rem;
+@margin-default:           2rem;
+@margin-big:               3.07rem;
+@nav-margin:               1.3rem;
+
+@small-spacing:            .3rem;
+@very-small-spacing:       .2rem;
+
+@grid:                     @margin-small;
+@toggle-size:              1.75rem;
+
+@transition:               ease-out .30s;
+
+@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
+@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
+@box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
+@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
+@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
+
+/* + + +  for programmers customizing  + + + */
+@fix_border-radius:        0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
+
+@toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
+
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
+
+@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
+@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
+@meta-box_height:          (@page-header_height - @page_padding-top);
+@breadcrumb_height:        @page-header_height;
+
+@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
+
+@code-background:          #F6F6F6; /* code, pre, samp, kbd */
+
+/* icons */
+@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
+@noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
+
+/* navigation left */
+@menu-margin-lg: 1.3rem;
+
+@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
+@suggestion-zebra:         #EEE;
+
+/* edit mode */
+@highlight-odd-ini_text:  fade(@ini_background, 95%);
+@highlight-even-ini_text: fade(@ini_text, 5%);
+@color-editBox:           var(--color-foreground); // editmode for tables, revision states
+
+//@nolinkedicon-ini_background: fade(@ini_background_site, 10%);
+//@opacity-ini_nav_menu_color:  fade(@ini_nav_menu_color, 40%);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font-size-very-small:     .73rem;
+@font-size-small:          .88rem;
+@font-size-default:        1rem;
+@font-size-big:            1.5rem;
+@font-size-bigger:         1.75rem;
+
 @line-height-default:      125%;
 @line-height-big:          135%;
 @line-height-bigger:       140%;
 
+@font-weight-bold:         800;
+@font-weight-normal:       400;
 
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font-scale-factor:        .0769;
+
+@font-size-head6: @font-size-default;
+@font-size-head5: @font-size-default + @font-scale-factor;
+@font-size-head4: @font-size-default + (@font-scale-factor * 3);
+@font-size-head3: @font-size-default + (@font-scale-factor * 5);
+@font-size-head2: @font-size-default + (@font-scale-factor * 7);
+@font-size-head1: @font-size-default + (@font-scale-factor * 9);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* breakpoints */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @break-min-xxs: 480;
 @break-max-xxs: (@break-min-xxs - 1);
 
@@ -25,7 +106,7 @@
 @break-max-xs: (@break-min-xs - 1);
 
 @break-min-sm: 992;
-@break-max-sm: (@break-min-xs - 1);
+@break-max-sm: (@break-min-sm - 1);
 
 @break-min-md: 1024;
 @break-max-md: (@break-min-md - 1);
@@ -36,10 +117,12 @@
 @break-min-xlg: 1440;
 @break-max-xlg: (@break-min-xlg - 1);
 
+@break-min-xxlg: 1600;
+@break-max-xxlg: (@break-min-xxlg - 1);
 
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries for breakpoints */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
 @screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
 
@@ -51,7 +134,6 @@
 
 @screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
 @screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
-@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
 
 @screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
 @screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
@@ -59,9 +141,18 @@
 @screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
 @screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
 
+@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
+@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
 
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
+@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
+@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
+@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* col width */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @c12:               100%;
 @c11:               91.66666667%;
 @c10:               83.33333333%;
@@ -77,64 +168,179 @@
 
 @grid-columns:      12;
 
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* margin / padding */
-@margin-big: 2.5rem;
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 700;
+    src: url("fonts/athiti/Athiti-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 600;
+    src: url("fonts/athiti/Athiti-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 500;
+    src: url("fonts/athiti/Athiti-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 400;
+    src: url("fonts/athiti/Athiti-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 300;
+    src: url("fonts/athiti/Athiti-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Athiti";
+    font-weight: 200;
+    src: url("fonts/athiti/Athiti-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Departure Mono";
+    src: url("fonts/departuremono/DepartureMono-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 100;
+    src: url("fonts/argonglow/ArgonGlow-Thin.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 200;
+    src: url("fonts/argonglow/ArgonGlow-ExtraLight.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 300;
+    src: url("fonts/argonglow/ArgonGlow-Light.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 400;
+    src: url("fonts/argonglow/ArgonGlow-Regular.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 500;
+    src: url("fonts/argonglow/ArgonGlow-Medium.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 600;
+    src: url("fonts/argonglow/ArgonGlow-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    font-weight: 700;
+    src: url("fonts/argonglow/ArgonGlow-Bold.woff2") format("woff2");
+}
+
+@font-face {
+    font-family: "Argon Glow";
+    src: url("fonts/argonglow/ArgonGlow-VariableVF.woff2") format("woff2");
+    font-weight: 100 900;
+}
 
-@color-border: __border__;
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-html, body{
-    font-size: 100.1%;
+html,
+body {
     .reset();
+    font-size: 100.1%;
 }
 
-header, .nav-direct{
+header,
+.nav-direct{
     .elementsReset();
 }
 
-
-
-div, span, object,
-h1, h2, h3, h4, h5, h6, p, blockquote,
-a, abbr, em,acronym, img, strong,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-input, select, option, textarea, button{
-    font-size: 1rem; line-height: 100%;
+ol,
+ul {
+    list-style: none outside none;
 }
 
+blockquote,
+q {
+    quotes: none;
+}
 
-ol, ul{ list-style: none outside none; }
-blockquote, q{ quotes: none; }
-acronym{ cursor: help; border-bottom: dotted 1px #333; }
+acronym {
+    cursor: help;
+    border-bottom: dotted 1px @ini_text;
+}
 
-*:focus{ outline: 0; }
+*:focus {
+    outline: 0;
+}
 
-table{ border-collapse: collapse; border-spacing: 0; empty-cells: show; caption-side: top; }
-caption, th, td{ text-align: left; vertical-align: top; }
+table{
+    border-collapse: collapse;
+    border-spacing: 0;
+    empty-cells: show;
+    caption-side: top;
+}
 
-img{ display: block; float: none; border: none 0; line-height: @line-height-default; }
+caption,
+th,
+td {
+    text-align: left;
+    vertical-align: top;
+}
 
-*, div, nav, header{
+img {
+    display: block;
+    float: none;
+    border: none 0;
+    line-height: @line-height-default;
+}
+
+*,
+div,
+nav,
+header {
     box-sizing: border-box;
 }
 
-header, footer, .container, .row, nav, nav > ul{
-    &::before, &::after{
+header,
+footer,
+.container,
+.row, nav,
+nav > ul {
+    &::before,
+    &::after {
         display: table;
-        content: "  ";
+        content: ' ';
         clear: both;
     }
 }
 
-
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* css behaviour */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 .sr-out {
     .sr-out();
 }
@@ -143,14 +349,20 @@ header, footer, .container, .row, nav, nav > ul{
     .sr-only();
 }
 
-.structure, .none, .mobile-only {
+.clearer{
+    clear: both;
+}
+
+.structure,
+.none,
+.mobile-only {
     display: none;
 }
 
 .mobile-only {
     display: none;
 
-    @media @screen_max-xs {
+    @media @screen_max-md {
         display: inline-block;
     }
 }
@@ -158,11 +370,192 @@ header, footer, .container, .row, nav, nav > ul{
 .mobile-hide {
     display: inline-block;
 
-    @media @screen_max-xs {
+    @media @screen_max-md {
         display: none;
     }
 }
 
+.desktop-only {
+    display: none;
+    @media @screen_min-md {
+        display: inline-block;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* variables */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+:root {
+    --color-neutral-50: #F2F0F5;
+    --color-neutral-100: #D1C6E0;
+    --color-neutral-200: #B2A0CB;
+    --color-neutral-300: #957EB5;
+    --color-neutral-400: #7A60A0;
+    --color-neutral-500: #61468B;
+    --color-neutral-600: #4B3176;
+    --color-neutral-700: #371F60;
+    --color-neutral-800: #26114B;
+    --color-neutral-900: #180736;
+    --color-neutral-950: #0C011F;
+    --color-argon-50: #E1ABC9;
+    --color-argon-100: #DA87B5;
+    --color-argon-200: #D464A1;
+    --color-argon-300: #CD448F;
+    --color-argon-400: #C6257D;
+    --color-argon-500: #B0166F;
+    --color-argon-600: #9A0A61;
+    --color-argon-700: #830755;
+    --color-argon-800: #6D0449;
+    --color-argon-900: #56023C;
+    --color-argon-950: #3F012D;
+    --color-krypton-50: #B2D9EA;
+    --color-krypton-100: #8CC9E4;
+    --color-krypton-200: #69BADE;
+    --color-krypton-300: #4BADD8;
+    --color-krypton-400: #2493C2;
+    --color-krypton-500: #167FAC;
+    --color-krypton-600: #0A6C96;
+    --color-krypton-700: #075C81;
+    --color-krypton-800: #044C6B;
+    --color-krypton-900: #023C55;
+    --color-krypton-950: #012C3F;
+    --color-green-50: #C0F49A;
+    --color-green-100: #A7E57A;
+    --color-green-200: #8FD75D;
+    --color-green-300: #7AC843;
+    --color-green-400: #66B92D;
+    --color-green-500: #54AA18;
+    --color-green-600: #47990F;
+    --color-green-700: #397E0A;
+    --color-green-800: #2B6206;
+    --color-green-900: #1F4703;
+    --color-green-950: #122B01;
+    --color-red-50: #E6AFAF;
+    --color-red-100: #DD9090;
+    --color-red-200: #D57272;
+    --color-red-300: #CC5757;
+    --color-red-400: #C33D3D;
+    --color-red-500: #BB2626;
+    --color-red-600: #B21010;
+    --color-red-700: #950808;
+    --color-red-800: #780404;
+    --color-red-900: #5C0202;
+    --color-red-950: #3F0101;
+
+    --color-white: #FFFFFF;
+
+    --color-dark-foreground: var(--color-neutral-50);
+    --color-dark-background: var(--color-neutral-950);
+    --color-dark-shade-1: var(--color-neutral-900);
+    --color-dark-shade-2: var(--color-neutral-800);
+    --color-dark-shade-3: var(--color-neutral-700);
+    --color-dark-shade-4: var(--color-neutral-600);
+    --color-dark-text-1: var(--color-neutral-200);
+    --color-dark-text-2: var(--color-neutral-300);
+    --color-dark-text-3: var(--color-neutral-400);
+    --color-dark-text-4: var(--color-neutral-500);
+    --color-dark-primary: var(--color-argon-400);
+    --color-dark-secondary: var(--color-krypton-300);
+    --color-dark-error: var(--color-red-500);
+    --color-dark-error-highlight: var(--color-red-950);
+    --color-dark-success: var(--color-green-500);
+    --color-dark-success-highlight: var(--color-green-950);
+    --color-dark-warning: #efb100;
+    --color-dark-highlight: #efb10060;
+    --color-dark-accent-1: #60a5f9;
+    --color-dark-accent-2: #d381f7;
+    --color-dark-accent-3: #ff7975;
+
+    --color-light-foreground: var(--color-neutral-950);
+    --color-light-background: var(--color-neutral-50);
+    --color-light-shade-1: var(--color-neutral-100);
+    --color-light-shade-2: var(--color-neutral-200);
+    --color-light-shade-3: var(--color-neutral-300);
+    --color-light-shade-4: var(--color-neutral-400);
+    --color-light-text-1: var(--color-neutral-800);
+    --color-light-text-2: var(--color-neutral-700);
+    --color-light-text-3: var(--color-neutral-600);
+    --color-light-text-4: var(--color-neutral-500);
+    --color-light-primary: var(--color-argon-600);
+    --color-light-secondary: var(--color-krypton-500);
+    --color-light-error: var(--color-red-600);
+    --color-light-error-highlight: var(--color-red-50);
+    --color-light-success: var(--color-green-600);
+    --color-light-success-highlight: var(--color-green-50);
+    --color-light-warning: #d08700;
+    --color-light-highlight: #d0870060;
+    --color-light-accent-1: #303EC0;
+    --color-light-accent-2: #6c366c;
+    --color-light-accent-3: #932f0a;
+
+    --color-cmyk-primary: var(--color-dark-primary);
+    --color-cmyk-secondary: var(--color-dark-secondary);
+
+    --text-xs: 0.75rem;
+    --text-sm: 0.875rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.25rem;
+    --text-2xl: 1.5rem;
+    --text-3xl: 1.875rem;
+    --text-4xl: 2.25rem;
+    --text-5xl: 3rem;
+
+    --container-3xs: 16rem;
+    --container-2xs: 18rem;
+    --container-xs: 20rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-6xl: 72rem;
+    --container-7xl: 80rem;
+}
+
+.fnButton {
+    border-radius: 0.5rem;
+    background-color: var(--color-shade-1);
+    transition: background-color 150ms;
+    color: var(--color-foreground);
+    font-size: 1.2em;
+    border: solid 0.1em var(--color-shade-1);
+    transition-property: filter, border-color;
+    transition-duration: 200ms;
+    transition-timing-function: ease-out;
+
+    &:hover, &.active{
+        .fnActiveButton();
+    }
+}
+
+.fnButtonSecondary {
+    &:hover, &.active{
+        .fnActiveButtonSecondary();
+    }
+}
+
+.fnActiveButton {
+    background-color: transparent;
+    border: solid 0.1em var(--color-glow-primary);
+    text-decoration: none;
+    color: var(--color-glow-primary);
+    filter: var(--filter-glow-primary);
+    transition: var(--transition-glow);
+}
+
+.fnActiveButtonSecondary {
+    background-color: transparent;
+    border: solid 0.1em var(--color-glow-secondary);
+    text-decoration: none;
+    color: var(--color-glow-secondary);
+    filter: var(--filter-glow-secondary);
+    transition: var(--transition-glow);
+}
 
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -171,6 +564,121 @@ header, footer, .container, .row, nav, nav > ul{
 
 @media screen {
 
+    .dark {
+
+        --color-foreground: var(--color-dark-foreground);
+        --color-background: var(--color-dark-background);
+        --color-shade-1: var(--color-dark-shade-1);
+        --color-shade-2: var(--color-dark-shade-2);
+        --color-shade-3: var(--color-dark-shade-3);
+        --color-shade-4: var(--color-dark-shade-4);
+        --color-text-1: var(--color-dark-text-1);
+        --color-text-2: var(--color-dark-text-2);
+        --color-text-3: var(--color-dark-text-3);
+        --color-text-4: var(--color-dark-text-4);
+        --color-primary: var(--color-dark-primary);
+        --color-secondary: var(--color-dark-secondary);
+        --color-error: var(--color-dark-error);
+        --color-error-highlight: var(--color-dark-error-highlight);
+        --color-success: var(--color-dark-success);
+        --color-success-highlight: var(--color-dark-success-highlight);
+        --color-warning: var(--color-dark-warning);
+        --color-highlight: var(--color-dark-highlight);
+        --color-accent-1: var(--color-dark-accent-1);
+        --color-accent-2: var(--color-dark-accent-2);
+        --color-accent-3: var(--color-dark-accent-3);
+
+        --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-primary)) drop-shadow(0 0 0.25em var(--color-primary));
+        --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-white)) drop-shadow(0 0 0.125em var(--color-secondary)) drop-shadow(0 0 0.25em var(--color-secondary));
+        --color-glow-primary: var(--color-white);
+        --color-glow-secondary: var(--color-white);
+        --transition-glow: filter 150ms cubic-bezier(0,1.7,1,-0.3) 50ms,
+        border-color 150ms cubic-bezier(0,1.7,1,-0.3) 50ms;
+
+        @media (prefers-reduced-motion) {
+            --transition-glow: filter 150ms, border-color 150ms;
+        }
+
+        .light-only {
+            display: none;
+        }
+
+        .dark-only {
+            display: initial;
+        }
+    }
+
+    .light {
+        --color-foreground: var(--color-light-foreground);
+        --color-background: var(--color-light-background);
+        --color-shade-1: var(--color-light-shade-1);
+        --color-shade-2: var(--color-light-shade-2);
+        --color-shade-3: var(--color-light-shade-3);
+        --color-shade-4: var(--color-light-shade-4);
+        --color-text-1: var(--color-light-text-1);
+        --color-text-2: var(--color-light-text-2);
+        --color-text-3: var(--color-light-text-3);
+        --color-text-4: var(--color-light-text-4);
+        --color-primary: var(--color-light-primary);
+        --color-secondary: var(--color-light-secondary);
+        --color-error: var(--color-light-error);
+        --color-error-highlight: var(--color-light-error-highlight);
+        --color-success: var(--color-light-success);
+        --color-success-highlight: var(--color-light-success-highlight);
+        --color-warning: var(--color-light-warning);
+        --color-highlight: var(--color-light-highlight);
+        --color-accent-1: var(--color-light-accent-1);
+        --color-accent-2: var(--color-light-accent-2);
+        --color-accent-3: var(--color-light-accent-3);
+
+        --filter-glow-primary: drop-shadow(0 0 0.0625em var(--color-argon-400));
+        --filter-glow-secondary: drop-shadow(0 0 0.0625em var(--color-krypton-400));
+        --color-glow-primary: var(--color-argon-950);
+        --color-glow-secondary: var(--color-krypton-950);
+        --transition-glow: filter 150ms cubic-bezier(0, 2, 1, -0.7) 50ms,
+        border-color 150ms cubic-bezier(0, 2, 1, -0.7) 50ms;
+
+        @media (prefers-reduced-motion) {
+            --transition-glow: filter 150ms, border-color 150ms;
+        }
+
+        .light-only {
+            display: initial;
+        }
+
+        .dark-only {
+            display: none;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        html {
+            .dark();
+
+            &:has(#themeLight:checked) {
+                .light();
+            }
+        }
+        #themeToggleDark {
+            display: none !important;
+        }
+    }
+
+    @media (prefers-color-scheme: light) {
+        html {
+            .light();
+
+            &:has(#themeDark:checked) {
+                .dark();
+            }
+        }
+        #themeToggleLight {
+            display: none !important;
+        }
+    }
+
+
+
     html {
         -ms-text-size-adjust: 100%;
         -webkit-text-size-adjust: 100%;
@@ -181,7 +689,10 @@ header, footer, .container, .row, nav, nav > ul{
         display: block;
     }
 
-    audio, canvas, progress, video {
+    audio,
+    canvas,
+    progress,
+    video {
         display: inline-block;
         vertical-align: baseline;
     }
@@ -196,9 +707,28 @@ header, footer, .container, .row, nav, nav > ul{
         display: none;
     }
 
-    a:active,
-    a:hover {
-        outline: 0;
+    a {
+        color: var(--color-accent-1);
+        text-decoration: underline;
+
+        &:hover,
+        &:active,
+        &:focus {
+            color: var(--color-accent-3);
+            text-decoration: none;
+        }
+
+        &:visited {
+            color: var(--color-accent-2);
+            text-decoration: underline;
+
+            &:hover,
+            &:active,
+            &:focus {
+                color: var(--color-accent-3);
+                text-decoration: none;
+            }
+        }
     }
 
     abbr[title] {
@@ -209,22 +739,6 @@ header, footer, .container, .row, nav, nav > ul{
         font-size: 80%;
     }
 
-    sub,
-    sup {
-        font-size: 75%;
-        line-height: 0;
-        position: relative;
-        vertical-align: baseline;
-    }
-
-    sup {
-        top: -0.5em;
-    }
-
-    sub {
-        bottom: -0.25em;
-    }
-
     svg:not(:root) {
         overflow: hidden;
     }
@@ -233,14 +747,16 @@ header, footer, .container, .row, nav, nav > ul{
         box-sizing: content-box;
         height: 0;
     }
+
     pre {
         overflow: auto;
     }
+
     code,
     kbd,
     pre,
     samp {
-        font-family: monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         font-size: 1em;
     }
 
@@ -253,42 +769,50 @@ header, footer, .container, .row, nav, nav > ul{
         font: inherit;
         margin: 0;
     }
-    button {
-        overflow: visible;
-    }
 
     button,
     select {
         text-transform: none;
     }
 
-    input[type="checkbox"],
-    input[type="radio"] {
+    button {
+        overflow: visible;
+    }
+
+    input {
+        &[type="checkbox"],
+        &[type="radio"] {
             box-sizing: border-box;
             padding: 0;
         }
 
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
+        &[type="number"] {
+            &::-webkit-inner-spin-button,
+            &::-webkit-outer-spin-button {
                 height: auto;
             }
+        }
 
-    input[type="search"] {
+        &[type="search"] {
             -webkit-appearance: textfield;
             box-sizing: content-box;
-    }
 
-    input[type="search"]::-webkit-search-cancel-button,
-    input[type="search"]::-webkit-search-decoration {
+            &::-webkit-search-cancel-button,
+            &::-webkit-search-decoration {
                 -webkit-appearance: none;
             }
+        }
+    }
+
     legend {
         border: 0;
         padding: 0;
     }
+
     textarea {
         overflow: auto;
     }
+
     table {
         border-collapse: collapse;
         border-spacing: 0;
@@ -299,22 +823,10 @@ header, footer, .container, .row, nav, nav > ul{
         padding: 0;
     }
 
-    html, body, div, span, applet, object, iframe,
-    h1, h2, h3, h4, h5, h6, p, blockquote,
-    a, abbr, acronym, address, big, cite, del, dfn, em, img, ins, kbd, q, s, samp,
-    small, strike, strong, sub, sup, tt, var,
-    b, u, i, center,
-    dl, dt, dd, ol, ul, li,
-    fieldset, form, label, legend,
-    table, caption, tbody, tfoot, thead, tr, th, td,
-    article, aside, canvas, details, embed,
-    figure, figcaption, footer, header,
-    menu, nav, output, ruby, section, summary,
-    time, mark, audio, video {
-        font-family: __font_family_screen__;
-        color: @ini_text;
+    html, body {
+        font-family: @font_family_screen;
+        color: var(--color-foreground);
     }
-
 }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

css/base_design.less

@@ -1,15 +1,560 @@
 /**
  * This file provides the main design styles
  * across all template elements (typo, colors etc.)
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 
 html, body {
-    background-color: @ini_background;
+    background-color: var(--color-background);
 }
 
-a{
-    color: @ini_existing;
+/* highlight selected tool */
+.mode_admin a.action.admin,
+.mode_login a.action.login,
+.mode_register a.action.register,
+.mode_profile a.action.profile,
+.mode_recent a.action.recent,
+.mode_index a.action.index,
+.mode_media a.action.media,
+.mode_revisions a.action.revs,
+.mode_backlink a.action.backlink,
+.mode_subscribe a.action.subscribe {
+    font-weight: bold;
+}
+
+.dokuwiki {
+    .tabs > ul li a,
+    ul.tabs li strong,
+    ul.tabs li a {
+        border-color: var(--color-shade-4);
+    }
+    ul.tabs::after {
+        border-color: var(--color-shade-4);
+    }
+
+    .page ol li,
+    .page ul li,
+    .aside ul li {
+        color: var(--color-foreground);
+
+        .li {
+            color: var(--color-foreground);
+        }
+    }
+
+    .pageId {
+        float: right;
+        margin-right: -1em;
+        margin-bottom: -1px;
+        margin-top: -1.5em;
+        overflow: hidden;
+        padding: 0.5em 1em 0;
+
+        span {
+            font-size: @font-size-small;
+            border: solid @ini_background_alt;
+            border-width: 1px 1px 0;
+            background-color: var(--color-background);
+            color: @ini_text_alt;
+            padding: .1em .35em;
+            border-top-left-radius: 2px;
+            border-top-right-radius: 2px;
+            box-shadow: 0 0 .5em @ini_text_alt;
+            display: block;
+        }
+    }
+
+    div.page {
+        clear: both;
+        overflow: hidden;
+        word-wrap: break-word;
+        background: var(--color-background);
+        color: inherit;
+        padding: @page_padding-top @margin-default @margin-default;
+
+        @media @screen_max-md {
+            padding-right: (@margin-default * 1.6);
+        }
+
+        @media @screen_max-xs {
+            padding-left: @margin-small;
+        }
+
+        @media @screen_max-xxs {
+            padding-right: @margin-small;
+        }
+    }
+
+    .content #dokuwiki__pagetools {
+        @media @screen_max-md {
+            top: 4rem;
+        }
+    }
+
+    .docInfo {
+        font-size: @font-size-small;
+        text-align: right;
+    }
+
+    /* license note under edit window */
+
+    div.license {
+        font-size: @font-size-small;
+        line-height: @line-height-default;
+        padding-top: 1rem;
+
+        @media @screen_max-lg {
+            font-size: @font-size-default;
+        }
+
+        @media @screen_max-md {
+            font-size: @font-size-small;
+        }
+
+        * {
+            font-size: inherit;
+        }
+    }
+
+    [dir=rtl] & .docInfo {
+        text-align: left;
+    }
+
+    [dir=rtl] & .pageId {
+        float: left;
+        margin-left: -1em;
+        margin-right: 0;
+    }
+}
+
+caption,
+figcaption,
+summary,
+legend {
+    padding: 0;
+    margin: 0 0 .35em;
+    line-height: 1.2;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: bold;
+    padding: 0;
+    line-height: 1.2;
+    clear: both;
+}
+
+[dir=rtl] h1,
+[dir=rtl] h2,
+[dir=rtl] h3,
+[dir=rtl] h4,
+[dir=rtl] h5,
+[dir=rtl] h6 {
+    clear: right;
+}
+
+h1 {
+    font-size: @font-size-head1;
+    margin: 0 0 @font-size-head1;
+    padding-top: 1em;
+}
+
+h2 {
+    font-size: @font-size-head2;
+    margin: 0 0 @font-size-head2;
+    padding-top: (@font-size-head2 / 2);
+}
+
+h3 {
+    font-size: @font-size-head3;
+    margin: 0 0 @font-size-head3;
+    padding-top: (@font-size-head3 / 2);
+}
+
+h4 {
+    font-size: @font-size-head4;
+    margin: 0 0 @font-size-head4;
+    padding-top: (@font-size-head4 / 2);
+}
+
+h5 {
+    font-size: @font-size-head5;
+    margin: 0 0 @font-size-head5;
+    padding-top: (@font-size-head5 / 2);
+}
+
+h6 {
+    font-size: @font-size-head6;
+    font-weight: @font-weight-bold;
+    margin: 0 0 @font-size-head6;
+    padding-top: (@font-size-head6 / 2);
+}
+
+p {
+    font-size: @font-size-default;
+    line-height: @line-height-big;
+
+    a,
+    span,
+    strong {
+        font-size: inherit;
+    }
+}
+
+label,
+legend,
+button {
+    font-size: @font-size-default;
+
+    a,
+    span,
+    strong {
+        font-size: inherit;
+    }
+}
+
+hr,
+figure,
+details,
+address {
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+p,
+ul,
+ol,
+dl,
+pre,
+table,
+hr,
+blockquote,
+figure,
+details,
+fieldset,
+address {
+    margin: 0 0 1.4em; /* bottom margin = line-height */
+    padding: 0;
+}
+
+div,
+video,
+audio {
+    margin: 0;
+    padding: 0;
+}
+
+small,
+.code {
+    font-size: @font-size-small;
+}
+
+.code {
+    margin-top: @grid;
+
+    // SPR-926: darker colors for accessibility
+    .es6 {
+        color: #00832B;
+    }
+
+    .kw5 {
+        color: #005D00;
+    }
+
+    .kw6 {
+        color: #DC0075;
+    }
+
+    .nu0 {
+        color: #A74DA7;
+    }
+
+    .re3 {
+        color: #DE1B1B;
+    }
+
+    .re4 {
+        color: #007F6F;
+    }
+
+    .br0, .sy0 {
+        color: #248124;
+    }
+
+    .co1, .coMULTI, .sc-1 {
+        color: #707070;
+    }
+
+    .co2, .sy1 {
+        color: #108400;
+    }
+
+    .co3, .sy4 {
+        color: #008070;
+    }
+
+    .kw1, .kw8 {
+        color: #747400;
+    }
+
+    .re1, .st0, .st_h {
+        color: #DD0000;
+    }
+}
+
+/* + + +  lists   + + + */
+ul,
+ol {
+    font-size: @font-size-default;
+    line-height: 140%;
+    padding: 0 0 0 1.5em;
+}
+
+[dir=rtl] ul,
+[dir=rtl] ol {
+    padding: 0 1.5em 0 0;
+}
+
+li,
+dd {
+    padding: 0;
+    margin: 0 0 0 1.5em;
+}
+
+[dir=rtl] li,
+[dir=rtl] dd {
+    margin: 0 1.5em 0 0;
+}
+
+dl {
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+dt,
+dd {
+    line-height: inherit;
+}
+
+dt {
+    font-weight: bold;
+    margin: 0;
+    padding: 0;
+}
+
+li ul,
+li ol,
+li dl,
+dl ul,
+dl ol,
+dl dl {
+    margin-bottom: 0;
+    padding: 0;
+}
+
+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;
+}
+
+/* + + +  tables   + + + */
+.dokuwiki {
+    table.inline tr:hover {
+        th {
+            background-color: var(--color-shade-3);
+        }
+
+        td {
+            background-color: var(--color-shade-2);
+        }
+    }
+}
+
+table {
+    border-collapse: collapse;
+    empty-cells: show;
+    border-spacing: 0;
+    border: 1px solid var(--color-shade-4);
+    font-size: @font-size-default;
+    line-height: 140%;
+}
+
+caption {
+    caption-side: top;
+    text-align: left;
+}
+
+[dir=rtl] caption {
+    text-align: right;
+}
+
+th,
+td {
+    padding: .3em .5em;
+    margin: 0;
+    vertical-align: top;
+    border: 1px solid var(--color-shade-4);
+}
+
+th {
+    font-weight: bold;
+    background-color: var(--color-shade-1);
+    color: var(--color-foreground);
+    text-align: left;
+
+    a {
+        color: @ini_link_alt;
+    }
+}
+
+[dir=rtl] th {
+    text-align: right;
+}
+
+img {
+    display: inline-block;
+    border-width: 0;
+    vertical-align: middle;
+    color: #666;
+    background-color: transparent;
+    font-style: italic;
+    height: auto;
+}
+
+img,
+object,
+embed,
+iframe,
+video,
+audio {
+    max-width: 100%;
+}
+
+button img {
+    max-width: none;
+}
+
+hr {
+    border-top: solid @ini_border;
+    border-bottom: solid var(--color-background);
+    border-width: 1px 0;
+    height: 0;
+    text-align: center;
+    clear: both;
+}
+
+acronym,
+abbr {
+    cursor: help;
+    border-bottom: 1px dotted;
+    font-style: normal;
+}
+
+em acronym,
+em abbr {
+    font-style: italic;
+}
+
+mark {
+    background-color: @ini_highlight;
+    color: @ini_highlight_text;
+}
+
+pre,
+code,
+samp,
+kbd {
+    font-family: "Departure Mono", ui-monospace, monospace;
+    /* same font stack should be used for ".dokuwiki table.diff td" in _diff.css */
+    font-size: @font-size-default;
+    direction: ltr;
+    text-align: left;
+    background-color: var(--color-shade-1);
+    color: var(--color-foreground);
+    border-radius: @fix_border-radius;
+    padding-left: @small-spacing;
+    padding-right: @small-spacing;
+
+    * {
+        font-family: inherit;
+        font-size: inherit;
+    }
+
+    span {
+        color: inherit;
+    }
+}
+
+pre {
+    overflow: auto;
+    word-wrap: normal;
+    font-size: @font-size-default;
+    line-height: 140%;
+    padding: .7em 1em;
+}
+
+code:not([class]) {
+    display: inline-block;
+}
+
+blockquote {
+    border: solid @ini_border;
+    border-width: 0 0 0 .25em;
+    font-size: @font-size-default;
+    line-height: 140%;
+    padding: 0 .5em;
+}
+
+[dir=rtl] blockquote {
+    border-width: 0 .25em 0 0;
+}
+
+q:before,
+q:after {
+    content: '';
+}
+
+sub,
+sup {
+    font-size: .8em;
+    line-height: 1;
+}
+
+sub {
+    vertical-align: sub;
+}
+
+sup {
+    vertical-align: super;
+}
+
+small {
+    font-size: .9em;
 }

css/base_fontello-icons.less

@@ -0,0 +1,141 @@
+/**
+ * This file provides styles for web fonts and icon fonts
+ * (If you add new icons in the fontello set you have to add the icon class and associated character encoding here)
+ */
+
+/* icon font */
+.setIconFontFace('fontello','fontello');
+
+.icon, [class^="icon-"], [class*=" icon-"]{
+    .fontello();
+}
+
+/* + + + + +  fontello codes  + + + + + */
+.icon-emo-happy          { &::before { content: '\e804'; } } /* '' */
+.icon-emo-wink           { &::before { content: '\e805'; } } /* '' */
+.icon-emo-unhappy        { &::before { content: '\e806'; } } /* '' */
+.icon-emo-sleep          { &::before { content: '\e807'; } } /* '' */
+.icon-emo-thumbsup       { &::before { content: '\e808'; } } /* '' */
+.icon-emo-grin           { &::before { content: '\e80c'; } } /* '' */
+.icon-emo-angry          { &::before { content: '\e80d'; } } /* '' */
+.icon-emo-cry            { &::before { content: '\e80f'; } } /* '' */
+.icon-emo-squint         { &::before { content: '\e811'; } } /* '' */
+.icon-emo-laugh          { &::before { content: '\e812'; } } /* '' */
+.icon-emo-wink2          { &::before { content: '\e813'; } } /* '' */
+
+.icon-up                 { &::before { content: '\e853'; } } /* '' */
+.icon-up-small           { &::before { content: '\e82f'; } } /* '' */
+.icon-up-thick           { &::before { content: '\e831'; } } /* '' */
+.icon-up-open-big        { &::before { content: '\e848'; } } /* '' */
+
+.icon-down               { &::before { content: '\e859'; } } /* '' */
+.icon-down-small         { &::before { content: '\e834'; } } /* '' */
+.icon-down-thick         { &::before { content: '\e835'; } } /* '' */
+.icon-down-bold          { &::before { content: '\e883'; } } /* '' */
+
+.icon-right-small        { &::before { content: '\e82d'; } } /* '' */
+.icon-right-thick        { &::before { content: '\e82e'; } } /* '' */
+
+.icon-left-small         { &::before { content: '\e836'; } } /* '' */
+.icon-left-thick         { &::before { content: '\e82c'; } } /* '' */
+.icon-left-bold          { &::before { content: '\e837'; } } /* '' */
+
+.icon-smile              { &::before { content: '\e85e'; } } /* '' */
+.icon-frown              { &::before { content: '\e84b'; } } /* '' */
+.icon-meh                { &::before { content: '\e85f'; } } /* '' */
+
+.icon-help               { &::before { content: '\e83c'; } } /* '' */
+.icon-menu               { &::before { content: '\e854'; } } /* '' */
+.icon-home               { &::before { content: '\e842'; } } /* '' */
+.icon-search             { &::before { content: '\e855'; } } /* '' */
+.icon-user               { &::before { content: '\e833'; } } /* '' */
+.icon-user-circle        { &::before { content: '\e86c'; } } /* '' */
+.icon-login              { &::before { content: '\e845'; } } /* '' */
+.icon-logout             { &::before { content: '\e847'; } } /* '' */
+
+.icon-dividers           { &::before { content: '\e801'; } } /* '' */
+.icon-cog                { &::before { content: '\e84e'; } } /* '' */
+.icon-cog-alt            { &::before { content: '\e818'; } } /* '' */
+.icon-attachment         { &::before { content: '\e832'; } } /* '' */
+.icon-revert-replay      { &::before { content: '\e839'; } } /* '' */
+.icon-bell               { &::before { content: '\e83a'; } } /* '' */
+.icon-bookmark-empty     { &::before { content: '\e83b'; } } /* '' */
+.icon-check              { &::before { content: '\e841'; } } /* '' */
+.icon-checkbox-marked    { &::before { content: '\e844'; } } /* '' */
+.icon-down-open-big      { &::before { content: '\e846'; } } /* '' */
+.icon-star               { &::before { content: '\e860'; } } /* '' */
+.icon-star-outline       { &::before { content: '\e84c'; } } /* '' */
+.icon-sitemap            { &::before { content: '\e84d'; } } /* '' */
+.icon-puzzle             { &::before { content: '\e84f'; } } /* '' */
+.icon-plus               { &::before { content: '\e850'; } } /* '' */
+.icon-minus              { &::before { content: '\e852'; } } /* '' */
+.icon-pencil-1           { &::before { content: '\e851'; } } /* '' */
+.icon-clipboard          { &::before { content: '\e857'; } } /* '' */
+.icon-clipboard-empty    { &::before { content: '\e856'; } } /* '' */
+.icon-clock              { &::before { content: '\e858'; } } /* '' */
+.icon-cloud              { &::before { content: '\e85a'; } } /* '' */
+.icon-mail               { &::before { content: '\e85d'; } } /* '' */
+
+.icon-folder-image       { &::before { content: '\e809'; } } /* '' */
+.icon-file-new           { &::before { content: '\e83d'; } } /* '' */
+.icon-file               { &::before { content: '\e83e'; } } /* '' */
+.icon-file-export        { &::before { content: '\e80a'; } } /* '' */
+.icon-files              { &::before { content: '\e849'; } } /* '' */
+
+.icon-comment-question   { &::before { content: '\e880'; } } /* '' */
+.icon-jira               { &::before { content: '\e881'; } } /* '' */
+
+
+/* + + + + +  additional "after" for nav-pagetools  + + + + + */
+.icon-pencil {
+    &::before,
+    &::after { content: '\e840'; }
+}
+.icon-pencil-add {
+    &::before,
+    &::after { content: '\e800'; }
+}
+.icon-revisions-history {
+    &::before,
+    &::after { content: '\e803'; }
+}
+.icon-link {
+    &::before,
+    &::after { content: '\e843'; }
+}
+.icon-file-pdf {
+    &::before,
+    &::after { content: '\e838'; }
+}
+.icon-file-xml {
+    &::before,
+    &::after { content: '\e802'; }
+}
+.icon-up-bold {
+    &::before,
+    &::after { content: '\e830'; }
+}
+.icon-disk {
+    &::before,
+    &::after{ content: '\e85c'; }
+}
+.icon-file-text {
+    &::before,
+    &::after{ content: '\e84a'; }
+}
+.icon-book-open {
+    &::before,
+    &::after { content: '\e83f'; }
+}
+.icon-code-braces {
+    &::before,
+    &::after { content: '\e85b'; }
+}
+.icon-code {
+    &::before,
+    &::after { content: '\e861'; }
+}
+.icon-right-bold {
+    &::before,
+    &::after { content: '\e882'; }
+}

css/base_fonts.less

@@ -1,32 +0,0 @@
-/**
- * This file provides styles for web fonts and icon fonts
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- */
-
-/* web font */
-.setLocalFontFace('roboto',300,'Roboto Light','Roboto-Light','roboto-light');                          /* roboto light */
-.setLocalFontFace('roboto',400,'Roboto','Roboto-Regular','roboto-regular');                            /* roboto regular */
-.setLocalFontFace('roboto',500,'Roboto Medium','Roboto-Medium','roboto-medium');                       /* roboto medium */
-.setLocalFontFace('roboto',700,'Roboto Bold','Roboto-Bold','roboto-bold');                             /* roboto bold */
-
-.setLocalFontFace('roboto',400,'Roboto Condensed','RobotoCondensed-Regular','roboto-condensed');       /* roboto condensed */
-.setLocalFontFace('roboto',700,'Roboto Condensed Bold','RobotoCondensed-Bold','roboto-boldcondensed'); /* roboto condensed */
-
-/* icon font */
-.setIconFontFace('fontello','fontello');
-
-.icon, [class^="icon-"], [class*=" icon-"],
-.profile,
-.log-in,
-.log-out{
-  .fontello();
-}
-
-/* custom icon font */
-@import (less) "../fonts/icons/fontello-codes.css";
-
-.profile{
-  .icon-user;
-}
-

css/base_mixins.less

@@ -1,7 +1,5 @@
 /**
  * This file provides less mixins for all other style modules
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -12,24 +10,24 @@
         font-family: @fontFamily;
         font-style: normal;
         font-weight: @fontWeight;
-        src: ~"local('@{localFontName}'), local("~"'@{localFontNameVar}'), url(fonts/"~"@{filename}.eot)";
-        src: ~"url(fonts/"~"@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/"~"@{filename}.woff) format('woff')";
+        src: ~"local('@{localFontName}'), local('@{localFontNameVar}'), url(fonts/@{filename}.eot)";
+        src: ~"url(fonts/@{filename}.eot?#iefix) format('embedded-opentype'), url(fonts/@{filename}.woff) format('woff')";
     }
 }
 
 .setIconFontFace(@fontFamily,@filename) {
     @font-face {
         font-family: @fontFamily;
-        src: ~"url('fonts/icons/"~"@{filename}.eot?6762325')";
-        src: ~"url('fonts/icons/"~"@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/"~"@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/"~"@{filename}.woff?6762325') format('woff'), url('fonts/icons/"~"@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/"~"@{filename}.svg?6762325#fontello') format('svg')";
+        src: ~"url('fonts/icons/@{filename}.eot?6762325')";
+        src: ~"url('fonts/icons/@{filename}.eot?6762325#iefix') format('embedded-opentype'), url('fonts/icons/@{filename}.woff2?6762325') format('woff2'), url('fonts/icons/@{filename}.woff?6762325') format('woff'), url('fonts/icons/@{filename}.ttf?6762325') format('truetype'), url('fonts/icons/@{filename}.svg?6762325#fontello') format('svg')";
         font-weight: normal;
         font-style: normal;
     }
 }
 
 .fontello() {
-    &:before{
-        font-family: "topmeteo";
+    &::before {
+        font-family: "fontello";
         font-style: normal;
         font-weight: normal;
         speak: none;
@@ -61,10 +59,44 @@
         /* Uncomment for 3D effect */
         /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
     }
-
 }
 
+.fontello-double() {
+    &::before,
+    &::after {
+        font-family: "fontello";
+        font-style: normal;
+        font-weight: normal;
+        speak: none;
 
+        display: inline-block;
+        text-decoration: inherit;
+        width: 1em;
+        margin-right: .2em;
+        text-align: center;
+
+        /* For safety - reset parent styles, that can break glyph codes*/
+        font-variant: normal;
+        text-transform: none;
+
+        /* fix buttons height, for twitter bootstrap */
+        line-height: 1em;
+
+        /* Animation center compensation - margins should be symmetric */
+        /* remove if not needed */
+        margin-left: .2em;
+
+        /* you can be more comfortable with increased icons size */
+        /* font-size: 120%; */
+
+        /* Font smoothing. That was taken from TWBS */
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+
+        /* Uncomment for 3D effect */
+        /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
@@ -102,10 +134,169 @@
     }
 }
 
+/* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
+.btn-hover {
+    background-color: var(--color-shade-1);
+    border-color: var(--color-shade-2);
+    color: var(--color-foreground);
+    transition: var(--transition-glow);
+
+    &:hover,
+    &:active,
+    &:focus {
+        background-color: transparent;
+        border-color: var(--color-glow-secondary);
+        color: var(--color-glow-secondary);
+        filter: var(--filter-glow-secondary);
+
+        .prefix {
+            color: inherit;
+        }
+    }
+}
+
+.btn-usertools-wrapper(@elem:@toggle-size) {
+    display: inline-block;
+    min-height: @elem;
+    min-width: @elem;
+    box-sizing: border-box;
+    color: @ini_text_webframe;
+    font-size: @font-size-small;
+    padding: 0;
+    margin: 0 .25rem;
+
+    * {
+        font-size: @font-size-small;
+    }
+}
+
+.btn-usertools-num() {
+    .num {
+        position: absolute;
+        right: -.4rem;
+        top: -.5em;
+        background-color: @ini_nav_menu_hover_color;
+        border-radius: 2px;
+        color: @ini_nav_menu_hover_bg;
+        font-size: @font-size-very-small;
+        font-weight: 400;
+        text-align: center;
+        line-height: 1;
+        padding: .1em @very-small-spacing;
+        transition: @transition color, @transition background-color;
+    }
+}
+
+.btn-prefix(@margin-top:.3rem) {
+    .fontello();
+    .hide-text-show-before();
+
+    color: inherit;
+    font-size: @font-size-default;
+
+    @media @screen_min-xxlg {
+        margin-top: .22rem;
+    }
+
+    @media @screen_max-xxlg {
+        margin-top: @margin-top;
+    }
+
+    @media @screen_max-md {
+        margin-top: .2rem;
+    }
+}
+
+.hide-text-show-before() {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: -9999px;
+
+    &::before {
+        float: left;
+        width: 100%;
+        text-indent: 0;
+        margin: 0;
+    }
+
+    &::after {
+        float: left;
+        text-indent: 0;
+    }
+}
+
+.hide-text-show-after() {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: -9999px;
+
+    &::before {
+        float: right;
+        text-indent: 0;
+    }
+
+    &::after {
+        float: right;
+        text-indent: 0;
+    }
+}
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* flex-box */
+
+.display-flex() {
+    display: flex;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+}
+
+.flex-direction(@elem:column) {
+    flex-direction: @elem;
+    -ms-flex-direction: @elem;
+    -webkit-flex-direction: @elem;
+}
+
+.justify-content(@elem:center) {
+    justify-content: @elem;
+    -ms-justify-content: @elem;
+    -webkit-justify-content: @elem;
+}
+
+.align-items(@elem:center) {
+    align-items: @elem;
+    -ms-align-items: @elem;
+    -webkit-align-items: @elem;
+}
+
+.flex(@elem:1 0 auto) {
+    flex: @elem;
+    -ms-flex: @elem;
+    -webkit-flex: @elem;
+}
+
+.flex-wrap() {
+    flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* positioning */
+.center-middle() {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    -ms-transform: translateX(-50%) translateY(-50%);
+    -webkit-transform: translateX(-50%) translateY(-50%);
+}
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .reset() {
     background: transparent;
     border: none 0; outline: 0; vertical-align: baseline;
@@ -131,19 +322,40 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 .make-grid(@class) {
     .float-grid-columns(@class);
-    .loop-grid-columns(@grid-columns, @class, width);
+    .grid-columns(1, @class, width);
+    .grid-columns(2, @class, width);
+    .grid-columns(3, @class, width);
+    .grid-columns(4, @class, width);
+    .grid-columns(5, @class, width);
+    .grid-columns(6, @class, width);
+    .grid-columns(7, @class, width);
+    .grid-columns(8, @class, width);
+    .grid-columns(9, @class, width);
+    .grid-columns(10, @class, width);
+    .grid-columns(11, @class, width);
+    .grid-columns(12, @class, width);
 }
 
 .float-grid-columns(@class) {
-    .col-@{class}-1, .col-@{class}-2, .col-@{class}-3, .col-@{class}-4, .col-@{class}-5, .col-@{class}-6, .col-@{class}-7, .col-@{class}-8, .col-@{class}-9, .col-@{class}-10, .col-@{class}-11, .col-@{class}-12 {
+    .col-@{class}-1,
+    .col-@{class}-2,
+    .col-@{class}-3,
+    .col-@{class}-4,
+    .col-@{class}-5,
+    .col-@{class}-6,
+    .col-@{class}-7,
+    .col-@{class}-8,
+    .col-@{class}-9,
+    .col-@{class}-10,
+    .col-@{class}-11,
+    .col-@{class}-12 {
         float: left;
     }
 }
 
-.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
+// todo: no recusion - fix it !!!
+.grid-columns(@index, @class, @type) {
     .calc-grid-column(@index, @class, @type);
-    // next iteration
-    .loop-grid-columns((@index - 1), @class, @type);
 }
 
 .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
@@ -151,6 +363,3 @@
         width: percentage((@index / @grid-columns));
     }
 }
-
-
-

css/base_structure.less

@@ -1,11 +1,10 @@
 /**
  * This file provides styles for the general layout structure.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
-/* Col Grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* col grid */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 .make-grid(xs);
 
 @media screen {
@@ -14,44 +13,276 @@
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* font sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media @screen_min-xxs {
-    .container{
-        border: 1px solid deeppink;
+    html {
+        font-size: 100%; //16px
     }
 }
 
 @media @screen_min-xs {
-    .container{
-        border: 1px solid orangered;
+    html {
+        font-size: 100%; //16px
     }
 }
 
 @media @screen_min-sm {
-    .container{
-        border: 1px solid green;
-    }
     .make-grid(sm);
+    html {
+        font-size: 100%; //16px
+    }
 }
 
 @media @screen_min-md {
-    .container{
-        border: 1px solid blue;
-    }
     .make-grid(md);
+    html {
+        font-size: 87.5%; //14px
+    }
 }
 
 @media @screen_min-lg {
-    .container{
-        border: 1px solid blue;
-    }
     .make-grid(lg);
+    html {
+        font-size: 87.5%; //14px
+    }
 }
 
 @media @screen_min-xlg {
     html {
-        font-size: 130%;
+        font-size: 93.75%; //15px
     }
+}
+
+@media @screen_min-xxlg {
+    html {
+        font-size: 100%; //16px
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* z-indices */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@media screen {
+    .nav-direct p {
+        z-index: 1000; // keyboard-navigation overlays always on top
+    }
+
+    .top-header {
+        z-index: 2; // put MagicMatcher-Dropdowns above .content and metabox-tabs
+    }
+
+    #dokuwiki__aside div.nav a {
+        &:hover, &:focus, &:active {
+            z-index: 100; // show label/link above content on hover etc.
+        }
+    }
+
+    .qc-output {
+        z-index: 1; // put qc-output above meta-box
+    }
+
+    #spr__meta-box {
+        z-index: 10; // put meta-box above positioned content-elements such as aggregations, edit-buttons
+        ul.meta-tabs > li.active {
+            z-index: 1; // put the active tab above the meta-content in .tab-pane.active
+        }
+    }
+
+    nav#dokuwiki__pagetools {
+        z-index: 100; // put labels of the pagetools above content on hover etc.
+    }
+
+    #dokuwiki__detail .img-link a::before {
+        z-index: 2; // put 'view original file'-overlay above image
+    }
+
+    /* plug-in do_tasks */
+    .plugin__do_usertasks_list {
+        z-index: 200; // put tasks-list above pagetools
+    }
+
+    /* plug-in editable */
+    #dokuwiki__content.main-content div.editbutton_table {
+        z-index: 1; // for IE
+    }
+
+    /* plug-in tabinclude */
+    div#dwpl-ti-container li.dwpl-ti-tab div.selected {
+        z-index: 1; // put .slected tab above div.dwpl-ti-content-box
+    }
+}
+
+@media @screen_min-md {
+    .wide-content .search.main-sidebar p.toggleSearch {
+        z-index: 1; // put search-toggle-button above #dw__search
+    }
+}
+
+@media @screen_max-md {
+    body.show-mobile-sidebar #dokuwiki__aside {
+            z-index: 200; // mobile sidebar above all except nav-direct
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* screen sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+// >= 1024
+@media @screen_min-md {
+
+    .content .row > .col-xs-12 {
+        border-radius: 0 @ini_default_border_radius @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+    }
+
+    .top-header {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 50%;
+    }
+
+    .header,
+    .tools {
+        .row {
+            position: relative;
+
+            > .col-xs-12 {
+                width: @ini_sidebar_width;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    .header {
+        .row > .col-xs-12 {
+            position: relative;
+            height: 150px;
+            min-height: 6rem;
+            display: table;
+
+            + .col-xs-12 {
+                float: right;
+                width: @ini_site_width;
+                box-sizing: border-box;
+            }
+        }
+    }
+
+    /* + + + + +  layout option compact  + + + + + */
+    .header-compact {
+        .header {
+            .row > .col-xs-12 {
+                height: auto;
+                min-height: auto;
+            }
+        }
+    }
+
+    .tools {
+        .row > .col-xs-12 {
+            position: absolute;
+        }
+    }
+
+    .content {
+        .row > .col-xs-12 {
+            position: relative;
+            width: 100%;
+            background-color: #fff;
+        }
+    }
+
+    .showSidebar {
+        .content {
+            .row > .col-xs-12 {
+                width: @ini_site_width;
+                float: right;
+            }
+        }
+    }
+
+    .wide-content {
+        .content {
+            .row > .col-xs-12 {
+                width: auto;
+                float: none;
+            }
+        }
+
+        &.showSidebar {
+            .content {
+                .row > .col-xs-12 {
+                    margin-left: @toggle-showsidebar_width;
+                }
+            }
+        }
+    }
+
+    .main-sidebar {
+        &.search {
+            > img {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+}
+
+// > 1024
+@media @screen_md-lg {
+    .wide-content.showSidebar {
+        .content {
+            .row > .col-xs-12 {
+                margin-left: 2.3rem;
+            }
+        }
+    }
+}
+
+@media @screen_max-md {
     .container {
-        border: 1px solid red;
+        margin: 0 1.25rem;
+    }
+
+    .content {
+        position: relative;
+
+        #dokuwiki__pagetools {
+            top: 0;
+        }
+
+        .row > .col-xs-12 #dokuwiki__content::before {
+            display: none;
+        }
+    }
+
+    .tools {
+        .main-sidebar {
+            display: none;
+        }
+    }
+}
+
+@media @screen_max-xxs {
+    @mobileMargin: 4px;
+
+    .container {
+        margin: 0 @mobileMargin;
+    }
+
+    body.show-mobile-sidebar #dokuwiki__aside {
+        left: @mobileMargin;
+    }
+
+    #dokuwiki__footer {
+        .main-footer {
+            > * {
+                padding-left: 2rem;
+                padding-right: 2rem;
+            }
+        }
     }
 }

css/base_vars.less

@@ -0,0 +1,165 @@
+/**
+ * This file provides the basic vars
+ */
+
+@font_family_screen:       arial, sans-serif;
+@font_family_print:        "Times New Roman", serif;
+
+@nav_direct_background:    @ini_background;
+@nav_direct_color:         @ini_existing;
+
+@background_darker:        rgba(230,230,230, .2);
+@ini_sidebar_width:        (100 - @ini_site_width) - 4;
+
+@height-context-bar:       50px;
+
+@margin-small:             1rem;
+@margin-default:           2rem;
+@margin-big:               3.07rem;
+@nav-margin:               1.3rem;
+
+@small-spacing:            .3rem;
+@very-small-spacing:       .2rem;
+
+@grid:                     @margin-small;
+@toggle-size:              1.75rem;
+
+@transition:               ease-out .30s;
+
+@box-shadow-offset:        .1em .1em .1em rgba(153,153,153,.5); // tabinclude
+@box-shadow:               0 0 .5em rgba(153,153,153,.5); // pagetoolbox hover
+@box-shadow-colored:       0 0 .5em fade(@ini_existing, 50%);
+@box-shadow-right-bottom:  .1em .3rem .5em rgba(153,153,153,.5);
+@box-shadow-bottom:        0 .1em .5em rgba(153,153,153,.5); // qc-wrapper (breadcrumb), struct inline-editor
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* for programmers customizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@fix_border-radius:        3px;           // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
+
+@toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
+
+@headericons-margin-xxs:  .45rem;         // screen xxs margin-top for header icons
+
+@page_padding-top:         @margin-small; // padding-top for 'dokuwiki__content'
+@page-header_height:       2.8rem;        // minimum: 2.8rem (height for breadcrumb, page-header, page-footer)
+@meta-box_height:          (@page-header_height - @page_padding-top);
+@breadcrumb_height:        @page-header_height;
+
+@formfield_min-height:     2rem;          // min-height for input, textarea, select, keygen
+
+@code-background:          #F6F6F6; /* code, pre, samp, kbd */
+
+/* icons */
+@noopentasks-background:   #ECECEC; /* metabox tabs + num in icons + tabinclude */
+@noopentasks-border:       #BBB; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@noopentasks-color:        #666; /* metabox tabs + num in icons + code, pre, samp, kbd */
+@wikiicons-border:         #CCC; /* usertools, breadcrumbs icons, pagetools box-hover */
+
+/* navigation left */
+@menu-margin-lg: 1.3rem;
+
+@quicksearch-button-color: @noopentasks-color; /* autosuggest, submit in quicksearch */
+@suggestion-zebra:         #EEE;
+
+/* edit mode */
+@highlight-odd-ini_text:  fade(@ini_background, 95%);
+@highlight-even-ini_text: fade(@ini_text, 5%);
+@color-editBox:           #252525; // editmode for tables, revision states
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* fonts */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font-size-very-small:     .73rem;
+@font-size-small:          .88rem;
+@font-size-default:        1rem;
+@font-size-big:            1.5rem;
+@font-size-bigger:         1.75rem;
+
+@line-height-default:      125%;
+@line-height-big:          135%;
+@line-height-bigger:       140%;
+
+@font-weight-bold:         800;
+@font-weight-normal:       400;
+
+@font-scale-factor:        .0769;
+
+@font-size-head6: @font-size-default;
+@font-size-head5: @font-size-default + @font-scale-factor;
+@font-size-head4: @font-size-default + (@font-scale-factor * 3);
+@font-size-head3: @font-size-default + (@font-scale-factor * 5);
+@font-size-head2: @font-size-default + (@font-scale-factor * 7);
+@font-size-head1: @font-size-default + (@font-scale-factor * 9);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breakpoints */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@break-min-xxs: 480;
+@break-max-xxs: (@break-min-xxs - 1);
+
+@break-min-xs: 768;
+@break-max-xs: (@break-min-xs - 1);
+
+@break-min-sm: 992;
+@break-max-sm: (@break-min-sm - 1);
+
+@break-min-md: 1024;
+@break-max-md: (@break-min-md - 1);
+
+@break-min-lg: 1200;
+@break-max-lg: (@break-min-lg - 1);
+
+@break-min-xlg: 1440;
+@break-max-xlg: (@break-min-xlg - 1);
+
+@break-min-xxlg: 1600;
+@break-max-xxlg: (@break-min-xxlg - 1);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries for breakpoints */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@screen_min-xxs: ~"only screen and (min-width: " ~"@{break-min-xxs}px)";
+@screen_max-xxs: ~"only screen and (max-width: " ~"@{break-max-xxs}px)";
+
+@screen_min-xs: ~"only screen and (min-width: " ~"@{break-min-xs}px)";
+@screen_max-xs: ~"only screen and (max-width: " ~"@{break-max-xs}px)";
+
+@screen_min-sm: ~"only screen and (min-width: " ~"@{break-min-sm}px)";
+@screen_max-sm: ~"only screen and (max-width: " ~"@{break-max-sm}px)";
+
+@screen_min-md: ~"only screen and (min-width: " ~"@{break-min-md}px)";
+@screen_max-md: ~"only screen and (max-width: " ~"@{break-max-md}px)";
+
+@screen_min-lg: ~"only screen and (min-width: " ~"@{break-min-lg}px)";
+@screen_max-lg: ~"only screen and (max-width: " ~"@{break-max-lg}px)";
+
+@screen_min-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px)";
+@screen_max-xlg: ~"only screen and (max-width: " ~"@{break-max-xlg}px)";
+
+@screen_min-xxlg: ~"only screen and (min-width: " ~"@{break-min-xxlg}px)";
+@screen_max-xxlg: ~"only screen and (max-width: " ~"@{break-max-xxlg}px)";
+
+@screen_only-md: ~"only screen and (min-width: 800px) and (max-width: " ~"@{break-max-md}px)";
+@screen_only-xlg: ~"only screen and (min-width: " ~"@{break-min-xlg}px) and (max-width: " ~"@{break-max-xxlg}px)";
+@screen_md-xlg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-xlg}px)";
+@screen_md-lg: ~"only screen and (min-width: " ~"@{break-min-md}px) and (max-width: " ~"@{break-max-lg}px)";
+@screen_xs-lg: ~"only screen and (min-width: " ~"@{break-min-xs}px) and (max-width: " ~"@{break-max-md}px)";
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* col width */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@c12:               100%;
+@c11:               91.66666667%;
+@c10:               83.33333333%;
+@c9:                75%;
+@c8:                66.66666667%;
+@c7:                58.33333333%;
+@c6:                50%;
+@c5:                41.66666667%;
+@c4:                33.33333333%;
+@c3:                25%;
+@c2:                16.66666667%;
+@c1:                8.33333333%;
+
+@grid-columns:      12;

css/icons.less

@@ -0,0 +1,60 @@
+
+i[data-icon] {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    flex-shrink: 0;
+    position: relative;
+    box-sizing: content-box;
+
+    &::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        mask-size: contain;
+        mask-position: center;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+    }
+
+    &[data-icon='arrow-left']::before {
+        mask-image: url('img/arrow_left.svg');
+    }
+
+    &[data-icon='arrow-up']::before {
+        mask-image: url('img/arrow_up.svg');
+    }
+
+    &[data-icon='arrow-right']::before {
+        mask-image: url('img/arrow_right.svg');
+    }
+
+    &[data-icon='arrow-down']::before {
+        mask-image: url('img/arrow_down.svg');
+    }
+
+    &[data-icon='info']::before {
+        mask-image: url('img/info.svg');
+    }
+
+    &[data-icon='home']::before {
+        mask-image: url('img/home.svg');
+    }
+
+    &[data-icon='menu-small']::before {
+        mask-image: url('img/menu_small.svg');
+    }
+
+    &[data-icon='light']::before {
+        mask-image: url('img/lightbulb.svg');
+    }
+
+    &[data-icon='warning']::before {
+        mask-image: url('img/warning.svg');
+    }
+
+    &[data-icon='creature']::before {
+        mask-image: url('img/creature.svg');
+    }
+}

css/plugins/bureaucracy.less

@@ -0,0 +1,116 @@
+/**
+ * This file provides styles for bureaucracy plugin
+ */
+
+/* + + + + +  global  + + + + + */
+.dokuwiki form.bureaucracy__plugin {
+    fieldset {
+        width: 100%;
+        max-width: 800px;
+        box-sizing: border-box;
+        border: 0 none;
+        text-align: center;
+        margin-left: 0;
+        margin-bottom: (@grid * 2);
+        padding: @grid 0 0;
+
+        > *:not(button) {
+            text-align: left;
+        }
+    }
+
+    legend {
+        font-size: @font-size-small;
+        font-weight: bold;
+        text-align: left;
+    }
+
+    label {
+        clear: both;
+        padding-top: (@grid / 2);
+
+        &::after {
+            content: '';
+            clear: both;
+        }
+
+        sup {
+            float: right;
+            font-size: 1em;
+        }
+
+        input,
+        select {
+            float: left;
+            width: 50%;
+            text-align: left;
+            padding: .1em .2em;
+        }
+
+        input[type="checkbox"] {
+            width: 1.5rem;
+            height: 1.5rem;
+            background-image: none;
+        }
+
+        span {
+            float: left;
+            text-align: right;
+            line-height: @line-height-default;
+            padding-top: .2em;
+            padding-right: @grid;
+
+            &:not([class]) {
+                font-weight: bold;
+                margin-top: .5em;
+
+                + input,
+                + select {
+                    margin-top: .3em;
+                }
+
+                // checkboxes
+                + input + input {
+                    margin-top: .3em;
+                }
+            }
+
+            &.label {
+                text-align: right;
+                padding-top: .5em;
+            }
+
+            &.input {
+                width: 49%;
+                text-align: left;
+                padding-left: 0;
+            }
+        } // span
+    } // label
+
+    button[type="submit"] {
+        margin-top: (@grid * 2);
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* min-width: 1440px */
+@media @screen_min-xlg {
+    .dokuwiki form.bureaucracy__plugin {
+        p {
+            font-size: @font-size-default;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1439px */
+@media @screen_max-xlg {
+    .dokuwiki form.bureaucracy__plugin {
+        p,
+        label,
+        button[type="submit"] {
+            font-size: @font-size-default;
+        }
+    }
+}

css/plugins/configmanager.less

@@ -0,0 +1,174 @@
+/**
+ * This file provides styles for config manager
+ */
+
+/* + + + + +  config__manager  + + + + + */
+#dokuwiki__content {
+    #config__manager {
+        fieldset {
+            min-width: 100%;
+            overflow-x: auto;
+            box-sizing: border-box;
+            background-color: var(--color-background);
+            margin-left: 0;
+            margin-right: 0;
+            color: var(--color-foreground)
+        }
+
+        .selectiondefault {
+            background-color: transparent;
+            color: inherit;
+        }
+
+        tr {
+            a {
+                color: var(--color-shade-4);
+            }
+
+            .input {
+                background-color: transparent;
+                color: inherit;
+            }
+
+            input, select, textarea {
+                background-color: var(--color-background);
+                color: var(--color-foreground);
+            }
+
+            select.edit {
+                padding: 0 0.3em;
+            }
+
+            &:hover {
+                td {
+                    color: inherit;
+                }
+            }
+        }
+
+        tr.default {
+            .input {
+                background-color: transparent;
+            }
+
+            input, select, textarea {
+                background-color: var(--color-shade-1);
+            }
+        }
+
+        td.label {
+            padding: .8em 0 1.2em 1em;
+
+            span.outkey {
+                background-color: var(--color-background);
+                color: inherit;
+                font-size: (@font-size-small - .06);
+                font-weight: bold;
+                padding: 0 @very-small-spacing;
+
+                a {
+                    font-size: inherit;
+                }
+            }
+
+            label {
+                line-height: @line-height-big;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1024px */
+@media @screen_max-md {
+    #dokuwiki__content {
+        #config__manager {
+            td {
+                &.label {
+                    label,
+                    span {
+                        font-size: @font-size-small;
+                    }
+                }
+
+                &.label + td {
+                    font-size: @font-size-small;
+
+                    span {
+                        font-size: inherit;
+                    }
+                }
+
+                select,
+                input.edit {
+                    font-size: @font-size-small;
+                }
+            }
+
+            .selectiondefault {
+                label {
+                    font-size: @font-size-small;
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 768px */
+@media @screen_max-sm {
+    #dokuwiki__content {
+        #config__manager {
+            table {
+                border-top: 0 none;
+            }
+
+            td {
+                padding-top: 0;
+
+                &.label {
+                    display: block;
+                    width: 100%;
+                    border: 0 none;
+                    border-top: 1px solid @ini_border;
+                    border-bottom: 0 none;
+                    padding: .8em .5em .3em;
+
+
+                    span.outkey {
+                        margin-left: 0;
+                    }
+                }
+
+                .input {
+                    width: 100%;
+                }
+
+
+                &.value,
+                &.label + td {
+                    display: block;
+                    width: 100%;
+                    border: 0 none;
+                    margin-bottom: 1.2rem;
+                }
+
+                select,
+                input.edit {
+                    width: 100%;
+                    text-overflow: ellipsis;
+                }
+            }
+
+            .selectiondefault {
+                float: none;
+                max-width: 100%;
+                width: auto;
+
+                label {
+                    width: 90%;
+                }
+            }
+        }
+    }
+}

css/plugins/data.less

@@ -0,0 +1,48 @@
+/**
+ * This file provides styles for "data plugin"
+ * after importing struct data this can be deleted
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .dataplugin_entry {
+        dl {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    .editbutton_plugin_data {
+        position: relative;
+        top: -1em; // as margin after DL
+        float: left;
+        font-size: @font-size-small; // for right position
+        margin-top: 0;
+
+        form {
+            button {
+                min-height: 1rem;
+                height: 1.8em;
+                background-color: var(--color-background);
+                border-top: solid 1px @ini_button_background;
+                border-color: @ini_border;
+                border-radius: 0 0 @fix_border-radius @fix_border-radius;
+                color: @ini_existing;
+                font-size: @font-size-small;
+                line-height: 1.8em;
+                margin-top: -1px; // for right position
+                margin-left: .6em;
+                padding: 0 .3em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_existing;
+                    border-color: @ini_existing;
+                    color: var(--color-background);
+                }
+            }
+        }
+    }
+}

css/plugins/do_tasks.less

@@ -0,0 +1,96 @@
+/**
+ * This file provides styles for do-task plugin
+ */
+
+
+/* + + + + +  usertool icon in header  + + + + + */
+#dokuwiki__usertools.nav-usertools {
+    ul {
+        li {
+            &.user-task {
+                .btn-usertools-wrapper();
+                .btn-usertools-num();
+
+                position: relative;
+
+                .plugin__do_usertasks {
+                    width: 100%;
+                    min-width: (@toggle-size + .25);
+                    min-height: @toggle-size;
+                    border-radius: @ini_default_border_radius;
+                    border: 1px solid @wikiicons-border;
+                    padding: .14rem 0 0 0;
+
+                    &::before {
+                        content: ''; // remove when fontello is removed from usertools
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        background-color: @ini_nav_menu_hover_color;
+                        border: none;
+
+                        svg path {
+                            fill: @ini_nav_menu_hover_bg;
+                        }
+                    }
+                }
+
+                button {
+                    background-color: @ini_nav_menu_hover_bg;
+                }
+
+                svg {
+                    width: 1.2rem;
+                    height: 1.2rem; // for IE 11
+                    margin-bottom: 2px;
+
+                    path {
+                        fill: @ini_nav_menu_hover_color;
+                    }
+                }
+
+                .noopentasks {
+                    span {
+                        background-color: var(--color-background);
+                        border-color: @noopentasks-border;
+                        color: @ini_text_webframe;
+                    }
+
+                    svg path {
+                        fill: @ini_text_webframe;
+                    }
+
+                    .num {
+                        background-color: @noopentasks-border; // fix
+                        color: @noopentasks-color; // fix
+                        margin-top: 1px;
+                    }
+                }
+
+                @media @screen_max-xs {
+                    display: none;
+                }
+            } // user-task
+        } // li
+    } // ul
+}
+
+.plugin__do_usertasks_list {
+    background-color: transparent;
+
+    @media @screen_max-sm {
+        right: 1.25rem !important;
+        left: 1.25rem !important;
+    }
+
+    table.inline {
+        background-color: var(--color-background);
+        margin-top: .5rem;
+
+        @media @screen_max-sm {
+            width: 100%;
+        }
+    }
+}

css/plugins/edit.less

@@ -0,0 +1,81 @@
+/**
+ * This file provides styles for the edit view (?do=edit), preview
+ * and "section edit button" and "editbutton_table edit button".
+ */
+
+/* + + + + +  edit view  + + + + + */
+#dokuwiki__content {
+    div.section_highlight {
+        clear: right;
+        background: repeating-linear-gradient(-45deg,
+        var(--color-shade-1),
+        var(--color-shade-1) 10px,
+        var(--color-background) 10px,
+        var(--color-background) 20px,);
+        border-color: var(--color-background);
+    }
+
+    // "section edit button" and "editbutton_table edit button"
+    .secedit button {
+        clear: both;
+        font-size: 100%;
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+
+        &::after {
+
+        }
+
+        &:hover {
+            &::after {
+                border: none;
+            }
+        }
+    }
+
+    div.editBox {
+        background-color: var(--color-background);
+        border: solid 2px var(--color-shade-4);
+        border-radius: @fix_border-radius;
+        padding: 0.5rem;
+
+        .editButtons {
+            display: inline-block;
+            padding-bottom: 1rem;
+        }
+
+        @media @screen_max-xs {
+            div.summary {
+                label[for=edit__summary] {
+                    white-space: normal;
+                    display: block;
+                    width: 100%;
+
+                    span {
+                        display: inline-block;
+                        padding-bottom: .4rem;
+                    }
+
+                    input#edit__summary {
+                        max-width: 100%;
+                        box-sizing: border-box;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.mode_edit {
+    .content {
+        .msg-area {
+            display: block;
+            margin-bottom: 1.5rem;
+            clear: both;
+        }
+
+        #spr__meta-box {
+            display: none;
+        }
+    }
+}

css/plugins/edittable.less

@@ -0,0 +1,69 @@
+/**
+ * This file provides styles for "edittable plugin"
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content.main-content {
+    #edittable__editor {
+        th,
+        .handsontable th {
+            border-color: var(--color-shade-4);
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
+
+            &.ht__highlight {
+                background-color: var(--color-shade-2);
+            }
+        }
+
+        td {
+            border-color: var(--color-shade-4);
+            background-color: var(--color-background);
+            color: var(--color-foreground);
+
+            &.current {
+                background-color: var(--color-shade-1);
+            }
+        }
+    }
+
+    div.editbutton_table {
+        position: relative; // for IE
+        float: left;
+        margin-top: -1.4em !important; // overwrite inline styles
+
+        form div.no {
+            button,
+            input.button {
+                min-height: 1rem;
+                background-color: var(--color-shade-1);
+                border: solid 0.1em var(--color-shade-2);
+                border-radius: 0.5rem;
+                color: var(--color-foreground);
+                font-size: @font-size-small;
+                margin: 0;
+                margin-top: 0.5rem;
+                padding: 0.2rem 0.4rem;
+                height: auto;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: transparent;
+                    color: var(--color-glow-primary);
+                    border-color: var(--color-glow-primary);
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
+                }
+            }
+        }
+
+        + * {
+            clear: left;
+        }
+
+        + div.editbutton_table {
+            clear: none;
+        }
+    }
+}

css/plugins/extension__manager.less

@@ -0,0 +1,67 @@
+/**
+ * This file provides styles for extension manager
+ */
+
+/* + + + + +  global  + + + + + */
+.dokuwiki {
+    #extension__manager {
+        .actions {
+            font-size: 0;
+
+            > button {
+                font-size: .92rem;
+                margin-left: .3rem;
+                padding-left: .3rem;
+                padding-right: .3rem;
+            }
+
+            p.permerror {
+                @media @screen_max-md {
+                    flex-direction: column;
+                }
+
+                display: flex;
+                align-items: start;
+                gap: 0.5rem;
+                background: none;
+
+                &::before {
+                    content: "";
+                    flex-shrink: 0;
+                    margin-top: 0.3em;
+                    width: 1em;
+                    height: 1em;
+                    mask-size: contain;
+                    mask-position: center top;
+                    mask-repeat: no-repeat;
+                    mask-image: url(img/warning.svg);
+                    background-color: var(--color-warning);
+                }
+            }
+        }
+
+        ul.tabs {
+            li.active {
+                a {
+                    background-color: var(--color-shade-3);
+                    color: var(--color-foreground);
+                    border-color: var(--color-shade-4);
+                }
+            }
+        }
+
+        .panelHeader {
+            background-color: var(--color-shade-2);
+        }
+    }
+
+    #extension__list {
+        .extensionList {
+
+            li {
+                color: var(--color-foreground);
+            }
+        }
+    }
+}
+

css/plugins/fastwiki.less

@@ -0,0 +1,7 @@
+/**
+ * This file provides styles for "fastwiki" plugin
+ */
+
+.mode_edit .content .row > .col-xs-12 #dokuwiki__content::before {
+    display: none;
+}

css/plugins/folded.less

@@ -0,0 +1,33 @@
+/**
+ * This file provides styles for the toggle "folded"
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    a.folder {
+        background: transparent url("svg.php?svg=down.svg&f=existing") right center no-repeat;
+        color: @ini_existing;
+        padding-right: 20px;
+
+        &.open {
+            background-image: url("svg.php?svg=up.svg&f=existing");
+        }
+    }
+
+    div.folded {
+        box-shadow: @box-shadow-colored;
+        border: 1px solid fade(@ini_existing, 50%);
+        border-radius: 0;
+        margin-top: -.7rem;
+        margin-bottom: .7rem;
+        padding: .5em;
+
+        p {
+            margin: .5rem 0;
+        }
+    }
+
+    span.folded {
+        border: 1px dotted @ini_border;
+    }
+}

css/plugins/highlight_parent.less

@@ -0,0 +1,22 @@
+/**
+ * This file provides styles for highlight plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#plugin__highlightparent {
+    clear: none;
+    display: block;
+    position: relative;
+
+    + * {
+        clear: both;
+        padding-top: 1em; // as h1
+    }
+}
+
+@media @screen_max-md {
+    #plugin__highlightparent {
+        clear: both;
+        margin-top: 1rem;
+    }
+}

css/plugins/magic-matcher.less

@@ -1,46 +1,215 @@
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* all media */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
+/**
+ * This file provides styles for magic matcher plugin
+ */
 
 /* + + + + + + + + + + + + + + + + + + + + + + + */
 /* magic matcher bar with form on top of page */
+#spr__magic-matcher {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
 
-#dokuwiki_magic-matcher{
+    .container {
+        @media @screen_md-lg {
+            margin-left: 1.8rem;
+        }
+    }
+
+    #mm__issueselect_chosen {
+        max-width: 50%;
+    }
+
+    select[name="mmissues"] + div.chosen-container {
+        max-width: 67%;
+    }
+
+    button[name="toggleSuggestions"] {
+        position: absolute;
+        right: 0;
+        top: 0;
+        border: 0;
+        border-bottom: 1px solid @ini_border;
+        border-left: 1px solid @ini_border;
+        color: @ini_nav_menu_color;
+        background: #fff;
+        border-radius: 0;
+        border-bottom-left-radius: 5px;
+
+        &:hover,
+        &:focus,
+        &:active {
+            border-color: @ini_button_background;
+            color: @ini_button_background;
+        }
+    }
 
     #magicmatcher__context {
-        box-sizing: border-box;
-        background-color: __nav_direct_background__;
-        box-shadow: __box_shadow__;
-        border-radius: 0 0 __default_border_radius__ __default_border_radius__;
         position: relative;
-        z-index: 100;
-        left: .25%;
-        width: 99.5%;
-        min-height: 50px;
+        width: 100%;
+        min-height: @height-context-bar;
+        box-sizing: border-box;
+        box-shadow: @box-shadow;
+        background-color: var(--color-background);
+        border-radius: 0 0 @ini_default_border_radius @ini_default_border_radius;
+        font-size: @font-size-default;
         padding: .8em 1em .5em;
+        margin-bottom: 0;
 
-        .chosen-container-single .chosen-single span{
+        .chosen-container-single,
+        .chosen-container-single *,
+        #mm_issue_loading,
+        .mm__status,
+        .toggleSuggestions {
+            font-size: @font-size-default;
+        }
+
+        .chosen-container-single {
+            .chosen-single span {
                 line-height: @line-height-bigger;
             }
         }
+
+        @media @screen_max-md {
+            padding-top: @margin-default;
+
+            .chosen-container {
+                display: block;
+                min-width: 100%;
+                max-width: 100%;
+                margin-bottom: .5rem;
+            }
+        }
+    }
 }
 
+/* + + + + +  in content  + + + + + */
+a.jiralink {
+    font-size: @font-size-default;
+
+    img {
+        float: left;
+        display: inline-block;
+        margin-top: .13em;
+        margin-right: 3px;
+    }
+
+    span.mm__status {
+        display: inline-block;
+        font-size: @font-size-default;
+        margin-left: 5px;
+        padding: 1px 4px;
+    }
+}
+
+/* + + + + +  tooltip in metabox  + + + + + */
+.dokuwiki {
+    .serverToolTip {
+        box-shadow: @box-shadow;
+        border-radius: @fix_border-radius;
+        font-size: @font-size-default;
+
+        h1.issueTitle {
+            font-size: @font-size-default;
+        }
+
+        h2 {
+            font-size: @font-size-small;
+        }
+
+        ul {
+            margin-top: @small-spacing;
+        }
+
+        p,
+        li {
+            font-size: (@font-size-small - .06);
+
+            * {
+                font-size: inherit;
+            }
+        }
+
+        p {
+            margin-top: @small-spacing;
+            margin-bottom: @small-spacing;
+        }
+
+        .components {
+            .component {
+                font-size: (@font-size-small - .06);
+            }
+        }
+
+        .labels {
+            .label {
+                font-size: (@font-size-small - .06);
+            }
+        }
+
+        .descriptionTeaser {
+            font-size: (@font-size-small - .06);
+            margin-top: (@small-spacing * 2);
+            margin-bottom: (@small-spacing * 2);
+        }
+    }
+}
+
+/* + + + + +  no js version  + + + + + */
 .no-js {
-    #dokuwiki_magic-matcher{
+    #spr__magic-matcher {
         display: none;
     }
 }
 
+.do-admin #dokuwiki__content {
+    #magicmatcher__repoadmin,
+    #magicmatcher_adminimport {
+        .tabs li {
+            a {
+                cursor: pointer;
+            }
+            &.active {
+                a {
+                    cursor: default;
+                }
+            }
+        }
+
+        .service_wrapper > a{
+            display: inline-block;
+            margin-top: 20px;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* max-width: 1023px */
+@media @screen_max-lg {
+    #spr__magic-matcher {
+        #magicmatcher__context {
+            .chosen-container-single {
+                width: 20% !important;
+
+                + select + .chosen-container-single {
+                    width: 58% !important;
+                }
+            }
+        }
+    }
+}
+
+@media @screen_max-md {
+    #spr__magic-matcher {
+        display: none;
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media print {
-    #dokuwiki_magic-matcher{
+    #spr__magic-matcher {
         display: none;
     }
 }
-

css/plugins/mediamanager.less

@@ -0,0 +1,69 @@
+/**
+ * This file provides styles for mediamanager
+ */
+
+/* + + + + +  global  + + + + + */
+#mediamanager__page {
+    .namespaces{
+        h2 {
+            bottom: 0;
+            line-height: 100%;
+            margin-bottom: -1px;
+            background-color: var(--color-shade-3);
+            color: var(--color-foreground);
+            border-color: var(--color-shade-4);
+        }
+        .panelHeader {
+            border-color: var(--color-shade-4);
+        }
+    }
+
+    #media__tree ul li img {
+        padding-top: .3em;
+    }
+
+    ul.tabs li a {
+        border-bottom-color: transparent;
+    }
+
+    #page__revisions {
+        > .no > ul > li input[type="checkbox"] {
+            margin-left: 0;
+        }
+    }
+
+    .panelHeader {
+        background-color: var(--color-shade-2);
+    }
+
+    .filelist .panelContent ul li{
+        background-color: var(--color-shade-2);
+        color: var(--color-foreground);
+
+        &:hover {
+            background-color: var(--color-shade-4);
+            border: none;
+        }
+    }
+
+    .file dl {
+        dt{
+            background-color: var(--color-shade-2);
+            padding: 0.2em;
+        }
+
+        dd{
+            background-color: var(--color-shade-1);
+            padding: 0.2em;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    #mediamanager__page {
+        min-width: 100%;
+        max-width: 100%;
+    }
+}

css/plugins/move.less

@@ -0,0 +1,12 @@
+/**
+ * This file provides styles for move plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__site > .plugin_move_dialog {
+    font-size: @font-size-default;
+
+    * {
+        font-size: @font-size-default;
+    }
+}

css/plugins/popupviewer.less

@@ -0,0 +1,26 @@
+/**
+ * This file provides styles for popupviewer plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#popupviewer {
+    > .controls > .content {
+        padding: 1.5rem 1rem 1rem;
+
+        td,
+        th {
+            font-size: @font-size-default;
+            line-height: @line-height-default;
+            a{
+                font-size: @font-size-default;
+                line-height: @line-height-default;
+            }
+        }
+
+        .li,
+        li {
+            font-size: @font-size-default;
+            line-height: @line-height-default;
+        }
+    }
+}

css/plugins/qc.less

@@ -0,0 +1,103 @@
+/**
+ * Styles for the QC plugin
+ */
+
+/* + + + + +  slideout output  + + + + + */
+.qc-output {
+    position: relative;
+    min-width: 100%;
+    width: auto;
+    background-color: @ini_background !important;
+    font-size: 90%;
+    box-shadow: @box-shadow-bottom;
+    border-bottom: solid 1px @ini_border_light;
+    margin-bottom: 0;
+    padding-top: 0 !important; // for JS overwrite
+
+    @media @screen_min-xxs {
+        margin-right: -(@margin-default);
+        margin-left: -(@margin-default);
+        padding-left: @margin-default;
+        padding-right: @margin-default;
+    }
+
+    @media @screen_min-md {
+        top: -(@margin-small);
+    }
+
+    @media @screen_max-md {
+        top: 0;
+        margin-top: -(@page_padding-top + 2);
+        margin-right: -(@margin-default * 1.6);
+        margin-left: -(@margin-default);
+        padding-top: @margin-default;
+    }
+
+    @media @screen_max-xxs {
+        margin-left: -(@margin-small);
+        padding-left: @margin-small;
+        padding-right: @margin-default;
+    }
+
+    h1 {
+        @media @screen_min-md {
+            padding-top: 0;
+        }
+    }
+
+    h2 {
+        font-size: 1.3rem;
+    }
+
+    h3 {
+         font-size: 1.1rem;
+    }
+
+    h4,
+    h5,
+    h6 {
+        font-size: 1rem;
+    }
+
+    div,
+    p {
+        margin-left: 0;
+    }
+
+    dl {
+        dt,
+        dd {
+            padding-bottom: @small-spacing;
+
+            @media @screen_max-xxs {
+                float: none;
+                display: inline-block;
+                width: 49%;
+                max-width: 10em;
+                vertical-align: top;
+                margin-left: 0;
+            }
+        }
+    }
+
+    .qc_icon {
+        background-color: #fff;
+        border-radius: @fix_border-radius;
+        vertical-align: top;
+        padding: .1rem;
+    }
+}
+
+/* + + + + +  admin settings  + + + + + */
+.do-admin #dokuwiki__content {
+    #plugin__qc_admin {
+        table .centeralign {
+            .qc_icon svg + span {
+                min-width: 2em;
+                padding-left: .2em;
+                text-align: left;
+                display: inline-block;
+            }
+        }
+    }
+}

css/plugins/sitemapnavi.less

@@ -0,0 +1,25 @@
+/**
+ * This file provides styles for the sitemapnavi plugin
+ */
+
+#plugin__sitemapnavi {
+    padding-bottom: @nav-margin;
+    margin-bottom: @nav-margin;
+    border-bottom: 1px solid @ini_nav_menu_color;
+
+    label {
+        padding-left: 0.5em;
+    }
+
+    li {
+        line-height: @line-height-bigger;
+
+        li {
+            margin-left: 0.75em;
+        }
+    }
+}
+
+.wide-content #plugin__sitemapnavi {
+    display: none;
+}

css/plugins/starred.less

@@ -0,0 +1,17 @@
+/**
+ * This file provides styles for starred plugin
+ */
+nav.nav-starred {
+    ul {
+        list-style: none;
+
+        li {
+            margin-left: 0;
+
+            svg {
+                vertical-align: text-top;
+                fill: @ini_nav_menu_color;
+            }
+        }
+    }
+}

css/plugins/struct.less

@@ -0,0 +1,196 @@
+/**
+ * This file provides styles for struct plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .structaggregation {
+        @link-height: 1.5rem;
+
+        position: relative;
+        padding-bottom: @link-height;
+        margin-bottom: @grid;
+
+        td,
+        th {
+            line-height: @line-height-default;
+
+            a {
+                //color: @ini_existing;
+                line-height: @line-height-default;
+            }
+        }
+
+        th {
+            a {
+                color: @ini_link_alt;
+            }
+        }
+
+        // search button in table (f.i. "All products")
+        table th input {
+            &:not(:focus) {
+                cursor: pointer;
+            }
+
+            &:focus {
+                width: 100%;
+                box-sizing: border-box;
+            }
+        }
+
+        .table {
+            margin-bottom: 0;
+        }
+
+        > a {
+            position: absolute;
+            bottom: 0;
+            height: @link-height;
+            margin-bottom: 0;
+
+            &.export {
+                bottom: 1px;
+                overflow-x: hidden;
+                background: transparent url("svg.php?svg=file-export.svg&f=existing") left center no-repeat;
+                background-size: auto 20px;
+                border: solid 1px @ini_border;
+                border-radius: 0 0 @fix_border-radius @fix_border-radius;
+                color: @ini_existing;
+                font-size: @font-size-small;
+                line-height: 1;
+                margin-top: -1px;
+                padding-top: .4em;
+                transition: @transition background-color, @transition border-color, @transition color;
+
+                &:hover,
+                &:focus,
+                &:active {
+                    background-color: @ini_existing;
+                    background-image: url("svg.php?svg=file-export.svg&f=background");
+                    border-color: @ini_existing;
+                    //color: var(--color-background);
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    #plugin__struct_output {
+        margin-right: 0;
+
+        th {
+            background-color: @ini_background_alt;
+        }
+    }
+
+    .struct_entry_form {
+        margin-bottom: 2rem;
+
+        > fieldset {
+            margin-top: 1.5rem;
+        }
+    }
+
+    textarea + .struct_entry_form {
+        margin-top: -.5rem;
+    }
+
+    div.editBox {
+        .struct_entry_form {
+            label span.label {
+                color: @color-editBox;
+            }
+        }
+    }
+}
+
+/* + + + + +  struct inline-editor  + + + + + */
+.dokuwiki {
+    .struct_inlineditor {
+        box-shadow: @box-shadow-bottom;
+
+        p.hint {
+            margin-top: @small-spacing;
+            margin-bottom: @margin-small;
+        }
+
+        button[type="submit"] + button {
+            min-height: @formfield_min-height;
+            vertical-align: middle;
+            margin-left: @small-spacing;
+        }
+    }
+
+    /* struct fields for bureaucracy forms */
+    .bureaucracy__plugin {
+        .field {
+            clear: both;
+
+            label {
+                padding: 0;
+
+                .label {
+                    text-align: right;
+                    font-weight: bold;
+                    padding: 0;
+                }
+            }
+
+            .input {
+                line-height: 2.5em;
+            }
+        }
+    }
+}
+
+
+/* + + + + +  form - Struct Schema Editor  + + + + + */
+form {
+    &.doku_form.struct_newschema {
+        fieldset {
+            > label {
+                > span:first-child {
+                    display: inline-block;
+
+                    @media @screen_min-lg {
+                        width: 48.8%;
+                    }
+
+                    @media @screen_max-lg {
+                        width: 48.5%;
+                    }
+                }
+
+                > input[type="text"] {
+                    width: 50%;
+                }
+            }
+
+            button {
+                cursor: pointer;
+                box-shadow: none;
+                background-image: none;
+                background-color: @ini_button_background;
+                border: 1px solid @ini_button_background;
+                border-radius: @fix_border-radius;
+                color: @ini_button_color;
+                vertical-align: top;
+                margin-top: .3em;
+                padding: .3em @grid;
+                transition: @transition background-color, @transition color;
+
+                &:hover,
+                &:active,
+                &:focus {
+                    background-color: @ini_button_color;
+                    color: @ini_button_background;
+                }
+
+                + p {
+                    padding-top: 1rem;
+                }
+            }
+        } // fieldset
+    }
+} // form

css/plugins/structstatus.less

@@ -0,0 +1,12 @@
+/**
+ * This file provides styles for structstatus plugin
+ */
+
+/* + + + + +  global  + + + + + */
+#dokuwiki__content {
+    .struct_status {
+        border-color: @ini_border;
+        border-radius: @fix_border-radius;
+        font-size: @font-size-small;
+    }
+}

css/plugins/tabinclude.less

@@ -0,0 +1,57 @@
+/**
+ * This file provides styles for the tabinclude
+ */
+
+/* + + + + +  plugin tabinclude  + + + + + */
+div#dwpl-ti-container {
+    li.dwpl-ti-tab {
+        box-shadow: none;
+        background-color: @ini_background_page_header;
+        border-color: @ini_border;
+        border-radius: @fix_border-radius @fix_border-radius 0 0;
+        color: @ini_background_page_footer;
+        padding: 0;
+
+        &:hover {
+            background-color: @ini_background_page_header;
+            text-decoration: none;
+
+            div {
+                text-decoration: underline;
+
+                &.selected {
+                    color: @ini_text;
+                }
+            }
+        }
+
+        div {
+            border-radius: inherit;
+            color: inherit;
+            padding: .1em .35em;
+
+            &.selected {
+                position: relative;
+                background-color: var(--color-background);
+                color: @ini_text;
+            }
+        }
+    }
+
+/* + + +  content box  + + + */
+    div.dwpl-ti-content-box {
+        position: relative;
+        overflow: auto;
+        box-shadow: @box-shadow;
+        background-color: var(--color-background);
+        border: solid 1px @ini_border;
+        border-radius: 0;
+        margin-top: -1px;
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    div#dwpl-ti-container { }
+}

css/plugins/tablelayout.less

@@ -0,0 +1,19 @@
+/**
+ * This file provides styles for "tablelayout plugin"
+ */
+
+
+/* + + + + +  global  + + + + + */
+
+#dokuwiki__content.main-content .secedit.editbutton_table{
+    a.button.print {
+        min-height: 1rem;
+        background-color: var(--color-background);
+        border-radius: 0 @ini_default_border_radius;
+        border-top: solid 1px;
+        border-color: @ini_border;
+        font-size: .88rem;
+        margin-top: -1px;
+        padding-right: .3em;
+    }
+}

css/plugins/tagging.less

@@ -0,0 +1,123 @@
+/**
+ * This file provides styles for the form in tagcloud
+ */
+
+/* + + + + +  plugin tagging  + + + + + */
+#spr__meta-box {
+    ul.tagging_cloud {
+        width: 100%;
+        padding-right: 0;
+
+        li {
+            &.t0 a {
+                font-size: .88rem;
+            }
+
+            &.t1 a {
+                font-size: 1rem;
+            }
+
+            &.t2 a {
+                font-size: 1.1rem;
+            }
+
+            &.t3 a {
+                font-size: 1.2rem;
+            }
+
+            &.t4 a {
+                font-size: 1.3rem;
+            }
+
+            &.t5 a {
+                font-size: 1.4rem;
+            }
+
+            &.t6 a {
+                font-size: 1.5rem;
+            }
+
+            &.t7 a {
+                font-size: 1.6rem;
+            }
+
+            &.t8 a {
+                font-size: 1.7rem;
+            }
+
+            &.t9 a {
+                font-size: 1.8rem;
+            }
+
+            &.t10 a {
+                font-size: 1.9rem;
+            }
+        }
+    }
+
+    form#tagging__edit {
+        width: 100%;
+
+        label {
+            display: block;
+        }
+
+        input.edit {
+            width: 100%;
+            margin-bottom: .5rem;
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* media queries */
+@media @screen_max-md {
+    #spr__meta-box {
+        form {
+            &#tagging__edit {
+                label {
+                    display: inline-block;
+                    min-width: 50%;
+                    vertical-align: top;
+                    margin-bottom: .5rem;
+                }
+
+                input.edit {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+}
+
+@media @screen_max-xs {
+    #spr__meta-box {
+        form {
+            div > button[type="submit"] {
+                width: 49%;
+                padding: 0;
+            }
+
+            &#tagging__edit {
+                &::after {
+                    content: '';
+                    clear: both;
+                    display: block;
+                }
+
+                label {
+                    display: block;
+                    width: 100%;
+                }
+
+                button[type="submit"] {
+                    float: right;
+
+                    &:first-of-type {
+                        float: left;
+                    }
+                }
+            }
+        }
+    }
+}

css/plugins/tplinc.less

@@ -0,0 +1,6 @@
+.wide-content {
+    .sidebarheader,
+    .sidebarfooter {
+        visibility: hidden;
+    }
+}

css/plugins/translation.less

@@ -0,0 +1,57 @@
+/**
+ * This file provides styles for the translation plugin
+ */
+@import "../base";
+
+
+.dokuwiki div.plugin_translation {
+    clear: none;
+    display: block;
+    position: relative;
+    float: none;
+
+    box-sizing: border-box;
+    width: 100%;
+    padding-bottom: 0.5rem;
+    height: 4rem;
+
+    + * {
+        clear: both;
+        padding-top: 1em; // as h1
+    }
+
+    ul li {
+        margin-top: 0;
+
+        // active language
+        span.wikilink1 {
+            .fnButton();
+            .fnActiveButton();
+            cursor: default;
+        }
+
+        a.wikilink1{
+            .fnButton();
+        }
+
+        span.wikilink2{
+            .fnButton();
+            .fnButtonSecondary();
+            .fnActiveButtonSecondary()
+        }
+
+        a.wikilink2,
+        a.wikilink2:visited{
+            .fnButton();
+            .fnButtonSecondary();
+            background-color: var(--color-shade-4);
+        }
+    }
+}
+
+@media @screen_max-md {
+    .dokuwiki div.plugin_translation {
+        clear: both;
+        margin-top: 1rem;
+    }
+}

css/plugins/wrap.less

@@ -0,0 +1,119 @@
+.dokuwiki {
+  span.wrap_em {
+    color: var(--color-error);
+  }
+
+  span.wrap_hi {
+    background-color: var(--color-highlight);
+    color: var(--color-foreground);
+  }
+
+  span.wrap_lo {
+    color: var(--color-text-2);
+  }
+
+  div.plugin_wrap {
+    &.wrap_box {
+      background-color: var(--color-shade-1);
+      color: var(--color-foreground);
+    }
+
+    &.wrap_info,
+    &.wrap_tip,
+    &.wrap_important,
+    &.wrap_alert,
+    &.wrap_help,
+    &.wrap_download,
+    &.wrap_todo {
+      @media @screen_max-md {
+        flex-direction: column;
+      }
+
+      display: flex;
+      align-items: start;
+      gap: 1rem;
+      border: none;
+      border-left: solid 0.5rem var(--color-shade-4);
+      border-radius: 0.5rem;
+      padding: 1em;
+      background-image: none;
+      background-color: var(--color-shade-1);
+
+      &::before {
+        content: "";
+        flex-shrink: 0;
+        margin-top: 0.3em;
+        width: 2em;
+        height: 2em;
+        mask-size: contain;
+        mask-position: center top;
+        mask-repeat: no-repeat;
+        background-color: currentColor;
+      }
+    }
+
+    &.wrap_info {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/info.svg);
+      }
+    }
+
+    &.wrap_tip {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/lightbulb.svg);
+      }
+    }
+
+    &.wrap_important {
+      border-left-color: var(--color-warning);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-warning);
+        mask-image: url(img/warning.svg);
+      }
+    }
+
+    &.wrap_alert {
+      border-left-color: var(--color-error);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-error);
+        mask-image: url(img/power.svg);
+      }
+    }
+
+    &.wrap_help {
+      border-left-color: var(--color-accent-1);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-accent-1);
+        mask-image: url(img/question.svg);
+      }
+    }
+
+    &.wrap_download {
+      border-left-color: var(--color-success);
+      color: var(--color-foreground);
+
+      &::before {
+        background-color: var(--color-success);
+        mask-image: url(img/arrow_down.svg);
+      }
+    }
+
+    &.wrap_todo {
+      color: var(--color-foreground);
+
+      &::before {
+        mask-image: url(img/tick_small.svg);
+      }
+    }
+  }
+}

css/print.less

@@ -1,6 +1,517 @@
 /**
  * This file provides the styles for printing.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
+/* + + + + +  variables  + + + + + */
+@color-print: #000;
+@background-print: transparent;
+@border-color-print: #ccc;
+@border-dark-print: #777;
+
+/*  + + + + + print styles  + + + + + */
+html,
+body {
+    background: @background-print;
+}
+
+a:link,
+a:visited {
+    background: @background-print !important;
+    color: @color-print !important;
+    text-decoration: underline;
+}
+
+/* lightbox is shown: */ #dokuwiki__top[style="overflow: hidden;"] .page-wrapper,
+#spr__direct,
+.top-header,
+.main-footer,
+.menu-togglelink,
+.main-title.desktop-only,
+#spr__meta-box,
+.content .row > .col-xs-12 #dokuwiki__content::before,
+.page-wrapper > .tools,
+.breadcrumbs,
+.wikilink1[href*="id=pagefooter"],
+.structaggregation > a.export,
+#dokuwiki__content .structaggregation > a,
+#dokuwiki__content a.folder {
+    display: none !important;
+}
+
+.content .row > .col-xs-12 {
+    box-shadow: none;
+}
+
+.dokuwiki div.page,
+.main-sidebar.claim,
+.page-footer {
+    padding: 20pt 20pt 0;
+}
+
+#dokuwiki__header .logo img {
+    height: 4rem;
+    width: auto;
+}
+
+
+/* + + + + + + + + + + + + + + */
+/* + + + + +  admin  + + + + + */
+
+/* + + +  acl_manager  + + + */
+#acl__tree {
+    display: none;
+}
+
+#acl__detail {
+    .aclpage {
+        display: block;
+        font-size: 110%;
+        margin-top: 13pt;
+        padding-bottom: 13pt;
+    }
+}
+
+/* + + +  Extension Manager  + + + */
+#extension__manager {
+    form.search {
+        display: inline-block;
+        margin-bottom: 20pt;
+    }
+    form.install {
+        display: none;
+    }
+    ul.tabs {
+        li.active {
+            a {
+                font-weight: bold;
+                text-decoration: none;
+            }
+        }
+    }
+}
+
+#extension__list {
+    .extensionList {
+        border-bottom: 1pt solid @border-color-print;
+        padding: 0;
+
+        li {
+            list-style-type: none;
+            border-top: 1pt solid @border-color-print;
+            margin-left: 0;
+
+            &::after {
+                content: '';
+                clear: both;
+                display: table;
+                height: 10pt;
+            }
+
+            a.info,
+            .actions.col {
+                display: none;
+            }
+
+            .screenshot {
+                float: left;
+                border: 1pt solid @border-color-print;
+                margin: 0 10pt 5pt 0;
+            }
+
+            h2, h2 * {
+                font-size: 100%;
+            }
+        }
+    }
+}
+
+#user__manager {
+    table input,
+    .import_users input{
+        display: none !important;
+    }
+}
+#acl__detail #acl__user {
+    display: none;
+}
+
+.do-admin #dokuwiki__content {
+
+    #confmanager {
+        .popup,
+        .confmanager_singleLine#local,
+        button,
+        .button.saveButton {
+            display: none !important;
+        }
+
+        .confmanager_singleLine {
+            div.defaultValue {
+                word-break: break-all;
+            }
+        }
+
+    }
+
+    > form > fieldset {
+
+        border-color: @border-color-print;
+
+        > textarea.edit[readonly] {
+            border: 0 none;
+            min-height: 2250pt;
+            overflow:visible;
+            display: block;
+            page-break-inside: auto;
+
+            + br + label[for="autosubmit"] {
+                margin-top: 20pt;
+
+                input {
+                    margin-right: 5pt;
+                }
+            }
+        }
+    }
+
+    #magicmatcher__repoadmin {
+
+        button {
+            display: none;
+        }
+        .service-wrapper {
+            padding-top: 1rem;
+        }
+    }
+
+    .plugin_move_form {
+        legend {
+            display: none;
+        }
+    }
+
+    #plugin__qc_admin {
+        table .centeralign {
+            .qc_icon svg + span {
+                vertical-align: top;
+            }
+        }
+    }
+
+    .doku_form.struct_newschema {
+        button {
+            display: none;
+        }
+    }
+    form.plugin_tagging {
+        display: none;
+    }
+
+    #plugin__upgrade_meter {
+        ol li .stage {
+            padding-left: .4em;
+        }
+    }
+
+    #plugin__upgrade {
+        code {
+            word-break: break-all;
+            font-size: .82rem;
+        }
+    }
+}
+
+/* + + +  Configuration Settings  + + + */
+#dokuwiki__content #config__manager {
+    fieldset {
+        padding: 0;
+
+        legend {
+            padding: 0 .5em;
+            text-align: center;
+            background-color: #fff;
+        }
+         > .table > table {
+             border: 0 solid @border-color-print;
+             width: 100%;
+             tr {
+                 border-top: 1pt solid @border-color-print;
+
+                 &:first-child {
+                     border-top-width: 0;
+                 }
+                 td {
+                     border-width: 0;
+                 }
+             }
+         }
+    }
+    td.value,
+    td.label {
+        font-size: 100%;
+        padding: .6em 0 .8em 1em;
+    }
+    td.label {
+        width: 35%;
+        span.outkey, span.outkey * {
+            font-size: 100%;
+        }
+        label {
+            display: block;
+        }
+        span.outkey, label {
+            padding-left: .2rem;
+        }
+    }
+
+    td.value {
+        input[type="text"] {
+            border: 0 none;
+        }
+
+        select {
+            max-width: 80%;
+            box-sizing: border-box;
+            border: 1px solid transparent;
+            background: transparent;
+        }
+        .selectiondefault {
+            position: relative;
+
+            input.checkbox {
+                position: absolute;
+                top:0;
+                left: 0;
+            }
+
+            label, input[type="text"] {
+                position: relative;
+                top:0;
+                left: 0;
+                margin-left: 20pt;
+                margin-top: .5em;
+                padding-left: 0;
+                background-color: transparent;
+            }
+        }
+    }
+
+}
+
+.do-admin div.ui-admin ul.admin_tasks,
+.do-admin div.ui-admin ul.admin_plugins {
+    li {
+        list-style-type: none;
+        min-height: 2em;
+
+        a {
+            span.icon {
+                float: left;
+                clear: left;
+                display: inline-block;
+                width: 22pt;
+                height: 22pt;
+                border: 1pt solid @border-color-print;
+                margin: 0 10pt 0 0;
+
+                &:empty {
+                    &::before {
+                        content: "?";
+                        display: inline-block;
+                        padding-top: 1pt;
+                    }
+                }
+
+                svg {
+                    width: 20pt;
+                    height: 20pt;
+
+                    path {
+                        fill: @color-print;
+                    }
+                }
+            }
+
+            span.prompt {
+                min-height: 26pt;
+                display: inline-block;
+                margin: 0;
+                padding-top: 4pt;
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + */
+/* + + + + +  Template Style Settings  + + + + + */
+.page-footer {
+    border-top: 1pt solid @border-color-print;
+    margin-top: 13pt;
+}
+
+#dokuwiki__content #plugin__styling {
+
+    button {
+        display: none !important;
+    }
+
+    .styling input[type="text"] {
+        border: 0 none;
+    }
+}
+
+/* + + +  data plugin  + + + */
+.dataplugin_entry dl {
+    border: 1pt solid @border-color-print;
+    padding: 7pt;
+    margin: 7pt 0;
+
+    dt {
+        clear: left;
+        float: left;
+        width: 22%;
+        font-weight: bold;
+        text-align: right;
+        margin-right: 5pt;
+    }
+}
+
+#dokuwiki__detail {
+    div.img_detail dl {
+        dt {
+            display: inline-block;
+            width: 20%;
+            background-color: transparent;
+        }
+        dd {
+            display: inline-block;
+            width: 75%;
+        }
+    }
+}
+
+/* + + +  tabbox  + + + */
+div#dwpl-ti-container .dwpl-ti,
+.dwpl-ti-permalink-header,
+.dwpl-ti-permalink-footer {
+    display: none !important;
+}
+
+div#dwpl-ti-container div.dwpl-ti-content-box {
+    box-shadow: none;
+    border: 0 none;
+}
+
+/* + + +  media nmanager  + + + */
+#mediamanager__page {
+    .namespaces,
+    .filelist .tabs,
+    .panelHeader form {
+        display: none;
+    }
+
+    ul.rows {
+        width: auto;
+        padding: 0;
+    }
+
+    .filelist li {
+        clear: both;
+        list-style-type: none;
+        margin: 7pt 0 0;
+
+        dl {
+            position: relative;
+            display: table;
+            border-top: solid 1pt @border-color-print;
+            padding-top: 2rem;
+        }
+
+        dt {
+            display: table-cell;
+            width: 10%;
+            height: 40px;
+
+            .size,
+            .filesize {
+                width: 15%;
+            }
+
+            .date {
+                width: 20%;
+            }
+        }
+
+        dd {
+            display: table-cell;
+
+            &.name {
+                position: absolute;
+                top: .5rem;
+                left: 0;
+                display: block;
+                font-weight: bold;
+                margin: 0;
+            }
+        }
+    }
+}
+
+/* + + +  forms  + + + */
+form {
+    button {
+        &[type="submit"],
+        &[type="reset"] {
+            display: none;
+        }
+    }
+
+    fieldset {
+        label,
+        label.block {
+            display: block;
+            text-align: left;
+        }
+
+        br + br {
+            display: none;
+        }
+
+        label {
+            clear: both;
+
+            > input {
+                &:first-child {
+                    float: left;
+                }
+
+                + span {
+                    float: left;
+                    display: inline-block;
+                    padding-left: 7pt;
+                    padding-bottom: 13pt;
+                }
+            }
+        }
+
+        label.block {
+            display: block;
+            text-align: left;
+
+            > span {
+                float: none;
+                padding-bottom: 0;
+
+                &:first-child {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    input,
+    textarea,
+    select {
+        border: 1pt solid @border-dark-print;
+    }
+}

css/template_admin.less

@@ -0,0 +1,122 @@
+/**
+ * This file provides the design styles for the admin tools
+ */
+
+.do-admin {
+    #admin__version {
+        font-size: @font-size-default;
+    }
+
+    .main-content ul {
+        > li {
+            font-size: @font-size-default;
+
+            div.li {
+                font-size: @font-size-default;
+
+                a {
+                    font-size: @font-size-default;
+                    line-height: 125%;
+                    cursor: pointer;
+                }
+            }
+        }
+    }
+
+    div.ui-admin {
+        ul.admin_tasks,
+        ul.admin_plugins {
+            padding: 0;
+
+            li {
+                background-size: auto 1rem;
+                margin: 0 0 .6em 0;
+
+                a {
+                    color: @ini_existing;
+                    font-weight: 400;
+
+                    * {
+                        color: inherit;
+                    }
+
+                    span.icon {
+                        width: 1.6em;
+                        min-height: 1.6em;
+                        margin-top: -.3rem;
+                        margin-bottom: .3rem;
+
+                        svg {
+                            width: 26px;
+                            height: 26px;
+                            border: solid 1px var(--color-background);
+                            border-radius: @ini_default_border_radius;
+                            fill: @ini_existing;
+                            transition: @transition background-color, @transition border-color, @transition fill;
+
+                            path {
+                                fill: @ini_existing;
+                                transition: @transition fill;
+                            }
+                        }
+                    }
+
+                    &:hover,
+                    &:focus,
+                    &:active {
+                        span.icon {
+                            svg {
+                                background-color: @ini_existing;
+                                border-color: @ini_existing;
+                                fill: var(--color-background);
+
+                                path {
+                                    fill: var(--color-background);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 1024px */
+@media @screen_max-md {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: 50%;
+                padding-top: 1rem;
+
+                li {
+                    white-space: normal;
+
+                    a {
+                        .display-flex(); // for better position with line breaks (white-space)
+
+                        span.icon {
+                            margin-top: -.3rem;
+                            margin-bottom: .3rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 768px */
+@media @screen_max-xs {
+    .do-admin {
+        div.ui-admin {
+            ul.admin_tasks {
+                width: auto;
+                padding-top: 1rem;
+            }
+        }
+    }
+}

css/template_detail.less

@@ -0,0 +1,168 @@
+/**
+ * This file provides the design styles for the the detail template
+ * (media details)
+ */
+
+#dokuwiki__detail {
+
+    /* + + + + +  linked image  + + + + + */
+    @media screen {
+        .img-link {
+            text-align: center;
+
+            a {
+                position: relative;
+                left: 0;
+                display: inline-block;
+                max-width: 100%;
+                color: var(--color-foreground);
+                margin: 0 auto 1.4em;
+
+                &::before {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    display: block;
+                    width: 100%;
+                    box-sizing: border-box;
+                    background: var(--color-background);
+                    line-height: @line-height-default;
+                    padding: @margin-small;
+                }
+
+                img {
+                    margin: 0;
+                    display: block;
+                    border: solid 0.1rem transparent;
+                    position: relative;
+                }
+
+                &:hover,
+                &:focus,
+                &:active {
+                    text-decoration: none;
+
+                    &::before {
+                        content: attr(title);
+                        border: solid 0.1rem var(--color-glow-primary);
+                        transition: var(--transition-glow);
+                        filter: var(--filter-glow-primary);
+                    }
+
+                    img {
+                        border: solid 0.1rem var(--color-shade-4);
+                    }
+                }
+            }
+        }
+    }
+
+
+    /* + + + + +  meta data  + + + + + */
+    div.img_detail {
+        @media screen {
+            /* vertical minus margin of .img-detail corresponds to the padding of .page */
+            background-color: var(--color-shade-1);
+            border: solid 0.1em var(--color-shade-4);
+            margin: @margin-default -(@margin-default);
+            color: var(--color-foreground);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-left: @margin-default;
+                padding-right: @margin-default;
+            }
+
+            > h4 {
+                padding-top: (@margin-default / 2);
+            }
+        }
+
+        dl {
+            @media screen {
+                .display-flex();
+                .flex-wrap();
+
+                width: 100%;
+
+                dt,
+                dd {
+                    box-sizing: border-box;
+                    margin: .2em 0;
+                    padding: (@small-spacing * 2) @small-spacing;
+                }
+            }
+
+            dt {
+                background-color: none;
+                color: var(--color-foreground);
+
+                @media @screen_min-xs {
+                    width: 33.3%;
+                }
+
+                @media @screen_max-xs {
+                    width: 40%;
+                }
+            }
+
+            dd {
+                padding-left: (@small-spacing * 2);
+
+                @media @screen_min-xs {
+                    width: 66.6%;
+                }
+
+                @media @screen_max-xs {
+                    width: 59.9%;
+                }
+            }
+        }
+
+        .os-map {
+            p {
+                text-align: right;
+            }
+
+            iframe {
+                border: solid @ini_button_background;
+                border-width: 1px 0;
+                margin: 0;
+                padding: 0;
+            }
+        }
+
+        @media @screen_max-md {
+            margin-right: -(@margin-default * 1.6);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-right: (@margin-default * 1.6);
+            }
+        }
+
+        @media @screen_max-xs {
+            margin-left: -(@margin-small);
+
+            h1,
+            h2,
+            h3,
+            h4,
+            h5,
+            h6,
+            p {
+                padding-left: @margin-small;
+            }
+        }
+    }
+}

css/toollist.less

@@ -0,0 +1,29 @@
+/**
+ * Styles for site tools and user tools in sidebar
+ * Using BEM methodology as far as possible
+ */
+
+//.toollist {
+//}
+
+.toollist__listitem {
+    list-style: none;
+
+    a {
+        display: inline-flex;
+        flex-direction: row-reverse;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+
+    span {
+        font-size: @font-size-default;
+    }
+
+    svg {
+        width: @font-size-default;
+        vertical-align: middle;
+        fill: var(--color-foreground);
+        margin-right: .2em;
+    }
+}

deleted.files

@@ -0,0 +1,102 @@
+# This is a list of files that were present in previous releases
+# but were removed later. They should not exist in your installation.
+.gitlab-ci.yml
+css/area_main-sidebar-content.less
+css/area_main-sidebar.less
+css/area_sidebar-search.less
+css/area_sidetools.less
+css/base_fonts.less
+css/basic.css
+css/content.css
+css/design.css
+css/includes.css
+css/mobile.css
+css/plugins/hightlight_parent.less
+css/print.css
+css/structure.css
+fabfile.py
+fonts/Google Android License.txt
+fonts/icons/fontello-1a5d199c.zip
+fonts/icons/svg/index.css
+fonts/roboto-black.eot
+fonts/roboto-black.svg
+fonts/roboto-black.ttf
+fonts/roboto-black.woff
+fonts/roboto-blackItalic.eot
+fonts/roboto-blackItalic.svg
+fonts/roboto-blackItalic.ttf
+fonts/roboto-blackItalic.woff
+fonts/roboto-bold.eot
+fonts/roboto-bold.svg
+fonts/roboto-bold.ttf
+fonts/roboto-bold.woff
+fonts/roboto-boldcondensed.eot
+fonts/roboto-boldcondensed.svg
+fonts/roboto-boldcondensed.ttf
+fonts/roboto-boldcondensed.woff
+fonts/roboto-boldcondenseditalic.eot
+fonts/roboto-boldcondenseditalic.svg
+fonts/roboto-boldcondenseditalic.ttf
+fonts/roboto-boldcondenseditalic.woff
+fonts/roboto-bolditalic.eot
+fonts/roboto-bolditalic.svg
+fonts/roboto-bolditalic.ttf
+fonts/roboto-bolditalic.woff
+fonts/roboto-condensed.eot
+fonts/roboto-condensed.svg
+fonts/roboto-condensed.ttf
+fonts/roboto-condensed.woff
+fonts/roboto-condenseditalic.eot
+fonts/roboto-condenseditalic.svg
+fonts/roboto-condenseditalic.ttf
+fonts/roboto-condenseditalic.woff
+fonts/roboto-italic.eot
+fonts/roboto-italic.svg
+fonts/roboto-italic.ttf
+fonts/roboto-italic.woff.textClipping
+fonts/roboto-italic2.woff
+fonts/roboto-light.eot
+fonts/roboto-light.svg
+fonts/roboto-light.ttf
+fonts/roboto-light.woff
+fonts/roboto-lightItalic.eot
+fonts/roboto-lightItalic.svg
+fonts/roboto-lightItalic.ttf
+fonts/roboto-lightItalic.woff
+fonts/roboto-medium.eot
+fonts/roboto-medium.svg
+fonts/roboto-medium.ttf
+fonts/roboto-medium.woff
+fonts/roboto-mediumItalic.eot
+fonts/roboto-mediumItalic.svg
+fonts/roboto-mediumItalic.ttf
+fonts/roboto-mediumItalic.woff
+fonts/roboto-regular.eot
+fonts/roboto-regular.svg
+fonts/roboto-regular.ttf
+fonts/roboto-regular.woff
+fonts/roboto-thin.eot
+fonts/roboto-thin.svg
+fonts/roboto-thin.ttf
+fonts/roboto-thin.woff
+fonts/roboto-thinItalic.eot
+fonts/roboto-thinItalic.svg
+fonts/roboto-thinItalic.ttf
+fonts/roboto-thinItalic.woff
+images/apple-touch-icon.png
+images/logo.png
+js/base/helper.js
+js/base/rem.min.js
+js/base/spc.js
+js/base/velocity.min.js
+js/legacy/html5shiv.js
+js/legacy/respond.min.js
+js/breadcrumb.js
+js/sidebar-menu.js
+tpl/nav-main.php
+tpl/nav-page-quality-tasks.php
+tpl/nav-sitetools.php
+tpl/nav-trace.php
+tpl/nav-usermenu.php
+tpl/nav-usertools.php
+tpl_functions.php

detail.php

@@ -1,95 +1,405 @@
 <?php
 /**
- * DokuWiki Image Detail Page
+ * DokuWiki sprintDoc Detail Template
  *
- * @author   Andreas Gohr <andi@splitbrain.org>
- * @author   Anika Henke <anika@selfthinker.org>
+ * @link     FIXME
+ * @author   Jana Deutschlaender <deutschlaender@cosmocode.de>
+ * @author   Michael Grosse <grosse@cosmocode.de>
  * @license  GPL 2 (http://www.gnu.org/licenses/gpl.html)
  */
+use dokuwiki\template\sprintdoc\Template;
 
-// must be run from within DokuWiki
-if (!defined('DOKU_INC')) die();
-@require_once(dirname(__FILE__).'/tpl_functions.php'); /* include hook for template functions */
+if (!defined('DOKU_INC')) die();                        /* must be run from within DokuWiki */
 header('X-UA-Compatible: IE=edge,chrome=1');
 
-?><!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $conf['lang']?>"
- lang="<?php echo $conf['lang']?>" dir="<?php echo $lang['direction'] ?>" class="no-js">
+global $JSINFO;
+if (empty($JSINFO['template'])) {
+    $JSINFO['template'] = array();
+}
+$JSINFO['template']['sprintdoc'] = array('sidebar_toggle_elements' => tpl_getConf('sidebar_sections'));
+
+$showTools = true;
+$showSidebar =  true;
+
+?>
+<!DOCTYPE html>
+<html class="edge no-js" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
-    <meta charset="UTF-8" />
-    <title>
-        <?php echo hsc(tpl_img_getTag('IPTC.Headline',$IMG))?>
-        [<?php echo strip_tags($conf['title'])?>]
-    </title>
-    <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta and link relations */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <?php tpl_metaheaders() ?>
-    <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <?php echo tpl_favicon(array('favicon', 'mobile')) ?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page title */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<title><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?> [<?php echo strip_tags($conf['title']) ?>]</title>
+
+<script type="text/javascript">(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* favicons */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
+<?php
+include('tpl/favicon_tiles.php');
+?>
+<?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: meta.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+?>
 <?php tpl_includeFile('meta.html') ?>
 </head>
 
-<body>
-    <!--[if lte IE 8 ]><div id="IE8"><![endif]-->
-    <div id="dokuwiki__detail" class="<?php echo tpl_classes(); ?>">
-        <?php html_msgarea() ?>
+<body id="dokuwiki__top" class="<?php echo tpl_classes(); ?> wide-content showSidebar <?php echo tpl_getConf('header_layout'); ?>">
+<div id="dokuwiki__site">
+    <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* template Include: tpl/nav-direct */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+    ?>
+    <?php include('tpl/nav-direct.php') ?>
+
+
+    <div class="page-wrapper <?php echo ($showSidebar) ? 'hasSidebar' : ''; ?>">
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+            tpl_includeFile('header.html');
+        ?>
+
+        <div id="dokuwiki__header" class="header no-print">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div class="claim main-sidebar">
+                            <div class="menu-togglelink mobile-only">
+                                <a href="#">
+                                    <span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle'); ?></span>
+                                </a>
+                            </div>
+
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Logo */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* upload your logo into the data/media folder (root of the media manager) and replace 'logo.png' in der template config accordingly: */
+                                include('tpl/main-sidebar-logo.php');
+                            ?>
+                            <div class="main-title">
+                                <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Mobile */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                    <p class="title mobile-only"><?php echo $conf['title'] ?></p>
+                                <?php endif ?>
+                            </div><!-- .main-title -->
+
+                            <div class="menu-tool-select">
+                                <h5 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_tool-select') ?></h5>
+                                <?php tpl_actiondropdown($lang['tools'], "test"); ?>
+                            </div><!-- .menu-tool-select -->
+                        </div><!-- .headings -->
+                    </div><!-- .col -->
+
+
+                    <div class="col-xs-12">
+                        <div class="main-title desktop-only">
+                            <?php if ($conf['title']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Title Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="title"><?php echo $conf['title'] ?></p>
+                            <?php endif ?>
+                            <?php if ($conf['tagline']):
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Wiki Tagline Desktop */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */ ?>
+                                <p class="claim"><?php echo $conf['tagline'] ?></p>
+                            <?php endif ?>
+                        </div><!-- .main-title -->
+                    </div><!-- .col -->
+
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .header -->
+        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* headline menu area (Accessibility ) */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+        ?>
+
+        <div class="sr-only nav-area-head">
+            <h5 class="sr-only" aria-level="1"><?php echo tpl_getLang('nav-area-head') ?></h5>
+        </div><!-- .nav-area-head -->
+
+        <div class="tools">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+                        <div class="search main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* search form */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/main-sidebar-search.php');
+                            ?>
+                        </div><!-- .search -->
+
+                        <div class="sidebarheader main-sidebar">
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: sidebarheader.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                tpl_includeFile('sidebarheader.html')
+                            ?>
+                        </div><!-- .sidebarheader -->
+
+                        <div id="dokuwiki__aside">
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarheader',
+                                '<div class="sidebarheader">',
+                                '<div class="clearer"></div></div>'
+                            );
+                            ?>
+
+                            <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* sidebar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/main-sidebar-nav.php');
+                            ?>
+
+                            <?php
+                            echo Template::getInstance()->getInclude(
+                                'sidebarfooter',
+                                '<div class="sidebarfooter">',
+                                '<div class="clearer"></div></div>'
+                            );
+                            ?>
+                        </div><!-- .aside -->
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- .tools -->
+
+
+        <div class="top-header">
+            <div class="container">
+                <div class="row">
+                    <div class="col-xs-12">
+
+                        <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* User Tools but no MagicMatcher Bar */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        $showTools = true;
+                        include('tpl/nav-usertools-buttons.php');
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* Include Hook: header.html */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                        tpl_includeFile('header.html');
+                        ?>
+
+                    </div><!-- .col -->
+                </div><!-- .row -->
+            </div><!-- .container -->
+        </div><!-- /top-header -->
+
+
+        <div id="dokuwiki__detail">
+
+            <?php tpl_flush(); /* flush the output buffer */ ?>
+
+            <div class="content group">
+                <div class="container">
+                    <div class="row">
+                        <div class="col-xs-12">
+                            <div class="breadcrumbs" data-do="<?php echo tpl_getLang('image_detail') ?>">
+
+                                <div class="togglelink page_main-content">
+                                    <a id="spr__toggle-content" href="#"><span class="sr-out"><?php echo tpl_getLang('a11y_sidebartoggle') ?></span></a>
+                                </div>
+
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo tpl_getLang('head_menu_status') ?></h6>
+
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* breadcrumb */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                include('tpl/nav-breadcrumb.php');
+                                ?>
+
+                                <h6 class="sr-only" role="heading" aria-level="2"><?php echo $lang['page_tools'] ?></h6>
+
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* page tools */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <nav id="dokuwiki__pagetools">
+                                    <div class="tools">
+                                        <ul>
+                                            <?php
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('mediaManager') . '</li>';
+                                            echo '<li>' . dokuwiki\template\sprintdoc\tpl::pageToolAction('img_backto') . '</li>';
+                                            ?>
+                                        </ul>
+                                    </div>
+                                </nav>
+
+                            </div>
+                            <div id="dokuwiki__content" class="page main-content">
+
+                                <div id="spr__meta-box"></div>
+                                <div class="msg-area"><?php html_msgarea();/*msg('Information.', 0);msg('Success', 1);msg('Notification', 2);msg('Fehler', -1);*/ ?></div>
+
 
                                 <?php if ($ERROR): print $ERROR; ?>
                                 <?php else: ?>
 
-            <?php if($REV) echo p_locale_xhtml('showrev');?>
+                                <?php if ($REV) {
+                                    echo p_locale_xhtml('showrev');
+                                } ?>
+
                                 <h1><?php echo hsc(tpl_img_getTag('IPTC.Headline', $IMG)) ?></h1>
-
-            <div class="content group">
-                <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
-
-                <div class="img_detail">
-                    <h2><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h2>
-
-                    <?php if(function_exists('tpl_img_meta')): ?>
-                        <?php tpl_img_meta(); ?>
-                    <?php else: /* deprecated since Release 2014-05-05 */ ?>
-                        <dl>
                                 <?php
-                                $config_files = getConfigFiles('mediameta');
-                                foreach ($config_files as $config_file) {
-                                    if(@file_exists($config_file)) {
-                                        include($config_file);
-                                    }
-                                }
 
-                                foreach($fields as $key => $tag){
-                                    $t = array();
-                                    if (!empty($tag[0])) {
-                                        $t = array($tag[0]);
-                                    }
-                                    if(is_array($tag[3])) {
-                                        $t = array_merge($t,$tag[3]);
-                                    }
-                                    $value = tpl_img_getTag($t);
-                                    if ($value) {
-                                        echo '<dt>'.$lang[$tag[1]].':</dt><dd>';
-                                        if ($tag[2] == 'date') {
-                                            echo dformat($value);
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img-link">
+                                    <?php tpl_img(900, 700); /* the image; parameters: maximum width, maximum height (and more) */ ?>
+                                </div>
+                                <?php
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* meta data of image */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                ?>
+                                <div class="img_detail">
+                                    <?php
+                                        $simple_title = hsc(tpl_img_getTag('simple.title'));
+                                        if(strlen($simple_title) > 0) {
+                                    ?>
+                                    <h4><?php print nl2br(hsc(tpl_img_getTag('simple.title'))); ?></h4>
+                                    <?php
                                         } else {
-                                            echo hsc($value);
+                                            echo '<h4>' . tpl_getLang('meta_data') . '</h4>';
                                         }
-                                        echo '</dd>';
+                                    ?>
+
+                                    <?php
+                                    tpl_img_meta();
+
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* open street maps if geo data is available */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+                                    /** @var \helper_plugin_spatialhelper_index $spatial */
+                                    $spatial = plugin_load('helper', 'spatialhelper_index');
+                                    if ($spatial && plugin_load('helper', 'geophp')) {
+                                        global $IMG;
+                                        $point = $spatial->getCoordsFromExif($IMG);
+                                        if ($point) {
+                                            $long = $point->getX();
+                                            $lat = $point->getY();
+                                            $latShort = round($lat, 3);
+                                            $longShort = round($long, 3);
+
+                                            $hrefOSM = "https://www.openstreetmap.org/?mlat=$lat&mlon=$long#map=18/$lat/$long";
+                                            $srcOSM = 'https://www.openstreetmap.org/export/embed.html?bbox=' . ($long - 0.004) . ',' . ($lat - 0.002) . ',' . ($long + 0.004) . ',' . ($lat + 0.002) . '&layer=mapnik&marker=' . $lat . ',' . $long;
+                                            echo '<div class="os-map">';
+                                            echo '<h4 lang="en">OSM (Open Street Maps):</h4>';
+                                            echo '<iframe width="100%" height="350" frameborder="0" src="' . $srcOSM . '"></iframe><br/><p><a class="button" target="_blank" title="' . tpl_getLang('osm_zoom_link_title') . '" href="' . $hrefOSM . '">' . tpl_getLang('osm_zoom_link_text') . '</a></p>';
+                                            echo '</div>';
                                         }
                                     }
                                     ?>
-                        </dl>
-                    <?php endif; ?>
                                     <?php //Comment in for Debug// dbg(tpl_img_getTag('Simple.Raw')); ?>
                                 </div>
+                            </div><!-- .main-content -->
+                        </div><!-- .col -->
+                    </div><!-- .row -->
+                </div><!-- .container -->
             </div><!-- /.content -->
 
-            <p class="back">
-                <?php tpl_action('mediaManager', 1) ?><br />
-                &larr; <?php tpl_action('img_backto', 1) ?>
-            </p>
 
         <?php endif; ?>
         </div>
-    <!--[if lte IE 8 ]></div><![endif]-->
+    </div><!-- /wrapper -->
+
+
+    <!-- ********** FOOTER ********** -->
+
+    <div id="dokuwiki__footer">
+        <div class="container">
+            <div class="row">
+                <div class="col-xs-12">
+
+                    <div class="main-footer">
+                        <?php include 'tpl/main-footer.php'; ?>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+    </div><!-- /footer -->
+
+
+    <?php tpl_includeFile('footer.html') ?>
+</div><!-- .dokuwiki__site -->
+
+<div class="no"><?php tpl_indexerWebBug() /* provide DokuWiki housekeeping, required in all templates */ ?></div>
+
 </body>
 </html>

fonts/Google Android License.txt

@@ -1,18 +0,0 @@
-Copyright (C) 2008 The Android Open Source Project
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-  
-     http://www.apache.org/licenses/LICENSE-2.0
-  
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-
-##########
-
-This directory contains the fonts for the platform. They are licensed
-under the Apache 2 license.

fonts/argonglow/OFL

@@ -0,0 +1,96 @@
+Copyright (c) 2025, The Argon Glow Project Authors (https://codeberg.org/kritzl/argon-glow),
+Copyright (c) 2025, kritzl (kritzl@kritzl.dev),
+Copyright (c) 2025, traumweh (traumweh@lyx.sh),
+with Reserved Font Name "Argon Glow".
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting - in part or in whole - any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

fonts/athiti/OFL

@@ -0,0 +1,93 @@
+Copyright (c) 2015, Cadson Demak (info@cadsondemak.com)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

fonts/departuremono/LICENSE

@@ -0,0 +1,93 @@
+Copyright 2022–2024 Helena Zhang (helenazhang.com).
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

fonts/icons/LICENSE.txt

@@ -1,33 +1,6 @@
 Font license info
 
 
-## Entypo
-
-   Copyright (C) 2012 by Daniel Bruce
-
-   Author:    Daniel Bruce
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.entypo.com
-
-
-## Font Awesome
-
-   Copyright (C) 2016 by Dave Gandy
-
-   Author:    Dave Gandy
-   License:   SIL ()
-   Homepage:  http://fortawesome.github.com/Font-Awesome/
-
-
-## Elusive
-
-   Copyright (C) 2013 by Aristeides Stathopoulos
-
-   Author:    Aristeides Stathopoulos
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://aristeides.com/
-
-
 ## Fontelico
 
    Copyright (C) 2012 by Fontello project
@@ -37,21 +10,12 @@ Font license info
    Homepage:  http://fontello.com
 
 
-## Typicons
+## Font Awesome
 
-   (c) Stephen Hutchings 2012
+   Copyright (C) 2016 by Dave Gandy
 
-   Author:    Stephen Hutchings
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://typicons.com/
-
-
-## Linecons
-
-   Copyright (C) 2013 by Designmodo
-
-   Author:    Designmodo for Smashing Magazine
-   License:   CC BY ()
-   Homepage:  http://designmodo.com/linecons-free/
+   Author:    Dave Gandy
+   License:   SIL ()
+   Homepage:  http://fortawesome.github.com/Font-Awesome/
 
 

fonts/icons/fontello-codes.css

@@ -1,37 +1,78 @@
 
-.icon-user:before { content: '\e800'; }
-.icon-logout:before { content: '\e801'; }
-.icon-login:before { content: '\e802'; } /* '' */
-.icon-clipboard:before { content: '\e803'; } /* '' */
+.icon-pencil-add:before { content: '\e800'; } /* '' */
+.icon-dividers:before { content: '\e801'; } /* '' */
+.icon-file-xml:before { content: '\e802'; } /* '' */
+.icon-revisions-history:before { content: '\e803'; } /* '' */
 .icon-emo-happy:before { content: '\e804'; } /* '' */
 .icon-emo-wink:before { content: '\e805'; } /* '' */
 .icon-emo-unhappy:before { content: '\e806'; } /* '' */
 .icon-emo-sleep:before { content: '\e807'; } /* '' */
 .icon-emo-thumbsup:before { content: '\e808'; } /* '' */
-.icon-clock:before { content: '\e809'; } /* '' */
-.icon-link:before { content: '\e80a'; } /* '' */
-.icon-bell:before { content: '\e80b'; } /* '' */
+.icon-folder-image:before { content: '\e809'; } /* '' */
+.icon-file-export:before { content: '\e80a'; } /* '' */
 .icon-emo-grin:before { content: '\e80c'; } /* '' */
 .icon-emo-angry:before { content: '\e80d'; } /* '' */
-.icon-mail:before { content: '\e80e'; } /* '' */
 .icon-emo-cry:before { content: '\e80f'; } /* '' */
-.icon-cloud:before { content: '\e810'; } /* '' */
 .icon-emo-squint:before { content: '\e811'; } /* '' */
 .icon-emo-laugh:before { content: '\e812'; } /* '' */
 .icon-emo-wink2:before { content: '\e813'; } /* '' */
-.icon-cloud-1:before { content: '\e814'; } /* '' */
-.icon-home-outline:before { content: '\e815'; } /* '' */
-.icon-home:before { content: '\e816'; } /* '' */
-.icon-puzzle-1:before { content: '\e817'; } /* '' */
 .icon-cog-alt:before { content: '\e818'; } /* '' */
-.icon-cog:before { content: '\e819'; } /* '' */
-.icon-help:before { content: '\e81a'; } /* '' */
-.icon-bookmark-empty:before { content: '\f097'; } /* '' */
-.icon-menu:before { content: '\f0c9'; } /* '' */
-.icon-sitemap:before { content: '\f0e8'; } /* '' */
-.icon-doc-text:before { content: '\f0f6'; } /* '' */
-.icon-smile:before { content: '\f118'; } /* '' */
-.icon-frown:before { content: '\f119'; } /* '' */
-.icon-meh:before { content: '\f11a'; } /* '' */
-.icon-puzzle:before { content: '\f12e'; } /* '' */
-.icon-file-pdf:before { content: '\f1c1'; } /* '' */
+.icon-left-thick:before { content: '\e82c'; } /* '' */
+.icon-right-small:before { content: '\e82d'; } /* '' */
+.icon-right-thick:before { content: '\e82e'; } /* '' */
+.icon-up-small:before { content: '\e82f'; } /* '' */
+.icon-up-bold:before { content: '\e830'; } /* '' */
+.icon-up-thick:before { content: '\e831'; } /* '' */
+.icon-attachment:before { content: '\e832'; } /* '' */
+.icon-user:before { content: '\e833'; } /* '' */
+.icon-down-small:before { content: '\e834'; } /* '' */
+.icon-down-thick:before { content: '\e835'; } /* '' */
+.icon-left-small:before { content: '\e836'; } /* '' */
+.icon-left-bold:before { content: '\e837'; } /* '' */
+.icon-file-pdf:before { content: '\e838'; } /* '' */
+.icon-revert-replay:before { content: '\e839'; } /* '' */
+.icon-bell:before { content: '\e83a'; } /* '' */
+.icon-bookmark-empty:before { content: '\e83b'; } /* '' */
+.icon-help:before { content: '\e83c'; } /* '' */
+.icon-file-new:before { content: '\e83d'; } /* '' */
+.icon-file:before { content: '\e83e'; } /* '' */
+.icon-book-open:before { content: '\e83f'; } /* '' */
+.icon-pencil:before { content: '\e840'; } /* '' */
+.icon-check:before { content: '\e841'; } /* '' */
+.icon-home:before { content: '\e842'; } /* '' */
+.icon-link:before { content: '\e843'; } /* '' */
+.icon-checkbox-marked:before { content: '\e844'; } /* '' */
+.icon-login:before { content: '\e845'; } /* '' */
+.icon-down-open-big:before { content: '\e846'; } /* '' */
+.icon-logout:before { content: '\e847'; } /* '' */
+.icon-up-open-big:before { content: '\e848'; } /* '' */
+.icon-files:before { content: '\e849'; } /* '' */
+.icon-file-text:before { content: '\e84a'; } /* '' */
+.icon-frown:before { content: '\e84b'; } /* '' */
+.icon-star-outline:before { content: '\e84c'; } /* '' */
+.icon-sitemap:before { content: '\e84d'; } /* '' */
+.icon-cog:before { content: '\e84e'; } /* '' */
+.icon-puzzle:before { content: '\e84f'; } /* '' */
+.icon-plus:before { content: '\e850'; } /* '' */
+.icon-pencil-1:before { content: '\e851'; } /* '' */
+.icon-minus:before { content: '\e852'; } /* '' */
+.icon-up:before { content: '\e853'; } /* '' */
+.icon-menu:before { content: '\e854'; } /* '' */
+.icon-search:before { content: '\e855'; } /* '' */
+.icon-clipboard-empty:before { content: '\e856'; } /* '' */
+.icon-clipboard:before { content: '\e857'; } /* '' */
+.icon-clock:before { content: '\e858'; } /* '' */
+.icon-down:before { content: '\e859'; } /* '' */
+.icon-cloud:before { content: '\e85a'; } /* '' */
+.icon-code-braces:before { content: '\e85b'; } /* '' */
+.icon-disk:before { content: '\e85c'; } /* '' */
+.icon-mail:before { content: '\e85d'; } /* '' */
+.icon-smile:before { content: '\e85e'; } /* '' */
+.icon-meh:before { content: '\e85f'; } /* '' */
+.icon-star:before { content: '\e860'; } /* '' */
+.icon-code:before { content: '\e861'; } /* '' */
+.icon-user-circle:before { content: '\e86c'; } /* '' */
+.icon-comment-question:before { content: '\e880'; } /* '' */
+.icon-jira:before { content: '\e881'; } /* '' */
+.icon-right-bold:before { content: '\e882'; } /* '' */
+.icon-down-bold:before { content: '\e883'; } /* '' */

fonts/icons/fontello.svg

@@ -1,18 +1,18 @@
 <?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
+<metadata>Copyright (C) 2017 by original authors @ fontello.com</metadata>
 <defs>
 <font id="fontello" horiz-adv-x="1000" >
 <font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
 <missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="user" unicode="&#xe800;" d="M736 128q204-72 204-122l0-106-940 0 0 106q0 50 204 122 94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8-14 17-9 43q0 16 5 26t9 12l4 4q-8 50-12 88-4 54 41 112t157 58 158-58 40-112l-12-88q18-8 18-42-2-28-9-43t-14-17-14-8-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+<glyph glyph-name="pencil-add" unicode="&#xe800;" d="M547 178h125v125h83v-125h125v-83h-125v-125h-83v125h-125z m316 379c16 16 16 43 0 58l-98 98c-15 16-42 16-58 0l-77-76 156-157m-661-349v-156h156l461 461-156 157z" horiz-adv-x="1000" />
 
-<glyph glyph-name="logout" unicode="&#xe801;" d="M357 46q0-2 1-11t0-14-2-14-5-11-12-3h-178q-67 0-114 47t-47 114v392q0 67 47 114t114 47h178q8 0 13-5t5-13q0-2 1-11t0-15-2-13-5-11-12-3h-178q-37 0-63-26t-27-64v-392q0-37 27-63t63-27h174t6 0 7-2 4-3 4-5 1-8z m518 304q0-14-11-25l-303-304q-11-10-25-10t-25 10-11 25v161h-250q-14 0-25 11t-11 25v214q0 15 11 25t25 11h250v161q0 14 11 25t25 10 25-10l303-304q11-10 11-25z" horiz-adv-x="928.6" />
+<glyph glyph-name="dividers" unicode="&#xe801;" d="M458 767h84v-84h21a63 63 0 0 0 62-62v-146l-18-18 68-119c46 46 75 109 75 179h83c0-101-44-192-115-253l131-226 5-93-78 51-128 222c-44-22-95-35-148-35-53 0-104 13-148 35l-128-222-78-51 5 93 242 419-18 18v146a63 63 0 0 0 63 62h20v84m-65-477c33-15 69-23 107-23 38 0 74 8 107 23l-61 106h-1c-25-25-65-25-90 0h-1l-61-106m107 310a42 42 0 0 1-42-42 42 42 0 0 1 42-41 42 42 0 0 1 42 41 42 42 0 0 1-42 42z" horiz-adv-x="1000" />
 
-<glyph glyph-name="login" unicode="&#xe802;" d="M661 350q0-14-11-25l-303-304q-11-10-26-10t-25 10-10 25v161h-250q-15 0-25 11t-11 25v214q0 15 11 25t25 11h250v161q0 14 10 25t25 10 26-10l303-304q11-10 11-25z m196 196v-392q0-67-47-114t-114-47h-178q-7 0-13 5t-5 13q0 2-1 11t0 15 2 13 5 11 12 3h178q37 0 64 27t26 63v392q0 37-26 64t-64 26h-174t-6 0-6 2-5 3-4 5-1 8q0 2-1 11t0 15 2 13 5 11 12 3h178q67 0 114-47t47-114z" horiz-adv-x="857.1" />
+<glyph glyph-name="file-xml" unicode="&#xe802;" d="M542 475h229l-229 229v-229m-292 292h333l250-250v-500a83 83 0 0 0-83-84h-500a83 83 0 0 0-83 84v666c0 47 37 84 83 84m5-563l156-156 59 59-97 97 97 97-59 59-156-156m465 0l-156 156-59-59 97-97-97-97 59-59 156 156z" horiz-adv-x="1000" />
 
-<glyph glyph-name="clipboard" unicode="&#xe803;" d="M0-150l0 904 225 0 0-64-161 0 0-774 579 0 0 774-161 0 0 64 225 0 0-904-707 0z m129 129l0 31 31 0 0-31-31 0z m0 121l0 31 31 0 0-31-31 0z m0 121l0 31 31 0 0-31-31 0z m0 121l0 32 31 0 0-32-31 0z m0 121l0 32 31 0 0-32-31 0z m0 96l0 94 129 0 0 97q0 41 27 71t69 29 69-30 28-70q0-56-2-97l129 0 0-94-449 0z m96-582l0 33 353 0 0-33-353 0z m0 121l0 33 353 0 0-33-353 0z m0 121l0 33 353 0 0-33-353 0z m0 121l0 34 353 0 0-34-353 0z m0 121l0 34 353 0 0-34-353 0z m97 260q0-14 9-22t23-9 22 9 9 22-9 24-22 9-23-9-9-24z" horiz-adv-x="707" />
+<glyph glyph-name="revisions-history" unicode="&#xe803;" d="M458 558v-213l197-116 33 54-167 98v177m0 209c-147 0-275-80-343-199l-95 95v-271h271l-114 114c50 105 156 177 281 177a313 313 0 0 0 312-312 313 313 0 0 0-312-313c-136 0-251 87-294 209h-88c46-168 199-292 382-292 218 0 396 177 396 396a396 396 0 0 1-396 396z" horiz-adv-x="1000" />
 
 <glyph glyph-name="emo-happy" unicode="&#xe804;" d="M261 800c-60 0-109-65-109-144 0-80 49-145 109-145s110 65 110 145c0 79-49 144-110 144z m477 0c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m208-599c-13 0-27-5-37-16-4-4-8-8-12-12-111-109-253-164-396-165-142-2-285 50-396 155l-3 3-12 12c-21 21-54 20-75-1-20-21-20-55 1-76 3-4 8-8 14-14l3-3c132-124 301-186 469-184 169 1 337 67 468 195 5 5 9 10 14 14 20 22 20 56-1 77-10 10-23 15-37 15z" horiz-adv-x="999" />
 
@@ -24,59 +24,141 @@
 
 <glyph glyph-name="emo-thumbsup" unicode="&#xe808;" d="M744 850c-60 0-109-64-109-143 0-79 49-143 109-143 60 0 108 64 108 143 0 79-48 143-108 143z m-602-80c-29 0-53-24-53-54s24-53 53-53l290 0c30 0 54 24 54 53s-24 53-54 53l-290 1z m1040-21c-16 0-34-2-54-7-112-51-109-174-93-266l-131 0c-68 0-124-53-124-123 0-34 8-71 30-98-10-11-18-24-23-38-18-48-10-106 23-144-5-6-18-27-18-27-29-57-10-144 46-179 17-11 38-17 64-17l378 0c91 3 167 76 167 169l0 287c0 49-30 108-49 151-25 58-49 116-73 174-30 72-71 118-143 118z m3-115c30 1 42-48 51-67 21-52 42-129 64-181 21-47 38-88 38-104l0-255c0-41-36-72-76-74l-332 0c-17 0-26 9-30 24-5 15-7 34 4 47 6 8 16 13 26 13 21-1 39 17 39 38 0 21-17 37-38 37-9 0-18 4-24 11-15 16-16 50 0 65 3 4 7 6 12 8 4 1 8 2 12 2 20 0 38 17 38 38 0 21-17 38-38 38-28 0-34 28-34 50 0 12 7 23 17 29-1 2 189 4 210 4 27 0 47 30 33 55-27 51-45 207 22 221 2 1 4 1 6 1z m-1133-264c-7 0-14-1-20-4-27-12-39-44-27-71 66-148 194-254 344-297 29-8 59-14 90-17 30-3 61-4 91-2l3 0 2 0c30 3 52 28 50 58-2 29-28 51-58 49l-2 0-1 0c-25-2-50-1-74 1-24 3-48 8-72 14-120 34-222 120-276 238-9 20-29 32-50 31z" horiz-adv-x="1447" />
 
-<glyph glyph-name="clock" unicode="&#xe809;" d="M500 546v-250q0-7-5-12t-13-5h-178q-8 0-13 5t-5 12v36q0 8 5 13t13 5h125v196q0 8 5 13t12 5h36q8 0 13-5t5-13z m232-196q0 83-41 152t-110 111-152 41-153-41-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152z m125 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="folder-image" unicode="&#xe809;" d="M208 142l188 250 146-188 104 125 146-187m41 458h-333l-83 83h-250a83 83 0 0 1-84-83v-500a83 83 0 0 1 84-83h666a83 83 0 0 1 84 83v417a83 83 0 0 1-84 83z" horiz-adv-x="1000" />
 
-<glyph glyph-name="link" unicode="&#xe80a;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="bell" unicode="&#xe80b;" d="M509-96q0 8-9 8-33 0-57 24t-23 57q0 9-9 9t-9-9q0-41 29-70t69-28q9 0 9 9z m-372 160h726q-149 168-149 465 0 28-13 58t-39 58-67 45-95 17-95-17-67-45-39-58-13-58q0-297-149-465z m827 0q0-29-21-50t-50-21h-250q0-59-42-101t-101-42-101 42-42 101h-250q-29 0-50 21t-21 50q28 24 51 49t47 67 42 89 27 115 11 145q0 84 66 157t171 89q-5 10-5 21 0 23 16 38t38 16 38-16 16-38q0-11-5-21 106-16 171-89t66-157q0-78 11-145t28-115 41-89 48-67 50-49z" horiz-adv-x="1000" />
+<glyph glyph-name="file-export" unicode="&#xe80a;" d="M250 767c-46 0-83-38-83-84v-666a83 83 0 0 1 83-84h500a83 83 0 0 1 83 84v500l-250 250m-41-63l229-229h-229m-170-134h295v-295l-89 89-118-118-117 118 117 117" horiz-adv-x="1000" />
 
 <glyph glyph-name="emo-grin" unicode="&#xe80c;" d="M197 801c-61 0-110-64-110-144 0-80 49-144 110-144s109 64 109 144c0 80-49 144-109 144z m476 0c-60 0-109-64-109-144 0-80 49-144 109-144 61 0 110 64 110 144 0 80-49 144-110 144z m144-480l-765 0c-29 0-52-24-52-54 3-200 238-351 422-354 186-3 442 156 448 355 0 29-24 53-53 53z m-700-106l634 0c-62-121-190-201-331-197-130 4-246 83-303 197z" horiz-adv-x="870" />
 
 <glyph glyph-name="emo-angry" unicode="&#xe80d;" d="M53 738c-20 0-39-11-48-30-13-26-1-58 25-71l152-80c-3-46 8-93 34-128 21-29 52-49 88-49 90 0 126 107 121 179-120 53-232 115-349 174-7 4-15 5-23 5z m894 0c-8 0-16-1-23-5-117-59-229-121-349-174-5-72 31-179 121-179 36 0 67 20 88 49 25 35 37 82 34 128l152 80c26 13 37 45 25 71-10 19-29 30-48 30z m-453-537c-165 0-330-62-461-184l-2-3c-6-5-11-10-15-14-21-21-21-55-1-76 21-21 54-21 75-1l12 12 3 3c112 105 254 157 396 155 143-1 286-56 396-165 4-4 8-8 12-12 21-21 54-21 75-1 21 21 21 55 0 77-4 5-9 10-14 14-130 129-299 194-468 195-3 0-5 0-8 0z" horiz-adv-x="1000" />
 
-<glyph glyph-name="mail" unicode="&#xe80e;" d="M929 11v428q-18-20-39-36-149-115-238-189-28-24-46-37t-48-28-57-13h-2q-26 0-57 13t-48 28-46 37q-88 74-238 189-21 16-39 36v-428q0-7 6-13t12-5h822q7 0 12 5t6 13z m0 586v14t-1 7-1 7-3 5-5 4-8 2h-822q-7 0-12-6t-6-12q0-94 83-159 107-84 223-176 4-3 20-17t25-21 25-17 28-16 24-5h2q11 0 24 5t28 16 25 17 25 21 20 17q116 92 224 176 30 24 56 65t26 73z m71 21v-607q0-37-26-63t-63-27h-822q-36 0-63 27t-26 63v607q0 37 26 63t63 26h822q37 0 63-26t26-63z" horiz-adv-x="1000" />
-
 <glyph glyph-name="emo-cry" unicode="&#xe80f;" d="M278 787c-7 0-15-2-23-5l-128-62-80-38c-2-1-4-2-6-3-1-5-1-11-1-16l0 0 0-1 0 0c0-69 40-162 122-162l0 0 0 0 0 0c34 0 65 18 87 49 26 35 37 82 34 128l18 9c27 12 38 44 25 71-9 19-28 30-48 30z m212 0c-20 0-39-11-48-30-13-27-1-59 25-71l18-9c-3-46 9-93 34-128 22-31 53-49 87-49l0 0 1 0 0 0c82 0 121 93 122 162l0 0 0 1 0 0c0 5-1 11-1 16-2 1-5 2-7 3l-80 38-128 62c-7 3-15 5-23 5z m279-302c-7 0-15-5-21-16-42-72-96-259 27-259 123 1 73 182 16 261-6 8-14 13-22 14z m-512-138c-57 0-112-9-166-26-10-4-20-7-30-11-11-5-21-9-30-13l0 0-1-1 0 0c-26-12-37-44-25-70 13-26 44-38 70-25l0-1c9 5 17 8 24 11 9 3 17 6 25 9 43 14 88 21 133 21 51 0 101-9 148-27 19-7 37-15 55-24 91-49 163-130 200-232 10-27 40-41 68-31 27 10 42 40 32 67-46 127-137 228-250 289-22 12-45 22-69 31-57 21-120 33-184 33z" horiz-adv-x="851" />
 
-<glyph glyph-name="cloud" unicode="&#xe810;" d="M781-15l-572 0q-86 0-148 61t-61 148q0 72 44 128t112 73l0 8q0 130 92 221t221 91q100 0 180-58t114-152q115 9 196-68t82-191q0-107-76-184t-184-77z m-577 314q-40 0-70-31t-30-74 30-73 75-31l572 0q65 0 111 46t46 110-46 111-111 46q-18 0-42-8l-56-16-9 57q-14 75-71 125t-134 49q-86 0-148-61t-61-146q0-15 5-43l13-62z" horiz-adv-x="1041" />
-
 <glyph glyph-name="emo-squint" unicode="&#xe811;" d="M128 607c-30 0-54-24-54-54 0-30 24-54 54-54l267 0c30 0 54 24 54 54 0 30-24 54-54 54l-267 0z m476 0c-29 0-54-24-54-54 0-30 25-54 54-54l267 0c30 0 54 24 54 54 0 30-24 54-54 54l-267 0z m342-406c-13 0-27-5-37-16-4-4-8-8-12-12-111-109-253-164-396-165-142-2-285 50-396 155l-3 3-12 12c-21 21-54 20-75-1-20-21-20-55 1-76 3-4 8-8 14-14l3-3c132-124 301-186 469-184 169 1 337 67 468 195 5 5 9 10 14 14 20 22 20 56-1 77-10 10-23 15-37 15z" horiz-adv-x="999" />
 
 <glyph glyph-name="emo-laugh" unicode="&#xe812;" d="M206 742c-77 0-151-39-196-103-17-24-11-57 13-74 24-17 58-12 75 13 43 61 127 74 186 31l0 0c4-2 8-5 11-9l1 0 1-1c3-3 7-7 10-11l1-1 0 0 0 0 1-1 0 0c20-22 54-24 76-4 22 19 24 53 4 75-45 53-112 85-183 85z m486 0c-78 0-152-39-197-103-17-24-11-57 13-74 24-17 58-12 75 13 43 61 127 74 186 31l0 0c4-2 8-5 12-9l0 0 1-1c4-3 7-7 10-11l1-1 0 0 0 0 1-1 1 0c19-22 53-24 75-4 22 19 24 53 5 75-46 53-113 85-183 85z m148-421l-765 0c-29 0-52-24-52-54 4-200 238-351 422-354 187-3 443 156 448 355 0 29-24 53-53 53z m-700-106l634 0c-61-121-190-201-330-197-130 4-247 83-304 197z" horiz-adv-x="893" />
 
 <glyph glyph-name="emo-wink2" unicode="&#xe813;" d="M664 800c-61 0-110-65-110-144 0-80 49-145 110-145 60 0 110 65 110 145 0 79-50 144-110 144z m-343-98l-267 0c-30 0-54-24-54-54 0-30 24-54 54-54l267 0c30 0 54 24 54 54 0 30-24 54-54 54z m-262-361c-6 0-13-1-19-3-27-10-41-41-31-68 46-127 136-228 249-289 22-12 45-22 69-31 58-21 120-33 184-33 57 0 113 9 166 27 10 3 20 7 30 11 11 4 22 8 31 12l0 1 0 0 0 0c26 12 38 44 25 71-13 26-44 37-70 25l0 0c-9-4-17-8-24-11-8-3-17-6-25-8-43-14-88-22-133-22-51 0-101 10-148 27-19 7-37 15-55 25-90 48-163 130-200 231-8 21-28 35-49 35z" horiz-adv-x="774" />
 
-<glyph glyph-name="cloud-1" unicode="&#xe814;" d="M0 178q0 55 27 102t75 74q-8 21-8 43 0 58 41 99t99 42q20 0 43-8 34 74 102 119t152 45q110 0 189-73t91-181q82-16 135-80t54-151q0-97-68-166t-166-68l-563 0q-84 0-143 60t-60 143z m63 0q0-58 41-99t99-41l563 0q70 0 121 50t50 121q0 63-39 110t-99 58q-35 8-42 15t-9 42q-8 84-70 141t-147 56q-62 0-117-34t-80-93q-10-19-12-24t-8-13-15-6-22 6q-21 10-43 8-33 0-55-22t-23-56q0-10 4-24 14-33 10-44t-37-30q-70-41-70-121z" horiz-adv-x="1000" />
-
-<glyph glyph-name="home-outline" unicode="&#xe815;" d="M1108 422q38-30 38-80 0-42-30-73t-75-31l-51 0 0-312q0-44-31-75t-74-30l-625 0q-42 0-73 30t-31 75l0 312-52 0q-44 0-74 31t-30 73q0 46 36 79 79 66 204 174t211 181 88 75l34 29 35-29q1-1 86-75t211-181 203-173z m-430-496l0 260-209 0 0-260 209 0z m207 416l156 0q-231 194-468 400-238-206-469-400l156 0 0-416 156 0 0 312 313 0 0-312 156 0 0 416z" horiz-adv-x="1146" />
-
-<glyph glyph-name="home" unicode="&#xe816;" d="M786 296v-267q0-15-11-25t-25-11h-214v214h-143v-214h-214q-15 0-25 11t-11 25v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-3-7 1-12 6l-35 41q-4 6-3 13t6 12l401 334q18 15 42 15t43-15l136-113v108q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q6-4 6-12t-4-13z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="puzzle-1" unicode="&#xe817;" d="M586 402q-37 0-64-34t-27-82 27-84 64-34q22 0 43 13 26 17 37 11t12-24l0-144q0-31-24-54t-55-23l-143 0q-16 0-23 9t2 31q21 25 21 51 0 38-34 64t-83 26-83-26-35-64q0-22 13-44 17-26 12-37t-25-10l-143 0q-33 0-55 23t-23 54l0 144q0 16 9 23t31-3q24-20 51-20 38 0 65 34t27 84-27 82-65 34q-21 0-42-13-26-17-38-12t-11 25l0 91q0 33 23 56t55 23l143 0q19 0 25 10t-11 37q-14 20-14 44 0 38 35 64t83 26 83-26 34-64q0-26-21-51-10-21-2-31t23-9l143 0q31 0 55-23t24-56l0-91q0-16-10-23t-30 3q-24 20-52 20z" horiz-adv-x="678" />
-
 <glyph glyph-name="cog-alt" unicode="&#xe818;" d="M500 350q0 59-42 101t-101 42-101-42-42-101 42-101 101-42 101 42 42 101z m429-286q0 29-22 51t-50 21-50-21-21-51q0-29 21-50t50-21 51 21 21 50z m0 572q0 29-22 50t-50 21-50-21-21-50q0-30 21-51t50-21 51 21 21 51z m-215-235v-103q0-6-4-11t-8-6l-87-14q-6-19-18-42 19-27 50-64 4-6 4-11 0-7-4-11-12-17-46-50t-43-33q-7 0-12 4l-64 50q-21-11-43-17-6-60-13-87-4-13-17-13h-104q-6 0-11 4t-5 10l-13 85q-19 6-42 18l-66-50q-4-4-11-4-6 0-12 4-80 75-80 90 0 5 4 10 5 8 23 30t26 34q-13 24-20 46l-85 13q-5 1-9 5t-4 11v104q0 5 4 10t9 6l86 14q7 19 18 42-19 27-50 64-4 6-4 11 0 7 4 12 12 16 46 49t44 33q6 0 12-4l64-50q19 10 43 18 6 60 13 86 3 13 16 13h104q6 0 11-4t6-10l13-85q19-6 42-17l65 49q5 4 12 4 6 0 11-4 81-75 81-90 0-4-4-10-7-9-24-30t-25-34q13-27 19-46l85-12q6-2 9-6t4-11z m357-298v-78q0-9-83-17-6-15-16-29 28-63 28-77 0-2-2-4-68-40-69-40-5 0-26 27t-29 37q-11-1-17-1t-17 1q-7-11-29-37t-25-27q-1 0-69 40-3 2-3 4 0 14 29 77-10 14-17 29-83 8-83 17v78q0 9 83 18 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-38q12 1 17 1t17-1q28 40 51 63l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-9 83-18z m0 572v-78q0-9-83-18-6-15-16-29 28-63 28-77 0-2-2-4-68-39-69-39-5 0-26 26t-29 38q-11-1-17-1t-17 1q-7-12-29-38t-25-26q-1 0-69 39-3 2-3 4 0 14 29 77-10 14-17 29-83 9-83 18v78q0 9 83 17 7 16 17 29-29 63-29 77 0 2 3 4 2 1 19 11t33 19 17 9q4 0 25-26t29-37q12 1 17 1t17-1q28 39 51 62l4 1q2 0 69-39 2-2 2-4 0-14-28-77 9-13 16-29 83-8 83-17z" horiz-adv-x="1071.4" />
 
-<glyph glyph-name="cog" unicode="&#xe819;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
+<glyph glyph-name="left-thick" unicode="&#xe82c;" d="M833 433v-166h-375l146-146-101-101-330 330 330 330 101-101-146-146h375z" horiz-adv-x="1000" />
 
-<glyph glyph-name="help" unicode="&#xe81a;" d="M494 740q86-62 86-184 0-64-42-124-12-20-88-80l-46-30q-40-34-48-60-6-16-8-44 0-14-16-14l-128 0q-16 0-16 12 4 98 28 124 16 22 48 48t56 42l24 14q22 16 34 34 28 44 28 70 0 40-26 78-28 36-92 36-68 0-94-44-28-42-28-92l-166 0q6 162 114 232 70 42 166 42 130 0 214-60z m-216-636q44 0 73-30t27-74q-2-46-32-73t-74-25q-44 0-73 29t-27 75 32 73 74 25z" horiz-adv-x="580" />
+<glyph glyph-name="right-small" unicode="&#xe82d;" d="M167 392v-84h500l-229-229 59-59 330 330-330 330-59-59 229-229h-500z" horiz-adv-x="1000" />
 
-<glyph glyph-name="bookmark-empty" unicode="&#xf097;" d="M643 707h-572v-693l237 227 49 47 50-47 236-227v693z m7 72q12 0 24-5 19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4-27 0-47 18l-246 236-246-236q-20-19-46-19-13 0-25 5-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
+<glyph glyph-name="right-thick" unicode="&#xe82e;" d="M167 433v-166h375l-146-146 101-101 330 330-330 330-101-101 146-146h-375z" horiz-adv-x="1000" />
 
-<glyph glyph-name="menu" unicode="&#xf0c9;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
+<glyph glyph-name="up-small" unicode="&#xe82f;" d="M542 17h-84v500l-229-229-59 59 330 330 330-330-59-59-229 229v-500z" horiz-adv-x="1000" />
 
-<glyph glyph-name="sitemap" unicode="&#xf0e8;" d="M1000 154v-179q0-22-16-38t-38-16h-178q-22 0-38 16t-16 38v179q0 22 16 38t38 15h53v107h-285v-107h53q23 0 38-15t16-38v-179q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v179q0 22 16 38t38 15h53v107h-285v-107h53q23 0 38-15t16-38v-179q0-22-16-38t-38-16h-178q-23 0-38 16t-16 38v179q0 22 16 38t38 15h53v107q0 29 21 51t51 21h285v107h-53q-23 0-38 16t-16 37v179q0 22 16 38t38 16h178q23 0 38-16t16-38v-179q0-22-16-37t-38-16h-53v-107h285q29 0 51-21t21-51v-107h53q23 0 38-15t16-38z" horiz-adv-x="1000" />
+<glyph glyph-name="up-bold" unicode="&#xe830;" d="M625 17h-250v333h-202l327 327 327-327h-202v-333z" horiz-adv-x="1000" />
 
-<glyph glyph-name="doc-text" unicode="&#xf0f6;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-572 483q0 7 5 12t13 5h393q8 0 13-5t5-12v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36z m411-125q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z m0-143q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z" horiz-adv-x="857.1" />
+<glyph glyph-name="up-thick" unicode="&#xe831;" d="M583 17h-166v375l-146-146-101 101 330 330 330-330-101-101-146 146v-375z" horiz-adv-x="1000" />
 
-<glyph glyph-name="smile" unicode="&#xf118;" d="M633 250q-21-67-77-109t-127-41-128 41-77 109q-4 14 3 27t21 18q14 4 27-2t17-22q14-44 52-72t85-28 84 28 52 72q4 15 18 22t27 2 21-18 2-27z m-276 243q0-30-21-51t-50-21-51 21-21 51 21 50 51 21 50-21 21-50z m286 0q0-30-21-51t-51-21-50 21-21 51 21 50 50 21 51-21 21-50z m143-143q0 73-29 139t-76 114-114 76-138 28-139-28-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139z m71 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="attachment" unicode="&#xe832;" d="M313 100a229 229 0 0 0-230 229 229 229 0 0 0 230 229h437a167 167 0 0 0 167-166 167 167 0 0 0-167-167h-354a104 104 0 0 0-104 104 104 104 0 0 0 104 104h312v-62h-312a42 42 0 0 1-42-42 42 42 0 0 1 42-41h354a104 104 0 0 1 104 104 104 104 0 0 1-104 104h-437a167 167 0 0 1-167-167 167 167 0 0 1 167-166h395v-63h-395z" horiz-adv-x="1000" />
 
-<glyph glyph-name="frown" unicode="&#xf119;" d="M633 164q4-14-2-27t-21-17-27 2-18 21q-14 45-52 72t-84 28-85-28-52-72q-4-14-17-21t-27-2q-15 4-21 17t-3 27q21 68 77 109t128 41 127-41 77-109z m-276 329q0-30-21-51t-50-21-51 21-21 51 21 50 51 21 50-21 21-50z m286 0q0-30-21-51t-51-21-50 21-21 51 21 50 50 21 51-21 21-50z m143-143q0 73-29 139t-76 114-114 76-138 28-139-28-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139z m71 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="user" unicode="&#xe833;" d="M500 683a167 167 0 0 0 167-166 167 167 0 0 0-167-167 167 167 0 0 0-167 167 167 167 0 0 0 167 166m0-416c184 0 333-75 333-167v-83h-666v83c0 92 149 167 333 167z" horiz-adv-x="1000" />
 
-<glyph glyph-name="meh" unicode="&#xf11a;" d="M643 243q0-15-11-25t-25-11h-357q-14 0-25 11t-11 25 11 25 25 11h357q15 0 25-11t11-25z m-286 250q0-30-21-51t-50-21-51 21-21 51 21 50 51 21 50-21 21-50z m286 0q0-30-21-51t-51-21-50 21-21 51 21 50 50 21 51-21 21-50z m143-143q0 73-29 139t-76 114-114 76-138 28-139-28-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139z m71 0q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+<glyph glyph-name="down-small" unicode="&#xe834;" d="M458 683h84v-500l229 230 59-60-330-330-330 330 59 60 229-230v500z" horiz-adv-x="1000" />
 
-<glyph glyph-name="puzzle" unicode="&#xf12e;" d="M929 237q0-45-25-75t-69-30q-23 0-43 10t-33 21-32 21-39 10q-62 0-62-69 0-22 9-65t8-64v-3q-12 0-18 0-19-2-54-7t-65-7-54-3q-35 0-58 15t-23 47q0 20 9 39t22 32 21 33 10 43q0 44-31 69t-75 25q-47 0-80-26t-33-71q0-24 9-46t18-36 19-30 8-28q0-25-25-50-21-19-65-19-54 0-137 13-5 1-16 2t-15 3l-7 1q-1 0-2 0-1 0-1 1v571q1 0 10-2t19-2 12-2q83-14 137-14 44 0 65 20 25 24 25 49 0 13-8 29t-19 29-18 36-9 47q0 45 33 71t81 25q44 0 74-25t31-69q0-23-10-43t-21-33-22-31-9-40q0-32 23-47t58-14q35 0 100 8t91 9v-1q-1-1-2-9t-3-19-2-12q-13-84-13-137 0-45 19-65 25-26 50-26 12 0 28 8t30 19 36 19 46 8q46 0 71-33t26-80z" horiz-adv-x="928.6" />
+<glyph glyph-name="down-thick" unicode="&#xe835;" d="M417 683h166v-375l146 146 101-101-330-330-330 330 101 101 146-146v375z" horiz-adv-x="1000" />
 
-<glyph glyph-name="file-pdf" unicode="&#xf1c1;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-287 331q18-14 47-31 33 4 65 4 82 0 99-27 9-13 1-29 0-1-1-1l-1-2v0q-3-21-39-21-27 0-64 11t-73 29q-123-13-219-46-85-146-135-146-8 0-15 4l-14 7q0 0-3 2-6 6-4 20 5 23 32 51t73 54q8 5 13-3 1-1 1-2 29 47 60 110 38 76 58 146-13 46-17 89t4 71q6 22 23 22h12q13 0 20-8 10-12 5-38-1-3-2-4 0-2 0-5v-17q-1-68-8-107 31-91 82-133z m-321-229q29 13 76 88-29-22-49-47t-27-41z m222 513q-9-23-2-73 1 4 4 24 0 2 4 24 1 3 3 5-1 0-1 1-1 1-1 2 0 12-7 20 0-1 0-1v-2z m-70-368q76 30 159 45-1 0-7 5t-9 8q-43 37-71 98-15-48-46-110-17-31-26-46z m361 9q-13 13-78 13 42-16 69-16 8 0 10 1 0 0-1 2z" horiz-adv-x="857.1" />
+<glyph glyph-name="left-small" unicode="&#xe836;" d="M833 392v-84h-500l230-229-60-59-330 330 330 330 60-59-230-229h500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="left-bold" unicode="&#xe837;" d="M833 475v-250h-333v-202l-327 327 327 327v-202h333z" horiz-adv-x="1000" />
+
+<glyph glyph-name="file-pdf" unicode="&#xe838;" d="M583 475h230l-230 229v-229m-291 292h333l250-250v-500a83 83 0 0 0-83-84h-500c-47 0-84 38-84 84v666a83 83 0 0 0 84 84m205-435c17-38 39-69 64-90l17-13c-36-7-86-19-139-39v0l-5-2 21 44c19 36 33 69 42 100m270-159c8 7 11 17 12 27 1 9-1 17-5 23-12 20-44 29-95 29l-54-3-36 24c-26 22-50 60-67 107l2 6c14 55 26 122-1 150-7 7-16 10-25 10h-10c-16 0-30-16-33-32-16-56-7-86 9-136v-1c-11-37-24-79-45-122l-40-75-37-20c-50-32-74-67-79-89-1-8 0-15 2-22l2-2 20-13 18-5c34 0 72 40 124 128l7 3c43 14 97 23 168 31 43-21 94-31 125-31 19 0 31 5 38 13m-17 30l4-5c-1-4-2-5-4-5h-2l-8-1c-19 0-48 8-79 21 4 4 6 4 10 4 58 0 75-10 79-14m-382-61c-27-50-52-77-70-84 2 16 20 44 50 71l20 13m126 288c-10 37-10 68-3 85l3 5 6-2c7-10 8-23 4-46l-1-7-7-34-2-1z" horiz-adv-x="1000" />
+
+<glyph glyph-name="revert-replay" unicode="&#xe839;" d="M500 642v166l-208-208 208-208v166a250 250 0 0 0 250-250 250 250 0 0 0-250-250 250 250 0 0 0-250 250h-83a333 333 0 0 1 333-333 333 333 0 0 1 333 333 333 333 0 0 1-333 334z" horiz-adv-x="1000" />
+
+<glyph glyph-name="bell" unicode="&#xe83a;" d="M667 142h-375v271c0 104 83 187 187 187 104 0 188-83 188-187m83-230v230c0 127-89 235-208 263v28a63 63 0 0 1-63 63 63 63 0 0 1-62-63v-28c-120-28-209-136-209-263v-230l-83-83v-42h708v42m-354-167a83 83 0 0 1 84 84h-167a83 83 0 0 1 83-84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="bookmark-empty" unicode="&#xe83b;" d="M708 100l-208 91-208-91v542h416m0 83h-416a83 83 0 0 1-84-83v-667l292 125 292-125v667c0 46-38 83-84 83z" horiz-adv-x="1000" />
+
+<glyph glyph-name="help" unicode="&#xe83c;" d="M417 58h125v-125h-125v125m83 709c223-9 320-234 188-403-35-42-91-69-118-104-28-35-28-77-28-118h-125c0 69 0 128 28 170 27 41 83 66 118 93 100 94 75 226-63 237a125 125 0 0 1-125-125h-125a250 250 0 0 0 250 250z" horiz-adv-x="1000" />
+
+<glyph glyph-name="file-new" unicode="&#xe83d;" d="M542 475h229l-229 229v-229m-292 292h333l250-250v-500a83 83 0 0 0-83-84h-500c-46 0-83 38-83 84v666c0 47 37 84 83 84m208-542v125h-83v-125h-125v-83h125v-125h83v125h125v83h-125z" horiz-adv-x="1000" />
+
+<glyph glyph-name="file" unicode="&#xe83e;" d="M542 475h229l-229 229v-229m-292 292h333l250-250v-500a83 83 0 0 0-83-84h-500c-46 0-83 38-83 84v666c0 47 37 84 83 84m208-84h-208v-666h208l292 0v375h-292v291z" horiz-adv-x="1000" />
+
+<glyph glyph-name="book-open" unicode="&#xe83f;" d="M875 642c-46 14-97 21-146 21-81 0-169-17-229-63-60 46-148 63-229 63-81 0-169-17-229-63v-610c0-11 10-21 21-21 4 0 6 2 10 2 56 27 137 46 198 46 81 0 169-17 229-63 56 36 158 63 229 63 69 0 140-13 198-44 4-2 6-2 11-2 10 0 20 10 20 21v608c-25 19-52 31-83 42m0-563c-46 15-96 21-146 21-71 0-173-27-229-62v479c56 35 158 62 229 62 50 0 100-6 146-21v-479z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pencil" unicode="&#xe840;" d="M702 736c-17 0-32-6-45-18l-88-88 221-222 88 88c25 25 25 65 0 89l-132 133c-13 12-28 18-44 18m-163-136l-337-338 106-12 8-95 95-7 12-107 337 338m-583-156l-73-278 279 74-10 90-96 7-7 97" horiz-adv-x="1000" />
+
+<glyph glyph-name="check" unicode="&#xe841;" d="M875 558l-500-500-229 230 59 58 170-170 441 441 59-59z" horiz-adv-x="1000" />
+
+<glyph glyph-name="home" unicode="&#xe842;" d="M417 17v250h166v-250h209v333h125l-417 375-417-375h125v-333h209z" horiz-adv-x="1000" />
+
+<glyph glyph-name="link" unicode="&#xe843;" d="M441 291c17-16 17-43 0-59-16-16-43-16-59 0-81 81-81 213 0 295v0l148 147c81 81 213 81 294 0 81-81 81-213 0-294l-62-62c1 34-5 68-17 100l20 20c49 49 49 128 0 177-49 49-128 49-177 0l-147-147c-49-49-49-128 0-177m118 177c16 16 43 16 59 0 81-81 81-213 0-295v0l-148-147c-81-81-213-81-294 0-81 81-81 213 0 294l62 63c0-35 5-69 17-102l-20-19c-49-49-49-128 0-177 49-49 128-49 177 0l147 147c49 49 49 128 0 177-17 16-17 43 0 59z" horiz-adv-x="1000" />
+
+<glyph glyph-name="checkbox-marked" unicode="&#xe844;" d="M417 142l-209 208 59 59 150-149 316 316 59-59m0 208h-584c-46 0-83-37-83-83v-584a83 83 0 0 1 83-83h584a83 83 0 0 1 83 83v584c0 46-37 83-83 83z" horiz-adv-x="1000" />
+
+<glyph glyph-name="login" unicode="&#xe845;" d="M792 725h-584c-46 0-83-37-83-83v-167h83v167h584v-584h-584v167h-83v-167a83 83 0 0 1 83-83h584a83 83 0 0 1 83 83v584c0 46-37 83-83 83m-372-524l59-59 209 208-209 208-59-58 108-108h-403v-84h403l-108-107z" horiz-adv-x="1000" />
+
+<glyph glyph-name="down-open-big" unicode="&#xe846;" d="M309 493l191-192 191 192 59-60-250-250-250 250 59 60z" horiz-adv-x="1000" />
+
+<glyph glyph-name="logout" unicode="&#xe847;" d="M587 200l108 108h-403v84h403l-108 108 59 58 208-208-208-208-59 58m205 525a83 83 0 0 0 83-83v-195l-83 83v112h-584v-584h584v112l83 83v-195a83 83 0 0 0-83-83h-584c-46 0-83 38-83 83v584c0 46 37 83 83 83h584z" horiz-adv-x="1000" />
+
+<glyph glyph-name="up-open-big" unicode="&#xe848;" d="M309 208l191 191 191-191 59 59-250 250-250-250 59-59z" horiz-adv-x="1000" />
+
+<glyph glyph-name="files" unicode="&#xe849;" d="M625 558h229l-229 230v-230m-292 292h334l250-250v-500a83 83 0 0 0-84-83h-500c-46 0-83 37-83 83v667a83 83 0 0 0 83 83m-166-167v-750h666v-83h-666a83 83 0 0 0-84 83v750h84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="file-text" unicode="&#xe84a;" d="M542 475h229l-229 229v-229m-292 292h333l250-250v-500a83 83 0 0 0-83-84h-500c-46 0-83 38-83 84v666c0 47 37 84 83 84m375-667v83h-375v-83h375m125 167v83h-500v-83h500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="frown" unicode="&#xe84b;" d="M833 350a333 333 0 0 1-333 333 333 333 0 0 1-333-333 333 333 0 0 1 333-333 333 333 0 0 1 333 333m84 0a417 417 0 0 0-417-417 417 417 0 0 0-417 417 417 417 0 0 0 417 417 417 417 0 0 0 417-417m-271 167c33 0 62-29 62-63 0-33-29-62-62-62-33 0-63 29-63 62 0 34 30 63 63 63m-229-63c0-33-29-62-63-62-33 0-62 29-62 62 0 34 29 63 62 63 34 0 63-29 63-63m83-187c73 0 137-30 175-76l-60-59c-18 31-63 51-115 51-52 0-97-20-115-51l-60 59c38 46 102 76 175 76z" horiz-adv-x="1000" />
+
+<glyph glyph-name="star-outline" unicode="&#xe84c;" d="M500 209l-157-95 42 179-139 120 183 15 71 168 71-168 183-15-139-120 42-179m260 351l-300 25-117 277-117-277-300-25 227-197-67-293 257 155 258-155-69 293 228 197z" horiz-adv-x="1000" />
+
+<glyph glyph-name="sitemap" unicode="&#xe84d;" d="M375 767v-250h83v-125h-250c-46 0-83-37-83-84v-125h-83v-250h250v250h-84v125h250v-125h-83v-250h250v250h-83v125h250v-125h-84v-250h250v250h-83v125c0 47-37 84-83 84h-250v125h83v250h-250z" horiz-adv-x="1000" />
+
+<glyph glyph-name="cog" unicode="&#xe84e;" d="M500 204a146 146 0 0 0-146 146 146 146 0 0 0 146 146 146 146 0 0 0 146-146 146 146 0 0 0-146-146m310 106c1 13 3 26 3 40 0 14-2 28-3 42l88 68c7 6 10 17 5 26l-84 144c-5 10-16 13-25 10l-104-42c-22 16-44 30-70 41l-16 110c-1 10-10 18-21 18h-166c-11 0-19-8-21-18l-16-110c-26-11-48-25-70-41l-104 42c-9 3-20 0-25-10l-83-144c-6-9-3-20 5-26l87-68c-1-14-2-28-2-42 0-14 1-27 2-40l-87-70c-8-6-11-17-5-26l83-144c5-10 16-13 25-10l104 43c22-17 44-31 70-42l16-110c2-10 10-18 21-18h166c11 0 20 8 21 18l16 110c26 11 48 25 70 42l104-43c9-3 20 0 25 10l84 144c5 9 2 20-5 26l-88 70z" horiz-adv-x="1000" />
+
+<glyph glyph-name="puzzle" unicode="&#xe84f;" d="M854 392h-62v166c0 47-38 84-84 84h-166v62a104 104 0 0 1-104 104 104 104 0 0 1-105-104v-62h-166a83 83 0 0 1-84-84v-158h63c62 0 112-50 112-112 0-63-50-113-112-113h-63v-158a83 83 0 0 1 84-84h158v63c0 62 50 112 113 112 62 0 112-50 112-112v-63h158a83 83 0 0 1 84 84v166h62a104 104 0 0 1 104 105 104 104 0 0 1-104 104z" horiz-adv-x="1000" />
+
+<glyph glyph-name="plus" unicode="&#xe850;" d="M792 308h-250v-250h-84v250h-250v84h250v250h84v-250h250v-84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pencil-1" unicode="&#xe851;" d="M863 557c16 16 16 43 0 58l-98 98c-15 16-42 16-58 0l-77-76 156-157m-661-349v-156h156l461 461-156 157-461-462z" horiz-adv-x="1000" />
+
+<glyph glyph-name="minus" unicode="&#xe852;" d="M792 308h-584v84h584v-84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="up" unicode="&#xe853;" d="M292 225l208 208 208-208h-416z" horiz-adv-x="1000" />
+
+<glyph glyph-name="menu" unicode="&#xe854;" d="M125 600h750v-83h-750v83m0-208h750v-84h-750v84m0-209h750v-83h-750v83z" horiz-adv-x="1000" />
+
+<glyph glyph-name="search" unicode="&#xe855;" d="M396 725a271 271 0 0 0 271-271c0-67-25-129-65-176l11-11h33l208-209-62-62-209 208v33l-11 11c-47-40-109-65-176-65a271 271 0 0 0-271 271 271 271 0 0 0 271 271m0-83c-104 0-188-84-188-188 0-104 84-187 188-187 104 0 187 83 187 187 0 104-83 188-187 188z" horiz-adv-x="1000" />
+
+<glyph glyph-name="clipboard-empty" unicode="&#xe856;" d="M292 517v83h-84v-542h584v542h-84v-83h-416m83 166a125 125 0 0 0 125 125 125 125 0 0 0 125-125h167a83 83 0 0 0 83-83v-542a83 83 0 0 0-83-83h-584a83 83 0 0 0-83 83v542a83 83 0 0 0 83 83h167m125 42a42 42 0 0 1-42-42 42 42 0 0 1 42-41 42 42 0 0 1 42 41 42 42 0 0 1-42 42z" horiz-adv-x="1000" />
+
+<glyph glyph-name="clipboard" unicode="&#xe857;" d="M708 475h-416v83h416m0-250h-416v84h416m-125-250h-291v83h291m-83 500a42 42 0 0 0 42-42 42 42 0 0 0-42-41 42 42 0 0 0-42 41 42 42 0 0 0 42 42m292 0h-174c-18 48-64 83-118 83-54 0-100-35-117-83h-175a83 83 0 0 1-83-83v-584a83 83 0 0 1 83-83h584a83 83 0 0 1 83 83v584a83 83 0 0 1-83 83z" horiz-adv-x="1000" />
+
+<glyph glyph-name="clock" unicode="&#xe858;" d="M500 17a333 333 0 0 1 333 333 333 333 0 0 1-333 333 333 333 0 0 1-333-333 333 333 0 0 1 333-333m0 750a417 417 0 0 0 417-417 417 417 0 0 0-417-417c-230 0-417 188-417 417a417 417 0 0 0 417 417m21-209v-218l187-112-31-51-219 131v250h63z" horiz-adv-x="1000" />
+
+<glyph glyph-name="down" unicode="&#xe859;" d="M292 433l208-208 208 208h-416z" horiz-adv-x="1000" />
+
+<glyph glyph-name="cloud" unicode="&#xe85a;" d="M792 100h-542a167 167 0 0 0-167 167 167 167 0 0 0 167 166h30c27 97 116 167 220 167a229 229 0 0 0 229-229v-21h63a125 125 0 0 0 125-125 125 125 0 0 0-125-125m14 332c-28 143-154 251-306 251-120 0-225-68-277-168-125-13-223-119-223-248a250 250 0 0 1 250-250h542a208 208 0 0 1 208 208c0 110-85 199-194 207z" horiz-adv-x="1000" />
+
+<glyph glyph-name="code-braces" unicode="&#xe85b;" d="M333 725a83 83 0 0 1-83-83v-167a83 83 0 0 0-83-83h-42v-84h42a83 83 0 0 0 83-83v-167a83 83 0 0 1 83-83h84v83h-84v209a83 83 0 0 1-83 83 83 83 0 0 1 83 83v209h84v83m250 0a83 83 0 0 0 83-83v-167a83 83 0 0 1 83-83h42v-84h-42a83 83 0 0 1-83-83v-167a83 83 0 0 0-83-83h-84v83h84v209a83 83 0 0 0 83 83 83 83 0 0 0-83 83v209h-84v83h84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="disk" unicode="&#xe85c;" d="M500 267c-46 0-83 37-83 83 0 46 37 83 83 83 46 0 83-37 83-83a83 83 0 0 0-83-83m0 416a333 333 0 0 1-333-333 333 333 0 0 1 333-333 333 333 0 0 1 333 333 333 333 0 0 1-333 333z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mail" unicode="&#xe85d;" d="M833 683h-666a83 83 0 0 1-84-83v-500a83 83 0 0 1 84-83h666a83 83 0 0 1 84 83v500a83 83 0 0 1-84 83m0-583h-666v417l333-209 333 209v-417m0 500l-333-208-333 208v0h666v0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="smile" unicode="&#xe85e;" d="M833 350a333 333 0 0 1-333 333 333 333 0 0 1-333-333 333 333 0 0 1 333-333 333 333 0 0 1 333 333m84 0a417 417 0 0 0-417-417 417 417 0 0 0-417 417 417 417 0 0 0 417 417 417 417 0 0 0 417-417m-500 104c0-33-29-62-63-62-33 0-62 29-62 62 0 34 29 63 62 63 34 0 63-29 63-63m291 0c0-33-29-62-62-62-33 0-63 29-63 62 0 34 30 63 63 63 33 0 62-29 62-63m-208-322c-73 0-137 31-175 76l60 59c18-30 63-52 115-52 52 0 97 22 115 52l60-59c-38-45-102-76-175-76z" horiz-adv-x="1000" />
+
+<glyph glyph-name="meh" unicode="&#xe85f;" d="M354 392a63 63 0 0 0-62 62 63 63 0 0 0 62 63 63 63 0 0 0 63-63 63 63 0 0 0-63-62m292 0a63 63 0 0 0-63 62 63 63 0 0 0 63 63 63 63 0 0 0 62-63 63 63 0 0 0-62-62m-146-375a333 333 0 0 1 333 333 333 333 0 0 1-333 333 333 333 0 0 1-333-333 333 333 0 0 1 333-333m0 750a417 417 0 0 0 417-417 417 417 0 0 0-417-417c-230 0-417 188-417 417a417 417 0 0 0 417 417m-125-500h250a42 42 0 0 0 42-42 42 42 0 0 0-42-42h-250a42 42 0 0 0-42 42 42 42 0 0 0 42 42z" horiz-adv-x="1000" />
+
+<glyph glyph-name="star" unicode="&#xe860;" d="M500 130l258-155-69 293 228 197-300 26-117 276-117-276-300-26 227-197-67-293 257 155z" horiz-adv-x="1000" />
+
+<glyph glyph-name="code" unicode="&#xe861;" d="M608 158l192 192-192 192 59 58 250-250-250-250-59 58m-216 0l-192 192 192 192-59 58-250-250 250-250 59 58z" horiz-adv-x="1000" />
+
+<glyph glyph-name="user-circle" unicode="&#xe86c;" d="M500 50c-104 0-196 53-250 133 1 84 167 130 250 130 83 0 249-46 250-130-54-80-146-133-250-133m0 592a125 125 0 0 0 125-125 125 125 0 0 0-125-125 125 125 0 0 0-125 125 125 125 0 0 0 125 125m0 125a417 417 0 0 1-417-417 417 417 0 0 1 417-417 417 417 0 0 1 417 417c0 230-188 417-417 417z" horiz-adv-x="1000" />
+
+<glyph glyph-name="comment-question" unicode="&#xe880;" d="M167 767a83 83 0 0 1-84-84v-500a83 83 0 0 1 84-83h166v-125a42 42 0 0 1 42-42h21v0c10 0 21 4 29 12l154 155h254a83 83 0 0 1 84 83v500c0 47-38 84-84 84h-666m0-84h666v-500h-288l-128-128v128h-250v500m341-62c-37 0-67-8-89-23-23-15-35-40-33-68-377 0-112 0 82 0 0 11 5 20 11 26 9 6 18 9 29 9 13 0 24-4 32-11 7-7 11-16 11-29 0-12-3-22-9-31-7-9-16-16-27-22-22-14-36-25-45-35-7-10-12-24-12-45h84c0 11 2 21 6 28 3 7 10 13 21 20 19 8 35 20 47 35 12 15 19 32 19 50 0 29-12 53-34 70-23 17-54 26-93 26m-50-271v-83h84v83h-84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="jira" unicode="&#xe881;" d="M500 767a66 66 0 0 0 66-66 66 66 0 0 0-66-66 66 66 0 0 0-66 66 66 66 0 0 0 66 66m-175-44c36 0 65-30 65-66 0-36-29-66-65-66a66 66 0 0 0-66 66 66 66 0 0 0 66 66m350 0c37 0 66-30 66-66 0-36-29-66-66-66a66 66 0 0 0-65 66 66 66 0 0 0 65 66m-183-329c-88 88-66 131-66 131h154c0-65-88-131-88-131m88-439c0 0 0 88-176 263-175 176-197 220-219 351 0 0 16 22 38 0 22-21 72-38 115-38 0 0 44-137 165-225 0 0 159 164 159 230 0 0 49-11 109 33 0 0 42 22 44 0 6-44-38-197-219-351 0 0 115-131 104-263h-120m-198 220l93-105c-43-43-49-137-49-137h-131c21 176 87 242 87 242z" horiz-adv-x="1000" />
+
+<glyph glyph-name="right-bold" unicode="&#xe882;" d="M167 225v250h333v202l327-327-327-327v202h-333z" horiz-adv-x="1000" />
+
+<glyph glyph-name="down-bold" unicode="&#xe883;" d="M375 683h250v-333h202l-327-327-327 327h202v333z" horiz-adv-x="1000" />
 </font>
 </defs>
 </svg>