diff --git a/.eleventy.js b/.eleventy.js index 6dc8255..ec27b12 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -81,7 +81,7 @@ module.exports = function (eleventyConfig) { // CSS minifier eleventyConfig.addFilter('cssMin', css => { - return new CleanCSS({}).minify(code).styles; + return new CleanCSS({}).minify(css).styles; }); @@ -105,8 +105,8 @@ module.exports = function (eleventyConfig) { output: "public", includes: "_includes", layouts: "_layouts", - markdownTemplateEngine: "md" }, + markdownTemplateEngine: "njk", cname: 'geowen.dev' }; }; diff --git a/src/_includes/base.njk b/src/_includes/base.njk index cc2c0af..6fc008f 100644 --- a/src/_includes/base.njk +++ b/src/_includes/base.njk @@ -13,10 +13,10 @@ {% include "style/sidebar.css" %} {% endset %} - - {{ title }} + {% from "name.njk" import myName %} + {{ title + " | " + myName + ' Owen'}} diff --git a/src/_includes/components/post-card.njk b/src/_includes/components/post-card.njk index 7fc7167..7da60fd 100644 --- a/src/_includes/components/post-card.njk +++ b/src/_includes/components/post-card.njk @@ -1,11 +1,21 @@
-
-

{{post.data.title}}

- -

# {{post.data.category}}

-
Click to read + +
+
+
+ {{post.data.title}} + +
+
+
+ {% for tag in post.data.tags %} + {%if tag != 'posts'%} + #{{tag}} + {%endif%} + {%endfor%} +
+
-
\ No newline at end of file diff --git a/src/_includes/components/post-list.njk b/src/_includes/components/post-list.njk index e04954c..f88707e 100644 --- a/src/_includes/components/post-list.njk +++ b/src/_includes/components/post-list.njk @@ -1,9 +1,11 @@ +{% set css %} + {%include "style/postCards.css"%} +{%endset%} +
- -{%- for post in collections.posts | reverse -%} - -{% include "components/post-card.njk" %} - -{%- endfor -%} - + {%- for post in collections.posts | reverse -%} + {% include "components/post-card.njk" %} + {%- endfor -%}
diff --git a/src/_includes/components/sidebar-leaf.njk b/src/_includes/components/sidebar-leaf.njk index 5ce39ec..4d253f4 100644 --- a/src/_includes/components/sidebar-leaf.njk +++ b/src/_includes/components/sidebar-leaf.njk @@ -1,5 +1,13 @@ {%extends "components/sidebar.njk" %} +{% from 'name.njk' import myName %} +{% set nameClass %} + {%if myName == 'George'%} + name-george + {%else%} + name-gwen + {%endif%} +{%endset%} {% block topmatter %} -
GWEN OWEN
+
{{myName | upper}} OWEN
OWEN
{%endblock%} \ No newline at end of file diff --git a/src/_includes/name.njk b/src/_includes/name.njk new file mode 100644 index 0000000..9991453 --- /dev/null +++ b/src/_includes/name.njk @@ -0,0 +1 @@ +{% set myName = 'George' %} \ No newline at end of file diff --git a/src/_includes/style/imageSlideshow.css b/src/_includes/style/imageSlideshow.css deleted file mode 100644 index e69de29..0000000 diff --git a/src/_includes/style/postCards.css b/src/_includes/style/postCards.css new file mode 100644 index 0000000..1bca258 --- /dev/null +++ b/src/_includes/style/postCards.css @@ -0,0 +1,141 @@ + +:root { + /* global variables for width and height, set dynamically using breakpoints */ + --card-width:296px; + --card-height:479px; +} + +.card-grid { + display:grid; + grid-template-columns: auto auto; + gap:24px; +} + +/* post card related things */ +.post-card { + /*appearance and relative position*/ + margin:auto; + height: var(--card-height); + width: var(--card-width); + position:relative; + + + /* inner contents */ + display:flex; + flex-direction: column; + background-color: #F2F2F2; +} + +.post-card:hover { + color:blue +} + +.card-link { + position:absolute; + width:100%; + height:100%; + top:0; + left: 0; + + z-index: 1; +} + +.post-card-img { + width:100%; + height: var(--card-width); + z-index: 0; + + border-style:solid; + border-width:1px; + border-color:#ccc; +} +.post-card-img img { + width:100%; + height:var(--card-width); + object-fit:cover; +} + +.card-text { + margin: 0px auto 0px 0px; + z-index:5; + display:flex; + flex-direction: row; + width:100%; + min-height:calc(100% - var(--card-width)); + + border-style:none solid solid solid; + border-width:1px; + border-color:#ccc; +} + +.card-tag-container { + width:calc(100% - calc(var(--card-width) / 1.618)); + height:100%; + + border-style:none none none solid; + border-width:1px; + border-color:#ccc; + overflow:hidden; + text-overflow:ellipsis; + white-space: nowrap; +} + +.card-tags { + padding:5px 5px 0px 5px; + font-size:12px; + + text-decoration:underline; +} +.card-tags p { + margin:0px; + padding:0px; +} +.card-tags a { + color:#5e5e5e; +} +.card-tags a:hover { + + color:black; +} + +.card-title { + position:relative; + width:calc(304px / 1.618); + font-family: 'Montserrat', sans-serif; + font-size:20px; + line-height:24px; + font-weight:600; + padding:5px; + +} + +/* Medium devices (landscape tablets, 600px and up) */ +@media only screen and (min-width: 590px) { +:root { + --card-width:255px; + --card-height:413px; +} +} +@media only screen and (max-width:670px) { +:root{ + --card-width:240px; + --card-height:388px; +} +.card-grid {grid-template-columns: auto;width:240px;} +} +/* Large devices (laptops/desktops, 843px and up) */ +@media only screen and (min-width: 1000px) { +:root { + --card-width:232px; + --card-height:375px; +} +.card-grid {grid-template-columns: auto auto auto;} +} + +/* Extra large devices (large laptops and desktops, 1100px and up) */ +@media only screen and (min-width: 1224px) { +:root { + --card-width:304px; + --card-height:491px; +} +} \ No newline at end of file diff --git a/src/_includes/style/sidebar.css b/src/_includes/style/sidebar.css index c07a9dc..446a911 100644 --- a/src/_includes/style/sidebar.css +++ b/src/_includes/style/sidebar.css @@ -14,7 +14,15 @@ z-index:0; } +.name-gwen { + font-size:25px; +} +.name-george { + font-size:22px; +} + .side-name { + top:100px; width:180px; height:40px; color: #5e5e5e; @@ -22,21 +30,19 @@ margin:0px 5px; padding:5px 5px 0px 5px; text-align: center; - font-size: 25px; line-height:1.2; letter-spacing:0px; font-family: 'Montserrat', sans-serif; font-weight:300; z-index:5; position:absolute; - top:125px; + background-color: #e7e7e7; cursor:pointer; } .side-name:hover { color:black; - text-decoration: underline; } .name-full { @@ -54,7 +60,7 @@ margin: 0px 5px; padding: 0px 5px; position:absolute; - top:165px; + top:140px; left:0; z-index:5; border-radius:0px; diff --git a/src/_includes/style/style.css b/src/_includes/style/style.css index 88c8926..a6eb840 100644 --- a/src/_includes/style/style.css +++ b/src/_includes/style/style.css @@ -143,12 +143,6 @@ article pre { font-family: 'Montserrat','Sans-serif'; } -.card-grid { - display:grid; - grid-template-columns: auto auto; - gap:24px; -} - .recent-grid { display:grid; grid-template-columns: auto auto; @@ -158,96 +152,6 @@ article pre { .post-buffer { position:absolute; } - -.post-card { - /*appearance and relative position*/ - margin:auto; - height: 296px; - width: 296px; - position:relative; - /* border */ - border-style:solid; - border-width:1px; - border-color:#F2F2F2; - border-radius:16px; - /* inner contents */ - display:flex; - flex-direction: column; - background-color: #fff; -} - -.post-card:hover { - color:blue -} - -.card-link { - position:absolute; - width:100%; - height:100%; - top:0; - left: 0; - - z-index: 1; -} - -.post-card-img { - width:100%; - height: 100%; - position:absolute; - top:0; - left:0; - z-index: 0; - - display:flex; - justify-content: center; - align-items: center; - background-color: #fff; - border-radius:16px; - border-style:none none solid none; - border-width:1px; - border-color:#F2F2F2; -} -.post-card-img img { - width:100%; - height:100%; - object-fit:cover; - border-radius:16px; -} - -.card-inner { - - margin: auto 10px 10px 10px; - z-index:1; - padding:12px 16px; - border-radius: 16px; - background-color: white; -} - -.card-title { - font-family: 'Montserrat', sans-serif; - font-size:24px; - line-height:24px; - font-weight:600; - margin: 0px; -} - -.card-description { - font-size:14px; - margin:0px; - - overflow:hidden; - display:-webkit-box; - -webkit-box-orient:vertical; - -webkit-line-clamp:2; -} - -.card-category { - font-size:13px; - margin: 0px 0px 2px 0px; - color:#5e5e5e; - text-decoration:underline; -} - /* socials */ .socials { margin: 0px auto 0px 0px; @@ -276,69 +180,61 @@ article pre { font-size:16px; } - /* Medium devices (landscape tablets, 600px and up) */ - @media only screen and (min-width: 590px) { - .root-page{width:534px;} - - .post-card {width:255px; height:255px;} - } - - @media only screen and (max-width:670px) { - - .content-pane { - position:absolute; - left:0; - right:0; - width:100vw; - } - - .top-name { - display:block; - width:100%; - font-size:10vw; - margin: 25px auto 25px auto; - } - .content-spacing { - padding:20px 20px 40px 20px; - } - - /*.post-card {width:240px; height:268px; flex:none}*/ - .card-grid {grid-template-columns: auto;width:240px;} - .recent-grid {grid-template-columns: auto;} - } - - /* Large devices (laptops/desktops, 843px and up) */ - @media only screen and (min-width: 1000px) { - .root-page{width:746px;} - .about-text { - margin: 0px 0px 0px 24px; - } - post-card {width:232px; height:232px;} - .card-grid {grid-template-columns: auto auto auto;} - .recent-grid { - grid-template-columns: auto auto; - gap:200px; - } - .content-pane { - position:absolute; - left:200px; - width:calc(100% - 205px); - } - .top-name { - margin:4px 0px 4px 0px; - font-size: 75px; - } - } - - /* Extra large devices (large laptops and desktops, 1100px and up) */ - @media only screen and (min-width: 1224px) { - .root-page {width:960px;} - - - .post-card {width:304px; height:304px;} - - .card-description { - -webkit-box-orient:vertical; - -webkit-line-clamp:1; - } - } \ No newline at end of file +/* Medium devices (landscape tablets, 600px and up) */ +@media only screen and (min-width: 590px) { +.root-page{width:534px;} + +} + +@media only screen and (max-width:670px) { + +.content-pane { + position:absolute; + left:0; + right:0; + width:100vw; +} + +.top-name { + display:block; + width:100%; + font-size:10vw; + margin: 25px auto 25px auto; +} +.content-spacing { + padding:20px 20px 40px 20px; +} + +.recent-grid {grid-template-columns: auto;} + +} + +/* Large devices (laptops/desktops, 843px and up) */ +@media only screen and (min-width: 1000px) { +.root-page{width:746px;} +.about-text { + margin: 0px 0px 0px 24px; +} + + + +.recent-grid { + grid-template-columns: auto auto; + gap:200px; +} +.content-pane { + position:absolute; + left:200px; + width:calc(100% - 205px); +} +.top-name { + margin:4px 0px 4px 0px; + font-size: 75px; +} +} + +/* Extra large devices (large laptops and desktops, 1100px and up) */ +@media only screen and (min-width: 1224px) { +.root-page {width:960px;} + +} \ No newline at end of file diff --git a/src/_layouts/root-page.njk b/src/_layouts/root-page.njk index 38d79dd..b0900d9 100644 --- a/src/_layouts/root-page.njk +++ b/src/_layouts/root-page.njk @@ -1,8 +1,8 @@ {%extends "base.njk"%} - +{%from 'name.njk' import myName%} {%block content %}
- GWEN OWEN + {{myName | upper}} OWEN
{{ content | safe }} diff --git a/src/blog/index.md b/src/blog/index.md index adba657..453d16a 100644 --- a/src/blog/index.md +++ b/src/blog/index.md @@ -1,7 +1,6 @@ --- title: blog layout: root-page.njk -templateEngineOverride: njk,md --- # Blog diff --git a/src/blog/tags.njk b/src/blog/tags.njk index 6b30864..4e00fa5 100644 --- a/src/blog/tags.njk +++ b/src/blog/tags.njk @@ -7,9 +7,9 @@ pagination: - post - all layout: post -permalink: /tags/{{ tag }}/ +permalink: /blog/tags/{{ tag }}/ --- -

Tagged “{{ tag }}”

+

Posts tagged “{{ tag }}”

    {% set taglist = collections[ tag ] %} diff --git a/src/index.md b/src/index.md index 5d6107b..3853108 100644 --- a/src/index.md +++ b/src/index.md @@ -1,8 +1,7 @@ --- -title: G Owen +title: Home hideTitle: true layout: root-page.njk -templateEngineOverride: njk,md --- This domain hosts my blog and assorted web projects. For my photography, see [Instagram]() 🌇. @@ -20,10 +19,11 @@ This domain hosts my blog and assorted web projects. For my photography, see [In ]%} {{ imageCarousel('/images/frontpage/',images) }} +{% from "name.njk" import myName %} # About me -Hiiiii! My name is Gwen Owen. I'm a creative who enjoys writing, programming, and more. I use any pronouns but prefer "she". +Hiiiii! My name is {{myName}} Owen. I'm a creative who enjoys writing, programming, and more. I use any pronouns but prefer "she". At any given point you may happen upon me doing the following: * developing web apps