update Argon Glow to v0.010

replaces pr #38

.gitattributes

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

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';
     }
 
     /**
@@ -141,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
      *
@@ -244,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

@@ -2,24 +2,22 @@
  * This file provides the design styles for the page content.
  */
 
+.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;
@@ -27,6 +25,13 @@
                 }
             }
         }
+    }
+    @media @screen_min-md {
+        > .col-xs-12 {
+            border-left: dashed 0.25em var(--color-shade-4);
+            border-radius: 0;
+        }
+    }
 }
 
 .main-content > .level2,

css/area_footer.less

@@ -7,10 +7,10 @@
 @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;
@@ -35,19 +35,16 @@
         .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;
-        }
     }
 }
 

css/area_footnotes.less

@@ -51,4 +51,5 @@
 
 .insitu-footnote {
   line-height: 130%;
+  z-index: 100;
 }

css/area_forms.less

@@ -59,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;
@@ -90,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;
@@ -118,7 +117,7 @@ select:active,
 select:focus,
 keygen:active,
 keygen:focus {
-    border-color: #999;
+    border-color: var(--color-shade-4);
 }
 
 input[type="file"] {
@@ -158,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);
     }
 }
 
@@ -239,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;

css/area_header.less

@@ -13,20 +13,19 @@
     @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);
                 }
             }
         }
@@ -34,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;
@@ -85,7 +90,7 @@
 
     /* + + +  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;

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

@@ -12,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;
@@ -34,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

@@ -6,7 +6,7 @@
     div[class^="level"] {
         p a.media {
             img {
-                border: 1px dotted @ini_background_site;
+                border: 1px dotted var(--color-background);
 
             }
             &:hover,
@@ -20,7 +20,6 @@
     }
 
     > div,
-    .section_highlight > div,
     div[class^="level"] {
         > ul,
         > ol {

css/area_main-sidebar-nav.less

@@ -19,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;
@@ -41,7 +45,7 @@
         }
 
         li {
-            color: @ini_nav_menu_color;
+            color: var(--color-foreground);
 
             > div {
                 color: @ini_text_webframe;
@@ -59,45 +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;
@@ -105,70 +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 {
@@ -177,12 +190,12 @@
 
                     svg {
                         path {
-                                fill: @ini_nav_menu_hover_color;
+                            fill: currentColor;
-                            }
                         }
                     }
                 }
             }
+
         }
 
         span.ico {
@@ -205,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
@@ -222,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;
@@ -240,7 +253,7 @@
                 height: @icon-size;
 
                 path {
-                    fill: @ini_nav_menu_color;
+                    fill: currentColor;
                     transition: @transition all;
                 }
             }
@@ -254,10 +267,11 @@
     }
 
     /* + + + + +  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;
@@ -267,6 +281,10 @@
                 margin-left: 16px;
             }
         }
+
+        ul.toollist li {
+            margin-left: 0;
+        }
     }
 }
 
@@ -298,7 +316,7 @@
     #dokuwiki__aside {
         div.nav {
             a {
-                margin-left: 1px;
+                margin-left: 0;
             }
         }
     }
@@ -324,7 +342,7 @@
             min-width: 45%;
             max-width: 90%;
             height: auto;
-            background: @ini_background_site;
+            background: var(--color-background);
 
             > nav {
                 position: relative;
@@ -333,7 +351,8 @@
                     margin-top: 1.2rem;
                 }
 
-                a {
+                a,
+                label {
                     font-size: @font-size-small;
                 }
             }

css/area_main-sidebar-search.less

@@ -13,9 +13,7 @@
 
     p.toggleSearch a,
     button[type="submit"] {
-        .fontello();
         .hide-text-show-before();
-        .icon-search();
 
         position: relative;
         width: @icon-size;
@@ -26,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 {
+            &::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);
             }
         }
     }
@@ -92,17 +95,6 @@
         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  + + + */
@@ -128,7 +120,6 @@
 
         button[type="submit"] {
             border: solid 1px transparent;
-            border-right-color: @ini_border;
             margin-left: -(@icon-size);
 
             &::after {
@@ -138,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;
@@ -162,12 +157,12 @@
                     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);
+                    }
                 }
             }
         }
@@ -223,6 +218,11 @@
 
     // 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

@@ -21,7 +21,7 @@
         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;
         }
     }

css/area_msg.less

@@ -15,23 +15,65 @@
     }
 }
 
-/* short fix: SPR-891 - icons for notifications in message area are repeated */
 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

@@ -6,29 +6,21 @@
     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;
