Make the other pages look a little lighter than the main page

This commit is contained in:
R Tyler Croy 2020-10-07 20:10:02 -07:00
parent a0bb67d199
commit 244ff7b4c7
4 changed files with 71 additions and 2 deletions

68
static/css/ddv.css Normal file
View File

@ -0,0 +1,68 @@
/*
* Globals
*/
/*
* Base structure
*/
html,
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-pack: center;
-webkit-box-pack: center;
justify-content: center;
}
.cover-container {
max-width: 42em;
}
/*
* Header
*/
.masthead {
margin-bottom: 2rem;
}
.masthead-brand {
margin-bottom: 0;
}
.nav-masthead .nav-link {
padding: .25rem 0;
font-weight: 700;
color: #333;
background-color: transparent;
border-bottom: .25rem solid transparent;
}
.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
border-bottom-color: #000;
}
.nav-masthead .nav-link + .nav-link {
margin-left: 1rem;
}
.nav-masthead .active {
color: #fff;
border-bottom-color: #fff;
}
@media (min-width: 48em) {
.masthead-brand {
float: left;
}
.nav-masthead {
float: right;
}
}

View File

@ -4,4 +4,4 @@
<meta name="author" content="">
<link href="/static/css/bootstrap.min.css" rel="stylesheet"/>
<link href="/static/css/cover.css" rel="stylesheet"/>
<link href="/static/css/ddv.css" rel="stylesheet"/>

View File

@ -4,7 +4,7 @@
<nav class="nav nav-masthead justify-content-center">
<a class="nav-link" href="/">Home</a>
<a class="nav-link" href="/about">About</a>
<a class="ml-3 btn btn-outline-light" href="/new">Create</a>
<a class="ml-3 btn btn-secondary" href="/new">Create</a>
</nav>
</div>
</header>

View File

@ -2,6 +2,7 @@
<html lang="en">
<head>
{{> _head }}
<link href="/static/css/cover.css" rel="stylesheet"/>
<title>Dot dot vote</title>
</head>