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 }} -