@@ -58,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;
                 }
@@ -73,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-metabox.less

@@ -7,16 +7,22 @@
     .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
@@ -25,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;
@@ -99,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;
                 }
 
                 * {
@@ -137,35 +150,16 @@
                 &: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;
-                    }
                 }
             }
         }
@@ -186,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 {
@@ -245,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;
@@ -280,7 +276,7 @@
                             width: 4px;
                             height: 4px;
                             overflow: hidden;
-                            background-color: @ini_existing;
+                            background-color: var(--color-shade-4);
                         }
                     }
                 }

css/area_nav-page-attributes.less

@@ -1,78 +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

@@ -100,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;
@@ -113,7 +114,7 @@ nav#dokuwiki__pagetools {
                     }
 
                     svg {
-                        fill: @ini_existing;
+                        fill: var(--color-glow-primary);
                     }
                 }
 
@@ -131,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 {
@@ -151,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;
@@ -166,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

@@ -76,23 +76,14 @@
             &.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 {
@@ -102,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 {
@@ -119,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;
@@ -158,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;
@@ -167,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,
@@ -197,22 +189,10 @@
 
                     &::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
@@ -222,16 +202,29 @@
         .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);
             }
 
@@ -245,6 +238,7 @@
             .hide-text-show-before();
             .btn-hover();
 
+            background-color: var(--color-shade-1);
             cursor: pointer;
             position: relative;
             line-height: 1;
@@ -301,7 +295,7 @@
                 overflow: hidden;
 
                 li.user {
-                    color: @ini_background_site;
+                    color: var(--color-background);
 
                     bdi {
                         position: absolute;
@@ -311,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;
                         }
                     }
@@ -323,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);
                                 }
                             }
                         }

css/area_recent.less

@@ -11,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);
                 }
             }
         }
@@ -67,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;
@@ -82,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;
@@ -95,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;
@@ -110,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;
 
@@ -121,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;
@@ -152,8 +156,12 @@
 
             strong {
                 background-color: transparent;
-                color: #f00;
+                color: var(--color-error) !important;
             }
         }
+
+        .diff-lineheader {
+            background-color: transparent;
+        }
     }
 }

css/area_tabs.less

@@ -8,14 +8,22 @@
         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

