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.
+

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

@@ -0,0 +1,27 @@
+sprintdoc template for DokuWiki
+
+modern, responsive template that integrates multiple plugins
+
+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,8 +0,0 @@
-# sprintDoc Template for dokuwiki
-by Jana Deutschlaender <deutschlaender@cosmocode.de>
-
-Documentation: [https://www.dokuwiki.org/template:sprintdoc](https://www.dokuwiki.org/template:sprintdoc)
-
-Version: see template.info.txt
-
-License: GPL2, see COPYING

Template.php

@@ -69,6 +69,8 @@ class Template {
         $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';
     }
 
     /**
@@ -115,10 +117,11 @@ class Template {
         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
-        $header = '';
         if ($this->plugins['sitemapnavi'] !== null) {
-            $header = '<ul class="sidebar-tabs">';
+            $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' : '') . '">' .
@@ -140,13 +143,31 @@ class Template {
             $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
      *
@@ -243,32 +264,16 @@ class Template {
             $title = tpl_getLang('adjunct_start_logo_text') . $conf['title'];
         }
 
-        $desktop = self::getResizedImgTag(
+        $logo = <<<HTML
-            'img',
+<img class="mobile-hide dark-only" src="/_media/wiki:logo-on.svg" alt="EH22 DEMO">
-            array(
+<img class="mobile-hide light-only" src="/_media/wiki:logo-off.svg" alt="EH22 DEMO">
-                'class' => 'mobile-hide',
+HTML;
-                'src' => array('wiki:logo-wide.png', 'wiki:logo.png'),
-                'alt' => $title,
-            ),
-            0, 50, false
-        );
-        $mobile = self::getResizedImgTag(
-            'img',
-            array(
-                'class' => 'mobile-only',
-                'src' => array('wiki:logo-32x32.png', 'wiki:favicon.png', 'wiki:logo-square.png', 'wiki:logo.png'),
-                'alt' => $title,
-            ),
-            32, 32
-        );
 
         // homepage logo should not link to itself (BITV accessibility requirement)
         if($linkit) {
-            tpl_link(wl(), $desktop, 'accesskey="h" title="[H]"');
+            tpl_link(wl(), $logo, 'accesskey="h" title="[H]"');
-            tpl_link(wl(), $mobile, 'accesskey="h" title="[H]"');
         } else {
-            echo $desktop;
+            echo $logo;
-            echo $mobile;
         }
     }
 

conf/default.php

@@ -6,3 +6,6 @@
 
 $conf['sidebar_sections'] = 'h1,h2,h3,h4,h5';
 $conf['header_layout'] = 'header-default';
+$conf['autocollapse'] = 1;
+$conf['closedwiki'] = 0;
+$conf['copyright'] = '';

conf/metadata.php

@@ -17,3 +17,7 @@ $meta['header_layout'] = array(
                                 'header-compact',
                             ),
                         );
+
+$meta['autocollapse'] = array('onoff');
+$meta['closedwiki'] = array('onoff');
+$meta['copyright'] = array('');

css/area_content.less

@@ -1,27 +1,23 @@
 /**
  * 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 {
-        box-shadow: @box-shadow;
+        z-index: 1;
+
+        background-color: var(--color-background);
+
 
         #dokuwiki__content {
             position: relative;
 
-            &::before {
+            .page-content {
-                content: '';
+                padding-top: @page-header_height;
-                position: absolute;
-                top: 0;
-                left: 0;
-                height: @page-header_height;
-                box-sizing: border-box;
-                width: 100%;
-                background-color: @ini_background_page_header;
-                border-bottom: 1px solid @ini_border_light;
-            }
 
                 .msg-area + * {
                     clear: both;
@@ -30,7 +26,13 @@
             }
         }
     }
-
+    @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,
@@ -38,16 +40,14 @@
 .main-content > .level4,
 .main-content > .level5,
 .main-content > .level6 {
-    //padding-bottom: 1rem;
+    > p,
-
+    > ul > li .li {
-    > p, > ul > li .li {
         a {
             font-size: inherit;
         }
     }
 }
 
-
 .level1,
 .level2,
 .level3,

css/area_footer.less

@@ -1,20 +1,16 @@
 /**
  * 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: @ini_background_page_header;
+        background-color: var(--color-background);
-        border-top: 1px solid @ini_border_light;
+        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: @ini_background_page_footer;
+        color: var(--color-shade-4);
         font-size: @font-size-default;
         text-align: right;
         padding: @margin-small @margin-default;
@@ -39,26 +35,21 @@
         .main-footer {
             position: relative;
             box-sizing: border-box;
-            background-color: @ini_background_site;
+            background-color: var(--color-background);
             margin-top: 5px; // for box-shadow of content
+            text-align: center;
         }
 
         p {
-            color: @ini_text_webframe;
+            color: var(--color-shade-4);
             font-size: @font-size-default;
             margin: 0;
         }
-
-        a {
-            color: @ini_nav_menu_color;
     }
 }
-}
-
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
-
 @media @screen_min-md {
     #dokuwiki__footer {
         .col-xs-12 {
@@ -91,10 +82,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-md {
     #dokuwiki__footer {
         .main-footer {
@@ -104,10 +93,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 768px */
-
 @media @screen_max-xs {
     .page-footer {
         padding-left: @margin-small;
@@ -124,10 +111,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 480px */
-
 @media @screen_max-xxs {
     #dokuwiki__footer {
         .main-footer {

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

@@ -1,18 +1,13 @@
 /**
  * This file provides the design styles for forms.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* 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;
@@ -64,8 +59,8 @@ meter,
 progress {
     font: inherit;
     font-weight: normal;
-    color: #333;
+    color: var(--color-foreground);
-    background-color: #fff;
+    background-color: var(--color-background);
     line-height: normal;
     margin: 0;
     vertical-align: middle;
@@ -95,8 +90,7 @@ textarea,
 select,
 keygen {
     min-height: @formfield_min-height;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--color-shade-4);
-    box-shadow: inset 0 0 1px #eee;
     border-radius: @fix_border-radius;
     padding-left: .3rem;
     padding-right: .3rem;
@@ -115,7 +109,6 @@ input[type="image"] {
     //box-shadow: none; :in ie picture and checkbox disappear
 }
 
-
 input:active,
 input:focus,
 textarea:active,
@@ -124,7 +117,7 @@ select:active,
 select:focus,
 keygen:active,
 keygen:focus {
-    border-color: #999;
+    border-color: var(--color-shade-4);
 }
 
 input[type="file"] {
@@ -132,7 +125,6 @@ input[type="file"] {
     padding-bottom: .1rem;
 }
 
-
 /* + + + + +  buttons  + + + + + */
 button {
     background-color: #eee;
@@ -155,7 +147,6 @@ button {
     }
 }
 
-
 /* + + +  all types of submit-buttons  + + + */
 form input[type=submit], // heredity 'adnewpage'
 a.button,
@@ -166,19 +157,21 @@ button[type=submit],
     cursor: pointer;
     box-shadow: none;
     background-image: none;
-    background-color: @ini_button_background;
+    background-color: var(--color-shade-1);
-    border: 1px solid @ini_button_background;
+    border: solid 0.1rem var(--color-shade-2);
-    border-radius: @fix_border-radius;
+    border-radius: 0.5rem;
-    color: @ini_button_color;
+    color: var(--color-foreground);
     vertical-align: top;
     padding: .3em @grid;
-    transition: @transition background-color, @transition color;
 
     &:hover,
     &:active,
     &:focus {
-        background-color: @ini_button_color;
+        background-color: transparent;
-        color: @ini_button_background;
+        color: var(--color-glow-primary);
+        border-color: var(--color-glow-primary);
+        transition: var(--transition-glow);
+        filter: var(--filter-glow-primary);
     }
 }
 
@@ -213,7 +206,6 @@ button[type=submit] {
     }
 }
 
-
 /* + + +  all types of buttons not being submit-buttons  + + + */
 input.button,
 input[type=button] {
@@ -237,7 +229,6 @@ input[type=button] {
     }
 }
 
-
 /* + + +  all disabled buttons  + + + */
 input[disabled],
 button[disabled],
@@ -249,13 +240,11 @@ button[readonly],
 select[readonly],
 textarea[readonly] {
     cursor: auto;
-    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+);
+    background-color: var(--color-background);
-    background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%);
-    background-color: #eee;
     opacity: .5;
     border: 1px solid @ini_border;
     border-radius: @fix_border-radius;
-    color: #333;
+    color: var(--color-shade-4);
     font-weight: normal;
     padding: .3em @grid;
     transition: @transition background-color, @transition color;
@@ -277,10 +266,8 @@ button::-moz-focus-inner {
     padding: 0;
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries - Styles for auth forms */
-
 @media @screen_max-xs {
     .tpl_sprintdoc {
         #dw__login,

css/area_header.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the page header.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__header {
     @header-font-opacity: 1;
 
@@ -12,25 +9,23 @@
         min-height: 120px;
     }
 
-
     /* + + +  wiki logo  + + + */
     @media @screen_min-md {
         .logo {
             padding: 1rem 0 .3rem;
+            text-align: center;
 
             img {
-                height: 4.6rem;
+                height: 200px;
                 width: auto;
-                border-style: solid;
+                transition: transform 200ms ease-in-out;
-                border-color: transparent;
-                border-width: 2px 0;
             }
 
             a:hover,
             a:focus,
             a:active {
                 img {
-                    border-width: 0;
+                    transform: scale(1.05);
                 }
             }
         }
@@ -38,7 +33,13 @@
 
     @media @screen_max-md {
         .logo {
-            display: table-cell;
+            //display: table-cell;
+            text-align: center;
+            width: 100%;
+
+            img {
+                max-height: 200px;
+            }
 
             .mobile-only {
                 margin: .8rem 1rem .6rem 0;
@@ -46,7 +47,6 @@
         }
     }
 
-
     /* + + + + +  DESKTOP  -  wiki title + claim  + + + + + */
     .main-title.desktop-only {
         @media @screen_min-md {
@@ -76,7 +76,6 @@
         }
     }
 
-
     /* + + + + +  MOBILE  -  wiki title wrapper  + + + + + */
     .main-title:not([class*="desktop-only"]) {
         @media @screen_max-md {
@@ -89,10 +88,9 @@
         }
     }
 
-
     /* + + +  wiki title  + + + */
     p.title {
-        background-color: @ini_background_site;
+        background-color: var(--color-background);
         opacity: @header-font-opacity;
         color: @ini_text_webframe;
         line-height: @line-height-default;
@@ -109,7 +107,6 @@
         }
     }
 
-
     /* + + + + +  DESKTOP  -  wiki claim, logo, title wrapper  + + + + + */
     @media @screen_min-md {
         div.claim {
@@ -119,7 +116,6 @@
         }
     }
 
-
     /* + + +  wiki claim  + + + */
     p.claim {
         opacity: @header-font-opacity;
@@ -132,7 +128,6 @@
         }
     }
 
-
     /* + + +  mobile nav togglelink  + + + */
     .menu-togglelink {
         position: relative;
@@ -176,7 +171,6 @@
         }
     }
 
-
     /* + + + + +  with magic matcher  + + + + + */
     &.has-magicmatcher {
         .logo {
@@ -208,7 +202,6 @@
     }
 }
 
-
 /* + + + + +  layout option compact  + + + + + */
 .header-compact {
     #dokuwiki__header {
@@ -284,9 +277,6 @@
             .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

@@ -2,7 +2,6 @@
  * 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;
@@ -13,19 +12,21 @@
         form div.no {
             button {
                 margin-top: -.4rem;
-                padding-right: 0;
+                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: '';
-                float: right;
                 display: inline-block;
                 background: transparent url("svg.php?svg=pencil.svg&f=existing") center center no-repeat;
                 height: 1em;
@@ -35,20 +36,20 @@
                 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 {
-                //background-color: @ini_existing;
+                .fnActiveButton();
-                color: @ini_existing;
-                //border-color: @ini_existing;
-
-                &::after {
-                    background-color: @ini_existing;
-                    background-image: url("svg.php?svg=pencil.svg&f=background");
-                    border-color: @ini_existing;
-                }
             }
         }
     }

css/area_main-content.less

@@ -1,15 +1,12 @@
 /**
  * This file provides the design styles for the main-content.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__content.main-content {
     div[class^="level"] {
         p a.media {
             img {
-                border: 1px dotted @ini_background_site;
+                border: 1px dotted var(--color-background);
 
             }
             &:hover,
@@ -23,7 +20,6 @@
     }
 
     > div,
-    .section_highlight > div,
     div[class^="level"] {
         > ul,
         > ol {
@@ -43,16 +39,12 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
+// @media @screen_min-xlg {
-@media @screen_min-xlg {
+// }
-}
-
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */
-
+// @media @screen_max-xlg {
-@media @screen_max-xlg {
+// }
-}

css/area_main-sidebar-nav.less

@@ -1,11 +1,7 @@
 /**
  * This file provides the design styles the navigational elements in the sidebar
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- * @author Andreas Gohr <gohr@cosmocode.de>
  */
 
-
 #dokuwiki__aside {
     @icon-size: @font-size-big;
     @menu-margin: @icon-size + @margin-small * 2;
@@ -23,12 +19,16 @@
     }
 
     nav {
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+
         &.nav-main {
             margin-bottom: @nav-margin;
         }
 
         > p {
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
 
             &.noissue {
                 color: @ini_text_webframe;
@@ -45,7 +45,7 @@
         }
 
         li {
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
 
             > div {
                 color: @ini_text_webframe;
@@ -63,46 +63,63 @@
 
 
             /* + + + + +  active  + + + + + */
+
             span.curid {
                 font-weight: bold;
             }
         }
     }
 
-    a {
+    a, label {
         &:link,
         &:visited {
             opacity: .9;
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
         }
 
         * {
-            color: inherit;
+            color: var(--color-foreground);
         }
     }
 
-
     /* + + +  the wrapper around the toggle to reserve space  + + + */
+
     div.nav {
         min-height: @icon-size + @margin-small;
-        border: 1px solid transparent;
+        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 {
+        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: table;
+            display: flex;
+            align-items: center;
             width: 100%;
-            min-height: @icon-size + @margin-small;
             opacity: 1;
-            border: 1px solid transparent;
-            border-radius: @fix_border-radius;
-            color: @ini_nav_menu_color;
-            font-size: @font-size-head6;
             font-weight: normal;
-            margin: -1px 0 @very-small-spacing;
+            margin: 0 0 @very-small-spacing;
-            padding-bottom: .4rem;
+            padding: 0.4rem 0.1rem;
-            padding-top: .4rem;
+            text-decoration: none;
-            transition: @transition color, @transition background-color, @transition border-color;
 
             span {
                 display: inline-block;
@@ -110,71 +127,61 @@
                 color: inherit;
             }
 
-            &:hover,
-            &:focus,
-            &:active {
-                position: relative; // always show label, even with collapsed sidebar
-                width: 100%;
-                background-color: @ini_nav_menu_hover_bg;
-                border-color: @ini_nav_menu_hover_color;
-                color: @ini_nav_menu_hover_color;
-                text-decoration: none;
-
             span.ico {
-                    &:after {
+                display: flex;
-                        background-color: @ini_nav_menu_hover_color;
+                align-items: center;
+                justify-content: center;
+                i[data-icon] {
+                    font-size: 1.5rem;
+                }
             }
 
-                    strong {
-                        border-color: inherit;
-                    }
-
-                    svg {
-                        path {
-                            fill: @ini_nav_menu_hover_color;
-                        }
-                    }
-                }
-            }
 
             /* + + +  submenu entry is active  + + + */
-            &.is-active {
-                font-weight: bold;
-            }
-
-
             /* + + +  toggle: open  + + + */
-            &.is-open {
+
-                background-color: @ini_nav_menu_hover_color;
+            &.is-active, &.is-open {
-                border-color: @ini_nav_menu_hover_color;
+                background-color: var(--color-shade-2);
-                color: @ini_nav_menu_hover_bg;
+                border-color: var(--color-shade-4);
+                color: var(--color-foreground);
 
                 span.ico {
                     &:after {
-                        background-color: @ini_nav_menu_hover_bg;
+                        background-color: currentColor;
                     }
 
                     strong {
-                        border-color: @ini_nav_menu_hover_bg;
+                        border-color: currentColor;
                     }
 
                     svg {
                         path {
-                            fill: @ini_nav_menu_hover_bg;
+                            fill: currentColor;
+                        }
+                    }
                 }
             }
         }
 
         &:hover,
-                &:focus,
+        &:focus-within {
-                &:active {
+            position: relative; // always show label, even with collapsed sidebar
-                    background-color: @ini_nav_menu_hover_bg;
+            z-index: 100;
-                    border-color: @ini_nav_menu_hover_color;
+
-                    color: @ini_nav_menu_hover_color;
+            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: @ini_nav_menu_hover_color;
+                        background-color: currentColor;
                     }
 
                     strong {
@@ -183,12 +190,12 @@
 
                     svg {
                         path {
-                                fill: @ini_nav_menu_hover_color;
+                            fill: currentColor;
-                            }
                         }
                     }
                 }
             }
+
         }
 
         span.ico {
@@ -211,7 +218,7 @@
                 bottom: auto;
                 height: @border-height;
                 width: 1px;
-                background-color: @ini_nav_menu_color;
+                background-color: currentColor;
                 margin-top: -(@border-height / 2);
 
                 // wordbreak too late in IE 10
@@ -228,7 +235,7 @@
                 display: inline-block;
                 width: @icon-size * 0.98;
                 height: @icon-size * 0.98;
-                border: 2px solid fade(@ini_nav_menu_color, 80%);
+                border: 2px solid currentColor;
                 border-top-right-radius: 50%;
                 border-bottom-left-radius: 50%;
                 color: inherit;
@@ -246,7 +253,7 @@
                 height: @icon-size;
 
                 path {
-                    fill: @ini_nav_menu_color;
+                    fill: currentColor;
                     transition: @transition all;
                 }
             }
@@ -259,12 +266,12 @@
         }
     }
 
-
     /* + + + + +  the panel (hidden by default)  + + + + + */
+
     div.nav-panel {
         display: none;
         margin-top: .5rem;
-        margin-left: @menu-margin;
+        margin-left: @margin-small;
 
         ul {
             margin-bottom: 1rem;
@@ -274,13 +281,15 @@
                 margin-left: 16px;
             }
         }
-    }
-}
 
+        ul.toollist li {
+            margin-left: 0;
+        }
+    }
+}
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
 @media @screen_min-xlg {
     #dokuwiki__aside {
         nav {
@@ -301,24 +310,20 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1440px */
-
 @media @screen_max-xlg {
     #dokuwiki__aside {
         div.nav {
             a {
-                margin-left: 1px;
+                margin-left: 0;
             }
         }
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-md {
     #dokuwiki__aside {
         div.nav {
@@ -337,7 +342,7 @@
             min-width: 45%;
             max-width: 90%;
             height: auto;
-            background: @ini_background_site;
+            background: var(--color-background);
 
             > nav {
                 position: relative;
@@ -346,7 +351,8 @@
                     margin-top: 1.2rem;
                 }
 
-                a {
+                a,
+                label {
                     font-size: @font-size-small;
                 }
             }
@@ -366,10 +372,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 768px */
-
 @media @screen_max-xs {
     body.show-mobile-sidebar {
         .page-wrapper > .tools {
@@ -386,10 +390,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 480px */
-
 @media @screen_max-xxs {
     body.show-mobile-sidebar {
         #dokuwiki__aside {

css/area_main-sidebar-search.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the quick search.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .search.main-sidebar {
     @main-ico-dummy: @font-size-big + @margin-small*2; //FIXME copied from area_main-sidebar-nav
     @icon-size: @page-header_height;
@@ -16,9 +13,7 @@
 
     p.toggleSearch a,
     button[type="submit"] {
-        .fontello();
         .hide-text-show-before();
-        .icon-search();
 
         position: relative;
         width: @icon-size;
@@ -29,60 +24,65 @@
         border: solid 1px transparent;
         padding: 0;
         transition: @transition color, @transition background-color, @transition border-color;
+        display: flex;
+        align-items: center;
 
         &:hover,
         &:focus,
         &:active {
-            min-height: @icon-size;
+            .fnActiveButton();
-            background-color: @ini_button_color;
-            border: solid 1px @ini_button_background;
 
             &::after{
-                background-color: @ini_button_background;
+                background-color: var(--color-glow-primary);
             }
         }
 
         &::before {
-            width: 100%;
+            width: @icon-size;
-            color: inherit;
+            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;
-        margin: -2px 0 0; // reverse transparent border and box-sizing of a child
         padding: 0;
 
-        @media @screen_max-xxlg {
-            margin-top: -1px;
-        }
-
         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: @fix_border-radius;
+            border-radius: 0.5rem 0 0 0.5rem;
-            color: @ini_nav_menu_color;
+            border-right: none;
+            background-color: var(--color-shade-1);
+            color: var(--color-foreground);
             text-decoration: none;
             box-sizing: border-box;
 
             &::before {
-                position: absolute;
+                width: 100%;
-                top: 50%;
-                left: 0;
                 color: inherit;
                 text-align: center;
-                margin-top: -(@icon-search_font-size / 2);
             }
 
             &:hover,
             &:focus,
             &:active {
-                background-color: @ini_nav_menu_hover_bg;
+                border-right: none;
-                border-color: @ini_nav_menu_hover_color;
+                background-color: transparent;
-                color: @ini_nav_menu_hover_color;
+                border-color: var(--color-glow-primary);
+                color: var(--color-glow-primary);
             }
         }
     }
@@ -95,19 +95,7 @@
         height: auto;
         min-height: (@icon-size - .2);
         color: @quicksearch-button-color;
-
-        &:hover,
-        &:focus,
-        &:active {
-            top: 0;
-            bottom: 0;
-            min-height: @icon-size;
-            background-color: @ini_button_color;
-            border: solid 1px @ini_button_background;
-            color: @ini_button_background;
     }
-    }
-
 
     /* + + +  form  + + + */
     form {
@@ -132,7 +120,6 @@
 
         button[type="submit"] {
             border: solid 1px transparent;
-            border-right-color: @ini_border;
             margin-left: -(@icon-size);
 
             &::after {
@@ -142,23 +129,27 @@
                 bottom: 15%;
                 width: 1px;
                 left: -1px;
-                background-color: @ini_border;
+                background-color: var(--color-shade-4);
                 transition: @transition background-color;
             }
         }
 
         div.ajax_qsearch {
             box-shadow: none;
-            background-color: #FFF;
+            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 {
+            > strong {
-                color: @quicksearch-button-color;
+                color: var(--color-foreground);
-                padding: 0.25rem 0.5rem
+                padding: 0.25rem 0.5rem;
+                border-bottom: solid 0.1em var(--color-shade-4);
             }
 
             ul li {
-                color: @quicksearch-button-color;
+                color: var(--color-foreground);
 
                 a {
                     display: block;
@@ -166,17 +157,16 @@
                     overflow: hidden;
                     color: inherit;
                     text-overflow: ellipsis;
-                }
-            }
 
-            ul li {
+                    &:hover,
-                &:nth-child(odd) {
+                    &:focus,
-                    background-color: @suggestion-zebra;
+                    &:active {
+                        background-color: var(--color-shade-2);
+                    }
                 }
             }
         }
     }
-
 
     /* + + + + +  suggestionlist  + + + + + */
     #qsearch__out {
@@ -187,10 +177,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1024px */
-
 @media @screen_min-md {
 
     // wide page content
@@ -224,14 +212,17 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* 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;
         }

css/area_main-sidebar-tabs.less

@@ -1,3 +1,8 @@
+/**
+ * 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;
@@ -16,12 +21,13 @@
         border-top-left-radius: @fix_border-radius;
 
         &.active {
-            border-bottom: 1px solid @ini_background_site;
+            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

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for message block
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .msg-area {
     clear: both;
     padding-top: 1.6rem;
@@ -18,23 +15,65 @@
     }
 }
 
-/* short fix: SPR-891 - Icons für Notifications in Message Area werden gekachelt */
 div.success,
 div.error,
 div.info,
 div.notify {
-    background-repeat: no-repeat;
+    display: block;
-    background-position: 8px 50%;
+    border: none;
-    border: 1px solid #eeb;
+    border-left: solid 0.5rem var(--color-shade-4);
-    font-size: 90%;
+    border-radius: 0.5rem;
-    margin: 0 0 .5em;
+    padding: 1em;
-    padding: .4em;
+    background-image: none;
-    padding-left: 32px;
+    background-color: var(--color-shade-1);
-    overflow: hidden;
-    border-radius: @fix_border-radius;
 
-    * {
+    &::before {
-        color: inherit;
+        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 {

css/area_nav-breadcrumb.less

@@ -1,37 +1,26 @@
 /**
  * This file provides the design styles for the breadcrumb
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .breadcrumbs {
     position: relative;
     min-height: @page-header_height;
     box-sizing: border-box;
-    background-color: @ini_background;
+    background-color: var(--color-background);
-    border-bottom: 1px solid @ini_border_light;
+    border-bottom: 1px solid var(--color-shade-4);
     padding: 1rem 1.8rem .2rem;
 
-    @media @screen_max-md {
-        background-color: @ini_background_page_header;
-    }
-
     @media @screen_max-xs {
         padding-left: @margin-small;
         padding-right: .75rem;
     }
 
-    @media @screen_xs-lg {
-        background-color: @ini_background;
-    }
-
     > p {
         font-size: @font-size-small;
         margin: 0;
 
         @media @screen_max-xs{
-            width: 1px;
+            width: 0;
             position: relative;
             overflow: hidden;
             height: 1.6rem;
@@ -61,14 +50,16 @@
                 min-width: 1.9em;
                 width: auto;
                 box-sizing: border-box;
-                border: solid 1px transparent;
+                background-color: var(--color-shade-1);
-                border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+                border: solid .1em transparent;
+                border-radius: 0.5rem;
                 vertical-align: middle;
                 text-decoration: none;
                 margin-top: -.2em;
-                transition: @transition border-color;
+                transition: var(--transition-glow);
 
                 &:before {
+                    color: var(--color-foreground);
                     font-size: @font-size-default + (@font-scale-factor * 2);
                     margin-top: .17rem;
                 }
@@ -76,7 +67,14 @@
                 &:hover,
                 &:focus,
                 &:active {
-                    border-color: @ini_existing;
+                    &: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);
                 }
             }
         }

css/area_nav-direct.less

@@ -1,10 +1,7 @@
 /**
  * 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;
     margin-top: -1px;

css/area_nav-metabox.less

@@ -1,26 +1,28 @@
 /**
  * This file provides the design styles for the metatabbox
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- * @author Silke Pisulla <pisulla@cosmocode.de>
  */
 
-
 #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%;
-    margin-top: -(@page_padding-top); // reverse padding-top of .page container
+    padding-bottom: 0.5rem;
-    margin-right: -1px;
+    height: 4rem !important;
+
+    color: var(--color-foreground);
 
     // >= 1024
     @media @screen_min-md {
         height: @page-header_height;
-        border: 1px solid transparent;
+        border: 0 none;
     }
 
     // < 1024
@@ -29,13 +31,29 @@
         top: .2rem;
         right: auto;
         float: none;
-        display: block;
         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;
@@ -57,7 +75,7 @@
     }
 
 
-/* + + + + +  tab controlls  + + + + + */
+    /* + + + + +  tab controls  + + + + + */
     ul.meta-tabs {
         list-style: none;
         line-height: 160%;
@@ -103,26 +121,17 @@
                 position: relative;
                 display: block;
                 font-size: @font-size-small;
-                line-height: 1.42857143;
+                transition: var(--transition-glow);
-                transition: @transition background-color, @transition border-color, @transition color;
+                background-color: var(--color-shade-1);
-
+                border: solid 0.1em transparent;
-                @media @screen_min-md {
+                border-radius: 0.5rem;
-                    background-color: @ini_background_site;
+                color: var(--color-foreground);
-                    border: 1px solid @noopentasks-border;
+                padding: .25em;
-                    border-bottom-color: @ini_background_site;
+                margin-left: 0;
-                    border-radius: @ini_default_border_radius @ini_default_border_radius 0 0; // @ini_default_border_radius vs. @fix_border-radius
-                    color: @ini_nav_menu_color;
-                    margin-left: 4px;
-                    padding: .3em 1rem .1em;
-                }
 
                 @media @screen_max-md {
                     top: 0;
-                    border: 1px solid @ini_existing;
-                    color: @ini_existing;
                     margin-top: .2rem;
-                    margin-left: 0;
-                    padding: .2em .3rem;
                 }
 
                 * {
@@ -141,40 +150,20 @@
                 &:focus,
                 &:active {
                     text-decoration: none;
-
+                    background-color: transparent;
-                    @media @screen_min-md {
+                    border-color: var(--color-glow-secondary);
-                        background-color: @ini_background;
+                    color: var(--color-glow-secondary);
-                        border-color: @ini_existing;
+                    filter: var(--filter-glow-secondary);
-                        color: @ini_existing;
-                    }
-
-                    @media @screen_max-md {
-                        background-color: @ini_existing;
-                        border-color: @ini_background;
-                        color: @ini_background;
-                    }
                 }
             }
 
             &.active {
                 > a {
                     cursor: default;
-                    background-color: @ini_background;
-                    border-color: @ini_existing;
-                    border-bottom-color: @ini_background;
-                    color: @ini_existing;
-
-                    @media @screen_max-md {
-                        background-color: @ini_existing;
-                        border-bottom-color: @ini_existing;
-                        border-radius: 0;
-                        color: @ini_background;
                 }
             }
         }
     }
-    }
-
 
     /* + + + + +  toggle content  + + + + + */
     .meta-content {
@@ -191,24 +180,24 @@
             right: 0;
             display: none;
             width: 100%;
-            background-color: @ini_background;
+            background-color: var(--color-shade-1);
-            border: 1px solid @ini_existing;
+            border: solid .1em transparent;
+            border-radius: 0.5rem;
 
             @media @screen_min-xs {
                 min-width: 20em;
             }
 
             @media @screen_min-md {
-                border-radius: 0 0 @fix_border-radius @fix_border-radius; // @ini_default_border_radius vs. @fix_border-radius
+                margin-top: 0.5rem;
             }
 
             &.active {
                 display: block;
-                overflow: hidden;
             }
 
             a {
-                color: @ini_existing;
+                color: var(--color-foreground);
             }
 
             > div {
@@ -250,8 +239,10 @@
                 float: none;
                 margin: 0;
                 padding: .6rem .5rem .5rem .8rem;
-                background: transparent;
+                background-color: transparent;
-                border: 0 none;
+                color: var(--color-foreground);
+                border: solid .1em var(--color-shade-4);
+                border-radius: 0.5rem;
 
                 h3 {
                     display: none;
@@ -285,7 +276,7 @@
                             width: 4px;
                             height: 4px;
                             overflow: hidden;
-                            background-color: @ini_existing;
+                            background-color: var(--color-shade-4);
                         }
                     }
                 }
@@ -297,7 +288,6 @@
         }
     }
 
-
     /* + + + + +  tab issues  + + + + + */
     #spr__tab-issues {
         ul.mmissuelist {
@@ -337,7 +327,6 @@
         }
     }
 
-
     /* + + + + +  tab issues  + + + + + */
     /* see plugins/magic-matcher.less   */
     #spr__tab-issues {

css/area_nav-page-attributes.less

@@ -1,80 +1,54 @@
 /**
  * Page Attribute Icons in the breadcrumb bar
  */
-
-
-/* + + + + +  icons in breadcrumb area  + + + + + */
-
 .page-attributes {
     list-style: none;
     float: right;
-    display: inline-block;
+    margin: -.45em 0 0; // FIXME sourrounding CSS should be fixed so negative margin is not needed
-    max-width: 30%;
-    margin: -.45em 0 0;
     padding: 0;
-
+    display: flex;
-    @media @screen_max-xs {
+    gap: 0.5rem;
-        max-width: 90%;
-    }
 
     > li {
-        .btn-usertools-wrapper(); // uniform li
+        margin: 0;
-        .btn-usertools-num();
+        padding: 0;
-
+        border: 1px solid @wikiicons-border;
+        border-radius: @ini_default_border_radius;
         position: relative;
-        float: left;
+        display: flex;
-        display: block;
+        align-items: center;
-        width: auto;
+        justify-content: center;
-        min-height: @toggle-size;
-        text-align: center;
-        margin: 0 .25rem;
-
-        strong {
-            display: block;
-            min-height: 1.64rem;
-            border: 1px solid @wikiicons-border;
-            border-radius: @ini_default_border_radius;
-        }
-
-        a {
-            display: block;
-            width: auto;
-            min-height: 1.64rem;
-            background-color: @ini_nav_menu_hover_bg;
-            border: 1px solid @wikiicons-border;
-            border-radius: @ini_default_border_radius;
         transition: @transition background-color, @transition border-color, @transition color;
 
-            &:hover,
+        // override any plugin element styles
-            &:focus,
+        * {
-            &:active {
+            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;
-                color: @ini_nav_menu_hover_bg;
 
-                span {
+            svg path {
                 fill: @ini_nav_menu_hover_bg;
-                    color: @ini_nav_menu_hover_bg;
             }
         }
     }
-
-        .prefix {
-            .btn-prefix(.26rem);
-            .icon-clipboard();
-
-            display: block;
-            font-size: 1.2rem;
-            line-height: 1;
-        }
-
-        .num {
-            top: -.6em;
-            font-size: @font-size-very-small;
-        }
-
-        &:empty {
-          display: none;
-        }
-    }
 }

css/area_nav-pagetools.less

@@ -1,7 +1,5 @@
 /**
  * This file provides the design styles for the page specific tool bar.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
 /*
@@ -21,7 +19,6 @@
 .pagetools-item(img_backto, 12);
 */
 
-
 #dokuwiki__aside {
     @media @screen_max-md {
         display: none !important;
@@ -103,10 +100,11 @@ nav#dokuwiki__pagetools {
                 }
 
                 &:focus {
-                    box-shadow: @box-shadow;
+                    box-shadow: none;
                     background-image: none;
-                    background-color: @ini_background;
+                    color: var(--color-glow-primary);
-                    color: @ini_existing;
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
 
                     span {
                         position: relative;
@@ -116,7 +114,7 @@ nav#dokuwiki__pagetools {
                     }
 
                     svg {
-                        fill: @ini_existing;
+                        fill: var(--color-glow-primary);
                     }
                 }
 
@@ -134,14 +132,7 @@ nav#dokuwiki__pagetools {
                     vertical-align: middle;
                     border: solid 1px transparent;
                     margin: @page-tools_svg-space;
-
+                    fill: var(--color-foreground);
-                    @media @screen_min-md {
-                        fill: @ini_nav_menu_color;
-                    }
-
-                    @media @screen_max-md {
-                        fill: @ini_existing;
-                    }
                 }
 
                 &.top {
@@ -154,11 +145,12 @@ nav#dokuwiki__pagetools {
     &:hover {
         ul {
             box-shadow: @box-shadow; // @box-shadow-offset;
-            background-color: @ini_background;
+            background-color: var(--color-shade-1);
-            border-color: @wikiicons-border;
+            border-color: var(--color-shade-4);
+            border-radius: 0.5rem;
 
             li {
-                color: @ini_existing;
+                color: var(--color-foreground);
 
                 a {
                     box-shadow: none;
@@ -169,17 +161,21 @@ nav#dokuwiki__pagetools {
                     svg {
                         border: solid 1px transparent;
                         border-radius: @ini_default_border_radius;
-                        fill: @ini_existing;
+                        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: @ini_existing;
+                            background-color: transparent;
-                            border-color: @ini_existing;
+                            border: none;
-                            fill: @ini_background;
+                            fill: var(--color-glow-primary);
                         }
                     }
 

css/area_nav-usertools.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the direct / menu jump links.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__usertools.nav-usertools {
     @media @screen_min-md {
         right: 1.25rem;
@@ -26,7 +23,6 @@
         }
     }
 
-
     /* + + + + +  icon list  + + + + + */
     ul {
         float: right;
@@ -77,27 +73,17 @@
             }
 
             /* !!! &.user-task FIND in plugins/do_tasks.less !!! */
-
             &.user {
                 position: relative;
                 display: table-cell;
-                background-color: @ini_background_site;
+                background-color: var(--color-shade-1);
-                border: solid 1px @wikiicons-border;
+                border: solid 1px var(--color-shade-2);
                 border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-                color: @ini_text_webframe;
+                color: var(--color-foreground);
                 padding-right: .3rem;
 
-                @media @screen_min-md {
-                    padding-top: .35rem;
-                }
-
                 @media @screen_max-md {
                     min-height: @toggle-size;
-                    padding-top: .3rem;
-                }
-
-                @media @screen_max-sm {
-                    padding-top: .35rem;
                 }
 
                 @media @screen_max-xs {
@@ -107,14 +93,12 @@
                     overflow: hidden;
                     white-space: nowrap;
                     margin: -1px 0 0;
-                    padding-top: .4rem;
                 }
 
                 @media @screen_max-xxs {
                     left: -10px;
                     right: 0;
                     width: auto;
-                    padding-top: .35rem;
                 }
 
                 > a {
@@ -124,9 +108,9 @@
                     position: relative;
                     height: 1rem; // for IE11
                     overflow: visible;
-                    background: @ini_nav_menu_hover_bg; // for removing bg-image
+                    background: var(--color-shade-1); // for removing bg-image
                     border: 0 none;
-                    color: @ini_nav_menu_hover_color;
+                    color: var(--color-foreground);
                     text-indent: 0;
                     font-size: inherit;
                     margin-right: -.3rem;
@@ -163,7 +147,7 @@
                         right: -1px;
                         width: auto;
                         opacity: 0;
-                        border: solid 1px @ini_nav_menu_hover_color;
+                        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;
@@ -172,12 +156,15 @@
                     &:hover,
                     &:focus,
                     &:active {
-                        background-color: @ini_nav_menu_hover_color;
+                        background-color: transparent;
-                        color: @ini_nav_menu_hover_bg;
+                        color: var(--color-glow-secondary);
+                        filter: var(--filter-glow-secondary);
+                        transition: var(--transition-glow);
 
                         &::before {
                             opacity: 1;
-                            border-color: @ini_nav_menu_hover_color;
+                            filter: var(--filter-glow-secondary);
+                            border-color: var(--color-glow-secondary);
                         }
 
                         bdi,
@@ -202,58 +189,56 @@
 
                     &::before {
                         position: absolute;
+                        top: 2px;
                         left: -2px;
-                        font-size: 1.4rem;
+                        font-size: @font-size-default + (@font-scale-factor * 4);
                         margin: 0;
-
-                        @media @screen_min-xxlg {
-                            top: -.25rem;
-                        }
-
-                        @media @screen_max-xxlg {
-                            top: -.2rem;
-                        }
-
-                        @media @screen_max-xs {
-                            top: -.25rem;
-
-                        }
                     }
                 }
             } // user
-
         } // li
 
-
         /* + + +  icons  + + + */
         .menuitem, button {
             padding: 2px 0 0 2px;
             min-height: @toggle-size; // overrides button[type="submit"] styles
-            border: solid 1px @wikiicons-border; // 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 svg, &:focus svg {
+            &: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: @ini_nav_menu_hover_bg;
+                fill: var(--color-glow-secondary);
             }
 
             svg {
-                fill: @ini_nav_menu_hover_color;
+                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;
@@ -298,7 +283,6 @@
     } // ul
 } // nav-usertools
 
-
 /* + + + + +  layout option compact  + + + + + */
 .header-compact {
     #dokuwiki__usertools.nav-usertools {
@@ -311,7 +295,7 @@
                 overflow: hidden;
 
                 li.user {
-                    color: @ini_background_site;
+                    color: var(--color-background);
 
                     bdi {
                         position: absolute;
@@ -321,8 +305,8 @@
 
                         &:before {
                             transition: @transition background-color;
-                            background-color: @ini_background_site;
+                            background-color: var(--color-shade-1);
-                            color: @ini_nav_menu_color;
+                            color: var(--color-foreground);
                             text-indent: 0;
                         }
                     }
@@ -333,18 +317,18 @@
 
                         bdi {
                             &:before {
-                                background-color: @ini_nav_menu_hover_bg;
+                                background-color: var(--color-shade-1);
-                                color: @ini_nav_menu_hover_color;
+                                color: var(--color-foreground);
                             }
                         }
 
                         &:hover {
-                            color: @ini_nav_menu_hover_color;
+                            color: var(--color-glow-secondary);
 
                             bdi {
                                 &:before {
-                                    background-color: @ini_nav_menu_hover_color;
+                                    background-color: transparent;
-                                    color: @ini_nav_menu_hover_bg;
+                                    color: var(--color-glow-secondary);
                                 }
                             }
                         }
@@ -366,4 +350,3 @@
         }
     }
 }
-

css/area_recent.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for page revisions
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .dokuwiki {
 
     /* + + + + +  list of changes  + + + + + */
@@ -14,11 +11,13 @@
                 color: @color-editBox;
 
                 &.positive {
-                    background-color: #cfc;
+                    background-color: var(--color-success);
+                    color: var(--color-background);
                 }
 
                 &.negative {
-                    background-color: #fdd;
+                    background-color: var(--color-error);
+                    color: var(--color-foreground);
                 }
             }
         }
@@ -59,7 +58,6 @@
         }
     }
 
-
     /* + + + + +  view of differents  + + + + + */
     a.difflink {
         color: @ini_existing;
@@ -71,11 +69,10 @@
 
     .diffnav {
         a {
-            background-color: @ini_background_site;
+            background-color: var(--color-background);
-            border: solid 1px @ini_background_site;
+            border: solid 1px var(--color-background);
-            border-radius: @ini_default_border_radius;
+            border-radius: 0.5rem;
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
-            transition: @transition background-color, @transition color, @transition border-color;
 
             &::before {
                 background-color: inherit;
@@ -86,9 +83,11 @@
             &:hover,
             &:focus,
             &:active {
-                background-color: @ini_nav_menu_color;
+                background-color: transparent;
-                border: solid 1px @ini_nav_menu_color;
+                border-color: var(--color-glow-primary);
-                color: @ini_background_site;
+                color: var(--color-glow-primary);
+                transition: var(--transition-glow);
+                filter: var(--filter-glow-primary);
 
                 &::before {
                     background-color: inherit;
@@ -99,10 +98,8 @@
     }
 
     table.diff {
-        background-color: #fff;
+        background-color: var(--color-background);
-        border: solid 1px #fff;
+        border: none;
-        border-top-width: 10px;
-        border-bottom-width: 10px;
 
         &.diff_inline {
             border-top-width: 0;
@@ -114,8 +111,8 @@
         }
 
         th {
-            background-color: @ini_background;
+            background-color: var(--color-background);
-            color: @ini_text;
+            color: var(--color-foreground);
             padding-top: 10px;
             padding-bottom: 10px;
 
@@ -125,30 +122,33 @@
         }
 
         td {
+            background-color: transparent;
+            color: var(--color-text-1);
+
             &.diff-blockheader {
-                background-color: #cfc;
+                background-color: transparent;
-                color: @color-editBox;
+                color: var(--color-foreground);
             }
 
             &.diff-context {
-                background-color: #eee;
+                background-color: transparent;
-                color: @color-editBox;
+                color: var(--color-text-1);
             }
         }
 
         .diff-addedline {
-            background-color: #cfc;
+            background-color: var(--color-success-highlight);
-            color: @color-editBox;
+            color: var(--color-foreground);
 
             strong {
                 background-color: transparent;
-                color: #f00;
+                color: var(--color-success) !important;
             }
         }
 
         .diff-deletedline {
-            background-color: #fdd;
+            background-color: var(--color-error-highlight);
-            color: @color-editBox;
+            color: var(--color-foreground);
 
             * {
                 color: inherit;
@@ -156,8 +156,12 @@
 
             strong {
                 background-color: transparent;
-                color: #f00;
+                color: var(--color-error) !important;
-            }
+            }
+        }
+
+        .diff-lineheader {
+            background-color: transparent;
         }
     }
 }

css/area_search.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the search results
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* search hit in normal text */
 .dokuwiki .search_hit {
     background-color: @ini_highlight;

css/area_tabs.less

@@ -2,22 +2,28 @@
  * This file provides styles for tab boxes
  */
 
-
 /* + + + + +  tabs  + + + + + */
-
 #dokuwiki__content {
     ul.tabs {
         li:not([class~="active"]) {
             strong,
             a {
-                color: @ini_text_neu;
                 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: @ini_text;
+                color: var(--color-accent-3);
             }
         }
     }

css/area_togglelink.less

@@ -1,62 +1,51 @@
 /**
  * This file provides the design styles for the sidebar (navmain).
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .togglelink {
     &.page_main-content {
         position: absolute;
         top: 0;
         bottom: -1px;
         width: 2rem;
-        left: -(@margin-default);
+        left: -(@margin-default + 0.25rem);
 
         @media @screen_max-md {
             display: none;
         }
 
         a {
-            .fontello-double();
+            position: absolute;
-            .icon-right-bold();
+            inset: 0;
-            .icon-left-bold();
-
-            .display-flex();
-            .flex-direction();
-            .justify-content();
 
             width: @margin-default;
             height: 100%;
-            background-color: @ini_button_background;
+            background-color: transparent;
-            border: solid 1px @ini_button_background;
+            border: solid 1px var(--color-shade-4);
-            border-radius: @ini_default_border_radius 0 0 @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
+            border-right-style: none;
-            color: @ini_button_color;
+            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,
-            &::after {
-                width: 100%;
-                opacity: .6;
-                font-size: 1rem;
-                line-height: 1;
-                text-align: center;
-                margin: 0;
-                transition: @transition opacity;
-            }
-
             &::before {
-                opacity: 1;
+                content: '';
-                font-size: 1.25rem;
+                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 {
-                background-color: @ini_button_color;
+                border-color: var(--color-glow-primary);
-                border-color: @ini_button_background;
+                color: var(--color-glow-primary);
-                color: @ini_button_background;
                 text-decoration: none;
 
                 * {
@@ -64,43 +53,24 @@
                     text-decoration: none;
                 }
 
-                &::after {
+                filter: var(--filter-glow-primary);
-                    opacity: 0;
+                transition: var(--transition-glow);
-                }
+
             }
         }
 
         /* + + +  toggle out  + + + */
+
         .wide-content & {
             left: 0;
 
             a {
-                background-color: @ini_button_background;
+                border-radius: 0 0.5rem 0.5rem 0;
-                border-color: @ini_button_background;
+                border-style: solid;
-                border-radius: 0 @ini_default_border_radius @ini_default_border_radius 0; // @ini_default_border_radius vs. @fix_border-radius
+                border-left-style: none;
 
                 &::before {
-                    opacity: .6;
+                    mask-image: url('img/arrow_right.svg');
-                    font-size: 1rem;
-                }
-
-                &::after {
-                    opacity: 1;
-                    font-size: 1.25rem;
-                }
-
-                &:hover,
-                &:focus,
-                &:active {
-                    background-color: @ini_button_color;
-
-                    &::before {
-                        opacity: 0;
-                    }
-
-                    &::after {
-                        opacity: 1;
-                    }
                 }
             }
         }

css/base.less

@@ -1,18 +1,14 @@
 /**
- * This file provides the basic vars and reset styles.
+ * This file provides the basic/reset styles.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+@font_family_screen:       "Athiti", ui-sans, sans-serif;
+@font_family_print:        "Athiti", ui-sans, sans-serif;
 
-@font_family_screen:       arial, sans-serif;
+@nav_direct_background:     var(--color-background);
-@font_family_print:        "Times New Roman", serif;
-
-@nav_direct_background:    @ini_background;
 @nav_direct_color:         @ini_existing;
 
 @background_darker:        rgba(230,230,230, .2);
@@ -39,10 +35,8 @@
 @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
-@fix_border-radius:        3px;           // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
 
 @toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
 
@@ -57,35 +51,29 @@
 
 @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
+@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;
@@ -108,10 +96,9 @@
 @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);
 
@@ -133,10 +120,9 @@
 @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)";
 
@@ -164,10 +150,9 @@
 @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%;
@@ -184,10 +169,104 @@
 @grid-columns:      12;
 
 
+
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 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;
+}
+
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 html,
 body {
     .reset();
@@ -259,10 +338,9 @@ nav > ul {
     }
 }
 
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* css behaviour */
-
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 .sr-out {
     .sr-out();
 }
@@ -304,12 +382,303 @@ nav > ul {
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 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);
+}
+
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* screen only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 
 @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%;
@@ -338,9 +707,28 @@ nav > ul {
         display: none;
     }
 
-    a:active,
+    a {
-    a:hover {
+        color: var(--color-accent-1);
-        outline: 0;
+        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] {
@@ -368,7 +756,7 @@ nav > ul {
     kbd,
     pre,
     samp {
-        font-family: monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         font-size: 1em;
     }
 
@@ -437,15 +825,13 @@ nav > ul {
 
     html, body {
         font-family: @font_family_screen;
-        color: @ini_text;
+        color: var(--color-foreground);
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print only */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 @media print {
     body {
         font-size: 12pt;

css/base_design.less

@@ -1,18 +1,14 @@
 /**
  * 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_site;
+    background-color: var(--color-background);
 }
 
-
 /* highlight selected tool */
-
 .mode_admin a.action.admin,
 .mode_login a.action.login,
 .mode_register a.action.register,
@@ -27,10 +23,23 @@ html, body {
 }
 
 .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: @ini_text;
+        color: var(--color-foreground);
+
+        .li {
+            color: var(--color-foreground);
+        }
     }
 
     .pageId {
@@ -45,7 +54,7 @@ html, body {
             font-size: @font-size-small;
             border: solid @ini_background_alt;
             border-width: 1px 1px 0;
-            background-color: @ini_background_site;
+            background-color: var(--color-background);
             color: @ini_text_alt;
             padding: .1em .35em;
             border-top-left-radius: 2px;
@@ -59,7 +68,7 @@ html, body {
         clear: both;
         overflow: hidden;
         word-wrap: break-word;
-        background: @ini_background;
+        background: var(--color-background);
         color: inherit;
         padding: @page_padding-top @margin-default @margin-default;
 
@@ -88,6 +97,7 @@ html, body {
     }
 
     /* license note under edit window */
+
     div.license {
         font-size: @font-size-small;
         line-height: @line-height-default;
@@ -157,64 +167,24 @@ h2 {
     font-size: @font-size-head2;
     margin: 0 0 @font-size-head2;
     padding-top: (@font-size-head2 / 2);
-
-    .secedit + &,
-    div[class^="level"] + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head2 / 2);
-    }
 }
 
 h3 {
     font-size: @font-size-head3;
     margin: 0 0 @font-size-head3;
     padding-top: (@font-size-head3 / 2);
-
-    .secedit + &,
-    div[class^="level"] + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head3 / 2);
-    }
 }
 
 h4 {
     font-size: @font-size-head4;
     margin: 0 0 @font-size-head4;
     padding-top: (@font-size-head4 / 2);
-
-    .secedit + &,
-    div[class^="level"] + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head4 / 2);
-    }
 }
 
 h5 {
     font-size: @font-size-head5;
     margin: 0 0 @font-size-head5;
     padding-top: (@font-size-head5 / 2);
-
-    .secedit + &,
-    div[class^="level"] + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head5 / 2);
-    }
 }
 
 h6 {
@@ -222,16 +192,6 @@ h6 {
     font-weight: @font-weight-bold;
     margin: 0 0 @font-size-head6;
     padding-top: (@font-size-head6 / 2);
-
-    .secedit + &,
-    div[class^="level"] + &,
-    .section_highlight &:first-child {
-        padding-top: 0;
-    }
-
-    .section_highlight + & {
-        padding-top: (@font-size-head6 / 2);
-    }
 }
 
 p {
@@ -346,9 +306,7 @@ small,
     }
 }
 
-
+/* + + +  lists   + + + */
-/*____________ lists ____________*/
-
 ul,
 ol {
     font-size: @font-size-default;
@@ -426,22 +384,15 @@ ol ol ol ol ol {
     list-style-type: lower-roman;
 }
 
-
+/* + + +  tables   + + + */
-/*____________ tables ____________*/
-
 .dokuwiki {
     table.inline tr:hover {
         th {
-            background-color: fade(@ini_background_alt, 50%);
+            background-color: var(--color-shade-3);
         }
 
         td {
-            background-color: fade(@ini_background_alt, 80%);
+            background-color: var(--color-shade-2);
-            color: @ini_text_alt;
-
-            *:not(button,a) {
-                color: @ini_text_alt;
-            }
         }
     }
 }
@@ -450,7 +401,7 @@ table {
     border-collapse: collapse;
     empty-cells: show;
     border-spacing: 0;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--color-shade-4);
     font-size: @font-size-default;
     line-height: 140%;
 }
@@ -469,13 +420,13 @@ td {
     padding: .3em .5em;
     margin: 0;
     vertical-align: top;
-    border: 1px solid @ini_border;
+    border: 1px solid var(--color-shade-4);
 }
 
 th {
     font-weight: bold;
-    background-color: @ini_background_alt;
+    background-color: var(--color-shade-1);
-    color: @ini_text_alt;
+    color: var(--color-foreground);
     text-align: left;
 
     a {
@@ -487,22 +438,6 @@ th {
     text-align: right;
 }
 
-a {
-    outline: none;
-
-    &:link,
-    &:visited {
-        text-decoration: none;
-        color: @ini_link; // links to non wikipages (external links)
-    }
-
-    &:hover,
-    &:focus,
-    &:active {
-        text-decoration: underline;
-    }
-}
-
 img {
     display: inline-block;
     border-width: 0;
@@ -528,7 +463,7 @@ button img {
 
 hr {
     border-top: solid @ini_border;
-    border-bottom: solid @ini_background_site;
+    border-bottom: solid var(--color-background);
     border-width: 1px 0;
     height: 0;
     text-align: center;
@@ -556,14 +491,13 @@ pre,
 code,
 samp,
 kbd {
-    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Bitstream Vera Sans Mono", "Nimbus Mono L", Monaco, "Courier New", monospace;
+    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: @code-background;
+    background-color: var(--color-shade-1);
-    color: @noopentasks-color;
+    color: var(--color-foreground);
-    box-shadow: inset 0 0 .3em @noopentasks-border;
     border-radius: @fix_border-radius;
     padding-left: @small-spacing;
     padding-right: @small-spacing;
@@ -576,26 +510,11 @@ kbd {
     span {
         color: inherit;
     }
-
-    a {
-        &:link,
-        &:visited {
-            color: inherit;
-            text-decoration: underline;
-        }
-
-        &:hover,
-        &:focus,
-        &:active {
-            text-decoration: none;
-        }
-    }
 }
 
 pre {
     overflow: auto;
     word-wrap: normal;
-    border: 1px solid @noopentasks-border;
     font-size: @font-size-default;
     line-height: 140%;
     padding: .7em 1em;

css/base_fontello-icons.less

@@ -1,10 +1,8 @@
 /**
  * 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)
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* icon font */
 .setIconFontFace('fontello','fontello');
 
@@ -12,12 +10,7 @@
     .fontello();
 }
 
-
 /* + + + + +  fontello codes  + + + + + */
-/**
- * If in the Fontello-Packet an icon is added, the code should be supplemented here:
-*/
-
 .icon-emo-happy          { &::before { content: '\e804'; } } /* '' */
 .icon-emo-wink           { &::before { content: '\e805'; } } /* '' */
 .icon-emo-unhappy        { &::before { content: '\e806'; } } /* '' */
@@ -94,7 +87,6 @@
 
 
 /* + + + + +  additional "after" for nav-pagetools  + + + + + */
-
 .icon-pencil {
     &::before,
     &::after { content: '\e840'; }

css/base_mixins.less

@@ -1,14 +1,10 @@
 /**
  * This file provides less mixins for all other style modules
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Fonts */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .setLocalFontFace(@fontFamily,@fontWeight,@localFontName,@localFontNameVar,@filename) {
     @font-face {
         font-family: @fontFamily;
@@ -102,11 +98,9 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .sr-out() {
     display: block;
     width: 1px;
@@ -140,19 +134,20 @@
     }
 }
 
-
 /* + + + + +  small icon-buttons (breadcrumb, page-header)  + + + + + */
 .btn-hover {
-    background-color: @ini_nav_menu_hover_bg;
+    background-color: var(--color-shade-1);
-    color: @ini_nav_menu_hover_color;
+    border-color: var(--color-shade-2);
-    transition: @transition color, @transition background-color, @transition border-color;
+    color: var(--color-foreground);
+    transition: var(--transition-glow);
 
     &:hover,
     &:active,
     &:focus {
-        background-color: @ini_nav_menu_hover_color;
+        background-color: transparent;
-        border-color: @ini_nav_menu_hover_color;
+        border-color: var(--color-glow-secondary);
-        color: @ini_nav_menu_hover_bg;
+        color: var(--color-glow-secondary);
+        filter: var(--filter-glow-secondary);
 
         .prefix {
             color: inherit;
@@ -288,10 +283,8 @@
     -ms-flex-wrap: wrap;
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* positioning */
-
 .center-middle() {
     position: absolute;
     top: 50%;
@@ -301,11 +294,9 @@
     -webkit-transform: translateX(-50%) translateY(-50%);
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .reset() {
     background: transparent;
     border: none 0; outline: 0; vertical-align: baseline;
@@ -329,7 +320,6 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Col Grid */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 .make-grid(@class) {
     .float-grid-columns(@class);
     .grid-columns(1, @class, width);

css/base_structure.less

@@ -1,14 +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 {
@@ -17,6 +13,9 @@
     }
 }
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* font sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media @screen_min-xxs {
     html {
         font-size: 100%; //16px
@@ -62,7 +61,9 @@
     }
 }
 
-/* + + + + +  z-indices  + + + + + */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* z-indices */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 @media screen {
     .nav-direct p {
         z-index: 1000; // keyboard-navigation overlays always on top
@@ -124,8 +125,12 @@
             z-index: 200; // mobile sidebar above all except nav-direct
     }
 }
-/* + + + + +  end of z-indices  + + + + + */
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* screen sizing */
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+
+// >= 1024
 @media @screen_min-md {
 
     .content .row > .col-xs-12 {
@@ -135,8 +140,8 @@
     .top-header {
         position: absolute;
         top: 0;
-        left: 0;
+        right: 0;
-        width: 100%;
+        width: 50%;
     }
 
     .header,
@@ -171,7 +176,7 @@
         .header {
             .row > .col-xs-12 {
                 height: auto;
-                min-height: fit-content;
+                min-height: auto;
             }
         }
     }
@@ -226,7 +231,7 @@
     }
 }
 
-
+// > 1024
 @media @screen_md-lg {
     .wide-content.showSidebar {
         .content {
@@ -237,7 +242,6 @@
     }
 }
 
-
 @media @screen_max-md {
     .container {
         margin: 0 1.25rem;

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

@@ -2,9 +2,7 @@
  * This file provides styles for bureaucracy plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 .dokuwiki form.bureaucracy__plugin {
     fieldset {
         width: 100%;
@@ -95,10 +93,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
-
 @media @screen_min-xlg {
     .dokuwiki form.bureaucracy__plugin {
         p {
@@ -107,10 +103,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1439px */
-
 @media @screen_max-xlg {
     .dokuwiki form.bureaucracy__plugin {
         p,
@@ -120,4 +114,3 @@
         }
     }
 }
-

css/plugins/configmanager.less

@@ -2,18 +2,17 @@
  * 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: @background_darker;
+            background-color: var(--color-background);
             margin-left: 0;
             margin-right: 0;
+            color: var(--color-foreground)
         }
 
         .selectiondefault {
@@ -22,11 +21,24 @@
         }
 
         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;
@@ -38,13 +50,17 @@
             .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: @ini_background;
+                background-color: var(--color-background);
                 color: inherit;
                 font-size: (@font-size-small - .06);
                 font-weight: bold;
@@ -62,10 +78,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1024px */
-
 @media @screen_max-md {
     #dokuwiki__content {
         #config__manager {
@@ -100,10 +114,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 768px */
-
 @media @screen_max-sm {
     #dokuwiki__content {
         #config__manager {

css/plugins/data.less

@@ -3,9 +3,7 @@
  * after importing struct data this can be deleted
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content {
     .dataplugin_entry {
         dl {
@@ -25,7 +23,7 @@
             button {
                 min-height: 1rem;
                 height: 1.8em;
-                background-color: @ini_background;
+                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;
@@ -42,7 +40,7 @@
                 &:active {
                     background-color: @ini_existing;
                     border-color: @ini_existing;
-                    color: @ini_background;
+                    color: var(--color-background);
                 }
             }
         }

css/plugins/do_tasks.less

@@ -2,29 +2,6 @@
  * This file provides styles for do-task plugin
  */
 
-/* + + + + +  global  + + + + + */
-
-ul.page-attributes {
-    .plugin_do_pagetasks {
-        position: relative;
-        border-radius: @ini_default_border_radius; // @ini_default_border_radius vs. @fix_border-radius
-
-        strong {
-            overflow: hidden;
-            background-color: @ini_background_site;
-            border-color: @noopentasks-border;
-            color: @ini_text_webframe;
-        }
-
-        &.do_none {
-            .num {
-                background-color: @noopentasks-border; // fix
-                color: @noopentasks-color; // fix
-            }
-        }
-    }
-}
-
 
 /* + + + + +  usertool icon in header  + + + + + */
 #dokuwiki__usertools.nav-usertools {
@@ -76,7 +53,7 @@ ul.page-attributes {
 
                 .noopentasks {
                     span {
-                        background-color: @ini_background_site;
+                        background-color: var(--color-background);
                         border-color: @noopentasks-border;
                         color: @ini_text_webframe;
                     }
@@ -109,7 +86,7 @@ ul.page-attributes {
     }
 
     table.inline {
-        background-color: #FFF;
+        background-color: var(--color-background);
         margin-top: .5rem;
 
         @media @screen_max-sm {

css/plugins/edit.less

@@ -3,21 +3,16 @@
  * and "section edit button" and "editbutton_table edit button".
  */
 
-
 /* + + + + +  edit view  + + + + + */
-
 #dokuwiki__content {
     div.section_highlight {
         clear: right;
-        background: repeating-linear-gradient(
+        background: repeating-linear-gradient(-45deg,
-            -45deg,
+        var(--color-shade-1),
-            @highlight-odd-ini_text,
+        var(--color-shade-1) 10px,
-            @highlight-odd-ini_text 10px,
+        var(--color-background) 10px,
-            @highlight-even-ini_text 10px,
+        var(--color-background) 20px,);
-            @highlight-even-ini_text 20px,
+        border-color: var(--color-background);
-        );
-        border-color: @ini_background_page_header;
-        padding-top: 0 !important; // heredity
     }
 
     // "section edit button" and "editbutton_table edit button"
@@ -26,11 +21,23 @@
         font-size: 100%;
         margin-top: .5rem;
         margin-bottom: .5rem;
+
+        &::after {
+
+        }
+
+        &:hover {
+            &::after {
+                border: none;
+            }
+        }
     }
 
     div.editBox {
-        background-color: #FFF;
+        background-color: var(--color-background);
-        border: solid 2px #FFF;
+        border: solid 2px var(--color-shade-4);
+        border-radius: @fix_border-radius;
+        padding: 0.5rem;
 
         .editButtons {
             display: inline-block;
@@ -43,10 +50,12 @@
                     white-space: normal;
                     display: block;
                     width: 100%;
+
                     span {
                         display: inline-block;
                         padding-bottom: .4rem;
                     }
+
                     input#edit__summary {
                         max-width: 100%;
                         box-sizing: border-box;
@@ -54,12 +63,9 @@
                 }
             }
         }
-
-
     }
 }
 
-
 .mode_edit {
     .content {
         .msg-area {

css/plugins/edittable.less

@@ -2,10 +2,31 @@
  * 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;
@@ -15,22 +36,24 @@
             button,
             input.button {
                 min-height: 1rem;
-                background-color: @ini_background;
+                background-color: var(--color-shade-1);
-                border-top: solid 1px @ini_button_background;
+                border: solid 0.1em var(--color-shade-2);
-                border-color: @ini_border;
+                border-radius: 0.5rem;
-                border-radius: 0 0 @fix_border-radius @fix_border-radius;
+                color: var(--color-foreground);
-                color: @ini_existing;
                 font-size: @font-size-small;
-                margin-top: -1px; // for best position of edit-tab beneath table
+                margin: 0;
-                padding-right: .3em;
+                margin-top: 0.5rem;
-                transition: @transition background-color, @transition border-color, @transition color;
+                padding: 0.2rem 0.4rem;
+                height: auto;
 
                 &:hover,
                 &:focus,
                 &:active {
-                    background-color: @ini_existing;
+                    background-color: transparent;
-                    border-color: @ini_existing;
+                    color: var(--color-glow-primary);
-                    color: @ini_background;
+                    border-color: var(--color-glow-primary);
+                    transition: var(--transition-glow);
+                    filter: var(--filter-glow-primary);
                 }
             }
         }

css/plugins/extension__manager.less

@@ -2,10 +2,9 @@
  * This file provides styles for extension manager
  */
 
-
 /* + + + + +  global  + + + + + */
-
+.dokuwiki {
-.dokuwiki #extension__manager {
+    #extension__manager {
         .actions {
             font-size: 0;
 
@@ -15,6 +14,54 @@
                 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

@@ -2,9 +2,7 @@
  * 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;

css/plugins/highlight_parent.less

@@ -2,9 +2,7 @@
  * This file provides styles for highlight plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #plugin__highlightparent {
     clear: none;
     display: block;

css/plugins/include.less

@@ -1,33 +0,0 @@
-/**
- * This file provides the main design styles
- * across all template elements (typo, colors etc.)
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- */
-
-#dokuwiki__content .plugin_include_content {
-    > h1,
-    > .section_highlight h1 {
-        padding-top: @font-size-head1;
-    }
-    > h2,
-    > .section_highlight h2 {
-        padding-top: @font-size-head2;
-    }
-    > h3,
-    > .section_highlight h3 {
-        padding-top: @font-size-head3;
-    }
-    > h4,
-    > .section_highlight h4 {
-        padding-top: @font-size-head4;
-    }
-    > h5,
-    > .section_highlight h5 {
-        padding-top: @font-size-head5;
-    }
-    > h6,
-    > .section_highlight h6 {
-        padding-top: @font-size-head6;
-    }
-}

css/plugins/magic-matcher.less

@@ -1,14 +1,9 @@
 /**
  * This file provides styles for magic matcher plugin
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
- * @author Silke Pisulla <pisulla@cosmocode.de>
  */
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + */
 /* magic matcher bar with form on top of page */
-
 #spr__magic-matcher {
     position: fixed;
     top: 0;
@@ -55,7 +50,7 @@
         min-height: @height-context-bar;
         box-sizing: border-box;
         box-shadow: @box-shadow;
-        background-color: @ini_background;
+        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;
@@ -88,7 +83,6 @@
     }
 }
 
-
 /* + + + + +  in content  + + + + + */
 a.jiralink {
     font-size: @font-size-default;
@@ -108,7 +102,6 @@ a.jiralink {
     }
 }
 
-
 /* + + + + +  tooltip in metabox  + + + + + */
 .dokuwiki {
     .serverToolTip {
@@ -190,10 +183,8 @@ a.jiralink {
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1023px */
-
 @media @screen_max-lg {
     #spr__magic-matcher {
         #magicmatcher__context {
@@ -214,11 +205,9 @@ a.jiralink {
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* print */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-
 @media print {
     #spr__magic-matcher {
         display: none;

css/plugins/mediamanager.less

@@ -2,14 +2,20 @@
  * This file provides styles for mediamanager
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #mediamanager__page {
-    .namespaces h2 {
+    .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 {
@@ -19,12 +25,42 @@
     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%;

css/plugins/move.less

@@ -2,9 +2,7 @@
  * This file provides styles for move plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__site > .plugin_move_dialog {
     font-size: @font-size-default;
 

css/plugins/popupviewer.less

@@ -2,12 +2,9 @@
  * This file provides styles for popupviewer plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #popupviewer {
     > .controls > .content {
-
         padding: 1.5rem 1rem 1rem;
 
         td,
@@ -19,6 +16,7 @@
                 line-height: @line-height-default;
             }
         }
+
         .li,
         li {
             font-size: @font-size-default;

css/plugins/qc.less

@@ -2,33 +2,6 @@
  * Styles for the QC plugin
  */
 
-
-/* + + + + +  icon in breadcrumb  + + + + + */
-
-.page-attributes .plugin_qc {
-    .qc_icon {
-        margin: 0;
-
-        svg {
-            margin-top: .1em;
-            width: 1.6em;
-            height: 1.6em;
-            font-size: (@font-size-small - .06);
-        }
-    }
-
-    a {
-        &:hover,
-        &:focus,
-        &:active {
-            svg path {
-                fill: @ini_nav_menu_hover_bg;
-            }
-        }
-    }
-}
-
-
 /* + + + + +  slideout output  + + + + + */
 .qc-output {
     position: relative;
@@ -71,13 +44,18 @@
             padding-top: 0;
         }
     }
+
     h2 {
         font-size: 1.3rem;
     }
+
     h3 {
          font-size: 1.1rem;
     }
-    h4, h5, h6 {
+
+    h4,
+    h5,
+    h6 {
         font-size: 1rem;
     }
 
@@ -110,7 +88,6 @@
     }
 }
 
-
 /* + + + + +  admin settings  + + + + + */
 .do-admin #dokuwiki__content {
     #plugin__qc_admin {
@@ -120,7 +97,6 @@
                 padding-left: .2em;
                 text-align: left;
                 display: inline-block;
-
             }
         }
     }

css/plugins/quicksubscribe.less

@@ -1,24 +0,0 @@
-/**
- * This file provides styles for the quicksubscribe plugin
- */
-
-.page-attributes {
-    li.plugin_quicksubscribe {
-        a.plugin_qsub_subscribe {
-            svg {
-                width: 1.6em;
-                height: 1.6em;
-                font-size: 0.82rem;
-                fill: @ini_nav_menu_hover_color;
-            }
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
-            svg {
-                fill: @ini_nav_menu_hover_bg;
-            }
-        }
-    }
-}

css/plugins/sitemapnavi.less

@@ -1,3 +1,7 @@
+/**
+ * This file provides styles for the sitemapnavi plugin
+ */
+
 #plugin__sitemapnavi {
     padding-bottom: @nav-margin;
     margin-bottom: @nav-margin;
@@ -9,6 +13,10 @@
 
     li {
         line-height: @line-height-bigger;
+
+        li {
+            margin-left: 0.75em;
+        }
     }
 }
 

css/plugins/starred.less

@@ -1,41 +1,10 @@
 /**
  * This file provides styles for starred plugin
  */
-
-.page-attributes {
-    li.plugin_starred {
-        .starred {
-            display: block;
-            padding-top: .05rem;
-
-            svg {
-                width: 1.6em;
-                height: 1.6em;
-                font-size: 0.82rem;
-                fill: @ini_nav_menu_hover_color;
-            }
-        }
-
-        a:hover,
-        a:focus,
-        a:active {
-            .starred svg {
-                fill: @ini_nav_menu_hover_bg;
-            }
-        }
-    }
-}
-
 nav.nav-starred {
-    margin-top: @nav-margin;
-
     ul {
         list-style: none;
 
-        &#sidebar-menu-starred {
-            margin-left: 0;
-        }
-
         li {
             margin-left: 0;
 

css/plugins/struct.less

@@ -2,9 +2,7 @@
  * This file provides styles for struct plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content {
     .structaggregation {
         @link-height: 1.5rem;
@@ -71,7 +69,7 @@
                     background-color: @ini_existing;
                     background-image: url("svg.php?svg=file-export.svg&f=background");
                     border-color: @ini_existing;
-                    //color: @ini_background;
+                    //color: var(--color-background);
                     text-decoration: none;
                 }
             }
@@ -107,7 +105,6 @@
     }
 }
 
-
 /* + + + + +  struct inline-editor  + + + + + */
 .dokuwiki {
     .struct_inlineditor {

css/plugins/structstatus.less

@@ -2,9 +2,7 @@
  * This file provides styles for structstatus plugin
  */
 
-
 /* + + + + +  global  + + + + + */
-
 #dokuwiki__content {
     .struct_status {
         border-color: @ini_border;

css/plugins/tabinclude.less

@@ -2,9 +2,7 @@
  * This file provides styles for the tabinclude
  */
 
-
 /* + + + + +  plugin tabinclude  + + + + + */
-
 div#dwpl-ti-container {
     li.dwpl-ti-tab {
         box-shadow: none;
@@ -34,29 +32,26 @@ div#dwpl-ti-container {
 
             &.selected {
                 position: relative;
-                background-color: @ini_background;
+                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: @ini_background;
+        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

@@ -2,9 +2,7 @@
  * This file provides styles for the form in tagcloud
  */
 
-
 /* + + + + +  plugin tagging  + + + + + */
-
 #spr__meta-box {
     ul.tagging_cloud {
         width: 100%;
@@ -14,33 +12,43 @@
             &.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;
             }
@@ -61,10 +69,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* media queries */
-
 @media @screen_max-md {
     #spr__meta-box {
         form {

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,21 +1,14 @@
 /**
  * This file provides the styles for printing.
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>,
-           Silke Pisulla <pisulla@cosmocode.de>
  */
 
-
 /* + + + + +  variables  + + + + + */
-
 @color-print: #000;
 @background-print: transparent;
 @border-color-print: #ccc;
 @border-dark-print: #777;
 
-
 /*  + + + + + print styles  + + + + + */
-
 html,
 body {
     background: @background-print;
@@ -55,6 +48,11 @@ a:visited {
     padding: 20pt 20pt 0;
 }
 
+#dokuwiki__header .logo img {
+    height: 4rem;
+    width: auto;
+}
+
 
 /* + + + + + + + + + + + + + + */
 /* + + + + +  admin  + + + + + */
@@ -73,7 +71,6 @@ a:visited {
     }
 }
 
-
 /* + + +  Extension Manager  + + + */
 #extension__manager {
     form.search {
@@ -224,8 +221,6 @@ a:visited {
     }
 }
 
-
-
 /* + + +  Configuration Settings  + + + */
 #dokuwiki__content #config__manager {
     fieldset {
@@ -347,12 +342,8 @@ a:visited {
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + */
 /* + + + + +  Template Style Settings  + + + + + */
-
-
-
 .page-footer {
     border-top: 1pt solid @border-color-print;
     margin-top: 13pt;
@@ -369,7 +360,6 @@ a:visited {
     }
 }
 
-
 /* + + +  data plugin  + + + */
 .dataplugin_entry dl {
     border: 1pt solid @border-color-print;
@@ -386,7 +376,6 @@ a:visited {
     }
 }
 
-
 #dokuwiki__detail {
     div.img_detail dl {
         dt {
@@ -401,7 +390,6 @@ a:visited {
     }
 }
 
-
 /* + + +  tabbox  + + + */
 div#dwpl-ti-container .dwpl-ti,
 .dwpl-ti-permalink-header,
@@ -414,7 +402,6 @@ div#dwpl-ti-container div.dwpl-ti-content-box {
     border: 0 none;
 }
 
-
 /* + + +  media nmanager  + + + */
 #mediamanager__page {
     .namespaces,
@@ -470,7 +457,6 @@ div#dwpl-ti-container div.dwpl-ti-content-box {
     }
 }
 
-
 /* + + +  forms  + + + */
 form {
     button {

css/template_admin.less

@@ -1,10 +1,7 @@
 /**
  * This file provides the design styles for the admin tools
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 .do-admin {
     #admin__version {
         font-size: @font-size-default;
@@ -52,7 +49,7 @@
                         svg {
                             width: 26px;
                             height: 26px;
-                            border: solid 1px @ini_background;
+                            border: solid 1px var(--color-background);
                             border-radius: @ini_default_border_radius;
                             fill: @ini_existing;
                             transition: @transition background-color, @transition border-color, @transition fill;
@@ -71,10 +68,10 @@
                             svg {
                                 background-color: @ini_existing;
                                 border-color: @ini_existing;
-                                fill: @ini_background;
+                                fill: var(--color-background);
 
                                 path {
-                                    fill: @ini_background;
+                                    fill: var(--color-background);
                                 }
                             }
                         }
@@ -85,10 +82,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* 1024px */
-
 @media @screen_max-md {
     .do-admin {
         div.ui-admin {
@@ -113,10 +108,8 @@
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* 768px */
-
 @media @screen_max-xs {
     .do-admin {
         div.ui-admin {

css/template_detail.less

@@ -1,11 +1,8 @@
 /**
  * This file provides the design styles for the the detail template
  * (media details)
- *
- * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__detail {
 
     /* + + + + +  linked image  + + + + + */
@@ -18,7 +15,7 @@
                 left: 0;
                 display: inline-block;
                 max-width: 100%;
-            color: @ini_button_color;
+                color: var(--color-foreground);
                 margin: 0 auto 1.4em;
 
                 &::before {
@@ -28,7 +25,7 @@
                     display: block;
                     width: 100%;
                     box-sizing: border-box;
-                background: @ini_button_background;
+                    background: var(--color-background);
                     line-height: @line-height-default;
                     padding: @margin-small;
                 }
@@ -36,7 +33,7 @@
                 img {
                     margin: 0;
                     display: block;
-                border: 1px dotted @ini_background_site;
+                    border: solid 0.1rem transparent;
                     position: relative;
                 }
 
@@ -47,10 +44,13 @@
 
                     &::before {
                         content: attr(title);
+                        border: solid 0.1rem var(--color-glow-primary);
+                        transition: var(--transition-glow);
+                        filter: var(--filter-glow-primary);
                     }
 
                     img {
-                    border: 1px solid @ini_button_background;
+                        border: solid 0.1rem var(--color-shade-4);
                     }
                 }
             }
@@ -62,10 +62,10 @@
     div.img_detail {
         @media screen {
             /* vertical minus margin of .img-detail corresponds to the padding of .page */
-            background-color: @ini_background_page_header;
+            background-color: var(--color-shade-1);
-            border: solid @ini_border_light;
+            border: solid 0.1em var(--color-shade-4);
-            border-width: 1px 0;
             margin: @margin-default -(@margin-default);
+            color: var(--color-foreground);
 
             h1,
             h2,
@@ -99,8 +99,8 @@
             }
 
             dt {
-                background-color: @ini_highlight;
+                background-color: none;
-                color: @ini_highlight_text;
+                color: var(--color-foreground);
 
                 @media @screen_min-xs {
                     width: 33.3%;

css/toollist.less

@@ -1,11 +1,10 @@
 /**
  * Styles for site tools and user tools in sidebar
- *
  * Using BEM methodology as far as possible
  */
 
-.toollist {
+//.toollist {
-}
+//}
 
 .toollist__listitem {
     list-style: none;
@@ -24,7 +23,7 @@
     svg {
         width: @font-size-default;
         vertical-align: middle;
-        fill: @ini_nav_menu_color;
+        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,4 +1,3 @@
-<!DOCTYPE html>
 <?php
 /**
  * DokuWiki sprintDoc Detail Template
@@ -23,6 +22,7 @@ $showTools = true;
 $showSidebar =  true;
 
 ?>
+<!DOCTYPE html>
 <html class="edge no-js" lang="<?php echo $conf['lang'] ?>" dir="<?php echo $lang['direction'] ?>">
 <head>
 <?php
@@ -387,16 +387,7 @@ include('tpl/favicon_tiles.php');
                 <div class="col-xs-12">
 
                     <div class="main-footer">
-                        <p>
+                        <?php include 'tpl/main-footer.php'; ?>
-                            <?php
-
-
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-/* copyright */
-/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-                            tpl_license($img = false, $imgonly = false, $return = false, $wrap = false);
-                            ?>
-                        </p>
                     </div>
 
                 </div>

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.

img/LICENSE

@@ -0,0 +1,427 @@
+Attribution-ShareAlike 4.0 International
+
+=======================================================================
+
+Creative Commons Corporation ("Creative Commons") is not a law firm and
+does not provide legal services or legal advice. Distribution of
+Creative Commons public licenses does not create a lawyer-client or
+other relationship. Creative Commons makes its licenses and related
+information available on an "as-is" basis. Creative Commons gives no
+warranties regarding its licenses, any material licensed under their
+terms and conditions, or any related information. Creative Commons
+disclaims all liability for damages resulting from their use to the
+fullest extent possible.
+
+Using Creative Commons Public Licenses
+
+Creative Commons public licenses provide a standard set of terms and
+conditions that creators and other rights holders may use to share
+original works of authorship and other material subject to copyright
+and certain other rights specified in the public license below. The
+following considerations are for informational purposes only, are not
+exhaustive, and do not form part of our licenses.
+
+     Considerations for licensors: Our public licenses are
+     intended for use by those authorized to give the public
+     permission to use material in ways otherwise restricted by
+     copyright and certain other rights. Our licenses are
+     irrevocable. Licensors should read and understand the terms
+     and conditions of the license they choose before applying it.
+     Licensors should also secure all rights necessary before
+     applying our licenses so that the public can reuse the
+     material as expected. Licensors should clearly mark any
+     material not subject to the license. This includes other CC-
+     licensed material, or material used under an exception or
+     limitation to copyright. More considerations for licensors:
+    wiki.creativecommons.org/Considerations_for_licensors
+
+     Considerations for the public: By using one of our public
+     licenses, a licensor grants the public permission to use the
+     licensed material under specified terms and conditions. If
+     the licensor's permission is not necessary for any reason--for
+     example, because of any applicable exception or limitation to
+     copyright--then that use is not regulated by the license. Our
+     licenses grant only permissions under copyright and certain
+     other rights that a licensor has authority to grant. Use of
+     the licensed material may still be restricted for other
+     reasons, including because others have copyright or other
+     rights in the material. A licensor may make special requests,
+     such as asking that all changes be marked or described.
+     Although not required by our licenses, you are encouraged to
+     respect those requests where reasonable. More considerations
+     for the public:
+    wiki.creativecommons.org/Considerations_for_licensees
+
+=======================================================================
+
+Creative Commons Attribution-ShareAlike 4.0 International Public
+License
+
+By exercising the Licensed Rights (defined below), You accept and agree
+to be bound by the terms and conditions of this Creative Commons
+Attribution-ShareAlike 4.0 International Public License ("Public
+License"). To the extent this Public License may be interpreted as a
+contract, You are granted the Licensed Rights in consideration of Your
+acceptance of these terms and conditions, and the Licensor grants You
+such rights in consideration of benefits the Licensor receives from
+making the Licensed Material available under these terms and
+conditions.
+
+
+Section 1 -- Definitions.
+
+  a. Adapted Material means material subject to Copyright and Similar
+     Rights that is derived from or based upon the Licensed Material
+     and in which the Licensed Material is translated, altered,
+     arranged, transformed, or otherwise modified in a manner requiring
+     permission under the Copyright and Similar Rights held by the
+     Licensor. For purposes of this Public License, where the Licensed
+     Material is a musical work, performance, or sound recording,
+     Adapted Material is always produced where the Licensed Material is
+     synched in timed relation with a moving image.
+
+  b. Adapter's License means the license You apply to Your Copyright
+     and Similar Rights in Your contributions to Adapted Material in
+     accordance with the terms and conditions of this Public License.
+
+  c. BY-SA Compatible License means a license listed at
+     creativecommons.org/compatiblelicenses, approved by Creative
+     Commons as essentially the equivalent of this Public License.
+
+  d. Copyright and Similar Rights means copyright and/or similar rights
+     closely related to copyright including, without limitation,
+     performance, broadcast, sound recording, and Sui Generis Database
+     Rights, without regard to how the rights are labeled or
+     categorized. For purposes of this Public License, the rights
+     specified in Section 2(b)(1)-(2) are not Copyright and Similar
+     Rights.
+
+  e. Effective Technological Measures means those measures that, in the
+     absence of proper authority, may not be circumvented under laws
+     fulfilling obligations under Article 11 of the WIPO Copyright
+     Treaty adopted on December 20, 1996, and/or similar international
+     agreements.
+
+  f. Exceptions and Limitations means fair use, fair dealing, and/or
+     any other exception or limitation to Copyright and Similar Rights
+     that applies to Your use of the Licensed Material.
+
+  g. License Elements means the license attributes listed in the name
+     of a Creative Commons Public License. The License Elements of this
+     Public License are Attribution and ShareAlike.
+
+  h. Licensed Material means the artistic or literary work, database,
+     or other material to which the Licensor applied this Public
+     License.
+
+  i. Licensed Rights means the rights granted to You subject to the
+     terms and conditions of this Public License, which are limited to
+     all Copyright and Similar Rights that apply to Your use of the
+     Licensed Material and that the Licensor has authority to license.
+
+  j. Licensor means the individual(s) or entity(ies) granting rights
+     under this Public License.
+
+  k. Share means to provide material to the public by any means or
+     process that requires permission under the Licensed Rights, such
+     as reproduction, public display, public performance, distribution,
+     dissemination, communication, or importation, and to make material
+     available to the public including in ways that members of the
+     public may access the material from a place and at a time
+     individually chosen by them.
+
+  l. Sui Generis Database Rights means rights other than copyright
+     resulting from Directive 96/9/EC of the European Parliament and of
+     the Council of 11 March 1996 on the legal protection of databases,
+     as amended and/or succeeded, as well as other essentially
+     equivalent rights anywhere in the world.
+
+  m. You means the individual or entity exercising the Licensed Rights
+     under this Public License. Your has a corresponding meaning.
+
+
+Section 2 -- Scope.
+
+  a. License grant.
+
+       1. Subject to the terms and conditions of this Public License,
+          the Licensor hereby grants You a worldwide, royalty-free,
+          non-sublicensable, non-exclusive, irrevocable license to
+          exercise the Licensed Rights in the Licensed Material to:
+
+            a. reproduce and Share the Licensed Material, in whole or
+               in part; and
+
+            b. produce, reproduce, and Share Adapted Material.
+
+       2. Exceptions and Limitations. For the avoidance of doubt, where
+          Exceptions and Limitations apply to Your use, this Public
+          License does not apply, and You do not need to comply with
+          its terms and conditions.
+
+       3. Term. The term of this Public License is specified in Section
+          6(a).
+
+       4. Media and formats; technical modifications allowed. The
+          Licensor authorizes You to exercise the Licensed Rights in
+          all media and formats whether now known or hereafter created,
+          and to make technical modifications necessary to do so. The
+          Licensor waives and/or agrees not to assert any right or
+          authority to forbid You from making technical modifications
+          necessary to exercise the Licensed Rights, including
+          technical modifications necessary to circumvent Effective
+          Technological Measures. For purposes of this Public License,
+          simply making modifications authorized by this Section 2(a)
+          (4) never produces Adapted Material.
+
+       5. Downstream recipients.
+
+            a. Offer from the Licensor -- Licensed Material. Every
+               recipient of the Licensed Material automatically
+               receives an offer from the Licensor to exercise the
+               Licensed Rights under the terms and conditions of this
+               Public License.
+
+            b. Additional offer from the Licensor -- Adapted Material.
+               Every recipient of Adapted Material from You
+               automatically receives an offer from the Licensor to
+               exercise the Licensed Rights in the Adapted Material
+               under the conditions of the Adapter's License You apply.
+
+            c. No downstream restrictions. You may not offer or impose
+               any additional or different terms or conditions on, or
+               apply any Effective Technological Measures to, the
+               Licensed Material if doing so restricts exercise of the
+               Licensed Rights by any recipient of the Licensed
+               Material.
+
+       6. No endorsement. Nothing in this Public License constitutes or
+          may be construed as permission to assert or imply that You
+          are, or that Your use of the Licensed Material is, connected
+          with, or sponsored, endorsed, or granted official status by,
+          the Licensor or others designated to receive attribution as
+          provided in Section 3(a)(1)(A)(i).
+
+  b. Other rights.
+
+       1. Moral rights, such as the right of integrity, are not
+          licensed under this Public License, nor are publicity,
+          privacy, and/or other similar personality rights; however, to
+          the extent possible, the Licensor waives and/or agrees not to
+          assert any such rights held by the Licensor to the limited
+          extent necessary to allow You to exercise the Licensed
+          Rights, but not otherwise.
+
+       2. Patent and trademark rights are not licensed under this
+          Public License.
+
+       3. To the extent possible, the Licensor waives any right to
+          collect royalties from You for the exercise of the Licensed
+          Rights, whether directly or through a collecting society
+          under any voluntary or waivable statutory or compulsory
+          licensing scheme. In all other cases the Licensor expressly
+          reserves any right to collect such royalties.
+
+
+Section 3 -- License Conditions.
+
+Your exercise of the Licensed Rights is expressly made subject to the
+following conditions.
+
+  a. Attribution.
+
+       1. If You Share the Licensed Material (including in modified
+          form), You must:
+
+            a. retain the following if it is supplied by the Licensor
+               with the Licensed Material:
+
+                 i. identification of the creator(s) of the Licensed
+                    Material and any others designated to receive
+                    attribution, in any reasonable manner requested by
+                    the Licensor (including by pseudonym if
+                    designated);
+
+                ii. a copyright notice;
+
+               iii. a notice that refers to this Public License;
+
+                iv. a notice that refers to the disclaimer of
+                    warranties;
+
+                 v. a URI or hyperlink to the Licensed Material to the
+                    extent reasonably practicable;
+
+            b. indicate if You modified the Licensed Material and
+               retain an indication of any previous modifications; and
+
+            c. indicate the Licensed Material is licensed under this
+               Public License, and include the text of, or the URI or
+               hyperlink to, this Public License.
+
+       2. You may satisfy the conditions in Section 3(a)(1) in any
+          reasonable manner based on the medium, means, and context in
+          which You Share the Licensed Material. For example, it may be
+          reasonable to satisfy the conditions by providing a URI or
+          hyperlink to a resource that includes the required
+          information.
+
+       3. If requested by the Licensor, You must remove any of the
+          information required by Section 3(a)(1)(A) to the extent
+          reasonably practicable.
+
+  b. ShareAlike.
+
+     In addition to the conditions in Section 3(a), if You Share
+     Adapted Material You produce, the following conditions also apply.
+
+       1. The Adapter's License You apply must be a Creative Commons
+          license with the same License Elements, this version or
+          later, or a BY-SA Compatible License.
+
+       2. You must include the text of, or the URI or hyperlink to, the
+          Adapter's License You apply. You may satisfy this condition
+          in any reasonable manner based on the medium, means, and
+          context in which You Share Adapted Material.
+
+       3. You may not offer or impose any additional or different terms
+          or conditions on, or apply any Effective Technological
+          Measures to, Adapted Material that restrict exercise of the
+          rights granted under the Adapter's License You apply.
+
+
+Section 4 -- Sui Generis Database Rights.
+
+Where the Licensed Rights include Sui Generis Database Rights that
+apply to Your use of the Licensed Material:
+
+  a. for the avoidance of doubt, Section 2(a)(1) grants You the right
+     to extract, reuse, reproduce, and Share all or a substantial
+     portion of the contents of the database;
+
+  b. if You include all or a substantial portion of the database
+     contents in a database in which You have Sui Generis Database
+     Rights, then the database in which You have Sui Generis Database
+     Rights (but not its individual contents) is Adapted Material,
+     including for purposes of Section 3(b); and
+
+  c. You must comply with the conditions in Section 3(a) if You Share
+     all or a substantial portion of the contents of the database.
+
+For the avoidance of doubt, this Section 4 supplements and does not
+replace Your obligations under this Public License where the Licensed
+Rights include other Copyright and Similar Rights.
+
+
+Section 5 -- Disclaimer of Warranties and Limitation of Liability.
+
+  a. UNLESS OTHERWISE SEPARATELY UNDERTAKEN BY THE LICENSOR, TO THE
+     EXTENT POSSIBLE, THE LICENSOR OFFERS THE LICENSED MATERIAL AS-IS
+     AND AS-AVAILABLE, AND MAKES NO REPRESENTATIONS OR WARRANTIES OF
+     ANY KIND CONCERNING THE LICENSED MATERIAL, WHETHER EXPRESS,
+     IMPLIED, STATUTORY, OR OTHER. THIS INCLUDES, WITHOUT LIMITATION,
+     WARRANTIES OF TITLE, MERCHANTABILITY, FITNESS FOR A PARTICULAR
+     PURPOSE, NON-INFRINGEMENT, ABSENCE OF LATENT OR OTHER DEFECTS,
+     ACCURACY, OR THE PRESENCE OR ABSENCE OF ERRORS, WHETHER OR NOT
+     KNOWN OR DISCOVERABLE. WHERE DISCLAIMERS OF WARRANTIES ARE NOT
+     ALLOWED IN FULL OR IN PART, THIS DISCLAIMER MAY NOT APPLY TO YOU.
+
+  b. TO THE EXTENT POSSIBLE, IN NO EVENT WILL THE LICENSOR BE LIABLE
+     TO YOU ON ANY LEGAL THEORY (INCLUDING, WITHOUT LIMITATION,
+     NEGLIGENCE) OR OTHERWISE FOR ANY DIRECT, SPECIAL, INDIRECT,
+     INCIDENTAL, CONSEQUENTIAL, PUNITIVE, EXEMPLARY, OR OTHER LOSSES,
+     COSTS, EXPENSES, OR DAMAGES ARISING OUT OF THIS PUBLIC LICENSE OR
+     USE OF THE LICENSED MATERIAL, EVEN IF THE LICENSOR HAS BEEN
+     ADVISED OF THE POSSIBILITY OF SUCH LOSSES, COSTS, EXPENSES, OR
+     DAMAGES. WHERE A LIMITATION OF LIABILITY IS NOT ALLOWED IN FULL OR
+     IN PART, THIS LIMITATION MAY NOT APPLY TO YOU.
+
+  c. The disclaimer of warranties and limitation of liability provided
+     above shall be interpreted in a manner that, to the extent
+     possible, most closely approximates an absolute disclaimer and
+     waiver of all liability.
+
+
+Section 6 -- Term and Termination.
+
+  a. This Public License applies for the term of the Copyright and
+     Similar Rights licensed here. However, if You fail to comply with
+     this Public License, then Your rights under this Public License
+     terminate automatically.
+
+  b. Where Your right to use the Licensed Material has terminated under
+     Section 6(a), it reinstates:
+
+       1. automatically as of the date the violation is cured, provided
+          it is cured within 30 days of Your discovery of the
+          violation; or
+
+       2. upon express reinstatement by the Licensor.
+
+     For the avoidance of doubt, this Section 6(b) does not affect any
+     right the Licensor may have to seek remedies for Your violations
+     of this Public License.
+
+  c. For the avoidance of doubt, the Licensor may also offer the
+     Licensed Material under separate terms or conditions or stop
+     distributing the Licensed Material at any time; however, doing so
+     will not terminate this Public License.
+
+  d. Sections 1, 5, 6, 7, and 8 survive termination of this Public
+     License.
+
+
+Section 7 -- Other Terms and Conditions.
+
+  a. The Licensor shall not be bound by any additional or different
+     terms or conditions communicated by You unless expressly agreed.
+
+  b. Any arrangements, understandings, or agreements regarding the
+     Licensed Material not stated herein are separate from and
+     independent of the terms and conditions of this Public License.
+
+
+Section 8 -- Interpretation.
+
+  a. For the avoidance of doubt, this Public License does not, and
+     shall not be interpreted to, reduce, limit, restrict, or impose
+     conditions on any use of the Licensed Material that could lawfully
+     be made without permission under this Public License.
+
+  b. To the extent possible, if any provision of this Public License is
+     deemed unenforceable, it shall be automatically reformed to the
+     minimum extent necessary to make it enforceable. If the provision
+     cannot be reformed, it shall be severed from this Public License
+     without affecting the enforceability of the remaining terms and
+     conditions.
+
+  c. No term or condition of this Public License will be waived and no
+     failure to comply consented to unless expressly agreed to by the
+     Licensor.
+
+  d. Nothing in this Public License constitutes or may be interpreted
+     as a limitation upon, or waiver of, any privileges and immunities
+     that apply to the Licensor or You, including from the legal
+     processes of any jurisdiction or authority.
+
+
+=======================================================================
+
+Creative Commons is not a party to its public
+licenses. Notwithstanding, Creative Commons may elect to apply one of
+its public licenses to material it publishes and in those instances
+will be considered the “Licensor.” The text of the Creative Commons
+public licenses is dedicated to the public domain under the CC0 Public
+Domain Dedication. Except for the limited purpose of indicating that
+material is shared under a Creative Commons public license or as
+otherwise permitted by the Creative Commons policies published at
+creativecommons.org/policies, Creative Commons does not authorize the
+use of the trademark "Creative Commons" or any other trademark or logo
+of Creative Commons without its prior written consent including,
+without limitation, in connection with any unauthorized modifications
+to any of its public licenses or any other arrangements,
+understandings, or agreements concerning use of licensed material. For
+the avoidance of doubt, this paragraph does not form part of the
+public licenses.
+
+Creative Commons may be contacted at creativecommons.org.

img/arrow_down.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M299.996 0a25 25 0 0 0-24.998 24.998v389.803c0 23.914 15.39 43.832 34.613 51.795 19.223 7.962 44.194 4.759 61.104-12.15L485.617 339.54c5.091-5.09 12.583-5.09 17.674 0s5.097 12.589.006 17.68L317.682 542.836c-9.973 9.972-25.387 9.972-35.36 0L105.543 366.059a25 25 0 0 0-35.348 0 25 25 0 0 0-.005 35.353L246.969 578.19c29.08 29.08 76.986 29.08 106.066 0L538.65 392.574c24.199-24.198 24.199-64.192 0-88.39-24.198-24.199-64.188-24.195-88.386.004L335.359 419.092c-2.66 2.66-4.216 2.309-6.617 1.314-2.4-.994-3.742-1.838-3.742-5.601V25.002A25 25 0 0 0 299.996 0" style="stroke-width:3.77953"/>
+</svg>

img/arrow_down_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M501.832 73.168a25 25 0 0 0-17.676 7.32L208.523 356.121c-16.91 16.91-20.118 41.877-12.156 61.1 7.963 19.223 27.883 34.613 51.797 34.613H410.67c7.2 0 12.498 5.298 12.498 12.498s-5.298 12.498-12.498 12.498h-262.5c-14.103 0-25.002-10.893-25.002-24.996V201.832a25 25 0 0 0-25.004-25.002 25 25 0 0 0-24.994 25.002v250.002c0 41.125 33.875 75 75 75h262.5c34.222 0 62.494-28.28 62.494-62.502s-28.272-62.502-62.494-62.502H248.164c-3.763 0-4.607-1.343-5.601-3.744-.995-2.401-1.347-3.945 1.314-6.606l275.63-275.632a25 25 0 0 0 0-35.36 25 25 0 0 0-17.675-7.32" style="stroke-width:3.77953"/>
+</svg>

img/arrow_down_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M98.168 73.168a25 25 0 0 0-17.68 7.324 25 25 0 0 0 0 35.352l275.633 275.633c16.91 16.91 41.877 20.118 61.1 12.156 19.223-7.963 34.613-27.883 34.613-51.797V189.33c0-7.2 5.298-12.498 12.498-12.498s12.498 5.298 12.498 12.498v262.5c0 14.103-10.893 25.002-24.996 25.002H201.832a25 25 0 0 0-25.002 25.004 25 25 0 0 0 25.002 24.994h250.002c41.125 0 75-33.875 75-75v-262.5c0-34.222-28.28-62.494-62.502-62.494s-62.502 28.272-62.502 62.494v162.506c0 3.763-1.343 4.607-3.744 5.601-2.401.995-3.945 1.347-6.606-1.314L115.848 80.493a25 25 0 0 0-17.68-7.325" style="stroke-width:3.77953"/>
+</svg>

img/arrow_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M216.264 62.867a25 25 0 0 0-17.676 7.324L21.81 246.971c-29.08 29.08-29.08 76.984 0 106.064l185.615 185.617c24.198 24.199 64.188 24.193 88.387-.006 24.198-24.198 24.204-64.188.006-88.386l-114.91-114.908c-2.662-2.661-2.31-4.209-1.315-6.61.994-2.4 1.838-3.742 5.601-3.742h389.803A25 25 0 0 0 600 299.998 25 25 0 0 0 575.002 275H185.199c-23.914 0-43.838 15.384-51.8 34.607-7.963 19.223-4.758 44.194 12.152 61.104l114.908 114.908c5.09 5.091 5.09 12.583 0 17.674s-12.583 5.09-17.674 0L57.168 317.678c-9.973-9.973-9.976-25.381-.004-35.354l176.777-176.78a25 25 0 0 0 0-35.358 25 25 0 0 0-17.677-7.319" style="stroke-width:3.77953"/>
+</svg>

img/arrow_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M348.379 43.203c-16.048 0-32.096 6.05-44.195 18.149-24.199 24.198-24.195 64.188.004 88.386l114.904 114.903c2.66 2.66 2.309 4.218 1.314 6.619-.994 2.4-1.842 3.738-5.605 3.738l-389.799.004A25 25 0 0 0 .006 300a25 25 0 0 0 24.996 24.998l389.799.004c23.914 0 43.832-15.388 51.795-34.611 7.962-19.223 4.759-44.194-12.15-61.104L339.54 114.385c-5.09-5.091-5.09-12.583 0-17.674s12.589-5.097 17.68-.006L542.836 282.32c9.972 9.973 9.972 25.387 0 35.36L366.059 494.457a25 25 0 0 0 0 35.35 25 25 0 0 0 35.353.004L578.19 353.033c29.08-29.08 29.08-76.986 0-106.066L392.574 61.352c-12.099-12.1-28.147-18.149-44.195-18.149" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M300.002 0c-19.247 0-38.493 7.27-53.033 21.81L61.354 207.427c-24.199 24.198-24.199 64.194 0 88.392 24.198 24.199 64.188 24.193 88.386-.006l114.903-114.904c2.66-2.66 4.206-2.309 6.607-1.314 2.4.994 3.748 1.842 3.748 5.605v389.803A25 25 0 0 0 299.996 600a25 25 0 0 0 25.002-25.002V185.195c0-23.913-15.388-43.834-34.611-51.797s-44.188-4.753-61.098 12.157L114.387 260.459c-5.091 5.09-12.585 5.09-17.676 0s-5.095-12.589-.004-17.68L282.322 57.164c9.973-9.972 25.387-9.972 35.36 0l176.777 176.777a25 25 0 0 0 35.348 0 25 25 0 0 0 .006-35.353L353.035 21.81C338.495 7.27 319.248 0 300.002 0" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up_left.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M148.166 73.17c-41.125 0-75 33.875-75 75v262.5c0 34.222 28.28 62.494 62.502 62.494s62.502-28.272 62.502-62.494V248.164c0-3.763 1.343-4.607 3.744-5.601 2.401-.995 3.945-1.347 6.606 1.314l275.632 275.63a25 25 0 0 0 35.36 0 25 25 0 0 0 0-35.35L243.879 208.522c-16.91-16.91-41.877-20.118-61.1-12.156-19.223 7.963-34.613 27.883-34.613 51.797V410.67c0 7.2-5.298 12.498-12.498 12.498s-12.498-5.298-12.498-12.498v-262.5c0-14.103 10.893-25.002 24.996-25.002h250.002a25 25 0 0 0 25.002-25.004 25 25 0 0 0-25.002-24.994Z" style="stroke-width:3.77953"/>
+</svg>

img/arrow_up_right.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M188.83 73.164c-34.222 0-62.494 28.282-62.494 62.504s28.272 62.502 62.494 62.502h162.506c3.763 0 4.607 1.341 5.602 3.742.994 2.401 1.348 3.947-1.313 6.608L79.992 484.152a25 25 0 0 0 0 35.36 25 25 0 0 0 35.352 0l275.633-275.633c16.91-16.91 20.12-41.877 12.158-61.1s-27.885-34.615-51.8-34.615H188.83c-7.2 0-12.498-5.296-12.498-12.496s5.298-12.498 12.498-12.498h262.5c14.103 0 25.002 10.89 25.002 24.994v250.004a25 25 0 0 0 25.004 25.002 25 25 0 0 0 24.994-25.002V148.164c0-41.125-33.875-75-75-75z" style="stroke-width:3.77953"/>
+</svg>

img/basket.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M255.775 100.053a25 25 0 0 0-22.41 11.08l-66.666 100a25 25 0 0 0 6.934 34.668 25 25 0 0 0 34.668-6.934l66.666-100a25 25 0 0 0-6.934-34.668 25 25 0 0 0-12.258-4.146m88.45 0a25 25 0 0 0-12.258 4.146 25 25 0 0 0-6.934 34.668l66.666 100a25 25 0 0 0 34.668 6.934 25 25 0 0 0 6.934-34.668l-66.666-100a25 25 0 0 0-22.41-11.08M74.637 275.002c-40.845 0-71.443 40.057-60.696 79.463l48.881 179.228c10.646 39.034 46.353 66.303 86.813 66.303h300.73c40.46 0 76.17-27.269 86.815-66.303l61.943-227.113a25 25 0 0 0-17.543-30.695 25 25 0 0 0-30.703 17.535l-61.936 227.113c-4.775 17.51-20.426 29.469-38.576 29.469h-300.73c-18.15 0-33.8-11.959-38.576-29.469L62.178 341.305c-2.408-8.827 3.31-16.309 12.459-16.309H500A25 25 0 0 0 524.998 300 25 25 0 0 0 500 275.002Z" style="stroke-width:3.82848"/>
+</svg>

img/bed.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M25 225a25 25 0 0 0-25 25v325a25 25 0 0 0 25 25 25 25 0 0 0 25-25V250a25 25 0 0 0-25-25m137.498.002C114.47 225.002 75 264.472 75 312.5s39.47 87.498 87.498 87.498a25 25 0 0 0 25.002-24.996A25 25 0 0 0 162.498 350c-21.007 0-37.5-16.493-37.5-37.5s16.493-37.5 37.5-37.5 37.5 16.493 37.5 37.5v12.498c0 41.125 33.875 75 75 75h244A49.8 49.8 0 0 1 554.24 414.6l3.086 3.078a25 25 0 0 0 35.352 0 25 25 0 0 0 0-35.354l-3.078-3.084A99.88 99.88 0 0 0 518.998 350h-244c-14.103 0-24.996-10.899-24.996-25.002V312.5c0-48.029-39.475-87.498-87.504-87.498M150 424.998c-41.125 0-75 33.875-75 75v75A25 25 0 0 0 100.002 600a25 25 0 0 0 24.996-25.002v-75c0-14.103 10.899-24.996 25.002-24.996h349.998c14.103 0 25.002 10.893 25.002 24.996v75A25 25 0 0 0 550.002 600a25 25 0 0 0 24.996-25.002v-75c0-41.125-33.875-75-75-75z" style="stroke-width:3.77953"/>
+</svg>

img/clock.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M300 0C220.428 0 147.8 31.12 94.102 81.81a25 25 0 0 0-1.018 35.342 25 25 0 0 0 35.34 1.018C173.224 75.88 233.429 50 300 50c138.367 0 250 111.633 250 250S438.367 550 300 550 50 438.367 50 300c0-41.007 9.823-79.539 27.246-113.621a25 25 0 0 0-10.88-33.639 25 25 0 0 0-33.641 10.881C11.805 204.545 0 250.985 0 300c0 165.39 134.61 300 300 300s300-134.61 300-300S465.39 0 300 0m0 72.15a25 25 0 0 0-25.002 25.002v177.846a175.02 175.02 0 0 0 35.004 105l45 60A25 25 0 0 0 390 445.002a25 25 0 0 0 4.998-35.004l-45-60a124.98 124.98 0 0 1-24.996-75V97.152A25 25 0 0 0 300 72.15" style="stroke-width:3.77953"/>
+</svg>