diff options
author | Derek Severin <severinderek@gmail.com> | 2022-07-16 10:42:45 +0300 |
---|---|---|
committer | Derek Severin <severinderek@gmail.com> | 2022-07-16 10:42:45 +0300 |
commit | a286ba6a83a6394d470c24d56320089ff1c3b522 (patch) | |
tree | 0bf9eb8db0a7c048bde15aebd06e1354d7fd3b86 | |
parent | 6661cb5267643b6f7b89c53e45775de0d38c41e3 (diff) |
About offsets + home imagedevelop
-rw-r--r-- | layouts/partials/sections/about.html | 67 | ||||
-rw-r--r-- | layouts/partials/sections/home.html | 7 | ||||
-rw-r--r-- | static/css/theme.css | 43 |
3 files changed, 85 insertions, 32 deletions
diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html index de8b08f..6565780 100644 --- a/layouts/partials/sections/about.html +++ b/layouts/partials/sections/about.html @@ -26,6 +26,10 @@ {{ $offset_left = add $offset_left $remaining }} {{ $remaining = 0 }} {{ end }} +{{- $sum := add (add (add $main_side $extra_side) $offset_left) $offset_right -}} +{{- if gt $sum 12 -}} +ERROR: Sum of columns width bigger than 12! - Check "params.about" in "config.toml" +{{- end -}} {{ $offset_center := $remaining }} <section class="section" id="about" style=" @@ -35,12 +39,12 @@ {{- if ne $params.background "full" -}} {{- if eq $params.layout "left" -}} --about-bkg-width: {{ mul (div $extra_side 12.0) 100 }}%; - --about-bkg-margin-left: {{ mul (div $main_side 12.0) 100 }}%; - --about-bkg-margin-right: 0; + --about-bkg-margin-left: {{ mul (div (add $main_side $offset_left) 12.0) 100 }}%; + --about-bkg-margin-right: {{ mul (div $offset_right 12.0) 100 }}%; {{- else if eq $params.layout "right" -}} --about-bkg-width: {{ mul (div $extra_side 12.0) 100 }}%; - --about-bkg-margin-left: 0; - --about-bkg-margin-right: {{ mul (div $main_side 12.0) 100 }}%; + --about-bkg-margin-left: {{ mul (div $offset_left 12.0) 100 }}%; + --about-bkg-margin-right: {{ mul (div (add $main_side $offset_right) 12.0) 100 }}%; {{- end -}} {{- end -}} {{/* TODO: keep this in 'config'? (should be enough with only in CSS) */}} @@ -61,12 +65,13 @@ {{ end }} <div class="container-fluid"> <div class="row"> - {{ if eq $params.layout "right" }} - <div class="col-xs-12 col-md-{{ $extra_side }}"></div> - {{ else if eq $params.layout "left" }} - {{ $offset_left := sub (sub 12 $extra_side) $main_side }} + {{- if eq $params.layout "right" -}} + <div class="col-xs-12 col-md-{{ add $extra_side $offset_left }}"></div> + {{- else if eq $params.layout "left" -}} + {{- if gt $offset_left 0 -}} <div class="col-xs-12 col-md-{{ $offset_left }}"></div> - {{ end }} + {{- end -}} + {{- end -}} {{ if and (ne $params.layout "left") (ne $params.layout "right") }} {{/* ~Hack to add space outside (offset left) */}} {{/* @@ -76,23 +81,35 @@ {{ else }} <div class="col-xs-12 col-md-{{ $main_side }}"> {{ end }} - <div class="profile"> - {{ if .avatar }} - {{/* 2-REC: Special "hover easter egg" */}} - {{ if .avatar2 }} - <div class="portrait" style="position:relative; overflow: hidden;"> - <img id="avatar1" src="{{ printf "images/%s" .avatar }}"> - <img id="avatar2" src="{{ printf "images/%s" .avatar2 }}" oncontextmenu="return false;"> + <div class="container-fluid profile"> + <div class="row"> + {{- $width_portrait := 12 -}} + {{- $width_text := 12 -}} + {{- if or (eq $params.layout "left") (eq $params.layout "right") -}} + {{- $width_portrait = $params.portrait_width -}} + {{- $width_text = sub 12 $width_portrait -}} + {{- end -}} + {{- if .avatar -}} + <div class="col-xs-12 col-md-{{ $width_portrait }}"> + {{/* 2-REC: Special "hover easter egg" */}} + {{- if .avatar2 -}} + <div class="portrait"> + <img id="avatar1" src="{{ printf "images/%s" .avatar }}"> + <img id="avatar2" src="{{ printf "images/%s" .avatar2 }}" oncontextmenu="return false;"> + </div> + {{- else -}} + <img class="portrait" src="{{ printf "/images/%s" .avatar}}"> + {{- end -}} + </div> + {{- end -}} + {{- with .short_text -}} + <div class="col-xs-12 col-md-{{ $width_text }}"> + <div class="text-primary short-text"> + {{ . | markdownify }} + </div> </div> - {{ else }} - <img class="portrait" src="{{ printf "/images/%s" .avatar}}"> - {{ end }} - {{ end }} - {{ with .short_text }} - <div class="text-primary short-text"> - <p>{{ . | markdownify }}</p> - </div> - {{ end }} + {{- end -}} + </div> </div> {{ if .long_text }} {{ if and (ne $params.layout "left") (ne $params.layout "right") }} diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html index 97557e9..a630222 100644 --- a/layouts/partials/sections/home.html +++ b/layouts/partials/sections/home.html @@ -1,9 +1,14 @@ {{ $params := .Site.Params.home }} {{ with .Site.Data.home }} <section id="home" +{{/* {{ with .background }} - style="background-image: url('{{ (printf "images/%s" .) | absURL }}');" + style="background-image: url('{{ (printf "images/%s" .) | absURL }}'); opacity: 50%;" {{ end }} +*/}} +{{- with .background -}} + style="--home-bkg-image: url('{{ (printf "images/%s" .) | absURL }}');" +{{- end -}} > <div class="header-content" style=" diff --git a/static/css/theme.css b/static/css/theme.css index 9bbe9bd..1351d9a 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -461,7 +461,7 @@ ul.images-list { .profile { text-align: center; // padding: 30px 10px; -padding: 2em 2em 2em 2em; +padding: 2rem; position: relative; } @@ -469,7 +469,7 @@ padding: 2em 2em 2em 2em; width: 200px; height: 200px; // width: 100%; - margin: 0 auto 30px; + margin: 0 auto; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; @@ -722,12 +722,42 @@ main { position: relative; min-height: 100vh; +/* background-position: center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-color: var(--HOME-BACKGROUND-COLOR, transparent); +*/ +/* TODO: why was '-2'? => bug (can't select text + button) */ +/*z-index: -2;*/ +z-index: 0; +/* TODO: from param */ +/*background-color: transparent;*/ +background-color: black; +} + +#home::after { + position: absolute; + z-index: -1; + content: ""; +width:100%; + + background-position: center; + -webkit-background-size: cover; + -moz-background-size: cover; + background-size: cover; + -o-background-size: cover; + +/* background-color: var(--HOME-BACKGROUND-COLOR, transparent);*/ +top:0; +left:0; +bottom:0; +right:0; + background-image: var(--home-bkg-image); +/* TODO: from variable! */ + opacity: 50%; } #home_video { @@ -896,7 +926,6 @@ background-color: var(--about-bkg-color); #about .profile { // padding-left: 5%; // padding-right: 5%; -padding: 5%; //margin: 5px; background-color: var(--about-bkg-color); background-color: white; @@ -1022,7 +1051,7 @@ background-size: cover; width: var(--about-image-width); height: auto; /* 2-REC TODO: set as custom param */ - max-width: 300px; +/* max-width: 300px;*/ } /*@media (min-width: 64em) {*/ @media (max-width: 992px) { @@ -1038,6 +1067,9 @@ background-size: cover; #about .text-tertiary p { text-justify: inter-word; } +#about .short-text p:last-of-type { + margin: 0; +} #avatar1 { /* 2-REC: setting position here causes problems with height */ @@ -1325,8 +1357,6 @@ min-height: 300px; } #contact .profile { - padding: 2em 2em 2em 2em; - background-color: var(--CONTACT-PROFILE-COLOR, var(--GENERAL-COLOR-2)); border-radius: var(--CONTACT-PROFILE-BORDER-RADIUS, 0px); box-shadow: var(--CONTACT-PROFILE-BOX-SHADOW, 0); @@ -1334,6 +1364,7 @@ min-height: 300px; #contact .portrait { border-radius: var(--CONTACT-IMAGE-BORDER-RADIUS, var(--GENERAL-IMAGE-BORDER-RADIUS)); +margin-bottom: 2em; } #contact .text-primary { |