@@ -8,52 +8,44 @@
         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;
 
                 * {
@@ -61,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

@@ -5,10 +5,10 @@
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* global vars */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
-@font_family_screen:       arial, sans-serif;
+@font_family_screen:       "Athiti", ui-sans, sans-serif;
-@font_family_print:        "Times New Roman", serif;
+@font_family_print:        "Athiti", ui-sans, sans-serif;
 
-@nav_direct_background:    @ini_background;
+@nav_direct_background:     var(--color-background);
 @nav_direct_color:         @ini_existing;
 
 @background_darker:        rgba(230,230,230, .2);
@@ -36,7 +36,7 @@
 @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
+@fix_border-radius:        0.5rem; // inputs, editbox (textarea), buttons, content, code, quicksearch, msg
 
 @toggle-showsidebar_width: 3.47rem;       // shown sidebar after toggle
 
@@ -66,7 +66,7 @@
 /* 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%);
@@ -170,6 +170,100 @@
 
 
 
+/* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
+/* 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 */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
@@ -288,11 +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%;
@@ -321,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] {
@@ -351,7 +756,7 @@ nav > ul {
     kbd,
     pre,
     samp {
-        font-family: monospace, monospace;
+        font-family: "Departure Mono", ui-monospace, monospace;
         font-size: 1em;
     }
 
@@ -420,7 +825,7 @@ nav > ul {
 
     html, body {
         font-family: @font_family_screen;
-        color: @ini_text;
+        color: var(--color-foreground);
     }
 }
 

css/base_design.less

@@ -5,7 +5,7 @@
 
 
 html, body {
-    background-color: @ini_background_site;
+    background-color: var(--color-background);
 }
 
 /* highlight selected tool */
@@ -23,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 {
@@ -41,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;
@@ -55,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;
 
@@ -84,6 +97,7 @@ html, body {
     }
 
     /* license note under edit window */
+
     div.license {
         font-size: @font-size-small;
         line-height: @line-height-default;
@@ -153,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 {
@@ -218,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 {
@@ -424,16 +388,11 @@ ol ol ol ol ol {
 .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;
-            }
         }
     }
 }
@@ -442,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%;
 }
@@ -461,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 {
@@ -479,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;
@@ -520,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;
@@ -548,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;
@@ -568,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_mixins.less

@@ -136,16 +136,18 @@
 
 /* + + + + +  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;

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/configmanager.less

@@ -9,9 +9,10 @@
             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 {
@@ -20,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;
@@ -36,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;

css/plugins/data.less

@@ -23,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;
@@ -40,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,27 +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 {
@@ -74,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;
                     }
@@ -107,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

@@ -7,15 +7,12 @@
 #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"
@@ -24,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;
@@ -41,11 +50,13 @@
                     white-space: normal;
                     display: block;
                     width: 100%;
+
                     span {
                         display: inline-block;
                         padding-bottom: .4rem;
                     }
-                    input#edit__summary{
+
+                    input#edit__summary {
                         max-width: 100%;
                         box-sizing: border-box;
                     }

css/plugins/edittable.less

@@ -4,6 +4,29 @@
 
 /* + + + + +  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;
@@ -13,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

@@ -3,7 +3,8 @@
  */
 
 /* + + + + +  global  + + + + + */
-.dokuwiki #extension__manager {
+.dokuwiki {
+    #extension__manager {
         .actions {
             font-size: 0;
 
@@ -13,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/include.less

@@ -1,31 +0,0 @@
-/**
- * This file provides the main design styles
- * across all template elements (typo, colors etc.)
- */
-
-#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

@@ -50,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;

css/plugins/mediamanager.less

@@ -4,10 +4,18 @@
 
 /* + + + + +  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 {
@@ -23,6 +31,32 @@
             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;
+        }
+    }
 }
 
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */

css/plugins/qc.less

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

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/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

@@ -69,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;
                 }
             }

css/plugins/tabinclude.less

@@ -32,7 +32,7 @@ div#dwpl-ti-container {
 
             &.selected {
                 position: relative;
-                background-color: @ini_background;
+                background-color: var(--color-background);
                 color: @ini_text;
             }
         }
@@ -43,7 +43,7 @@ div#dwpl-ti-container {
         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;

css/plugins/tablelayout.less

@@ -8,7 +8,7 @@
 #dokuwiki__content.main-content .secedit.editbutton_table{
     a.button.print {
         min-height: 1rem;
-        background-color: @ini_background;
+        background-color: var(--color-background);
         border-radius: 0 @ini_default_border_radius;
         border-top: solid 1px;
         border-color: @ini_border;

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

@@ -48,6 +48,12 @@ a:visited {
     padding: 20pt 20pt 0;
 }
 
+#dokuwiki__header .logo img {
+    height: 4rem;
+    width: auto;
+}
+
+
 /* + + + + + + + + + + + + + + */
 /* + + + + +  admin  + + + + + */
 

css/template_admin.less

@@ -49,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;
@@ -68,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);
                                 }
                             }
                         }

css/template_detail.less

@@ -15,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 {
@@ -25,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;
                 }
@@ -33,7 +33,7 @@
                 img {
                     margin: 0;
                     display: block;
-                    border: 1px dotted @ini_background_site;
+                    border: solid 0.1rem transparent;
                     position: relative;
                 }
 
@@ -44,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);
                     }
                 }
             }
@@ -59,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,
@@ -96,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

@@ -23,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>

img/code.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M376.402 200.002c-26.675 0-50.36 17.869-57.69 43.518L233.01 543.475c-1.135 3.972-4.52 6.525-8.653 6.525h-35.035a8.82 8.82 0 0 1-6.355-2.687L57.15 417.629c-9.716-10.015-9.716-25.243 0-35.258l135.79-139.959a25 25 0 0 0-.532-35.353 25 25 0 0 0-35.351.533L21.267 347.55C7.188 362.064.148 381.033.148 400s7.04 37.936 21.12 52.45l125.817 129.675a58.9 58.9 0 0 0 42.238 17.873h35.035c26.23 0 49.525-17.565 56.73-42.785l85.696-299.957c1.258-4.402 5.041-7.256 9.62-7.256h33.853a9.8 9.8 0 0 1 7.064 2.99l125.53 129.381c9.716 10.015 9.716 25.243 0 35.258L407.059 557.588a25 25 0 0 0 .53 35.353 25 25 0 0 0 35.354-.533L578.74 452.45c28.161-29.025 28.161-75.873 0-104.898L453.21 218.17a59.88 59.88 0 0 0-42.954-18.168Z" style="stroke-width:3.77953"/>
+</svg>

