sabin/deus-gaming
1
0
Fork 0
forked from achmizs/deus-gaming
Code Issues Pull Requests Releases Wiki Activity

Mobile layout for nav UI

Browse Source
This commit is contained in:
Said Achmiz 2020-02-11 23:34:52 -05:00
parent 8a129fd1f0
commit 42633d9f85
2 changed files with 37 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/main.css
View File

@ -221,6 +221,28 @@ main nav a:active {
transform: scale(0.9);
}
/*=-------------------=*/
/*= Nav items (text). =*/
/*=-------------------=*/
@media only screen and (max-width: 520px) {
main nav a.text {
font-size: 0.625em;
padding-top: 0.375em;
}
main nav a.text::before {
content: attr(data-deus-icon);
display: block;
font-family: Font Awesome;
margin: auto;
text-align: center;
font-size: 1.75em;
}
main nav a + a {
margin-left: 1.5em;
}
}
/*=-------=*/
/*= Logo. =*/
/*=-------=*/

19
includes/main-nav.html
View File

@ -1,10 +1,21 @@
<nav id='main-nav'>
<a href='/deus/' class='logo'><img src='/deus/assets/images/deus-logo-only.png'></a>
<a href='/deus/pages/about'>About</a>
<a href='/deus/posts'>News</a>
<a
class='nav-item logo'
href='/deus/'
><img src='/deus/assets/images/deus-logo-only.png'></a>
<a
class='nav-item text icon-solid'
data-deus-icon='&#xf05a;'
href='/deus/pages/about'
>About</a>
<a
class='nav-item text icon-regular'
data-deus-icon='&#xf143;'
href='/deus/posts'
>News</a>
<div class='social-buttons'>
<a class='social-button share' href='#'>&#xf1e0;</a>
<a class='social-button facebook' href='#'>&#xf39e;</a>
<a class='social-button twitter' href='#'>&#xf099;</a>
</div>
</nav>
</nav>