diff options
author | Joe Hutchinson <hutch7995@gmail.com> | 2020-10-22 00:55:25 +0300 |
---|---|---|
committer | Joe Hutchinson <hutch7995@gmail.com> | 2020-10-22 00:55:25 +0300 |
commit | f222420c120ea0b11bbf55b1bd24e059b225f3e5 (patch) | |
tree | 6d056585b02c0cafdf63d799efcbcd0cc46738c4 | |
parent | e68d21541aeb9fb3480e3816a404687664d7e796 (diff) |
*Major Overhaul* Give theme a modern look!
-rw-r--r-- | assets/css/style.css | 189 | ||||
-rw-r--r-- | assets/icons/github.png | bin | 0 -> 3506 bytes | |||
-rw-r--r-- | assets/icons/home-page.png | bin | 0 -> 1236 bytes | |||
-rw-r--r-- | assets/icons/linkedin.png | bin | 0 -> 1469 bytes | |||
-rw-r--r-- | layouts/_default/home.html | 42 | ||||
-rw-r--r-- | layouts/_default/li-next.html | 2 | ||||
-rw-r--r-- | layouts/_default/li.html | 2 | ||||
-rw-r--r-- | layouts/_default/single.html | 2 | ||||
-rw-r--r-- | layouts/partials/footer.html | 22 | ||||
-rw-r--r-- | layouts/partials/head.html | 3 | ||||
-rw-r--r-- | static/img/home-blob-flip.svg | 27 | ||||
-rw-r--r-- | static/img/home-blob.svg | 27 |
12 files changed, 249 insertions, 67 deletions
diff --git a/assets/css/style.css b/assets/css/style.css index 9dc678e..12b9fa9 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,11 +1,10 @@ body { - font-family: 'LatoLatinWeb', Avenir, HelveticaNeue-Light, "Helvetica Neue Light", + font-family: Avenir, HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; - color: #141823; + color: #454545; font-size: 1.1em; - background-color: #ecedef; + background-color: #E2E5EA; margin: 0; - padding: 0 0 2em 0; display: flex; flex-direction: column; align-items: center; @@ -16,13 +15,48 @@ body { p { margin: 1.5em 0; } -b, -strong { - font-family: 'LatoLatinWebHeavy'; +.home-header { + min-height: 26rem; + max-width: 50rem; + margin: 0 -1.2rem -5rem -1.2rem; + padding: 1.2rem; + display: flex; + flex-direction: column; + z-index: -1; + color: white; + background-image: url('http://localhost:1313/img/home-blob.svg'); + background-position: center; + background-size: cover; +} +.home-faceshot-card { + align-self: center; + padding: 0.5rem; + margin-bottom: 3rem; + max-width: 17rem; + width: 100%; + background-color: white; + border-radius: 1.2rem; + box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1); +} +.home-faceshot { + margin: 0; + border-radius: 0.8rem; +} +.home-blob-text-container { + margin: 2em 0; + line-height: 1.5; +} +.home-blob-title{ + font-size: 1.5em; font-weight: normal; + margin: 0; +} +.home-blob-text{ + margin: 0.5em 0 0 0; + font-size: 1.1em; } .nav-bar { - max-width: 50rem; + max-width: 60rem; width: 100%; padding: 0.4em 0; display: flex; @@ -31,11 +65,12 @@ strong { } .nav-header { margin: 0; + font-size: 1.4em; } .nav-text { + font-weight: normal; text-decoration: none; z-index: 105; - font-size: 0.8em; } .hamburger-menu { display: block; @@ -60,16 +95,16 @@ strong { .hamburger-menu button span { display: block; width: 33px; - height: 4px; + height: 3px; position: relative; - background-color: #141823; + background-color: #454545; border-radius: 3px; transform-origin: center; transition: transform 0.3s cubic-bezier(0.77,0.2,0.05,1.0), background-color 0.3s cubic-bezier(0.77,0.2,0.05,1.0); } .hamburger-menu button span:first-of-type { - margin-bottom: 5px; + margin-bottom: 6px; } .hamburger-menu-open button span { background-color: white; @@ -109,20 +144,22 @@ strong { } .post { margin: 0 0 1em 0; - line-height: 1.6; + line-height: 1.9; } .post-header { margin: 0 0 1.5em 0; } .post-title { font-size: 1.8em; + font-weight: 500; + color: #2A2A84; line-height: 1.2; margin: 0 0 0.4em 0; } .post-date { display: block; color: #7a7b7c; - font-size: 0.8em; + font-size: 0.7em; margin: 0; } .post-figure { @@ -132,18 +169,19 @@ strong { float: left; font-size: 3em; line-height: 1; - margin: 0.05em 0.15em -0.1em 0; + margin: 0.08em 0.15em -0.4em 0; /* initial-letter: 2; Maybe someday*/ } .content { background-color: white; padding: 2em 0; - margin-bottom: 2em; + margin-bottom: 3rem; width: 100%; - max-width: 52rem; - border-radius: 0.3rem; + max-width: 51rem; + border-radius: 1.2rem; + z-index: 2; transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); - box-shadow: 0 0.7rem 1.4rem 0 rgba(0,0,0,0.25), 0 0.5rem 0.5rem 0 rgba(0,0,0,0.22); + box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1); } .list-header { margin: 6em 0; @@ -165,21 +203,21 @@ strong { line-height: 1.6em; } .card-container { - max-width: 49rem; + max-width: 48rem; } -.card-container > a:first-of-type { +/* .card-container > a:first-of-type { margin-top: 5em; -} +} */ .card { display: block; - margin: 2.2rem 0; + margin: 3rem 0; box-sizing: border-box; background-color: white; text-decoration: none; - border-radius: 0.3rem; + border-radius: 1.2rem; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: transform 0.2s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.2s cubic-bezier(0.25,0.8,0.25,1); - box-shadow: 0 0.5rem 1rem 0 rgba(0,0,0,0.19), 0 0.3rem 0.3rem -0.1rem rgba(0,0,0,0.23); + box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1); } .home-card { padding: 0.8em; @@ -195,22 +233,26 @@ strong { flex-direction: column; align-items: stretch; } +.bc-next { + margin-top: 0; +} .card-img-container { position: relative; + margin: 0.5rem; } .card-img { - border-radius: 0.3rem 0.3rem 0 0; - margin: 0 0 -0.28em 0; + border-radius: 0.8rem; + margin: 0 0 -0.7em 0; max-height: 10em; object-fit: cover; } .card-img-overlay { - border-radius: 0.3rem 0.3rem 0 0; + border-radius: 0.8rem 0.8rem 0 0; position: absolute; top: 0; font-size: 1.27em; text-align: center; - padding: 1.18em 0 0.5em 0; + padding: 0.77em 0; width: 100%; box-sizing: border-box; margin: 0; @@ -219,15 +261,17 @@ strong { z-index: 5; } .card-body { - padding: 1em; + margin: 1.3em 1.5em; + line-height: 1.6; } .card-title { margin: 0; - line-height: 1.2; + color: #2A2A84; + font-size: 1.3em; + font-weight: 500; } .card-text { margin: 1em 0; - line-height: 1.5; } .card-subtext { display: flex; @@ -246,16 +290,17 @@ strong { } .end-nav { width: 100%; - max-width: 49rem; + max-width: 48rem; + z-index: 2; } .pagination-nav { margin: 2em 0; width: 100%; max-width: 47rem; } -.pagination-text { +/* .pagination-text { font-family: 'LatoLatinWebMedium'; -} +} */ .pagination-newer { float:left; } @@ -268,7 +313,7 @@ strong { text-decoration: none; border-radius: 0.3rem; transition: transform 0.1s cubic-bezier(0.25,0.8,0.25,1), box-shadow 0.1s cubic-bezier(0.25,0.8,0.25,1); - box-shadow: 0 0.15rem 0.3rem rgba(0,0,0,0.16), 0 0.15rem 0.3rem rgba(0,0,0,0.23); + box-shadow: 0 0.7rem 2.3rem 0 rgba(0,0,0,0.1); } .button:hover { box-shadow: 0 0.05rem 0.15rem rgba(0,0,0,0.12), 0 0.05rem 0.1rem rgba(0,0,0,0.24); @@ -301,7 +346,7 @@ strong { margin: 0 auto 1.5em auto; } .muted-text { - color: #7a7b7c; + color: #8E8E8E; } .katex-display { margin: 1.5em 0; @@ -373,7 +418,7 @@ hr { clear: both; } a { - color: #141823; + color: #454545; } table { color: #141823; @@ -386,27 +431,44 @@ th { padding: 0.5em 1em; border: thin solid #D1D1D1 } -th { +/* th { font-family: 'LatoLatinWebHeavy'; font-weight: normal; -} +} */ tr:nth-child(even) td { background: #f5f6f7; } footer { - padding: 2em 0; - margin: 2em 0 0 0; + height: 17rem; + max-width: 50rem; + width: 100%; + margin-top: -10rem; + display: flex; + flex-flow: row wrap; + justify-content: space-evenly; + align-items: flex-end; + color: white; + background-image: url('http://localhost:1313/img/home-blob-flip.svg'); + background-position: 40% 0%; + background-size: 50rem; +} +.footer-link { + margin: 1rem 0; +} +.footer-icon { + max-width: 4rem; + margin: 0; } @media screen and (pointer: coarse) { - .card-hover { - transform: scale(0.95); - box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23); + .card-hover { + transform: scale(0.95); + box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.2); } } @media not screen and (pointer: coarse) { .card:hover { transform: scale(0.97); - box-shadow: 0 0.15rem 0.3rem 0 rgba(0, 0, 0, 0.16), 0 0.15rem 0.3rem -0.04rem rgba(0, 0, 0, 0.23); + box-shadow: 0 0.4rem 2rem 0 rgba(0,0,0,0.2); } .card:active { transform: scale(1); @@ -417,6 +479,17 @@ footer { body { font-size: 1.15rem; } + .home-header { + flex-direction: row; + align-items: flex-start; + } + .home-blob-text-container { + margin: 4rem 2rem 4rem 6rem; + flex-shrink: 10; + } + .home-faceshot-card { + align-self: unset; + } .nav-bar { padding: 0.8em 0; } @@ -424,45 +497,41 @@ footer { font-weight: normal; font-size: 4.2em; } - .card { - border-radius: 0.2rem; - /* margin: 2.5em 0; */ - } .blog-card { flex-direction: row; align-items: stretch; } .card-img { - border-radius: 0.2rem 0 0 0.2rem; margin: 0; max-height: unset; height: 100%; - width: 15em; + width: 16em; } .card-img-overlay { - border-radius: 0.2rem 0 0 0; + border-radius: 0.8rem 0.8rem 0 0; } .card-body { - padding: 1.5em 1.3em; + margin: 1.3em 1.7em; } .card-title { - font-size: 1.27em; + font-size: 1.3em; } .card-text { - font-size: 0.95em; - margin: 1.2em 0; + font-size: 0.9em; + margin: 0.8em 0 1.2em 0; } .card-subtext { font-size: 0.7em; + margin-bottom: 0.7em; } .content { - border-radius: 0.2rem; + border-radius: 1.2rem; } .post { - margin: 1em 1em 2em 1em; + margin: 1em 1.8em 2em 1.8em; } .post-title { - font-size: 2.5em; + font-size: 2em; } .button { border-radius: 0.2rem; diff --git a/assets/icons/github.png b/assets/icons/github.png Binary files differnew file mode 100644 index 0000000..84b6260 --- /dev/null +++ b/assets/icons/github.png diff --git a/assets/icons/home-page.png b/assets/icons/home-page.png Binary files differnew file mode 100644 index 0000000..ca09cf2 --- /dev/null +++ b/assets/icons/home-page.png diff --git a/assets/icons/linkedin.png b/assets/icons/linkedin.png Binary files differnew file mode 100644 index 0000000..8caa731 --- /dev/null +++ b/assets/icons/linkedin.png diff --git a/layouts/_default/home.html b/layouts/_default/home.html new file mode 100644 index 0000000..a8f989b --- /dev/null +++ b/layouts/_default/home.html @@ -0,0 +1,42 @@ +<!DOCTYPE html> +<html lang="{{ .Site.LanguageCode }}" dir="ltr"> + {{ partial "head.html" . }} + <body class="list-body"> + {{ partial "nav-bar.html" . }} + <main class="card-container side-gutter"> + {{ if or (not (eq .Description "")) (not (eq .Title "")) -}} + <header class="home-header"> + <div class="home-blob-text-container"> + {{ with .Title }}<h1 class="home-blob-title">{{ . }}</h1>{{ end }} + {{ with .Description }}<p class="home-blob-text">{{ . }}</p>{{ end }} + </div> + {{ with resources.Get "img/faceshot.png" -}} + <div class="home-faceshot-card"> + <img class="home-faceshot" src="{{ .Permalink }}" > + </div> + {{ end -}} + </header> + {{- end }} + {{ with .Content -}} + <section class="list-header-content"> + {{ . }} + </section> + {{- end }} + {{ $pages := .Pages }} + {{ if .IsHome }} + {{ $pages = .Site.RegularPages }} + {{ end }} + {{ $paginator := .Paginate (where $pages "Params.displayinlist" "!=" false) -}} + {{- range $paginator.Pages -}} + {{ .Render "li" }} + {{- end }} + </main> + {{ if or ($paginator.HasPrev) ($paginator.HasNext) -}} + <nav class="pagination-nav side-padding"> + {{ if $paginator.HasPrev }}<a href="{{ $paginator.Prev.URL }}" class="pagination-newer pagination-text">< Newer Posts</a>{{ end }} + {{ if $paginator.HasNext }}<a href="{{ $paginator.Next.URL }}" class="pagination-older pagination-text">Older Posts ></a>{{ end }} + </nav> + {{- end }} + {{ partial "scripts.html" . }} + </body> +</html> diff --git a/layouts/_default/li-next.html b/layouts/_default/li-next.html index e95a1c1..9b0897f 100644 --- a/layouts/_default/li-next.html +++ b/layouts/_default/li-next.html @@ -1,5 +1,5 @@ <a ontouchstart="cardPressed.call(this)" ontouchend="cardReleased.call(this)" ontouchmove="cardReleased.call(this)" - href="{{ .Permalink }}" class="card blog-card" rel="bookmark" > + href="{{ .Permalink }}" class="card blog-card bc-next" rel="bookmark" > {{ with .Resources.GetMatch "featuredImage" }} <div class="card-img-container"> <p class="card-img-overlay">Next Article</p> diff --git a/layouts/_default/li.html b/layouts/_default/li.html index 6e3eb70..a672eaf 100644 --- a/layouts/_default/li.html +++ b/layouts/_default/li.html @@ -6,7 +6,7 @@ {{ with $.Resources.GetMatch (replace (.Title) (path.Ext (.Title)) ".webp") -}} <source srcset="{{ .Permalink }}" type="image/webp"> {{- end }} - {{ $thumbnail := .Fit "400x300 Lanczos" }} + {{ $thumbnail := .Fit "800x600 Lanczos" }} <source srcset="{{ $thumbnail.Permalink }}"> <img src="{{ $thumbnail.Permalink }}" class="card-img" {{ with .Params.description -}} alt="{{ . }}" {{- end }}> </picture> diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 9bf3238..0c43b52 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -31,8 +31,8 @@ {{ with .PrevInSection }} {{ .Render "li-next" }} {{ end }} - {{ partial "home-card.html" . }} </nav> + {{ partial "footer.html" . }} {{ partial "scripts.html" . }} </body> </html> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index d9ce604..e1e163f 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,3 +1,21 @@ -<footer> - +<footer class="side-padding"> + <a href="{{ $.Site.BaseURL }}" class="footer-link"> + {{ with resources.Get "icons/home-page.png" }} + <img class="footer-icon" src="{{ .Permalink }}"> + {{ end }} + </a> + {{ if isset $.Site.Params "github"}} + <a href="{{ $.Site.Params.github }}" class="footer-link"> + {{ with resources.Get "icons/github.png" }} + <img class="footer-icon" src="{{ .Permalink }}" /> + {{ end }} + </a> + {{ end }} + {{ if isset $.Site.Params "linkedin"}} + <a href="{{ $.Site.Params.linkedin }}" class="footer-link"> + {{ with resources.Get "icons/linkedin.png" }} + <img class="footer-icon" src="{{ .Permalink }}" /> + {{ end }} + </a> + {{ end }} </footer>
\ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index dc638c8..f846a4e 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -27,9 +27,8 @@ {{ end -}} {{ $normalizeStyle := resources.Get "css/normalize.css" }} {{ $mainStyle := resources.Get "css/style.css" }} - {{ $fontStyle := resources.Get "css/latolatinfonts.css" }} {{ $overrideStyle := resources.Get "css/override.css" }} - {{ $style := slice $normalizeStyle $fontStyle $mainStyle $overrideStyle | resources.Concat "css/concated.css" | minify }} + {{ $style := slice $normalizeStyle $mainStyle $overrideStyle | resources.Concat "css/concated.css" | minify }} <link href="{{ $style.Permalink }}" rel="stylesheet"> {{ range .AlternativeOutputFormats -}} {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} diff --git a/static/img/home-blob-flip.svg b/static/img/home-blob-flip.svg new file mode 100644 index 0000000..f066296 --- /dev/null +++ b/static/img/home-blob-flip.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063.882" height="599.449" viewBox="0 0 1063.882 599.449"> + <defs> + <filter id="Path_3" x="0" y="0" width="1063.882" height="599.449" filterUnits="userSpaceOnUse"> + <feOffset dy="5" input="SourceAlpha"/> + <feGaussianBlur stdDeviation="7.5" result="blur"/> + <feFlood flood-opacity="0.251"/> + <feComposite operator="in" in2="blur"/> + <feComposite in="SourceGraphic"/> + </filter> + <filter id="Path_6" x="61.201" y="85.157" width="864.12" height="505.297" filterUnits="userSpaceOnUse"> + <feOffset dy="5" input="SourceAlpha"/> + <feGaussianBlur stdDeviation="7.5" result="blur-2"/> + <feFlood flood-opacity="0.251"/> + <feComposite operator="in" in2="blur-2"/> + <feComposite in="SourceGraphic"/> + </filter> + </defs> + <g id="cool-background" transform="translate(22.5 17.5)"> + <path id="Path_1" data-name="Path 1" d="M727.865,81.108q-27.1-60.347,10.248-75.669C775.461-9.884,864.267-16.013,901.388-49.251s150.3-7.543,169.659,49.5,54.209,144.974-129.57,144.974q-183.78,0-213.612-64.118Z" transform="translate(-481.865 376.242)" fill="#fffa72"/> + <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_3)"> + <path id="Path_3-2" data-name="Path 3" d="M343.971,269.935q8.609-159.92,128-200.524c119.392-40.6,362.9-56.846,505.563-144.927S1385.888-95.5,1361.159,55.669s-49.551,384.18-536.564,384.18q-487.018,0-480.622-169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/> + </g> + <g transform="matrix(1, 0, 0, 1, -22.5, -17.5)" filter="url(#Path_6)"> + <path id="Path_6-2" data-name="Path 6" d="M442.65,218.437Q429.712,85.673,523.73,51.964C617.749,18.255,817.863,4.771,925.24-68.353S1261.74-84.947,1260.2,40.555,1267.311,359.5,863,359.5q-404.317,0-420.347-141.06Z" transform="translate(-357.38 203.46)" fill="#6fc97d"/> + </g> + </g> +</svg> diff --git a/static/img/home-blob.svg b/static/img/home-blob.svg new file mode 100644 index 0000000..f6d83eb --- /dev/null +++ b/static/img/home-blob.svg @@ -0,0 +1,27 @@ +<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1063.882" height="599.449" viewBox="0 0 1063.882 599.449"> + <defs> + <filter id="Path_3" x="0" y="0" width="1063.882" height="599.449" filterUnits="userSpaceOnUse"> + <feOffset dy="5" input="SourceAlpha"/> + <feGaussianBlur stdDeviation="7.5" result="blur"/> + <feFlood flood-opacity="0.251"/> + <feComposite operator="in" in2="blur"/> + <feComposite in="SourceGraphic"/> + </filter> + <filter id="Path_6" x="61.201" y="8.995" width="864.12" height="505.297" filterUnits="userSpaceOnUse"> + <feOffset dy="5" input="SourceAlpha"/> + <feGaussianBlur stdDeviation="7.5" result="blur-2"/> + <feFlood flood-opacity="0.251"/> + <feComposite operator="in" in2="blur-2"/> + <feComposite in="SourceGraphic"/> + </filter> + </defs> + <g id="cool-background" transform="translate(-309.407 133.702)"> + <path id="Path_1" data-name="Path 1" d="M727.865.118q-27.1,60.347,10.248,75.669c37.348,15.322,126.154,21.451,163.275,54.689s150.3,7.543,169.659-49.5S1125.256-64,941.478-64Q757.7-64,727.866.118Z" transform="translate(-149.958 -19.221)" fill="#fffa72"/> + <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_3)"> + <path id="Path_3-2" data-name="Path 3" d="M343.971,55.314q8.609,159.92,128,200.524c119.392,40.6,362.9,56.846,505.563,144.927s408.353,19.988,383.624-131.185S1311.607-114.6,824.594-114.6q-487.018,0-480.622,169.914Z" transform="translate(-321.39 132.1)" fill="#2a2a84"/> + </g> + <g transform="matrix(1, 0, 0, 1, 309.41, -133.7)" filter="url(#Path_6)"> + <path id="Path_6-2" data-name="Path 6" d="M442.65,40.26q-12.938,132.764,81.08,166.473c94.019,33.709,294.133,47.193,401.51,120.317s336.5,16.594,334.956-108.908S1267.311-100.8,863-100.8q-404.317,0-420.347,141.06Z" transform="translate(-357.38 127.29)" fill="#6fc97d"/> + </g> + </g> +</svg> |