img/creature.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="375" height="600">
+    <path d="M187.5-.17c-82.547 0-150 67.453-150 150 0 55.323 30.14 103.976 74.982 129.916a25 25 0 0 0 34.159-9.121 25 25 0 0 0-9.123-34.158C107.635 219.18 87.5 187.043 87.5 149.83c0-55.524 44.475-100 100-100s100 44.476 100 100c0 37.213-20.135 69.35-50.018 86.637a25 25 0 0 0-9.123 34.158 25 25 0 0 0 34.159 9.121c44.843-25.94 74.982-74.593 74.982-129.916 0-82.547-67.453-150-150-150m-62.502 325.172C56.258 325.002 0 381.26 0 450v124.998A25 25 0 0 0 25.002 600a25 25 0 0 0 24.996-25.002V450c0-41.717 33.283-75 75-75h125.004c41.717 0 75 33.283 75 75v124.998A25 25 0 0 0 349.998 600 25 25 0 0 0 375 574.998V450c0-68.74-56.259-124.998-124.998-124.998Z" style="stroke-width:3.77953"/>
+</svg>

img/cross.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M22.797.516a25 25 0 0 0-15.49 7.24 25 25 0 0 0 .03 35.355l225 224.582a25 25 0 0 0 35.356-.03 25 25 0 0 0-.03-35.356l-225-224.584a25 25 0 0 0-11.216-6.46 25 25 0 0 0-8.65-.747m554.838 0a25 25 0 0 0-8.65.744 25 25 0 0 0-11.217 6.453L6.932 556.879a25 25 0 0 0-.055 35.355 25 25 0 0 0 35.355.053L593.068 43.121a25 25 0 0 0 .055-35.355 25 25 0 0 0-15.488-7.25M347.797 325.098a25 25 0 0 0-15.49 7.24 25 25 0 0 0 .03 35.355l225 224.584a25 25 0 0 0 35.356-.033 25 25 0 0 0-.03-35.355l-225-224.582a25 25 0 0 0-11.216-6.461 25 25 0 0 0-8.65-.748"/>
+</svg>

img/cross_small.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="412.5" height="412.5">
+    <path d="M25 0a25 25 0 0 0-6.47.852 25 25 0 0 0-11.208 6.47 25 25 0 0 0 0 35.356l125 125a25 25 0 0 0 35.356 0 25 25 0 0 0 0-35.356l-125-125A25 25 0 0 0 25 0m364.68.096a25 25 0 0 0-8.65.756 25 25 0 0 0-11.208 6.47l-362.5 362.5a25 25 0 0 0 0 35.356 25 25 0 0 0 35.356 0l362.5-362.5a25 25 0 0 0 0-35.356A25 25 0 0 0 389.68.096M262.5 237.5a25 25 0 0 0-6.47.852 25 25 0 0 0-11.208 6.47 25 25 0 0 0 0 35.356l125 125a25 25 0 0 0 35.356 0 25 25 0 0 0 0-35.356l-125-125A25 25 0 0 0 262.5 237.5"/>
+</svg>

img/cup_1.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M151.773.063a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.82 27.637a75.07 75.07 0 0 0 0 67.086l2.644 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.175 33.543 25 25 0 0 0 33.545-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 161.18 2.637a25 25 0 0 0-9.407-2.574m100 0a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.82 27.637a75.07 75.07 0 0 0 0 67.086l2.644 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.175 33.543 25 25 0 0 0 33.545-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 261.18 2.637a25 25 0 0 0-9.407-2.574m100 0a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.819 27.637a75.07 75.07 0 0 0 0 67.086l2.643 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.177 33.543 25 25 0 0 0 33.543-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 361.18 2.637a25 25 0 0 0-9.407-2.574m48.221 224.939-325.002.066c-40.818.008-70.027 42.55-55.37 80.647l89.09 231.592c14.502 37.694 50.899 62.695 91.286 62.695H300c40.387 0 76.784-25.001 91.285-62.695l89.1-231.592c7.13-18.536 24.755-30.643 44.615-30.643 14.103 0 25.002 10.899 25.002 25.002v23.963a57.19 57.19 0 0 1-30.9 50.854l-5.625 2.923a25 25 0 0 0-10.666 33.706 25 25 0 0 0 33.712 10.666l5.625-2.915C577.652 400.838 600 364.041 600 324.037v-23.963c0-41.125-33.875-75-75-75-40.387 0-76.784 24.993-91.285 62.688l-89.1 231.592c-7.13 18.535-24.755 30.642-44.615 30.642H199.998c-19.86 0-37.486-12.107-44.617-30.642l-89.1-231.592c-2.65-6.89 1.344-12.696 8.727-12.698l324.994-.066a25 25 0 0 0 24.996-25.002 25 25 0 0 0-25.004-24.994" style="stroke-width:3.77953"/>
+</svg>

