Overview
Comment:Move menu bar to bottom of screen on mobile, improve HTML for menu for navigation with text browser and accessibility
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | blocks
Files: files | file ages | folders
SHA3-256: 6152ca926405c92be779025f9a76d244187e7ba92daeca7ccebfded39ffd0b48
User & Date: bohwaz on 2022-04-26 02:20:18
Other Links: branch diff | manifest | tags
Context
2022-05-02
11:56
Merge with trunk check-in: 56711fffde user: bohwaz tags: blocks
2022-04-26
02:20
Move menu bar to bottom of screen on mobile, improve HTML for menu for navigation with text browser and accessibility check-in: 6152ca9264 user: bohwaz tags: blocks
2022-04-25
01:43
Update icon font with new icons, use {icon} function in _head.tpl check-in: 4d9cad0c5a user: bohwaz tags: blocks
Changes

Modified src/include/lib/Garradin/Template.php from [4d70ce41d4] to [93e2e7d79d].

186
187
188
189
190
191
192




193
194
195
196
197
198
199
		}

		return '<p class="block error">' . $this->escape($params['message']) . '</p>';
	}

	protected function widgetIcon(array $params): string
	{




		$attributes = array_diff_key($params, ['shape']);
		$attributes = array_map(fn($v, $k) => sprintf('%s="%s"', $k, $this->escape($v)),
			$attributes, array_keys($attributes));

		$attributes = implode(' ', $attributes);

		return sprintf('<b class="icn" %s>%s</b>', $attributes, Utils::iconUnicode($params['shape']));







>
>
>
>







186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
		}

		return '<p class="block error">' . $this->escape($params['message']) . '</p>';
	}

	protected function widgetIcon(array $params): string
	{
		if (isset($params['html']) && $params['html'] == false) {
			return Utils::iconUnicode($params['shape']);
		}

		$attributes = array_diff_key($params, ['shape']);
		$attributes = array_map(fn($v, $k) => sprintf('%s="%s"', $k, $this->escape($v)),
			$attributes, array_keys($attributes));

		$attributes = implode(' ', $attributes);

		return sprintf('<b class="icn" %s>%s</b>', $attributes, Utils::iconUnicode($params['shape']));

Modified src/templates/admin/_head.tpl from [d0b1bdfd4c] to [db4d97f3be].

49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
        </figure>
        {/if}
    <ul>
    {if $is_logged}
    <?php
    $current_parent = substr($current, 0, strpos($current, '/'));
    ?>
        <li class="home{if $current == 'home'} current{elseif $current_parent == 'home'} current_parent{/if}">
            <a href="{$admin_url}">{icon shape="home"}<i> Accueil</i></a>
            {if !empty($plugins_menu)}
                <ul>
                {foreach from=$plugins_menu key="plugin_id" item="name"}
                    <li class="plugins {if $current == sprintf("plugin_%s", $plugin_id)} current{/if}"><a href="{plugin_url id=$plugin_id}">{$name}</a></li>
                {/foreach}
                </ul>
            {/if}
        </li>
        {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_READ)}
            <li class="member list{if $current == 'membres'} current{elseif $current_parent == 'membres'} current_parent{/if}"><a href="{$admin_url}membres/">{icon shape="users"}<i> Membres</i></a>
            <ul>
            {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)}
                <li class="member new{if $current == 'membres/ajouter'} current{/if}"><a href="{$admin_url}membres/ajouter.php">Ajouter</a></li>
            {/if}
                <li class="{if $current == 'membres/services'} current{/if}"><a href="{$admin_url}services/">Activités &amp; cotisations</a></li>
            {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)}
                <li class="member message{if $current == 'membres/message'} current{/if}"><a href="{$admin_url}membres/message_collectif.php">Message collectif</a></li>
            {/if}
            </ul>
            </li>
        {/if}
        {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_READ)}
            <li class="{if $current == 'acc'} current{elseif $current_parent == 'acc'} current_parent{/if}"><a href="{$admin_url}acc/">{icon shape="money"}<i> Comptabilité</i></a>
            <ul>
            {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)}
                <li class="{if $current == 'acc/new'} current{/if}"><a href="{$admin_url}acc/transactions/new.php">Saisie</a></li>
            {/if}
                <li class="{if $current == 'acc/accounts'} current{/if}"><a href="{$admin_url}acc/accounts/">Comptes</a></li>
                <li class="{if $current == 'acc/simple'} current{/if}"><a href="{$admin_url}acc/accounts/simple.php">Suivi des écritures</a></li>
                <li class="{if $current == 'acc/years'} current{/if}"><a href="{$admin_url}acc/years/">Exercices &amp; rapports</a></li>
            {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)}
                <li class="{if $current == 'acc/charts'} current{/if}"><a href="{$admin_url}acc/charts/">Plans comptables</a></li>
            {/if}
            </ul>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_DOCUMENTS, $session::ACCESS_READ)}
            <li class="{if $current == 'docs'} current{elseif $current_parent == 'docs'} current_parent{/if}"><a href="{$admin_url}docs/">{icon shape="folder"}<i> Documents</i></a>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_WEB, $session::ACCESS_READ)}
            <li class="{if $current == 'web'} current{elseif $current_parent == 'web'} current_parent{/if}"><a href="{$admin_url}web/">{icon shape="globe"}<i> Site web</i></a>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_CONFIG, $session::ACCESS_ADMIN)}
            <li class="main config{if $current == 'config'} current{elseif $current_parent == 'config'} current_parent{/if}"><a href="{$admin_url}config/">{icon shape="settings"}<i> Configuration</i></a>
        {/if}

        <li class="{if $current == 'me'} current{elseif $current_parent == 'me'} current_parent{/if}">
            <a href="{$admin_url}me/">{icon shape="user"}<i> Mes infos personnelles</i></a>
            <ul>
                <li{if $current == 'me/services'}  class="current"{/if}><a href="{$admin_url}me/services.php">Mes activités &amp; cotisations</a></li>
            </ul>
        </li>

        {if !defined('Garradin\LOCAL_LOGIN') || !LOCAL_LOGIN}
            <li class="logout"><a href="{$admin_url}logout.php">{icon shape="logout"}<i> Déconnexion</i></a></li>
        {/if}

        {if $help_url}
        <li>
            <a href="{$help_url}" target="_blank">{icon shape="help"}<i> Aide</i></a>
        </li>
        {/if}

    {elseif !defined('Garradin\INSTALL_PROCESS')}
        <li><a href="{if $config.site_asso}{$config.site_asso}{else}{$www_url}{/if}">&larr; Retour au site</a></li>
        <li><a href="{$admin_url}">Connexion</a>
            <ul>







