mirror-github-minimalbible/MinimalBible.github.io
1
0
Fork 0
mirror of https://github.com/MinimalBible/MinimalBible.github.io synced 2024-12-22 06:38:27 -05:00
Code Issues Releases Wiki Activity

Cleanup feature post header image and title

Browse Source
This commit is contained in:
Michael Rose 2014-02-25 16:32:32 -05:00
parent 74a74e635d
commit 7ccdaa26d4
3 changed files with 74 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
assets/css/main.css
View File

@ -3836,7 +3836,6 @@ body {
} }
.header-title { .header-title {
padding: 0 20px;
margin: 30px 0 0; margin: 30px 0 0;
text-align: center; text-align: center;
} }
@ -3858,8 +3857,8 @@ body {
@media only screen and (min-width: 62.5em) { @media only screen and (min-width: 62.5em) {
.header-title h1 { .header-title h1 {
font-size: 80px; font-size: 60px;
font-size: 5rem; font-size: 3.75rem;
} }
} }
@ -3873,67 +3872,51 @@ body {
@media only screen and (min-width: 48em) { @media only screen and (min-width: 48em) {
.header-title h2 { .header-title h2 {
font-size: 32px; font-size: 30px;
font-size: 2rem; font-size: 1.875rem;
} }
} }
@media only screen and (min-width: 48em) { .feature .header-title {
.feature .header-title { position: absolute;
position: absolute; top: 0;
top: 0; display: table;
display: table; width: 100%;
width: 100%; height: 440px;
height: 440px; margin-top: 0;
margin-top: 0; overflow: hidden;
overflow: hidden; }
}
.feature .header-title .header-title-wrap { .feature .header-title .header-title-wrap {
display: table-cell; display: table-cell;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
}
} }
.feature .header-title h1 { .feature .header-title h1 {
margin: 10px; margin: 10px;
margin: 10px 60px;
font-weight: 700; font-weight: 700;
color: #ffffff;
text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
} }
@media only screen and (min-width: 48em) { .feature .header-title h1 a {
.feature .header-title h1 { color: #ffffff;
margin: 10px 60px;
font-size: 60px;
font-size: 3.75rem;
color: #ffffff;
text-shadow: 1px 1px 4px rgba(34, 34, 34, 0.6);
}
.feature .header-title h1 a {
color: #ffffff;
}
} }
@media only screen and (min-width: 62.5em) { @media only screen and (min-width: 62.5em) {
.feature .header-title h1 {
font-size: 100px;
font-size: 6.25rem;
}
} }
.feature .header-title h2 { .feature .header-title h2 {
margin: 0; margin: 0;
font-size: 18px; color: #ffffff;
font-size: 1.125rem;
text-transform: uppercase; text-transform: uppercase;
} }
@media only screen and (min-width: 48em) { @media only screen and (min-width: 48em) {
.feature .header-title h2 {
font-size: 30px;
font-size: 1.875rem;
color: #ffffff;
}
.feature .header-title h2 a { .feature .header-title h2 a {
color: #ffffff; color: #ffffff;
} }
@ -3941,9 +3924,12 @@ body {
.entry-image { .entry-image {
position: relative; position: relative;
width: auto; top: -50%;
height: 100%; left: -50%;
max-height: 440px; width: 200%;
height: 200%;
min-height: 440px;
overflow: hidden;
} }
.entry-image:after { .entry-image:after {
@ -3957,7 +3943,14 @@ body {
} }
.entry-image img { .entry-image img {
width: 100%; position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-width: 50%;
min-height: 50%;
margin: auto;
} }
.image-credit { .image-credit {

2
assets/css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

65
assets/less/page.less
View File

@ -32,7 +32,6 @@ body {
.header-title { .header-title {
text-align: center; text-align: center;
margin: 30px 0 0; margin: 30px 0 0;
padding: 0 20px;
h1 { h1 {
margin: 10px 20px; margin: 10px 20px;
font-weight: 700; font-weight: 700;
@ -42,7 +41,7 @@ body {
.font-rem(48); .font-rem(48);
} }
@media @large { @media @large {
.font-rem(80); .font-rem(60);
} }
} }
h2 { h2 {
@ -51,49 +50,41 @@ body {
text-transform: uppercase; text-transform: uppercase;
color: lighten(@base-color,40); color: lighten(@base-color,40);
@media @medium { @media @medium {
.font-rem(32); .font-rem(30);
} }
} }
} }
.feature .header-title { .feature .header-title {
@media @medium { position: absolute;
position: absolute; top: 0;
top: 0; display: table;
display: table; margin-top: 0;
margin-top: 0; width: 100%;
width: 100%; height: 440px;
height: 440px; overflow: hidden;
overflow: hidden; .header-title-wrap {
.header-title-wrap { display: table-cell;
display: table-cell; vertical-align: middle;
vertical-align: middle; margin: 0 auto;
margin: 0 auto; text-align: center;
text-align: center;
}
} }
h1 { h1 {
margin: 10px; margin: 10px;
font-weight: 700; font-weight: 700;
@media @medium { margin: 10px 60px;
margin: 10px 60px; color: @white;
text-shadow: 1px 1px 4px fade(@base-color,60);
a {
color: @white; color: @white;
.font-rem(60);
text-shadow: 1px 1px 4px fade(@base-color,60);
a {
color: @white;
}
} }
@media @large { @media @large {
.font-rem(100);
} }
} }
h2 { h2 {
margin: 0; margin: 0;
.font-rem(18); color: @white;
text-transform: uppercase; text-transform: uppercase;
@media @medium { @media @medium {
.font-rem(30);
color: @white;
a { a {
color: @white; color: @white;
} }
@ -102,9 +93,12 @@ body {
} }
.entry-image { .entry-image {
position: relative; position: relative;
width: auto; top: -50%;
height: 100%; left: -50%;
max-height: 440px; width: 200%;
height: 200%;
min-height: 440px;
overflow: hidden;
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
@ -115,7 +109,14 @@ body {
background-color: fade(@base-color,30); background-color: fade(@base-color,30);
} }
img { img {
width: 100%; position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
} }
} }
.image-credit { .image-credit {