img/cup_2.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M151.773.063a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.82 27.637a75.07 75.07 0 0 0 0 67.086l2.644 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.175 33.543 25 25 0 0 0 33.545-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 161.18 2.637a25 25 0 0 0-9.407-2.574m100 0a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.82 27.637a75.07 75.07 0 0 0 0 67.086l2.644 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.175 33.543 25 25 0 0 0 33.545-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 261.18 2.637a25 25 0 0 0-9.407-2.574m100 0a25 25 0 0 0-9.675 1.222 25 25 0 0 0-14.461 12.535l-13.819 27.637a75.07 75.07 0 0 0 0 67.086l2.643 5.28a24.94 24.94 0 0 1 0 22.359l-13.82 27.638a25 25 0 0 0 11.177 33.543 25 25 0 0 0 33.543-11.183l13.819-27.639a75.05 75.05 0 0 0 0-67.078l-2.635-5.285a24.94 24.94 0 0 1 0-22.362l13.818-27.636A25 25 0 0 0 361.18 2.637a25 25 0 0 0-9.407-2.574m48.221 249.949-325.002.066 1.506.043c-42.822-2.572-77.719 36.651-70.18 78.883a25 25 0 0 0 .303 1.476c26.464 109.63 127.365 194.602 243.38 194.602 116.017 0 216.912-84.971 243.376-194.602a25 25 0 0 0 .295-1.416c2.886-15.95 15.938-27.567 32.021-28.85 13.742.375 24.309 11.017 24.309 24.872v23.96a57.19 57.19 0 0 1-30.9 50.854l-5.626 2.924a25 25 0 0 0-10.666 33.705 25 25 0 0 0 33.713 10.666l5.625-2.922C577.652 425.84 600 389.05 600 349.047v-23.961c0-41.125-33.875-75-75-75a25 25 0 0 0-1.447.043c-39.24 2.272-72.083 31.356-79.082 70.033l.302-1.41c-20.961 86.837-103.608 156.334-194.771 156.334-90.812 0-173.093-68.99-194.445-155.36-1.719-11.293 6.426-20.387 17.945-19.695a25 25 0 0 0 1.506.043l324.994-.066a25 25 0 0 0 24.996-25.002 25 25 0 0 0-25.002-24.994ZM70.115 550a25 25 0 0 0-25 25 25 25 0 0 0 25 25h359.77a25 25 0 0 0 25-25 25 25 0 0 0-25-25Z" style="stroke-width:3.77953"/>
+</svg>

img/dect.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="350" height="600">
+    <path d="M325.002 0A25 25 0 0 0 300 25.002V75c0 14.103-10.899 25.002-25.002 25.002H75c-41.125 0-75 33.875-75 75V525c0 41.125 33.875 75 75 75h199.998c41.125 0 75-33.875 75-75V199.998a25 25 0 0 0-24.996-24.996A25 25 0 0 0 300 199.998V525c0 14.103-10.899 25.002-25.002 25.002H75c-14.103 0-25.002-10.899-25.002-25.002V175.002C49.998 160.899 60.897 150 75 150h199.998c41.125 0 75-33.875 75-75V25.002A25 25 0 0 0 325.002 0m-175 175c-41.125 0-75 33.875-75 75v25.002c0 41.125 33.875 75 75 75H200c41.125 0 75-33.875 75-75v-75A25 25 0 0 0 249.998 175a25 25 0 0 0-24.996 25.002v75c0 14.103-10.899 24.996-25.002 24.996h-49.998c-14.103 0-25.002-10.893-25.002-24.996V250c0-14.103 10.899-25.002 25.002-25.002h24.996A25 25 0 0 0 200 200.002 25 25 0 0 0 174.998 175ZM100 400a25 25 0 0 0-25 25 25 25 0 0 0 25 25h150a25 25 0 0 0 25-25 25 25 0 0 0-25-25zm0 70a25 25 0 0 0-25 25 25 25 0 0 0 25 25h150a25 25 0 0 0 25-25 25 25 0 0 0-25-25z" style="stroke-width:3.77953"/>
+</svg>

