Skip to content
This repository has been archived by the owner on Dec 8, 2017. It is now read-only.

Commit

Permalink
Merge pull request #70 from 18F/search-styling
Browse files Browse the repository at this point in the history 
Style search results to match handbook
  • Loading branch information
@mtorres253
mtorres253 committed Apr 4, 2016
2 parents dc4431e + 28d7380 commit 2694ad3
Show file tree
Hide file tree
Showing 2 changed files with 270 additions and 4 deletions.
11 changes: 10 additions & 1 deletion _layouts/search-results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,13 @@
layout: bare
hide_edit_link: true
---
{% jekyll_pages_api_search_results %}

<main class="article" role="main" id="main">
<div class="page">
<div class="wrapper">
<h1 class="page-title">Search results</h1>
{% jekyll_pages_api_search_results %}

</div>
</div>
</main>
263 changes: 260 additions & 3 deletions stylesheets/screen.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -930,7 +930,7 @@ header dl dd ul li:last-of-type::after{ content: ""; }
width: 48%;
margin-right: 2%;
}

.layout-team-api .results{
overflow-x: hidden;
}
Expand Down Expand Up @@ -967,7 +967,7 @@ header dl dd ul li:last-of-type::after{ content: ""; }
width: 23.875%;
margin-right: 1.5%;
}

.layout-team-api .person{
width: 23.5%;
}
Expand Down Expand Up @@ -1000,7 +1000,7 @@ header dl dd ul li:last-of-type::after{ content: ""; }

.layout-team-show .site-header form{
display: block;

}
.layout-team-show .h-card {
padding-top: 2em;
Expand Down Expand Up @@ -1081,3 +1081,260 @@ header dl dd ul li:last-of-type::after{ content: ""; }


/* @end */

.page .page-title,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page nav,
.page figure,
.page p,
.page ul,
.page ol,
.page dl,
.page li{
line-height: 1.4em;
margin: 0 auto 0.7em;
}


.page td{ line-height: 1.4em; }

.page h1,
.page h2,
.page h3,
.page h4,
.page h5{
line-height: 1.125em;
}

.page figure.figure-fill{
width: 100%;
max-width: none;
text-align: center;
}

.page strong{ font-weight: 600; }
.page em{ font-style: italic; }

a[id]{
color: inherit;
text-decoration: none;
}

.page code{
background: #eee;
border: 1px solid #e3e3e3;
padding: 1px 2px;
font-family: "Courier New", Courier, mono;
font-size: 0.8em;
font-weight: 600;
border-radius: 2px;
color: #d40b79;
top: -1px;
position: relative;
clear: none;
}

.page aside{
font-size: 16px;
color: #918c84;
margin-top: 6px;
}

.page h1,
.page .page-title{
margin-bottom: 0.67em;
font-size: 36px;
font-weight: 600;
line-height: 1.125em;
color: #383838;
letter-spacing: -1px;
max-width: 640px;
position: relative;
left: -1px;
}

.page h1+p{
padding-top: 0.4em;
font-family: merriweather;
line-height: 1.5em;
color: #444;
font-size: 18px;
margin: -1em auto 2em;
}

.page h2{
font-weight: 600;
font-size: 21px;
line-height: 1.3em;
font-family: Merriweather, Georgia;
color: #c56815;
max-width: 640px;
margin: 28px auto 16px;
}

.page h3,
.page h4{
font-weight: 600;
font-size: 21px;
line-height: 1.4em;
margin-top: 28px;
margin-bottom: 16px;
color: #333;
}

.page h4{
font: inherit;
font-family: Merriweather, Georgia;
text-transform: uppercase;
font-size: 14px;
font-weight: 600;
color: #222;
letter-spacing: 0.05em;
word-spacing: 0.125em;
margin-top: 24px !important;
margin-bottom: 16px !important;
}

.location .h-card .p-name{
position: absolute;
left: -9999em;
}

.page blockquote{
padding-left: 1em;
position: relative;
max-width: 640px;
margin: 0 auto;
}

.page blockquote::after{
content: "";
position: absolute;
left: 1px;
top: 0;
bottom: 0;
width: 3px;
background: #e3e3e3;
border-radius: 3px;
}

.page blockquote p{
font-family: Merriweather, Georgia, serif;
font-style: italic;
color: #555;
font-size: 17px;
line-height: 1.67em;
width: auto;
max-width: none;
}

@media screen and (min-width: 568.88px){

.page{ padding-top: 1.6em; }

.page p,
.page figure,
.page ul,
.page ol,
.page dl,
.page li,
.page td {
margin: 0 auto 0.8em;
line-height: 1.6em;
}

.page li p{
margin-left: 0;
width: auto;
}

.page h1,
.page h2,
.page h3,
.page h4 {
line-height: 1.2em;
}

.page h1,
.page .page-title{ font-size: 40px; }
.page h1+p,
.page .page-title+p{
font-size: 20px;
line-height: 1.67em;
}
.page h2{
margin-top: 28px;
font-size: 21px;
line-height: 1.3em;
}
}

.page .page-title+h2{ margin-top: 20px; }

.page hr{
border: none;
height: 0.2em;
margin-top: 2em;
margin-bottom: 2em;
background: #f2f1ec;
width: 90%;
max-width: 640px;
}

.page .h-card:last-of-type{ margin-bottom: 1em; }

.page table{
border-radius: 3px;
border: 1px solid #eee;
margin: 0 auto;
max-width: 640px;
table-layout: fixed;
box-shadow: 0 0 0 2px #fafafa;
}

.page .table-wrapper{
margin: 0 auto 1.8em;
padding-bottom: 0.2em;
max-width: 90%;
overflow: auto;
}

@media screen and (min-width: 711.11px){
.page .table-wrapper{ max-width: 640px; }
}

.page table tbody tr:first-child td:first-child{
border-radius: 3px;
}

.page table tbody tr:nth-child(odd) td{
background: #fafafa;
}

.page table td,
.page table th{
border: 1px solid #ddd;
padding: 8px;
}

.page .h-card .p-job-title{
clear: left;
display: block;

}

.page ol li{ list-style-type: decimal; }
.page ol li li { list-style-type: lower-latin; }
.page ol li a {
text-decoration: none;
}


.page ol > li li{
margin-bottom: 0.2em;
}
.page ol > li li li{ margin-bottom: 0.3em;}

0 comments on commit 2694ad3

Please sign in to comment.