Add list header

This commit is contained in:
Joseph Hutchinson
2018-03-28 13:33:33 -04:00
3 changed files with 31 additions and 10 deletions

View File

@@ -4,6 +4,10 @@
<body style="background-color: #f3f3f3;"> <body style="background-color: #f3f3f3;">
{{ partial "header.html" . }} {{ partial "header.html" . }}
<div class="card-content-container"> <div class="card-content-container">
<header class="list-header">
<h1 class="list-header-title">Sensors + Smarts</h1>
<h2 class="list-header-subtext">There is so much actionable data that goes to waste. Let's put your data to work.</h2>
</header>
<main class="card-container"> <main class="card-container">
{{.Content}} {{.Content}}
<section class="card-columns"> <section class="card-columns">

View File

@@ -1,3 +1,3 @@
<footer> <footer>
<hr />
</footer> </footer>

View File

@@ -3,7 +3,7 @@ body {
color: #3A3B3C; color: #3A3B3C;
font-size: 1.1em; font-size: 1.1em;
margin: 0; margin: 0;
padding: 4em 0 0 0; padding: 3em 0 0 0;
} }
p { p {
margin: 1em 0; margin: 1em 0;
@@ -16,17 +16,16 @@ strong {
.nav-bar { .nav-bar {
position: fixed; position: fixed;
top: 0; top: 0;
z-index: 3; z-index: 999;
width: 100%; width: 100%;
padding: 0.45em 0; padding: 0.45em 0;
text-align: center; text-align: center;
background-color: rgba(255, 255, 255, 0.97); background-color: rgba(255, 255, 255, 0.97);
-webkit-backdrop-filter: blur(0.5em); -webkit-backdrop-filter: blur(0.5em);
box-shadow: 0 0 0.35em 0 rgba(0, 0, 0, 0.07); box-shadow: 0 0.3em 1.5em 0 rgba(0, 0, 0, 0.1);
} }
.nav-header { .nav-header {
margin: 0 0; margin: 0 0;
font-family: 'LatoLatinWebHeavyItalic';
} }
.post { .post {
line-height: 1.5; line-height: 1.5;
@@ -67,13 +66,29 @@ img {
} }
.card-content-container { .card-content-container {
display: flex; display: flex;
justify-content: center; flex-direction: column;
padding: 0 0.5em; align-items: center;
padding: 0 0.7em;
} }
.content { .content {
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
} }
.list-header {
margin: 2.5em 0;
text-align: center;
}
.list-header-title {
margin: 0 0 0.2em 0;
}
.list-header-subtext {
color: #7A7B7C;
font-size: 1.2em;
line-height: 1.6;
font-weight: normal;
margin: 0.5em auto 0 auto;
width: 12em;
}
.card-container { .card-container {
width: 100%; width: 100%;
} }
@@ -91,11 +106,11 @@ img {
text-decoration: none; text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
transition: transform 0.3s, box-shadow 0.3s; transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 0.3em 0.6em 0 rgba(0, 0, 0, 0.1), 0 0 0.2em 0 rgba(0, 0, 0, 0.05); box-shadow: 0 0.2em 0.5em 0 rgba(0, 0, 0, 0.1), 0 0 0.1em 0 rgba(0, 0, 0, 0.05);
} }
.card-link-wrapper-active { .card-link-wrapper-active {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0.20em 0.5em 0 rgba(0, 0, 0, 0.15); box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.15);
} }
.card { .card {
padding: 1em; padding: 1em;
@@ -174,7 +189,9 @@ tr:nth-child(even) td {
background: #f3f3f3; background: #f3f3f3;
} }
footer { footer {
margin: 2em 0; padding: 2em 0;
margin: 2em 0 0 0;
background-color: white;
} }
/* Medium devices (tablets, ~641px and up) */ /* Medium devices (tablets, ~641px and up) */