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

add structure and css for website display

Browse Source
This commit is contained in:
Thefeli73 2020-03-09 23:08:35 +01:00
parent 701c3b932c
commit 63576a9180
2 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,17 +6,42 @@
margin: 8em 0;
> section {
width: 100%;
max-width: 800px;
width: 61.805%;
margin: 8em auto;
background-color: #fff;
&:hover {
cursor: pointer;
}
> a {
all: initial;
all: unset;
> div {
width: 100%;
padding-bottom: 50%;
height: 0;
padding-bottom: 61.805%;
overflow: hidden;
> picture > img {
width: 100%;
@include vendor('transition', (
'filter #{_duration(transition2)} ease',
'transform #{_duration(slow-transition)} ease'
));
@include vendor('filter', 'brightness(1.15) contrast(0.8) grayscale(1)');
@include vendor('transform', 'scale(1)');
&:hover {
@include vendor('filter', 'brightness(1.0) contrast(1.0) grayscale(0.2)');
@include vendor('transform', 'scale(1.2)');
}
}
/*
}
}
}
@include breakpoint('<=xlarge') {
}
@ -32,15 +57,15 @@
@include breakpoint('<=small') {
}
*/
@include breakpoint('<=xsmall') {
> section {
margin: 2em auto;
}
}
/*
@include breakpoint('<=xxsmall') {
}
*/
}

8
src/index.html
View File

@ -93,8 +93,16 @@
<div id="main">
<section>
<a target="_blank" rel="noopener" href="https://schulze-uebersetzungen.eu">
<div>
<picture id="letters">
<source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.webp" type="image/webp">
<source srcset="/img/site/schulze-uebersetzungen/letters@1.00x.png" type="image/png">
<img src="/img/site/schulze-uebersetzungen/letters@1.00x.png" alt="schulze-uebersetzungen">
</picture>
<h2>schulze-uebersetzungen</h2>
</div>
</a>
</section>
<section>
<div>