|
<









|












|















|




|




|


|
<






|




|







49
50
51
52
53
54
55
56

57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108

109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
        </figure>
        {/if}
    <ul>
    {if $is_logged}
    <?php
    $current_parent = substr($current, 0, strpos($current, '/'));
    ?>
        <li class="home{if $current == 'home'} current{elseif $current_parent == 'home'} current_parent{/if}"><h3><a href="{$admin_url}"><b data-icn="{icon html=false shape="home"}"></b><span>Accueil</span></a></h3>

            {if !empty($plugins_menu)}
                <ul>
                {foreach from=$plugins_menu key="plugin_id" item="name"}
                    <li class="plugins {if $current == sprintf("plugin_%s", $plugin_id)} current{/if}"><a href="{plugin_url id=$plugin_id}">{$name}</a></li>
                {/foreach}
                </ul>
            {/if}
        </li>
        {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_READ)}
            <li class="member list{if $current == 'membres'} current{elseif $current_parent == 'membres'} current_parent{/if}"><h3><a href="{$admin_url}membres/"><b data-icn="{icon html=false shape="users"}"></b></b><span>Membres</span></a></h3>
            <ul>
            {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)}
                <li class="member new{if $current == 'membres/ajouter'} current{/if}"><a href="{$admin_url}membres/ajouter.php">Ajouter</a></li>
            {/if}
                <li class="{if $current == 'membres/services'} current{/if}"><a href="{$admin_url}services/">Activités &amp; cotisations</a></li>
            {if $session->canAccess($session::SECTION_USERS, $session::ACCESS_WRITE)}
                <li class="member message{if $current == 'membres/message'} current{/if}"><a href="{$admin_url}membres/message_collectif.php">Message collectif</a></li>
            {/if}
            </ul>
            </li>
        {/if}
        {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_READ)}
            <li class="{if $current == 'acc'} current{elseif $current_parent == 'acc'} current_parent{/if}"><h3><a href="{$admin_url}acc/"><b data-icn="{icon html=false shape="money"}"></b><span>Comptabilité</span></a></h3>
            <ul>
            {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)}
                <li class="{if $current == 'acc/new'} current{/if}"><a href="{$admin_url}acc/transactions/new.php">Saisie</a></li>
            {/if}
                <li class="{if $current == 'acc/accounts'} current{/if}"><a href="{$admin_url}acc/accounts/">Comptes</a></li>
                <li class="{if $current == 'acc/simple'} current{/if}"><a href="{$admin_url}acc/accounts/simple.php">Suivi des écritures</a></li>
                <li class="{if $current == 'acc/years'} current{/if}"><a href="{$admin_url}acc/years/">Exercices &amp; rapports</a></li>
            {if $session->canAccess($session::SECTION_ACCOUNTING, $session::ACCESS_WRITE)}
                <li class="{if $current == 'acc/charts'} current{/if}"><a href="{$admin_url}acc/charts/">Plans comptables</a></li>
            {/if}
            </ul>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_DOCUMENTS, $session::ACCESS_READ)}
            <li class="{if $current == 'docs'} current{elseif $current_parent == 'docs'} current_parent{/if}"><h3><a href="{$admin_url}docs/"><b data-icn="{icon html=false shape="folder"}"></b><span>Documents</span></a></h3>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_WEB, $session::ACCESS_READ)}
            <li class="{if $current == 'web'} current{elseif $current_parent == 'web'} current_parent{/if}"><h3><a href="{$admin_url}web/"><b data-icn="{icon html=false shape="globe"}"></b><span>Site web</span></a></h3>
            </li>
        {/if}

        {if $session->canAccess($session::SECTION_CONFIG, $session::ACCESS_ADMIN)}
            <li class="main config{if $current == 'config'} current{elseif $current_parent == 'config'} current_parent{/if}"><h3><a href="{$admin_url}config/"><b data-icn="{icon html=false shape="settings"}"></b><span>Configuration</span></a></h3>
        {/if}

        <li class="{if $current == 'me'} current{elseif $current_parent == 'me'} current_parent{/if}"><h3><a href="{$admin_url}me/"><b data-icn="{icon html=false shape="user"}"></b><span> Mes infos personnelles</span></a></h3>

            <ul>
                <li{if $current == 'me/services'}  class="current"{/if}><a href="{$admin_url}me/services.php">Mes activités &amp; cotisations</a></li>
            </ul>
        </li>

        {if !defined('Garradin\LOCAL_LOGIN') || !LOCAL_LOGIN}
            <li class="logout"><h3><a href="{$admin_url}logout.php"><b data-icn="{icon html=false shape="logout"}"></b><span>Déconnexion</span></a></h3></li>
        {/if}

        {if $help_url}
        <li>
            <h3><a href="{$help_url}" target="_blank"><b data-icn="{icon html=false shape="help"}"></b><span>Aide</span></a></h3>
        </li>
        {/if}

    {elseif !defined('Garradin\INSTALL_PROCESS')}
        <li><a href="{if $config.site_asso}{$config.site_asso}{else}{$www_url}{/if}">&larr; Retour au site</a></li>
        <li><a href="{$admin_url}">Connexion</a>
            <ul>

