fix: mobile nav appears out of border in .article

don't underline certain <a> tags
This commit is contained in:
curben 2018-11-12 20:43:32 +10:30
parent ffe99717de
commit 19bb4b3d91
2 changed files with 9 additions and 13 deletions

View File

@ -7,14 +7,14 @@
<div class="searchContainer"> <div class="searchContainer">
<input class="searchBox" type="text" id="search" placeholder="Search..."> <input class="searchBox" type="text" id="search" placeholder="Search...">
<a class="searchBtn" href="#" onClick="window.open(`https://gitlab.com/search?utf8=%E2%9C%93&search=` + document.getElementById(`search`).value + `&group_id=&project_id=8306723&search_code=true&repository_ref=master`)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg><!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --></a> <a class="searchBtn no-underline" href="#" onClick="window.open(`https://gitlab.com/search?utf8=%E2%9C%93&search=` + document.getElementById(`search`).value + `&group_id=&project_id=8306723&search_code=true&repository_ref=master`)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg><!-- Font Awesome Free 5.5.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) --></a>
</div> </div>
</nav> </nav>
<%/* Nav menu for mobile */%> <%/* Nav menu for mobile */%>
<nav class="mobile-nav"> <nav class="mobile-nav">
<h1 class="nickname"><%= theme.nickname %></h1> <h1 class="nickname"><%= theme.nickname %></h1>
<ul class="mobile-nav-menu"> <ul class="mobile-nav-menu">
<label for="mobile-menu-toggle"><a>&#9776; Menu</a></label> <label for="mobile-menu-toggle"><a class="no-underline">&#9776; Menu</a></label>
<input id="mobile-menu-toggle" type="checkbox"/> <input id="mobile-menu-toggle" type="checkbox"/>
<ul class="mobile-nav-link"> <ul class="mobile-nav-link">
<% for (let i in theme.menu) { %> <% for (let i in theme.menu) { %>

View File

@ -609,9 +609,7 @@ textarea {
} }
.article .article-entry blockquote footer cite a:hover, .article .article-entry blockquote footer cite a:hover,
.article .article-nav-link-wrap:hover, .article .article-nav-link-wrap:hover {
.dark a:hover,
a:hover {
color: #22c5e5; color: #22c5e5;
border-bottom: 1px solid; border-bottom: 1px solid;
transition: color 0.1s linear; transition: color 0.1s linear;
@ -939,6 +937,7 @@ blockquote {
width: 80%; width: 80%;
max-width: 1000px; max-width: 1000px;
margin: 0 auto; margin: 0 auto;
position: relative;
} }
.article .header { .article .header {
@ -1432,14 +1431,6 @@ pre .keyword {
position: relative; position: relative;
} }
/* don't underline the search icon */
.searchContainer a:hover,
.searchContainer a:visited,
.searchContainer a:link,
.searchContainer a:active {
border-bottom: none;
}
/* inline-block to position them in same line */ /* inline-block to position them in same line */
.searchBox, .searchBox,
.searchBtn{ .searchBtn{
@ -1478,6 +1469,11 @@ svg {
fill: currentColor; fill: currentColor;
} }
/* don't underline specific <a> tag */
.no-underline {
border-bottom: none;
}
@media (max-width: 768px) { @media (max-width: 768px) {
body { body {
font-size: 1.2em; font-size: 1.2em;