fix text to center, align text, textshadow, hover animation, fontsize
This commit is contained in:
parent
2c31a206ac
commit
a8e1286ae7
@ -6,12 +6,24 @@
|
||||
margin: 8em 0;
|
||||
|
||||
> section {
|
||||
@include vendor('transition', (
|
||||
'text-shadow #{_duration(slow-transition)} ease'
|
||||
));
|
||||
width: 61.805%;
|
||||
margin: 8em auto;
|
||||
background-color: #fff;
|
||||
|
||||
text-shadow: 0 0 1px rgba(0,0,0,0.40),
|
||||
0 1px 2px rgba(0,0,0,0.20),
|
||||
0 3px 4px rgba(0,0,0,0.10),
|
||||
0 7px 8px rgba(0,0,0,0.10);
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-shadow: 0 0 1px rgba(0,0,0,0.20),
|
||||
0 1px 2px rgba(0,0,0,0.20),
|
||||
0 3px 4px rgba(0,0,0,0.20),
|
||||
0 7px 8px rgba(0,0,0,0.20),
|
||||
0 15px 16px rgba(0,0,0,0.20),
|
||||
0 31px 32px rgba(0,0,0,0.20);
|
||||
}
|
||||
|
||||
> a {
|
||||
@ -24,10 +36,17 @@
|
||||
padding-bottom: 61.805%;
|
||||
overflow: hidden;
|
||||
|
||||
> .siteTitle {
|
||||
&.siteTitle {
|
||||
> h2 {
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
text-align: center;
|
||||
width: 61.805%;
|
||||
line-height: 38.198vw;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
font-family: Maven Pro,sans-serif;
|
||||
font-size: 73pt;
|
||||
}
|
||||
}
|
||||
> picture > img {
|
||||
@ -37,11 +56,11 @@
|
||||
'transform #{_duration(slow-transition)} ease'
|
||||
));
|
||||
@include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)');
|
||||
@include vendor('transform', 'scale(1)');
|
||||
@include vendor('transform', 'scale(1.2)');
|
||||
|
||||
&:hover {
|
||||
@include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)');
|
||||
@include vendor('transform', 'scale(1.2)');
|
||||
@include vendor('transform', 'scale(1.0)');
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -49,29 +68,53 @@
|
||||
}
|
||||
|
||||
@include breakpoint('<=xlarge') {
|
||||
|
||||
> section {
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 57pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=large') {
|
||||
|
||||
> section {
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 44pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=medium') {
|
||||
|
||||
> section {
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 32pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=small') {
|
||||
|
||||
> section {
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 21pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xsmall') {
|
||||
> section {
|
||||
margin: 2em auto;
|
||||
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 15pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint('<=xxsmall') {
|
||||
|
||||
> section {
|
||||
> a > div.siteTitle > h2 {
|
||||
font-size: 10pt;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user