Modified src/www/admin/static/handheld.css from [4baefa0756] to [95a37e2987].

12
13
14
15
16
17
18




19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54




55
56
57
58
59
60
61
62
63
64
65
66
67
68

69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93





94
95
96
97
98

99
100
101

102
103
104
105
106
107

108
109
110
111
112
113

114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
    max-width: calc(100% - 2em);
    width: calc(95% - 2em);
}

input[size] {
	width: auto;
}





a.icn-btn, input[type=submit], input[type=button], button, input[type=file] {
	padding: .4em .6em;
}

a.icn-btn {
	white-space: normal;
}

nav.breadcrumbs .quota {
	float: none;
}

nav.breadcrumbs ul {
	display: block;
	margin: .8em 0;
}

.header h1 {
	margin: 0;
	text-align: center;
	font-size: 1.2em;
	margin: 7em 0 .3em 0;
}

.header .menu {
	background: none !important;
	position: fixed;
	overflow: visible;
	bottom: inherit;
	z-index: 10000;
	margin: 0;
	margin-bottom: 3em;
	width: 100%;
	padding: 0;
	display: block;




}

.header .menu .logo {
	display: none;
}

.header .menu *, .header .menu a {
	margin: 0;
	padding: 0;
}

.header .menu > ul {
	background: rgb(var(--gMainColor));
	flex-wrap: nowrap;

	display: flex;
	align-items: center;
}