img/export.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+
+# This script can be used to automatically export all project files
+# to ensure, they are a single path without any modifiers or other
+# inkscape-dependent things. It will also remove unnecessary things
+# from the SVGs. For this the script requires both inkscape and svgo
+# to be installed.
+
+for infile in ./project_files/*.svg
+do
+  outfile="./$(basename "$infile")"
+
+  inkscape --actions="select-by-element: svg;
+                      object-set-attribute: id, svg;
+                      select-clear;
+                      select-all: layers;
+                      selection-ungroup;
+                      select-clear;
+                      select-all: no-groups;
+                      object-stroke-to-path;
+                      path-union;
+                      object-set-attribute: id,path;
+                      object-set-attribute: style,;
+                      selection-group;
+                      selection-ungroup;
+                      export-plain-svg;" \
+           --export-filename "$outfile" \
+           --vacuum-defs "$infile"
+
+  svgo --pretty "$outfile"
+done

img/external.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="600" height="600">
+    <path d="M262.5 0c-34.222 0-62.502 28.28-62.502 62.502s28.28 62.496 62.502 62.496h162.498c3.763 0 4.61 1.35 5.604 3.75s1.346 3.945-1.315 6.606l-321.96 321.968a25 25 0 0 0 0 35.352 25 25 0 0 0 35.35 0l321.97-321.961c16.91-16.91 20.112-41.877 12.15-61.1C468.834 90.39 448.912 75 424.998 75H262.5c-7.2 0-12.498-5.298-12.498-12.498S255.3 49.998 262.5 49.998H525c14.103 0 25.002 10.899 25.002 25.002v250.002a25 25 0 0 0 24.996 24.996A25 25 0 0 0 600 325.002V75c0-41.125-33.875-75-75-75ZM75 75c-41.125 0-75 33.875-75 75v375c0 41.125 33.875 75 75 75h375c41.125 0 75-33.875 75-75V424.998a25 25 0 0 0-25.002-24.996 25 25 0 0 0-24.996 24.996V525c0 14.103-10.899 25.002-25.002 25.002H75c-14.103 0-25.002-10.899-25.002-25.002V150c0-14.103 10.899-25.002 25.002-25.002h49.998A25 25 0 0 0 150 100.002 25 25 0 0 0 124.998 75Z" style="stroke-width:3.77953"/>
+</svg>

img/fairydust.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="387.074" height="600">
+    <path d="M193.537 0c-16.56 0-33.118 5.21-47 15.621l-36.002 26.994a134.8 134.8 0 0 0-50.404 77.303l-6.887 29.625a221.3 221.3 0 0 0-2.414 88.346L62 301.543a74.85 74.85 0 0 1-11.45 54.486l-5.624 8.436A256 256 0 0 0 9.58 444.359L3.984 466.75a133.52 133.52 0 0 0 9.973 91.814l5.479 11.014c19.46 39.138 78.74 39.138 98.2 0l5.477-11.014a597 597 0 0 0 31.787-76.992l-.066.207c4.198-12.242 15.545-20.271 28.486-20.16h20.219c13.223 0 24.748 8.31 28.93 20.854l.008.015a590 590 0 0 0 31.49 76.092l5.47 11c19.46 39.137 78.742 39.137 98.202 0l5.476-11.016a133.52 133.52 0 0 0 9.975-91.814l-5.596-22.391a256 256 0 0 0-35.345-79.893l-5.625-8.437a73.98 73.98 0 0 1-11.235-54.295l10.69-58.789a223.1 223.1 0 0 0-1.713-88.302l-7.649-34.399a133.16 133.16 0 0 0-50.078-77.629l-36.002-26.994C226.656 5.21 210.097 0 193.537 0m0 49.902c5.96 0 11.919 1.902 17 5.713l36.002 27.002a83.1 83.1 0 0 1 31.27 48.47l7.648 34.407a173.1 173.1 0 0 1 1.328 68.504l-10.69 58.79a124.06 124.06 0 0 0 18.833 90.982l5.617 8.43a206 206 0 0 1 28.441 64.288l5.596 22.389a83.47 83.47 0 0 1-6.236 57.424l-5.479 11.021c-2.485 4.998-6.173 4.998-8.658 0l-5.479-11.021-.006-.015a540 540 0 0 1-28.82-69.627l-.008-.023c-10.933-32.766-41.813-55.023-76.357-55.023h-19.791c-34.27-.295-65.094 21.528-76.211 53.947l-.067.199A547 547 0 0 1 78.341 536.3l-5.476 11.022c-2.485 4.998-6.173 4.998-8.658 0L58.728 536.3a83.47 83.47 0 0 1-6.236-57.424l5.594-22.388a206 206 0 0 1 28.443-64.29l5.617-8.43a124.93 124.93 0 0 0 19.098-90.87l-11.17-63.654a171.3 171.3 0 0 1 1.87-68.379l6.886-29.63a84.74 84.74 0 0 1 31.705-48.618l36.002-27.002c5.082-3.81 11.04-5.713 17-5.713M193.525 126c-41.125 0-75 33.875-75 75s33.875 75 75 75 75-33.875 75-75-33.874-75-75-75m0 50c14.104 0 25 10.897 25 25s-10.896 25-25 25-25-10.897-25-25 10.897-25 25-25m0 310.617a25 25 0 0 0-25 25v63.967a25 25 0 0 0 25 25 25 25 0 0 0 25-25v-63.967a25 25 0 0 0-25-25" style="stroke-width:3.77952"/>
+</svg>

img/file-export.svg

@@ -1 +1,6 @@
-<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M6,2C4.89,2 4,2.9 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13,3.5L18.5,9H13M8.93,12.22H16V19.29L13.88,17.17L11.05,20L8.22,17.17L11.05,14.35" /></svg>
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24"
+     viewBox="0 0 24 24">
+    <path d="M6,2C4.89,2 4,2.9 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M13,3.5L18.5,9H13M8.93,12.22H16V19.29L13.88,17.17L11.05,20L8.22,17.17L11.05,14.35"/>
+</svg>

img/flag.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="384.92" height="600">
+    <path d="M60.115.084C28.094 1.748.015 28.487.014 62.588L-.002 575a25.017 24.983 0 0 0 25.016 24.98A25.017 24.983 0 0 0 50.035 575l.016-512.412c0-9.262 7.646-14.874 16.498-12.111l263.558 82.25c4.644 1.449 4.789 3.295 4.782 6.507-.007 3.213-.153 5.054-4.803 6.483l-235.44 72.34a25.017 24.983 0 0 0-16.558 31.23 25.017 24.983 0 0 0 31.271 16.531l235.438-72.347c25.233-7.754 40.07-31.614 40.119-54.131.05-22.518-14.686-46.44-39.885-54.305L81.473 2.785A61 61 0 0 0 60.115.084" style="stroke-width:3.87606"/>
+</svg>

img/gluten.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="315.625" height="600">
+    <path d="M151.52.053A25 25 0 0 0 139.26 4.2a25 25 0 0 0-6.94 34.664l33.36 50.043c15.85 23.776 45.37 34.84 72.947 27.35l58.553-15.9a25 25 0 0 0 17.568-30.68 25 25 0 0 0-30.678-17.576L225.523 68.01c-7.009 1.904-14.21-.793-18.24-6.836l-33.36-50.041A25 25 0 0 0 158.032.486a25 25 0 0 0-6.511-.433m-37.5 99.996a25 25 0 0 0-12.26 4.146 25 25 0 0 0-6.94 34.672l33.36 50.035c15.85 23.777 45.37 34.849 72.947 27.358l58.553-15.9a25 25 0 0 0 17.568-30.688 25 25 0 0 0-30.678-17.568l-58.547 15.908c-7.009 1.904-14.21-.8-18.24-6.844l-33.36-50.033a25 25 0 0 0-15.892-10.653 25 25 0 0 0-6.511-.433M76.52 200.05a25 25 0 0 0-12.26 4.146 25 25 0 0 0-6.94 34.674l33.36 50.033c15.85 23.776 45.37 34.849 72.947 27.358l58.553-15.908a25 25 0 0 0 17.568-30.678 25 25 0 0 0-30.678-17.57l-58.547 15.902c-7.009 1.904-14.21-.793-18.24-6.836l-33.36-50.043a25 25 0 0 0-15.892-10.645 25 25 0 0 0-6.511-.433m-37.5 100.002a25 25 0 0 0-12.26 4.148 25 25 0 0 0-6.94 34.664l33.36 50.043a33.5 33.5 0 0 1 3.506 30.406L1.594 566.221a25 25 0 0 0 14.63 32.185 25 25 0 0 0 32.186-14.63l55.092-146.909c9.428-25.143 6.176-53.35-8.719-75.693l-33.36-50.041a25 25 0 0 0-15.892-10.647 25 25 0 0 0-6.511-.433" style="stroke-width:3.77953"/>
+</svg>

img/hackertours.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M350.002-.002A213.3 213.3 0 0 0 244.184 28.1l-89.041 50.884a204.7 204.7 0 0 0-76.159 76.159L28.1 244.183A213.3 213.3 0 0 0-.002 350.003v49.613c-.503 4.886-.603 9.706-.053 14.365 4.766 40.358 46.799 70.319 87.934 57.196a25 25 0 0 0 3.58-1.453 175.02 175.02 0 0 0 78.264-78.264L175 380.902A125 125 0 0 1 230.902 325l11.45-5.729c16.634-8.317 36.47-5.095 49.62 8.055l265.35 265.348a25 25 0 0 0 35.352 0 25 25 0 0 0 0-35.352l-265.348-265.35c-28.233-28.232-71.622-35.275-107.334-17.42l-11.449 5.73a175 175 0 0 0-78.262 78.261l-5.28 10.557C113.3 392.506 94.46 411.47 71.345 423.645c-12.973 3.242-23.769-6.184-21.645-19.791a25 25 0 0 0 .303-3.854v-49.998c0-28.416 7.413-56.336 21.512-81.008l50.882-89.049a154.64 154.64 0 0 1 57.55-57.549l89.048-50.882a163.27 163.27 0 0 1 81.008-21.512H400c16.782 0 26.407 15.52 19.178 30.539-11.229 19.473-28.33 34.893-48.934 43.922a25 25 0 0 0-1.144.539l-10.557 5.28a175 175 0 0 0-78.262 78.261l-2.642 5.28a25 25 0 0 0 11.183 33.534 25 25 0 0 0 33.535-11.175l2.643-5.28A125 125 0 0 1 380.902 175l10.557-5.277-1.145.539a155.4 155.4 0 0 0 72.913-65.885 25 25 0 0 0 .59-1.113C487.07 56.756 451.996-.002 400-.002Z" style="stroke-width:3.77953"/>
+</svg>

img/hare_head.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600">
+    <path d="M215.691.084c-24.836-1.325-49.965 13.31-58.503 38.922l-9.073 27.21a24.977 24.977 0 0 0 15.795 31.595 24.977 24.977 0 0 0 31.596-15.795l9.07-27.211c1.93-5.788 7.246-7.357 12.014-3.543l46.265 37.006a103.36 103.36 0 0 1 36.801 60.455l5.516 27.58c7.422 37.103 34.236 67.47 70.135 79.433l54.43 18.141a167.1 167.1 0 0 1 66.962 42.027l28.672 29.479 1.193.959c12.595 10.12 20.88 24.551 23.395 40.465-.36 18.612-10.84 35.453-27.549 43.859l-9.857 4.959c-35.007 17.61-50.963 59.597-36.483 96.01l13.164 33.101a219 219 0 0 1 6.116 17.498 24.977 24.977 0 0 0 31.14 16.672 24.977 24.977 0 0 0 16.67-31.14 269 269 0 0 0-7.508-21.489l-13.164-33.101c-5.076-12.766.236-26.75 12.514-32.926l9.857-4.959c34.028-17.118 55.455-52.207 55.137-90.295l-.012-1.53-.2-1.517c-3.747-28.48-18.106-54.447-40.055-72.888l-27.22-27.987a217.1 217.1 0 0 0-86.98-54.588l-54.43-18.14a55.5 55.5 0 0 1-36.943-41.842l-5.517-27.58a153.36 153.36 0 0 0-54.582-89.666L247.79 12.252c-9.583-7.665-20.81-11.566-32.1-12.168m-91.19 127.154c-9.2-.424-18.494.116-27.73 1.655l-49.019 8.168c-39.144 6.522-60.25 52.218-39.83 86.246l22.476 37.455a125.3 125.3 0 0 0 89.68 59.535l72.541 10.361c18.588 2.655 33.565 16.162 38.117 34.37l.899 3.593.23.73c6.79 21.462 2.901 44.774-10.398 62.901-16.922 19.734-42.273 40.916-84.22 72.342a867 867 0 0 0-66.485 51.414 24.977 24.977 0 0 0-2.77 35.213 24.977 24.977 0 0 0 35.213 2.771 817 817 0 0 1 63.168-48.82l.346-.242.338-.252c43.25-32.397 71.604-55.472 93.021-80.658l.498-.584.46-.616c22.979-30.653 29.946-70.448 18.874-107.06l-.006-.024-.707-2.826c-9.444-37.771-40.97-66.198-79.515-71.703l-72.541-10.361a75.23 75.23 0 0 1-53.91-35.787l-22.477-37.455c-3.158-5.263-.852-10.26 5.209-11.27l49.02-8.168a81.88 81.88 0 0 1 64.63 16.83l82.04 65.62a24.977 24.977 0 0 0 35.105-3.903 24.977 24.977 0 0 0-3.904-35.108l-82.04-65.619a131.9 131.9 0 0 0-76.312-28.748"/>
+</svg>