recentered nav bar

This commit is contained in:
bill bittner 2017-10-19 08:30:41 -07:00
parent cd6f146cd5
commit 18e2799cf8
3 changed files with 23 additions and 3 deletions

View file

@ -434,7 +434,10 @@ table {
.nav-bar-title--tagline { .nav-bar-title--tagline {
font-size: small; font-size: small;
vertical-align: bottom; position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
} }
.nav-bar-link { .nav-bar-link {

View file

@ -1,11 +1,24 @@
@media (max-width: 1200px) {
.nav-bar-title--tagline {
font-size: small;
position: absolute;
left: 40%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
}
}
@media (max-width: 1050px) { @media (max-width: 1050px) {
.nav-bar-title--tagline { .nav-bar-title--tagline {
display: none; display: none;
} }
} }
@media (max-width: 750px ) { @media (max-width: 750px ) {
body, button, input, textarea, label, select, option { body, button, input, textarea, label, select, option {
@ -58,7 +71,7 @@
} }
.instructions-text--large, .pull-quote { .instructions-text--large, .pull-quote {
font-size: 1rem; font-size: medium;
} }
} }
@ -69,4 +82,8 @@
font-size: x-small; font-size: x-small;
} }
.instructions-text--large, .pull-quote {
font-size: small;
}
} }

View file

@ -1,8 +1,8 @@
<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="/"><img class="nav-bar-logo nav-bar-title" src="/assets/img/logo.gif" alt="spee.ch"/></a> <a href="/"><img class="nav-bar-logo nav-bar-title" src="/assets/img/logo.gif" alt="spee.ch"/></a>
<span class="nav-bar-title nav-bar-title--tagline">Open-source, decentralized image and video hosting.</span>
<span class="nav-bar-title nav-bar-title--superscript">(beta)</span> <span class="nav-bar-title nav-bar-title--superscript">(beta)</span>
<span class="nav-bar-title nav-bar-title--tagline">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>