.header .menu > ul > li {
	flex-grow: 1;
	text-align: center;
	display: inline-flex;
}

.header .menu > ul > li > a {
	display: inline-block;
	width: 100%;
	text-align: center;
}

.header .menu > ul > li > a i {
	display: none;
}

.header .menu > ul > li > ul {
	display: none;
}

.header .menu > ul > li > a b {





	float: none;
	display: inline-block;
	color: #fff;
	width: 20pt;
	height: 14pt;

	padding: 10pt 0;
	line-height: 20pt;
	cursor: pointer;

}

.header .menu li.current_parent > a {
	background: #fff;
}


.header .menu > ul > li.current b {
	color: rgb(var(--gSecondColor));
}

.header .menu > ul > li.current_parent b {
	color: rgb(var(--gMainColor));

}

.header .menu > ul > li.current > ul, .header .menu > ul > li.current_parent > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: absolute;
	top: 30pt;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.75);
	border-bottom: .2rem solid rgba(var(--gMainColor), 0.5);
}

.header .menu > ul > li.current > ul li, .header .menu > ul > li.current_parent > ul li {
	text-align: center;
	display: block;

}

.header .menu > ul > li.current > ul a, .header .menu > ul > li.current_parent > ul a {
	background: rgb(var(--gSecondColor), 0.3);
	border-radius: .5em;
	margin: .3rem;
	color: rgb(var(--gMainColor));
	padding: .4rem .6rem;
	font-size: 1em;
	font-weight: normal;
}

.header .menu > ul > li > ul li.current a {
	background: rgb(var(--gSecondColor));
	color: #fff;
}

main {
	margin: 0;
	padding: .1em;
}








>
>
>
>



















|


<









<
|


>
>
>
>














>
|



<
<
<
<
<
<
|
|
<
<


|







|
>
>
>
>
>

|
|
<
|
>

|
|
>


|
|


>
|
|
<
<
<
|
>







|


|
<





>



|

<

|





|
|







12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

45
46
47
48
49
50
51
52
53

54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79






80
81


82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100

101
102
103
104
105
106
107
108
109
110
111
112
113
114
115



116
117
118
119
120
121
122
123
124
125
126
127
128

129
130
131
132
133
134
135
136
137
138
139

140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
    max-width: calc(100% - 2em);
    width: calc(95% - 2em);
}

input[size] {
	width: auto;
}

img {
	max-width: 100% !important;
}

a.icn-btn, input[type=submit], input[type=button], button, input[type=file] {
	padding: .4em .6em;
}

a.icn-btn {
	white-space: normal;
}

