From f2ba6ae6af0f7e7c4897a6856e60b3050b7dc354 Mon Sep 17 00:00:00 2001 From: Justin Nguyen Date: Tue, 22 Dec 2020 03:26:55 -0800 Subject: [PATCH] Update design to single page layout for my portfolio --- archetypes/homepage-section.md | 5 + archetypes/posts.md | 1 + assets/css/main.css | 2 +- assets/css/post.css | 2 +- assets/css/section.css | 89 ++++++++++ assets/css/style.css | 1 + layouts/_default/index.html | 155 +++++++++++------- layouts/_default/list.html | 6 +- layouts/_default/single.html | 2 +- layouts/partials/footer.html | 2 +- layouts/partials/section.html | 28 ++++ .../0fe15bb5eea5828156c892b0708bea40.woff | Bin 102788 -> 0 bytes .../910c4f69908ca1b54b0fed395a9ad573.woff | Bin 111000 -> 0 bytes static/assets/blue.css | 2 +- static/assets/green.css | 2 +- static/assets/languageSelector.js | 101 +++++++++++- static/assets/main.js | 101 +++++++++++- static/assets/pink.css | 2 +- static/assets/prism.js | 130 ++++++++++++++- static/assets/red.css | 2 +- static/assets/style.css | 2 +- 21 files changed, 552 insertions(+), 83 deletions(-) create mode 100644 archetypes/homepage-section.md create mode 100644 assets/css/section.css create mode 100644 layouts/partials/section.html delete mode 100644 static/assets/0fe15bb5eea5828156c892b0708bea40.woff delete mode 100644 static/assets/910c4f69908ca1b54b0fed395a9ad573.woff diff --git a/archetypes/homepage-section.md b/archetypes/homepage-section.md new file mode 100644 index 0000000..5a9f2a3 --- /dev/null +++ b/archetypes/homepage-section.md @@ -0,0 +1,5 @@ ++++ +title = "{{ replace .TranslationBaseName "-" " " | title }}" +cover = "" +layout = "post" # Can be post (1 column), 2col-left, 2col-right ++++ diff --git a/archetypes/posts.md b/archetypes/posts.md index 01cbed6..7f9012b 100644 --- a/archetypes/posts.md +++ b/archetypes/posts.md @@ -1,6 +1,7 @@ +++ title = "{{ replace .TranslationBaseName "-" " " | title }}" date = "{{ .Date }}" +daterange = "" # This parameter overrides date being displayed author = "" authorTwitter = "" #do not include @ cover = "" diff --git a/assets/css/main.css b/assets/css/main.css index 6c8ba5b..d72abfe 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -290,7 +290,7 @@ mark { display: flex; flex-direction: column; padding: 40px; - max-width: 864px; + max-width: 1024px; min-height: 100vh; border-right: 1px solid rgba(255, 255, 255, 0.1); diff --git a/assets/css/post.css b/assets/css/post.css index 37155bc..321c5a5 100644 --- a/assets/css/post.css +++ b/assets/css/post.css @@ -77,7 +77,7 @@ } &-cover { - border: 20px solid var(--accent); + border: 10px solid var(--accent); background: transparent; margin: 40px 0; padding: 20px; diff --git a/assets/css/section.css b/assets/css/section.css new file mode 100644 index 0000000..1c7d853 --- /dev/null +++ b/assets/css/section.css @@ -0,0 +1,89 @@ +.sections { + width: 100%; +} + +.section { + width: 100%; + + &-header { + font-size: 1.8rem !important; + margin-top: 3em !important; + text-decoration: underline; + } + + &-separator { + border: 2pt solid white; + } + + &-cover { + border: 10px solid var(--accent); + background: transparent; + padding: 8px; + position: relative; + margin: auto; + + /* Vertical Align */ + top: 50%; + transform: translateY(-50%); + + /* Resize */ + display: block; + max-height: 80em; + width: auto; + height: auto; + + @media (--tablet) { + top: auto; + transform: none; + max-height: 20em; + } + } + + &-2col { + display: flex; + + @media (--tablet) { + display: block; + } + } + + &-2col-right { + flex-direction: row; + } + + &-2col-left { + flex-direction: row-reverse; + } + + &-2col-content { + flex: 300%; + margin-top: 0 !important; + + } + + &-2col-right > &-2col-content { + margin-left: 2em; + @media (--tablet) { + margin-left: 0; + } + } + + &-2col-left > &-2col-content { + margin-right: 2em; + @media (--tablet) { + margin-right: 0; + } + } + + +} + +.section > .post { + margin-top: 0; + padding-top: 0; +} + +/* Remove hr between posts for sections that are .post */ +.section > .post:not(.on-list) { + border-bottom: none; +} diff --git a/assets/css/style.css b/assets/css/style.css index 8f649da..f88b4a6 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -9,6 +9,7 @@ @import 'post.css'; @import 'pagination.css'; @import 'footer.css'; +@import 'section.css'; @import 'prism.css'; @import 'syntax.css'; diff --git a/layouts/_default/index.html b/layouts/_default/index.html index 001705e..14b9b00 100644 --- a/layouts/_default/index.html +++ b/layouts/_default/index.html @@ -1,67 +1,96 @@ {{ define "main" }} - {{ if .Content }} -
- {{ .Content }} -
- {{ end }} -
- {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }} - {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }} - {{ $PageContext := . }} - {{ if .IsHome }} - {{ $PageContext = .Site }} - {{ end }} - {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }} - - {{ range $paginator.Pages }} -
-

