Use semantic HTML5 elements for footer

This commit is contained in:
alistair3149 2020-06-03 01:07:40 -04:00
parent 2c6962f2be
commit 2f4827b785
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
3 changed files with 31 additions and 19 deletions

View file

@ -27,25 +27,29 @@
</div>
{{/html-lastmodified}}
<div id="footer-content">
<div id="footer-sitetitle" class="mw-wiki-title">{{{msg-sitetitle}}}</div>
<div id="footer-desc">{{{msg-citizen-footer-desc}}}</div>
<h2 id="footer-sitetitle" class="mw-wiki-title">{{{msg-sitetitle}}}</h2>
<p id="footer-desc">{{{msg-citizen-footer-desc}}}</p>
{{#array-footer-rows}}
<ul id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
{{#array-items}}
<li id="{{id}}">{{{html}}}</li>
{{/array-items}}
</ul>
{{/array-footer-rows}}
</div>
<div id="footer-bottom">
<div id="footer-bottom-content">
<div id="footer-tagline">{{{msg-citizen-footer-tagline}}}</div>
{{#array-footer-icons}}
<ul id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
<nav id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
<ul>
{{#array-items}}
<li id="{{id}}">{{{html}}}</li>
{{/array-items}}
</ul>
</nav>
{{/array-footer-rows}}
</div>
<div id="footer-bottom">
<div id="footer-bottom-content">
<span id="footer-tagline">{{{msg-citizen-footer-tagline}}}</span>
{{#array-footer-icons}}
<nav id="{{id}}" {{#className}}class="{{.}}"{{/className}}>
<ul>
{{#array-items}}
<li id="{{id}}">{{{html}}}</li>
{{/array-items}}
</ul>
</nav>
{{/array-footer-icons}}
</div>
</div>

View file

@ -229,6 +229,7 @@ a {
.mw-wiki-title {
font-family: @fonts-secondary !important;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;

View file

@ -53,6 +53,12 @@
}
}
ul {
margin: 0;
display: flex;
flex-wrap: wrap;
}
li {
list-style: none;
}
@ -65,11 +71,6 @@
max-width: @footer-width;
display: flex;
flex-direction: column;
> ul,
> div {
margin: @margin-side / 2 0;
}
}
&-bottom {
@ -88,10 +89,15 @@
}
&-sitetitle {
margin: @margin-side / 2 0;
color: @base-90;
font-size: 20px;
}
&-desc {
margin: @margin-side / 2 0;
}
&-places {
margin: 0 -@margin-side !important;
display: flex;
@ -104,6 +110,7 @@
}
&-info {
margin-top: @margin-side / 2;
opacity: 0.5;
font-size: 12px;