nav.breadcrumbs .quota {
	float: none;
}

nav.breadcrumbs ul {
	display: block;
	margin: .8em 0;
}

.header h1 {
	margin: 1em;
	text-align: center;
	font-size: 1.2em;

}

.header .menu {
	background: none !important;
	position: fixed;
	overflow: visible;
	bottom: inherit;
	z-index: 10000;
	margin: 0;

	width: 100vw;
	padding: 0;
	display: block;
	bottom: 0;
	top: inherit;
	left: 0;
	right: 0;
}

.header .menu .logo {
	display: none;
}

.header .menu *, .header .menu a {
	margin: 0;
	padding: 0;
}

.header .menu > ul {
	background: rgb(var(--gMainColor));
	flex-wrap: nowrap;
    grid-template: none / repeat(auto-fit, minmax(20px, 1fr));
    display: grid;
	align-items: center;
}







.header .menu > ul > li > h3 {
	display: inline;


}

.header .menu > ul > li > h3 a span {
	display: none;
}

.header .menu > ul > li > ul {
	display: none;
}

.header .menu h3 a {
	text-align: center;
	text-decoration: none !important;
}

.header .menu h3 b[data-icn]::before {
	float: none;
	display: block;
	position: relative;

	right: 0;
	margin: 0;
	padding: 10pt 0;
	line-height: 10pt;
	color: rgb(var(--gBgColor));
	font-size: 20pt;
}

.header .menu li.current_parent h3 a {
	background: rgb(var(--gBgColor));
}

.header .menu li.current h3 b[data-icn]::before,
.header .menu > ul > li.current_parent h3 b[data-icn]::before {
	background: rgb(var(--gSecondColor));



	color: rgb(var(--gBgColor));
	text-shadow: 0px 0px 5px rgb(var(--gTextColor)), 0px 0px 5px rgb(var(--gTextColor));
}

.header .menu > ul > li.current > ul, .header .menu > ul > li.current_parent > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	position: absolute;
	bottom: 30pt;
	left: 0;
	right: 0;
	background: rgb(var(--gSecondColor));

}

.header .menu > ul > li.current > ul li, .header .menu > ul > li.current_parent > ul li {
	text-align: center;
	display: block;
	margin: .3rem;
}

.header .menu > ul > li.current > ul a, .header .menu > ul > li.current_parent > ul a {
	background: rgb(var(--gBgColor));
	border-radius: .5em;

	color: rgb(var(--gMainColor));
	padding: .3rem .6rem;
	font-size: 1em;
	font-weight: normal;
}

.header .menu > ul > li > ul li.current a {
	background: rgb(var(--gMainColor));
	color: rgb(var(--gBgColor));
}

main {
	margin: 0;
	padding: .1em;
}

290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
	}

	#dialog > button {
		border: none;
		background: none;
	}

	body#popup main {
		margin: .2em;
	}

	dl.list {
		text-align: center;
	}

	table.statement td, table.statement tr {







|
|







293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
	}

	#dialog > button {
		border: none;
		background: none;
	}

	body main {
		padding-bottom: 7em;
	}

	dl.list {
		text-align: center;
	}

	table.statement td, table.statement tr {

Modified src/www/admin/static/styles/01-layout.css from [ebaa181ac4] to [f9bc121654].

100
101
102
103
104
105
106
107

108
109
110
111
112
113
114
115
}

.header .menu::-webkit-scrollbar-thumb {
    background: rgba(var(--gBgColor), 0.5);
    border-radius: 10px;
}

.header .menu i {

    font-style: normal;
}

.header .menu a {
    color: #fff;
    color: rgb(var(--gBgColor));
    font-weight: bold;
    padding: 0.4em 0.4em 0.4em 1em;







|
>
|







100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
}

.header .menu::-webkit-scrollbar-thumb {
    background: rgba(var(--gBgColor), 0.5);
    border-radius: 10px;
}

.header .menu h3 {
    font-weight: bold;
    font-size: inherit;
}

