schulze/schulzestudio
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

fix text to center, align text, textshadow, hover animation, fontsize

Browse Source
This commit is contained in:
Thefeli73 2020-04-17 14:47:46 +02:00
parent 2c31a206ac
commit a8e1286ae7
1 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/css/layout/_main.scss
View File

@ -6,12 +6,24 @@
margin: 8em 0; margin: 8em 0;
> section { > section {
@include vendor('transition', (
'text-shadow #{_duration(slow-transition)} ease'
));
width: 61.805%; width: 61.805%;
margin: 8em auto; margin: 8em auto;
background-color: #fff; 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 { &:hover {
cursor: pointer; 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 { > a {
@ -24,10 +36,17 @@
padding-bottom: 61.805%; padding-bottom: 61.805%;
overflow: hidden; overflow: hidden;
> .siteTitle { &.siteTitle {
> h2 { > h2 {
position: absolute; position: absolute;
z-index: 99; 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 { > picture > img {
@ -37,11 +56,11 @@
'transform #{_duration(slow-transition)} ease' 'transform #{_duration(slow-transition)} ease'
)); ));
@include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)'); @include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)');
@include vendor('transform', 'scale(1)'); @include vendor('transform', 'scale(1.2)');
&:hover { &:hover {
@include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)'); @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') { @include breakpoint('<=xlarge') {
> section {
> a > div.siteTitle > h2 {
font-size: 57pt;
}
}
} }
@include breakpoint('<=large') { @include breakpoint('<=large') {
> section {
> a > div.siteTitle > h2 {
font-size: 44pt;
}
}
} }
@include breakpoint('<=medium') { @include breakpoint('<=medium') {
> section {
> a > div.siteTitle > h2 {
font-size: 32pt;
}
}
} }
@include breakpoint('<=small') { @include breakpoint('<=small') {
> section {
> a > div.siteTitle > h2 {
font-size: 21pt;
}
}
} }
@include breakpoint('<=xsmall') { @include breakpoint('<=xsmall') {
> section { > section {
margin: 2em auto; margin: 2em auto;
> a > div.siteTitle > h2 {
font-size: 15pt;
}
} }
} }
@include breakpoint('<=xxsmall') { @include breakpoint('<=xxsmall') {
> section {
> a > div.siteTitle > h2 {
font-size: 10pt;
}
}
} }
} }