- {{ .Title | markdownify }} -

- - - {{ if .Params.tags }} - - {{ end }} - - {{ if .Params.Cover }} - {{ .Title | plainify | default - {{ end }} - -
- {{ if .Params.showFullContent }} - {{ .Content | markdownify }} - {{ else if .Description }} - {{ .Description | markdownify }} - {{ else }} - {{ if .Truncated }} - {{ .Summary | markdownify }} - {{ end }} - {{ end }} -
- - {{ if not .Params.showFullContent }} -
- {{ $.Site.Params.ReadMore }} → -
- {{ end }} -
- {{ end }} - {{ partial "pagination.html" . }} +{{ if .Content }} +
+ {{ .Content }}
{{ end }} + +{{ if .Site.Params.singlePageSite }} + + + {{ $isntDefault := not (or (eq (trim $.Site.Params.contentTypeName " ") "posts") (eq (trim $.Site.Params.contentTypeName " ") "")) }} + {{ $contentTypeName := cond $isntDefault (string $.Site.Params.contentTypeName) "posts" }} + + {{ $PageContext := . }} + {{ if .IsHome }} + {{ $PageContext = .Site }} + {{ end }} + {{ $paginator := .Paginate (where $PageContext.RegularPages "Type" $contentTypeName) }} + +
+ {{ range .Site.Menus.main }} +
+

{{ .Name }}

+ {{ if ne .Identifier $.Site.Params.contentTypeName }} + {{ if in (first 2 .URL) "#" }} +
+ {{ $section := path.Join "homepage" .Identifier }} + {{ with $.Site.GetPage $section }} + {{ partial "section.html" . }} + {{ end }} +
+ {{ end }} + {{ else }} + {{ range $paginator.Pages }} +
+

+ {{ .Title | markdownify }} +

+ + + {{ if .Params.tags }} + + {{ end }} + + {{ if .Params.Cover }} + {{ .Title | plainify | default + {{ end }} + +
+ {{ if .Params.showFullContent }} + {{ .Content | markdownify }} + {{ else if .Description }} + {{ .Description | markdownify }} + {{ else }} + {{ if .Truncated }} + {{ .Summary | markdownify }} + {{ end }} + {{ end }} +
+ + {{ if not .Params.showFullContent }} + + {{ end }} +
+ {{ end }} + TODO: Update pagination + {{ end }} +
+
+ {{ end }} +
+ +{{ end }} + +{{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index 1cda267..c7ce2e4 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -12,7 +12,11 @@