.header .menu a {
    color: #fff;
    color: rgb(var(--gBgColor));
    font-weight: bold;
    padding: 0.4em 0.4em 0.4em 1em;
124
125
126
127
128
129
130
131
132
133
134
135
136
137









138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
}

.header .menu li li a {
    font-size: 0.8em;
    padding-left: 2em;
}

.header .menu li.current > a {
    background: #fff;
    background: rgb(var(--gBgColor));
    color: rgb(var(--gMainColor));
}

.header .menu a b {









    float: right;
    text-decoration: none;
    margin-top: -.2em;
    font-size: 20pt;
    color: rgba(var(--gBgColor), .5);
    font-weight: normal;
}

.header .menu li.current > a b {
    color: rgba(var(--gSecondColor), 0.5);
}


ul.gallery {
    text-align: center;
}

ul.gallery li {
    display: inline-block;







|
<




|
>
>
>
>
>
>
>
>
>








|
|

<







125
126
127
128
129
130
131
132

133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157

158
159
160
161
162
163
164
}

.header .menu li li a {
    font-size: 0.8em;
    padding-left: 2em;
}

.header .menu li.current h3 a, .header .menu ul ul li.current a {

    background: rgb(var(--gBgColor));
    color: rgb(var(--gMainColor));
}

.header .menu h3 a {
    position: relative;
}

.header .menu h3 b[data-icn]::before {
    position: absolute;
    right: .4rem;
    content: attr(data-icn);
    display: block;
    font-family: "gicon";
    float: right;
    text-decoration: none;
    margin-top: -.2em;
    font-size: 20pt;
    color: rgba(var(--gBgColor), .5);
    font-weight: normal;
}

.header .menu li.current h3 b[data-icn]::before {
    color: rgba(var(--gMainColor));
}


ul.gallery {
    text-align: center;
}

ul.gallery li {
    display: inline-block;

Modified src/www/admin/static/styles/05-navigation.css from [320458c7a4] to [e12c8f555c].

21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
nav.tabs .sub .title {
    margin: 0 1em 0 -1em;
    font-weight: bold;
    padding: .1em .5em;
}

nav.tabs li {
    margin: 0 0.2em;
}

nav.tabs li a {
    display: inline-block;
    background: rgba(var(--gSecondColor), .5);
    border-radius: .5em .5em 0 0;
    padding: .1em .5em;







|







21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
nav.tabs .sub .title {
    margin: 0 1em 0 -1em;
    font-weight: bold;
    padding: .1em .5em;
}

nav.tabs li {
    margin: 0 0.2em; 
}

nav.tabs li a {
    display: inline-block;
    background: rgba(var(--gSecondColor), .5);
    border-radius: .5em .5em 0 0;
    padding: .1em .5em;
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
nav.tabs aside {
    float: right;
    max-width: 50%;
    text-align: right;
    clear: right;
}

nav.menu > b {
    font-weight: normal;
}

nav.menu {
    display: inline-block;
    position: relative;
}

nav.menu span {
    display: none;
}

nav.menu:hover span, nav.menu:active span {
    display: flex;
    position: absolute;
    flex-direction: column;
    text-align: left;
    background: rgb(var(--gBgColor));
    border-radius: .3em;
    padding: .3em;
    z-index: 1000;
    box-shadow: 2px 2px 5px var(--gLightBorderColor);
}







|



|




|



|










53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
nav.tabs aside {
    float: right;
    max-width: 50%;
    text-align: right;
    clear: right;
}

main nav.menu > b {
    font-weight: normal;
}

main nav.menu {
    display: inline-block;
    position: relative;
}

main nav.menu span {
    display: none;
}

main nav.menu:hover span, main nav.menu:active span {
    display: flex;
    position: absolute;
    flex-direction: column;
    text-align: left;
    background: rgb(var(--gBgColor));
    border-radius: .3em;
    padding: .3em;
    z-index: 1000;
    box-shadow: 2px 2px 5px var(--gLightBorderColor);
}