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

18
static/css/main.css
View file

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