jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-07-17 16:05:33 -04:00
Code Issues Activity

add actual text next to navigation emojis (#89)

Browse Source
This commit is contained in:
Jake Jarvis
2020-03-24 11:02:36 -04:00
committed by GitHub
parent 4a69557a1f
commit a37e749064
2 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
assets/sass/components/_header.scss
View File

@@ -53,19 +53,27 @@ header {
list-style: none; list-style: none;
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 1.5em; font-size: 1.2em;
line-height: 1; line-height: 1;
li { li {
width: 2.5em;
text-align: right; text-align: right;
margin-left: 1.45em;
a { a {
display: inline-block; display: inline-block;
color: $color-medium;
transition: transform 0.15s ease-in-out; transition: transform 0.15s ease-in-out;
&:hover { &:hover {
transform: scale(1.4); transform: scale(1.15);
color: $color-links;
}
span.text {
font-size: 0.8em;
font-weight: 500;
margin-left: 0.55em;
} }
} }
} }
@@ -95,7 +103,18 @@ header {
font-size: 1.7em; font-size: 1.7em;
li { li {
width: 2em; margin-left: 1em;
a {
// hide text next to emojis on mobile
span.text {
display: none;
}
&:hover {
transform: scale(1.4);
}
}
} }
} }
} }

8
layouts/partials/page/header.html
View File

@@ -5,10 +5,10 @@
<h1 id="name">{{ .Site.Title }}</h1> <h1 id="name">{{ .Site.Title }}</h1>
</a> </a>
<ul> <ul>
<li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home">&#x1F3E0;</a></li> <li><a class="no-underline" href="{{ .Site.BaseURL }}" title="Home"><span class="emoji">&#x1F3E0;</span><span class="text">Home</span></a></li>
<li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes">&#x1F4DD;</a></li> <li><a class="no-underline" href="{{ "notes/" | absURL }}" title="Notes"><span class="emoji">&#x1F4DD;</span><span class="text">Notes</span></a></li>
{{ with .Site.Author.github }}<li><a class="no-underline" href="https://github.com/{{ . }}" title="GitHub" target="_blank" rel="me noopener">&#x1F468;&#x200D;&#x1F4BB;</a></li>{{ end }} {{ with .Site.Author.github }}<li><a class="no-underline" href="https://github.com/{{ . }}" title="GitHub" target="_blank" rel="me noopener"><span class="emoji">&#x1F468;&#x200D;&#x1F4BB;</span><span class="text">GitHub</span></a></li>{{ end }}
<li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me">&#x1F48C;</a></li> <li><a class="no-underline" href="&#x6D;&#x61;&#x69;&#x6C;&#x74;&#x6F;&#x3A;&#x6A;&#x61;&#x6B;&#x65;&#x40;&#x6A;&#x61;&#x72;&#x76;&#x2E;&#x69;&#x73;" title="Email Me"><span class="emoji">&#x1F4EC;</span><span class="text">Email</span></a></li>
</ul> </ul>
</nav> </nav>
</header> </header>