bit-badger/bitbadger.solutions-blog-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a responsive header

Browse Source
This commit is contained in:
Daniel J. Summers 2017-10-19 20:06:09 -05:00
parent a07909a925
commit 3f472dd872
2 changed files with 55 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
themes/bit-badger/layout/_partial/header.pug
View File

@ -1,4 +1,4 @@
header header.site-header
.header-logo .header-logo
a(href='/') a(href='/')
img(src='/img/bitbadger.png' img(src='/img/bitbadger.png'

73
themes/bit-badger/source/style.css
View File

@ -37,17 +37,35 @@ h3 {
margin: 1rem 0; margin: 1rem 0;
} }
h2, h3 { h2, h3 {
width: 80%;
border-bottom: solid 2px navy; border-bottom: solid 2px navy;
} }
@media all and (min-width:40rem) {
h2, h3 {
width: 80%;
}
}
p { p {
margin: 1rem 0; margin: 1rem 0;
} }
#content {
margin: 0 1rem;
}
.content {
font-size: 1.1rem;
}
.auto {
margin: 0 auto;
}
@media all and (min-width: 68rem) {
.content {
width: 66rem;
}
}
.hdr { .hdr {
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
} }
header { .site-header {
height: 100px; height: 100px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -57,12 +75,44 @@ header {
background-image: -moz-linear-gradient(top, lightgray, #FFFAFA); background-image: -moz-linear-gradient(top, lightgray, #FFFAFA);
background-image: linear-gradient(to bottom, lightgray, #FFFAFA); background-image: linear-gradient(to bottom, lightgray, #FFFAFA);
} }
header a:link, header a:visited { .site-header a:link, .site-header a:visited {
color: black; color: black;
} }
header a:hover { .site-header a:hover {
border-bottom:none; border-bottom:none;
} }
.header-title {
font-size: 3rem;
font-weight: bold;
line-height: 100px;
text-align: center;
}
.header-spacer {
flex-grow: 3;
}
.header-social {
padding: 25px .8rem 0 0;
}
.header-social img {
width: 50px;
height: 50px;
}
@media all and (max-width:40rem) {
.site-header {
height: auto;
flex-direction: column;
align-items: center;
}
.header-title {
line-height: 3rem;
}
.header-spacer {
display: none;
}
.header-social {
padding-right: 0;
}
}
.content-item { .content-item {
padding-left: 5px; padding-left: 5px;
padding-right: 5px; padding-right: 5px;
@ -100,21 +150,6 @@ ul {
li { li {
list-style-type: disc; list-style-type: disc;
} }
.header-title {
font-size: 3rem;
font-weight: bold;
line-height: 100px;
}
.header-spacer {
flex-grow: 3;
}
.header-social {
padding: 25px .8rem 0 0;
}
.header-social img {
width: 50px;
height: 50px;
}
.content-wrapper { .content-wrapper {
margin: 0 1rem; margin: 0 1rem;