LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added subtitle to nav bar

Browse source
This commit is contained in:
bill bittner 2017-10-09 10:30:19 -07:00
parent 66c1d4eaf1
commit 58bece6efc
3 changed files with 44 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/assets/css/general.css
View file

@ -361,7 +361,7 @@ table {
z-index: 1; z-index: 1;
} }
.nav-bar-logo, .nav-bar-title, .nav-bar-link { .nav-bar-logo, .nav-bar-title, .nav-bar-link, .nav-bar-subtitle {
padding: 2rem 0.5rem 1.5rem 0.5rem; padding: 2rem 0.5rem 1.5rem 0.5rem;
display: inline-block; display: inline-block;
color: black; color: black;
@ -372,6 +372,15 @@ table {
vertical-align: top; vertical-align: top;
} }
.nav-bar-subtitle {
font-size: small;
color:grey;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.nav-bar-link { .nav-bar-link {
border-bottom: 2px solid white; border-bottom: 2px solid white;
} }

35
public/assets/css/mediaQueries.css
View file

@ -17,6 +17,29 @@
} }
} }
@media (max-width: 850px) {
.nav-bar-title, .nav-bar-subtitle {
padding-bottom: 0px;
}
.nav-bar-subtitle {
left: auto;
right: 0px;
top: auto;
transform: none;
padding-right: 2rem;
}
.nav-bar-link-section {
position: relative;
padding-left: 0px;
}
.nav-bar {
height: 8rem;
}
}
@media (max-width: 750px ) { @media (max-width: 750px ) {
.column--med-10 { .column--med-10 {
@ -32,10 +55,10 @@
@media (max-width: 475px) { @media (max-width: 475px) {
.nav-bar { .nav-bar {
height: 8rem; height: 12rem;
} }
.nav-bar-title { .nav-bar-title, .nav-bar-subtitle {
padding-bottom: 0px; padding-bottom: 0px;
} }
@ -44,6 +67,14 @@
padding-left: 0px; padding-left: 0px;
} }
.nav-bar-subtitle {
position: relative;
display: inline-block;
left: auto;
top: auto;
transform: none;
}
.row--full-height { .row--full-height {
height: calc(100% - 11rem); height: calc(100% - 11rem);

1
views/partials/topBar.handlebars
View file

@ -1,6 +1,7 @@
<div class="row-wide nav-bar"> <div class="row-wide nav-bar">
<div class="nav-bar-title-section"> <div class="nav-bar-title-section">
<a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span> <a href="/"><span class="nav-bar-title">spee&lt;h</span></a><span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
<span class="nav-bar-subtitle">Open-source, decentralized image and video hosting.</span>
<div class="nav-bar-link-section"> <div class="nav-bar-link-section">
<a class="nav-bar-link" href="/">Upload</a> <a class="nav-bar-link" href="/">Upload</a>
<a class="nav-bar-link" href="/popular">Popular</a> <a class="nav-bar-link" href="/popular">Popular</a>