NeilBrommer/Personal-Site
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Make the social media links horizontal on mobile

Browse source
This commit is contained in:
NeilBrommer 2018-06-12 21:21:08 -07:00
parent 6e52af8716
commit a8162d803b
2 changed files with 18 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/partials/navbar.html
View file

@ -17,7 +17,7 @@
</ul>
<ul class="navbar-nav">
<ul id="social-menu" class="navbar-nav">
{{ with .Site.Data.social }}
{{ with .github }}
<li class="nav-item">
@ -35,7 +35,7 @@
{{ end }}
{{ end }}
<li class="nav-item ml-md-2">
<li class="nav-item ml-auto">
<button id="btnTheme" type="button" class="btn btn-dark" aria-pressed="false" autocomplete="off">
<span id="themeText" class="fas fa-moon"></span>
</button>

20
static/css/main.css
View file

@ -1,8 +1,8 @@
:root {
--main-color: #3f51b5; /* R:63, G:82, B:181 */
--main-dark-color: #002984;
--main-light-color: #757de8;
--accent-color: #FFC107;
--main-color: #3f51b5; /* R:63, G:82, B:181 */
--main-dark-color: #002984; /* R:0, G:41, B:132 */
--main-light-color: #757de8; /* R:117, G:125, B:232 */
--accent-color: #FFC107; /* R:255, G:193, B:7 */
}
body {
@ -29,6 +29,10 @@ body {
padding-bottom: 0.25rem;
border-bottom: white 0.25rem solid;
}
#btnTheme {
margin-left: 0.5rem;
}
}
@media screen and (max-width: 767px) {
@ -40,6 +44,14 @@ body {
.navbar-nav .nav-item {
padding-left: 1rem;
}
#social-menu {
flex-direction: row;
}
#social-menu .nav-item:not(:first-child) {
padding-left: 2rem;
}
}
.navbar {