From b54a49e1108614e82a3c7be7e2b84da5124457bd Mon Sep 17 00:00:00 2001 From: Derek Severin Date: Sun, 8 Aug 2021 19:10:36 +0700 Subject: About layout 'fixes' + Home button --- exampleSite/data/home.yaml | 6 +- exampleSite/static/images/arrow_down.png | Bin 0 -> 18724 bytes layouts/partials/sections/about.html | 14 +++- layouts/partials/sections/contact.html | 4 +- layouts/partials/sections/home.html | 15 +++- layouts/partials/sections/projects.html | 4 +- static/css/theme.css | 114 ++++++++++++++++++++++++++++--- 7 files changed, 138 insertions(+), 19 deletions(-) create mode 100644 exampleSite/static/images/arrow_down.png diff --git a/exampleSite/data/home.yaml b/exampleSite/data/home.yaml index 1c48e3b..3a55aeb 100644 --- a/exampleSite/data/home.yaml +++ b/exampleSite/data/home.yaml @@ -3,5 +3,9 @@ title: "YOUR NAME" subtitle: "A subtitle" background: "home.jpg" text: "A short catchy phrase ..." -button_text: "SEE MORE" +xbutton_text: "SEE MORE" +button_image: "images/arrow_down.png" +xbutton_icon: + icon: "fa-arrow-alt-circle-down" + pack: "fas" --- diff --git a/exampleSite/static/images/arrow_down.png b/exampleSite/static/images/arrow_down.png new file mode 100644 index 0000000..c47a6b8 Binary files /dev/null and b/exampleSite/static/images/arrow_down.png differ diff --git a/layouts/partials/sections/about.html b/layouts/partials/sections/about.html index b1c79ff..5adf820 100644 --- a/layouts/partials/sections/about.html +++ b/layouts/partials/sections/about.html @@ -34,15 +34,15 @@ {{- end -}} ">
-
+
{{ $title_length := 10 }} {{ with $params.title_length }} {{ $title_length = . }} {{ end }} {{ if eq $params.title_align "left" }} -
+
{{ else }} -
+
{{ end }} {{ with .title }}

{{ . }}

@@ -76,10 +76,18 @@ {{ if and (ne $params.layout "left") (ne $params.layout "right") }}
{{/* ~Hack to add space outside (shorter right) */}} +{{/*
+*/}} +
+

{{ .long_text | markdownify }}

+
{{ else }} +
+

+

{{ .long_text | markdownify }}

diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html index 6e6bc0f..83cda9e 100644 --- a/layouts/partials/sections/contact.html +++ b/layouts/partials/sections/contact.html @@ -6,8 +6,8 @@ {{ end }} >
-
-
+
+
{{ with .title }}

{{ . }}

diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html index 364635a..c4a7035 100644 --- a/layouts/partials/sections/home.html +++ b/layouts/partials/sections/home.html @@ -8,7 +8,7 @@
{{ with .title }} -

{{ . | markdownify }}

+

{{ . | markdownify }}

{{ end }} {{ with .subtitle }}

{{ . | markdownify }}

@@ -19,10 +19,19 @@ {{ with .text }}

{{ . | markdownify }}

{{ end }} - {{ with .button_text }} + {{ if .button_image }} + + + + {{ else if .button_text }} - {{ . }}
+ {{ .button_text }}
 + {{ else if .button_icon }} + {{ with .button_icon }} + + + {{ end }} {{ end }}
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html index 8dea28b..8be7c09 100644 --- a/layouts/partials/sections/projects.html +++ b/layouts/partials/sections/projects.html @@ -2,9 +2,9 @@
{{ $path := replace .File.Dir "\\" "/" }} {{ with .Title }} - +
-
+

{{ . }}

diff --git a/static/css/theme.css b/static/css/theme.css index bc00510..7e538a2 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -255,11 +255,56 @@ fieldset[disabled] .btn-primary.active { .btn { border: 0; - border-radius: 300px; - font-weight: 700; + border-radius: 0; + font-weight: 500; font-family: var(--BUTTON-FONT, var(--GENERAL-FONT-2)); + + padding: .5em; +} + +.btn-icon { + border: 0; + border-radius: 300px; + font-weight: 500; + + padding: 0; +} +.btn-icon:hover { + text-decoration: none; + + -webkit-transition: .1s ease-in-out; + -moz-transition: .1s ease-in-out; + -o-transition: .1s ease-in-out; + transition: .1s ease-in-out; + + transform: scale(1.1); +} +.btn-icon:active { + text-decoration: none; + transform: scale(0.9); +} +.btn-icon:focus { + text-decoration: none; +} + +.btn-image img { + /* TODO: size as param (?) */ + width:64px; + height:64px; +} +.btn-image img:hover { + -webkit-transition: .1s ease-in-out; + -moz-transition: .1s ease-in-out; + -o-transition: .1s ease-in-out; + transition: .1s ease-in-out; + + transform: scale(1.1); } +.btn-image img:active { + transform: scale(0.9); +} + .btn-xl { padding: 15px 30px; @@ -587,6 +632,17 @@ main { margin-top: 0; } +/* TODO: here? */ +.section-title-left { + padding-left: 0; + text-align:right; +} +.section-title-right { + padding-right: 0; + text-align:left; +} + + /******************************************************************************/ /* HOME */ @@ -704,23 +760,61 @@ TODO: check! } -/* TODO: could move paddings out of 'media' for all sizes (but seems ok as is */ +/* TODO: add (optional) background-color for 'boxes' (short+long) */ +/* TODO: fix problem of short+long boxes touching each other in normal layout, mobile size */ /*@media (min-width: 64em) {*/ + #about .long-text { +// padding-left: 5%; +// padding-right: 5%; +//padding: 5%; +padding-bottom: 1px; +padding-top: 1px; +padding-left: 15px; +padding-right: 15px; +//margin: 5px; +//margin-top: 5%; +background-color: var(--about-bkg-color); +//background-color: grey; + } + #about .profile { +// padding-left: 5%; +// padding-right: 5%; +padding: 5%; +//margin: 5px; +background-color: var(--about-bkg-color); +//background-color: grey; + +//text-align: right; + } @media (min-width: 992px) { +/* #about .profile { - padding-left: 5%; - padding-right: 5%; +// padding-left: 5%; +// padding-right: 5%; +padding: 5%; +//margin: 5px; +background-color: grey; //text-align: right; } +*/ #about .short-text { text-align: left; } - +/* #about .long-text { - padding-left: 5%; - padding-right: 5%; +// padding-left: 5%; +// padding-right: 5%; +//padding: 5%; +padding-bottom: 1px; +padding-top: 1px; +padding-left: 15px; +padding-right: 15px; +//margin: 5px; +//margin-top: 5%; +//background-color: grey; } +*/ } /*@media (min-width: 80em) {*/ /* @@ -905,6 +999,10 @@ min-height: 300px; width: 100%; } +.projects-link .row { + margin: 0px; +} + .project-box { display: block; position: relative; -- cgit v1.2.3