schrofi/schro.fi
1
0
Fork 0
Code Releases Activity

add sloped sections

Browse source
This commit is contained in:
Florian Schrofner 2019-10-03 21:33:52 +02:00
parent 687c46bb12
commit 8918a38929
2 changed files with 32 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
assets/sass/main.sass
View file

@ -13,6 +13,9 @@ $color-light-brown: #D1C1BA
$color-dark-brown: #52453F
$color-white: #FFFFFF
$slope-size: 6vw
$extra-padding: 2vw
body
font: 100% $regular-font-stack
color: $color-dark-brown
@ -35,9 +38,25 @@ h3
font-weight: bold
color: $color-white
/* left top, right top, right bottom, left bottom
.beige-content-block
background: $color-beige
clip-path: polygon(0 0, 100% $slope-size, 100% calc(100% - #{$slope-size}), 0 100%)
position: relative
top: -$slope-size
margin-bottom: -$slope-size
padding-top: $slope-size + $extra-padding
padding-bottom: $slope-size + $extra-padding
.brown-content-block
background: $color-light-brown
clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 calc(100% - #{$slope-size}))
position: relative
top: -$slope-size
margin-bottom: -$slope-size
padding-top: $slope-size + $extra-padding
padding-bottom: $slope-size + $extra-padding
#picture-holder
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - #{$slope-size}))

17
layouts/index.html
View file

@ -12,15 +12,15 @@
</div>
</div>
<div class="grid-x align-center">
<div class="grid-x align-center" id="picture-holder">
<!-- scale image for different resolutions -->
{{ $picture := resources.Get "images/me.png"}}
{{ $sPicture := $picture.Resize "x100" }}
{{ $mPicture := $picture.Resize "x400" }}
{{ $lPicture := $picture.Resize "x600" }}
<!-- <img data-interchange="[{{$sPicture.Permalink}}, small], [{{$mPicture.Permalink}}, medium], [{{$lPicture.Permalink}}, large]"> -->
<img data-interchange="[http://localhost:1313/images/me.png, small], [http://localhost:1313/images/me.png, medium], [http://localhost:1313/images/me.png, large]">
<!-- <img data-interchange="[http://localhost:1313/images/me.png, small], [http://localhost:1313/images/me.png, medium], [http://localhost:1313/images/me.png, large]"> -->
<img src="{{$lPicture.Permalink}}">
</div>
<div class="grid-x align-center beige-content-block">
@ -29,7 +29,7 @@
{{.Content}}
{{ end }}
</div>
</div>
</div>
<div class="grid-x align-center brown-content-block">
<div class="cell large-6">
@ -38,6 +38,15 @@
{{ end }}
</div>
</div>
<div class="grid-x align-center beige-content-block">
<div class="cell large-6">
{{ with .Site.GetPage "/section" }}
{{.Content}}
{{ end }}
</div>
</div>
</div>
{{ partial "script_append.html" . }}
</body>