diff options
| author | Derek Severin <severinderek@gmail.com> | 2021-09-02 14:29:16 +0300 |
|---|---|---|
| committer | Derek Severin <severinderek@gmail.com> | 2021-09-02 14:29:16 +0300 |
| commit | ec37a055bbcab3c3d788a2ada9407bc3148b21fe (patch) | |
| tree | b92d95d9098f319b7bed47b78f99398c0b738450 | |
| parent | 90669892f401407ef9ad7da5b26e88daf6c3a6ee (diff) | |
Home section variables - unfinished
| -rw-r--r-- | TODO/TODO.md | 5 | ||||
| -rw-r--r-- | layouts/partials/sections/home.html | 15 | ||||
| -rw-r--r-- | static/css/default.css | 8 | ||||
| -rw-r--r-- | static/css/theme.css | 25 |
4 files changed, 44 insertions, 9 deletions
diff --git a/TODO/TODO.md b/TODO/TODO.md index c69aecb..23e46b4 100644 --- a/TODO/TODO.md +++ b/TODO/TODO.md @@ -1,5 +1,10 @@ # TODO + +!!!! +- add CSS+layout variables changes in README + exampleSite config.toml! +!!!! + - [ ] Complete README.md file => What to add? - [ ] Reference "Minimal Academic" theme for the sidebar stuff? (if not done) diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html index 4157a81..b073591 100644 --- a/layouts/partials/sections/home.html +++ b/layouts/partials/sections/home.html @@ -1,10 +1,23 @@ +{{ $params := .Site.Params.home }} {{ with .Site.Data.home }} <section id="home" {{ with .background }} style="background-image: url('{{ (printf "images/%s" .) | absURL }}');" {{ end }} > - <div class="header-content"> + <div class="header-content" + style=" + {{- with $params.width -}} + --home-width: {{ . }}%; + {{- end -}} + {{- with $params.offset_h -}} + --home-offset-h: {{ . }}%; + {{- end -}} + {{- with $params.offset_v -}} + --home-offset-v: {{ . }}%; + {{- end -}} + " + > <div class="header-content-inner"> {{ with .title }} {{/* HOME_LAYOUT diff --git a/static/css/default.css b/static/css/default.css index 631c90b..90229c2 100644 --- a/static/css/default.css +++ b/static/css/default.css @@ -39,6 +39,14 @@ } +/* HOME */ +#home { + /* The following variables should not be changed (managed by code) */ + --home-width: 50%; + --home-offset-h: 50%; + --home-offset-v: 50%; +} + /* ABOUT */ #about { --about-bkg-color: var(--GENERAL-COLOR-1); diff --git a/static/css/theme.css b/static/css/theme.css index 3d657c2..0880b7c 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -656,7 +656,7 @@ main { /* HOME */ -/* TODO: rewrite+check all subcases (inner, etc) */ +/* TODO: rewrite+check all subcases (inner, etc) + ADD VARIABLES! (align, sizes?) */ /* TODO: check required/desired variables and add to "default css" */ #home { @@ -729,13 +729,22 @@ width: 100%; */ /* HOME_LAYOUT - MID */ padding: 0; -/* TODO: use variables for 'top' and 'left' (0-100%) */ -width: 50%; -left: 50%; -top: 50%; --webkit-transform: translate(-50%,-50%); --ms-transform: translate(-50%,-50%); -transform: translate(-50%,-50%); +width: var(--home-width); +left: var(--home-offset-h); +top: var(--home-offset-v); + +-webkit-transform: translate( + calc(-1 * var(--home-offset-h)), + calc(-1 * var(--home-offset-v)) +); +-ms-transform: translate( + calc(-1 * var(--home-offset-h)), + calc(-1 * var(--home-offset-v)) +); +transform: translate( + calc(-1 * var(--home-offset-h, 0%)), + calc(-1 * var(--home-offset-v, 0%)) +); /* HOME_LAYOUT - END */ } |