From a7de9ac1a5d3b88bec2c0324beba3ae7d89226a1 Mon Sep 17 00:00:00 2001 From: Jessica Phoenix Canady Date: Sun, 25 Aug 2024 12:56:26 -0400 Subject: [PATCH] Add recent posts and date formatting. --- assets/css/style.css | 804 +++++++++--------- lib/jol/blog.ex | 4 + lib/jol_web/controllers/page_controller.ex | 3 +- .../controllers/page_html/home.html.heex | 10 + 4 files changed, 419 insertions(+), 402 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 70288bf..3792ea0 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,240 +1,240 @@ @charset "UTF-8"; .button-container { - display: table; - margin-left: auto; - margin-right: auto; + display: table; + margin-left: auto; + margin-right: auto; } button, .button, a.button { - position: relative; - display: flex; - align-items: center; - justify-content: center; - padding: 8px 18px; - margin-bottom: 5px; - text-align: center; - border-radius: 8px; - border: 1px solid transparent; - appearance: none; - cursor: pointer; - outline: none; - /* variants */ - /* sizes */ + position: relative; + display: flex; + align-items: center; + justify-content: center; + padding: 8px 18px; + margin-bottom: 5px; + text-align: center; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; + /* variants */ + /* sizes */ } button.outline, .button.outline, a.button.outline { - background: transparent; - box-shadow: none; - padding: 8px 18px; + background: transparent; + box-shadow: none; + padding: 8px 18px; } button.outline :hover, .button.outline :hover, a.button.outline :hover { - transform: none; - box-shadow: none; + transform: none; + box-shadow: none; } button.primary, .button.primary, a.button.primary { - box-shadow: - 0 4px 6px rgba(50, 50, 93, 0.11), - 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: + 0 4px 6px rgba(50, 50, 93, 0.11), + 0 1px 3px rgba(0, 0, 0, 0.08); } button.primary:hover, .button.primary:hover, a.button.primary:hover { - box-shadow: - 0 2px 6px rgba(50, 50, 93, 0.21), - 0 1px 3px rgba(0, 0, 0, 0.08); + box-shadow: + 0 2px 6px rgba(50, 50, 93, 0.21), + 0 1px 3px rgba(0, 0, 0, 0.08); } button.link, .button.link, a.button.link { - background: none; - font-size: 1rem; + background: none; + font-size: 1rem; } button.small, .button.small, a.button.small { - font-size: 0.8rem; + font-size: 0.8rem; } button.wide, .button.wide, a.button.wide { - min-width: 200px; - padding: 14px 24px; + min-width: 200px; + padding: 14px 24px; } a.read-more, a.read-more:hover, a.read-more:active { - display: inline-flex; - background: none; - box-shadow: none; - padding: 0; - margin: 20px 0; - max-width: 100%; + display: inline-flex; + background: none; + box-shadow: none; + padding: 0; + margin: 20px 0; + max-width: 100%; } .code-toolbar { - margin-bottom: 20px; + margin-bottom: 20px; } .code-toolbar .toolbar-item a { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - padding: 3px 8px; - margin-bottom: 5px; - text-align: center; - font-size: 13px; - font-weight: 500; - border-radius: 8px; - border: 1px solid transparent; - appearance: none; - cursor: pointer; - outline: none; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + padding: 3px 8px; + margin-bottom: 5px; + text-align: center; + font-size: 13px; + font-weight: 500; + border-radius: 8px; + border: 1px solid transparent; + appearance: none; + cursor: pointer; + outline: none; } .header { - display: flex; - flex-direction: column; - position: relative; + display: flex; + flex-direction: column; + position: relative; } .header__inner { - display: flex; - align-items: center; - justify-content: space-between; + display: flex; + align-items: center; + justify-content: space-between; } .header__logo { - display: flex; - flex: 1; + display: flex; + flex: 1; } .header__logo:after { - content: ""; - background: repeating-linear-gradient( - 90deg, - var(--accent), - var(--accent) 2px, - transparent 0, - transparent 16px - ); - display: block; - width: 100%; - right: 10px; + content: ""; + background: repeating-linear-gradient( + 90deg, + var(--accent), + var(--accent) 2px, + transparent 0, + transparent 16px + ); + display: block; + width: 100%; + right: 10px; } .header__logo a { - flex: 0 0 auto; - max-width: 100%; + flex: 0 0 auto; + max-width: 100%; } .header .menu { - margin: 20px 0; + margin: 20px 0; } .header .menu__inner { - display: flex; - flex-wrap: wrap; - list-style: none; - margin: 0; - padding: 0; + display: flex; + flex-wrap: wrap; + list-style: none; + margin: 0; + padding: 0; } .header .menu__inner li.active { - color: var(--accent-alpha-70); + color: var(--accent-alpha-70); } .header .menu__inner li:not(:last-of-type) { - margin-right: 20px; - margin-bottom: 10px; - flex: 0 0 auto; + margin-right: 20px; + margin-bottom: 10px; + flex: 0 0 auto; } .header .menu__sub-inner { - position: relative; - list-style: none; - padding: 0; - margin: 0; + position: relative; + list-style: none; + padding: 0; + margin: 0; } .header .menu__sub-inner:not(:only-child) { - margin-left: 20px; + margin-left: 20px; } .header .menu__sub-inner-more { - position: absolute; - background: var(--background); - box-shadow: var(--shadow); - color: white; - border: 2px solid; - margin: 0; - padding: 10px; - list-style: none; - z-index: 99; - top: 35px; - left: 0; + position: absolute; + background: var(--background); + box-shadow: var(--shadow); + color: white; + border: 2px solid; + margin: 0; + padding: 10px; + list-style: none; + z-index: 99; + top: 35px; + left: 0; } .header .menu__sub-inner-more-trigger { - color: var(--accent); - user-select: none; - cursor: pointer; + color: var(--accent); + user-select: none; + cursor: pointer; } .header .menu__sub-inner-more li { - margin: 0; - padding: 5px; - white-space: nowrap; + margin: 0; + padding: 5px; + white-space: nowrap; } .logo { - display: flex; - align-items: center; - text-decoration: none; - background: var(--accent); - color: black; - padding: 5px 10px; + display: flex; + align-items: center; + text-decoration: none; + background: var(--accent); + color: black; + padding: 5px 10px; } html { - box-sizing: border-box; + box-sizing: border-box; } *, *:before, *:after { - box-sizing: inherit; + box-sizing: inherit; } body { - margin: 0; - padding: 0; - font-family: - Hack, - DejaVu Sans Mono, - Monaco, - Consolas, - Ubuntu Mono, - monospace; - font-size: 1rem; - line-height: 1.54; - color: var(--color); - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -webkit-overflow-scrolling: touch; - -webkit-text-size-adjust: 100%; + margin: 0; + padding: 0; + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + font-size: 1rem; + line-height: 1.54; + color: var(--color); + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -webkit-overflow-scrolling: touch; + -webkit-text-size-adjust: 100%; } @media (max-width: 683px) { - body { - font-size: 1rem; - } + body { + font-size: 1rem; + } } .bg { - background: radial-gradient(at right top, #f68ef0, #74b9df); - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - min-height: 100vh; - min-height: 100dvh; - z-index: -1; + background: radial-gradient(at right top, #f68ef0, #74b9df); + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + min-height: 100vh; + min-height: 100dvh; + z-index: -1; } h1, @@ -243,482 +243,486 @@ h3, h4, h5, h6 { - display: flex; - align-items: center; - font-weight: bold; - line-height: 1.3; + display: flex; + align-items: center; + font-weight: bold; + line-height: 1.3; } h1 { - font-size: 1.4rem; + font-size: 1.4rem; } h2 { - font-size: 1.3rem; + font-size: 1.3rem; } h3 { - font-size: 1.2rem; + font-size: 1.2rem; } h4, h5, h6 { - font-size: 1.15rem; + font-size: 1.15rem; } a { - color: inherit; + color: inherit; } img { - display: block; - max-width: 100%; + display: block; + max-width: 100%; } img.left { - margin-right: auto; + margin-right: auto; } img.center { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } img.right { - margin-left: auto; + margin-left: auto; } p { - margin-bottom: 20px; + margin-bottom: 20px; } figure { - display: table; - max-width: 100%; - margin: 25px 0; + display: table; + max-width: 100%; + margin: 25px 0; } figure.left, figure img { - margin-right: auto; + margin-right: auto; } figure.center, figure img { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } figure.right, figure img { - margin-left: auto; + margin-left: auto; } figure figcaption { - font-size: 14px; - padding: 5px 10px; - margin-top: 5px; - background: var(--accent); - color: var(--background); + font-size: 14px; + padding: 5px 10px; + margin-top: 5px; + background: var(--accent); + color: var(--background); } figure figcaption.left { - text-align: left; + text-align: left; } figure figcaption.center { - text-align: center; + text-align: center; } figure figcaption.right { - text-align: right; + text-align: right; } code { - font-family: - Hack, - DejaVu Sans Mono, - Monaco, - Consolas, - Ubuntu Mono, - monospace; - font-feature-settings: normal; - background: var(--accent-alpha-20); - padding: 1px 6px; - margin: 0 2px; - font-size: 0.95rem; + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + font-feature-settings: normal; + background: var(--accent-alpha-20); + padding: 1px 6px; + margin: 0 2px; + font-size: 0.95rem; } pre { - font-family: - Hack, - DejaVu Sans Mono, - Monaco, - Consolas, - Ubuntu Mono, - monospace; - padding: 20px; - font-size: 0.95rem; - overflow: auto; - border-top: 1px solid rgba(255, 255, 255, 0.1); - border-bottom: 1px solid rgba(255, 255, 255, 0.1); + font-family: + Hack, + DejaVu Sans Mono, + Monaco, + Consolas, + Ubuntu Mono, + monospace; + padding: 20px; + font-size: 0.95rem; + overflow: auto; + border-top: 1px solid rgba(255, 255, 255, 0.1); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); } @media (max-width: 683px) { - pre { - white-space: pre-wrap; - word-wrap: break-word; - } + pre { + white-space: pre-wrap; + word-wrap: break-word; + } } pre code { - padding: 0; - margin: 0; - background: none; + padding: 0; + margin: 0; + background: none; } blockquote { - border-top: 1px solid var(--accent); - border-bottom: 1px solid var(--accent); - margin: 40px 0; - padding: 25px; + border-top: 1px solid var(--accent); + border-bottom: 1px solid var(--accent); + margin: 40px 0; + padding: 25px; } @media (max-width: 683px) { - blockquote { - padding-right: 0; - } + blockquote { + padding-right: 0; + } } blockquote:before { - content: "”"; - font-family: Georgia, serif; - font-size: 3.875rem; - position: absolute; - left: -40px; - top: -20px; + content: "”"; + font-family: Georgia, serif; + font-size: 3.875rem; + position: absolute; + left: -40px; + top: -20px; } blockquote p:first-of-type { - margin-top: 0; + margin-top: 0; } blockquote p:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } blockquote p { - position: relative; + position: relative; } blockquote p:before { - content: ">"; - display: block; - position: absolute; - left: -25px; - color: var(--accent); + content: ">"; + display: block; + position: absolute; + left: -25px; + color: var(--accent); } table { - table-layout: fixed; - border-collapse: collapse; - width: 100%; - margin: 40px 0; + table-layout: fixed; + border-collapse: collapse; + width: 100%; + margin: 40px 0; } table, th, td { - border: 1px dashed var(--accent); - padding: 10px; + border: 1px dashed var(--accent); + padding: 10px; } th { - color: var(--accent); + color: var(--accent); } ul, ol { - margin-left: 30px; - padding: 0; + margin-left: 30px; + padding: 0; } ul li, ol li { - position: relative; + position: relative; } @media (max-width: 683px) { - ul, - ol { - margin-left: 20px; - } + ul, + ol { + margin-left: 20px; + } } ol ol { - list-style-type: lower-alpha; + list-style-type: lower-alpha; } .container { - display: flex; - flex-direction: column; - padding: 40px; - max-width: 864px; - margin: 2em auto; - background: rgba(0, 0, 0, 0.4); + display: flex; + flex-direction: column; + padding: 40px; + max-width: 864px; + margin: 2em auto; + background: rgba(0, 0, 0, 0.4); } @media (max-width: 683px) { - .container { - padding: 20px; - margin: 0 auto; - } + .container { + padding: 20px; + margin: 0 auto; + } } .content { - display: flex; + display: flex; } hr { - width: 100%; - border: none; - background: var(--border-color); - height: 1px; + width: 100%; + border: none; + background: var(--border-color); + height: 1px; } .hidden { - display: none; + display: none; } .posts { - width: 100%; - margin: 0 auto; + width: 100%; + margin: 0 auto; } .post { - width: 100%; - text-align: left; - margin: 20px auto; - padding: 20px 0; + width: 100%; + text-align: left; + margin: 20px auto; + padding: 20px 0; } @media (max-width: 899px) { - .post { - max-width: 660px; - } + .post { + max-width: 660px; + } } .post:not(:last-of-type) { - border-bottom: 1px solid var(--border-color); + border-bottom: 1px solid var(--border-color); } .post .post-meta-inline, .post .post-meta { - font-size: 1rem; - margin-bottom: 10px; - color: var(--accent-alpha-70); + font-size: 1rem; + margin-bottom: 10px; + color: var(--accent-alpha-70); } .post-meta-inline { - display: inline; + display: inline; } .post-title { - --border: 2px dashed var(--accent); - position: relative; - color: var(--accent); - margin: 0 0 15px; - padding-bottom: 15px; - border-bottom: var(--border); - font-weight: normal; + --border: 2px dashed var(--accent); + position: relative; + color: var(--accent); + margin: 0 0 15px; + padding-bottom: 15px; + border-bottom: var(--border); + font-weight: normal; } .post-title a { - text-decoration: none; + text-decoration: none; } .post .post-tags-inline, .post .post-tags { - margin-bottom: 20px; - font-size: 1rem; - opacity: 0.5; + margin-bottom: 20px; + font-size: 1rem; + opacity: 0.5; } .post-tags { - display: block; + display: block; } .post-tags-inline { - display: inline; + display: inline; } @media (max-width: 683px) { - .post-tags-inline { - display: block; - } + .post-tags-inline { + display: block; + } } .post-content { - margin-top: 30px; + margin-top: 30px; } .post-cover { - border: 20px solid var(--accent); - background: transparent; - margin: 40px 0; - padding: 20px; + border: 20px solid var(--accent); + background: transparent; + margin: 40px 0; + padding: 20px; } @media (max-width: 683px) { - .post-cover { - padding: 10px; - border-width: 10px; - } + .post-cover { + padding: 10px; + border-width: 10px; + } } .post ul { - list-style: none; + list-style: none; } .post ul li:before { - content: "►"; - position: absolute; - left: -20px; - color: var(--accent); + content: "►"; + position: absolute; + left: -20px; + color: var(--accent); } .post--regulation h1 { - justify-content: center; + justify-content: center; } .post--regulation h2 { - justify-content: center; - margin-bottom: 10px; + justify-content: center; + margin-bottom: 10px; } .post--regulation h2 + h2 { - margin-top: -10px; - margin-bottom: 20px; + margin-top: -10px; + margin-bottom: 20px; } .post-list .post-date { - color: var(--accent); - text-decoration: none; + color: var(--accent); + text-decoration: none; } .post-list a { - text-decoration: none; + text-decoration: none; } .post-list .post-list-title { - text-decoration: underline; + text-decoration: underline; } .post-list .post-tag { - text-decoration: underline; + text-decoration: underline; } .pagination { - margin-top: 50px; + margin-top: 50px; } .pagination__title { - display: flex; - text-align: center; - position: relative; - margin: 100px 0 20px; + display: flex; + text-align: center; + position: relative; + margin: 100px 0 20px; } .pagination__title-h { - text-align: center; - margin: 0 auto; - padding: 5px 10px; - background: var(--background); - font-size: 0.8rem; - text-transform: uppercase; - letter-spacing: 0.1em; - z-index: 1; + text-align: center; + margin: 0 auto; + padding: 5px 10px; + background: var(--background); + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 0.1em; + z-index: 1; } .pagination__title hr { - position: absolute; - left: 0; - right: 0; - width: 100%; - margin-top: 15px; - z-index: 0; + position: absolute; + left: 0; + right: 0; + width: 100%; + margin-top: 15px; + z-index: 0; } .pagination__buttons { - display: flex; - align-items: center; - justify-content: center; + display: flex; + align-items: center; + justify-content: center; } @media (max-width: 683px) { - .pagination__buttons { - flex-direction: column; - } + .pagination__buttons { + flex-direction: column; + } } .button { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - font-size: 1rem; - border-radius: 8px; - max-width: 40%; - padding: 0; - cursor: pointer; - appearance: none; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + font-size: 1rem; + border-radius: 8px; + max-width: 40%; + padding: 0; + cursor: pointer; + appearance: none; } @media (max-width: 683px) { - .button { - max-width: 80%; - } + .button { + max-width: 80%; + } } .button + .button { - margin-left: 10px; + margin-left: 10px; } .button a { - display: flex; - padding: 8px 16px; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + display: flex; + padding: 8px 16px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .button__text { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; } .footer { - flex-grow: 0; - opacity: 0.5; + flex-grow: 0; + opacity: 0.5; } .footer__inner { - display: flex; - align-items: center; - justify-content: space-between; - margin: 0; - width: 760px; - max-width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0; + width: 760px; + max-width: 100%; } @media (max-width: 899px) { - .footer__inner { - flex-direction: column; - } + .footer__inner { + flex-direction: column; + } } .footer a { - color: inherit; + color: inherit; } .footer .copyright { - display: flex; - flex-direction: row; - align-items: center; - font-size: 1rem; + display: flex; + flex-direction: row; + align-items: center; + font-size: 1rem; } .footer .copyright--user { - margin: auto; - text-align: center; + margin: auto; + text-align: center; } .footer .copyright > *:first-child:not(:only-child) { - margin-right: 10px; + margin-right: 10px; } @media (max-width: 899px) { - .footer .copyright > *:first-child:not(:only-child) { - border: none; - padding: 0; - margin: 0; - } + .footer .copyright > *:first-child:not(:only-child) { + border: none; + padding: 0; + margin: 0; + } } @media (max-width: 899px) { - .footer .copyright { - flex-direction: column; - margin-top: 10px; - } + .footer .copyright { + flex-direction: column; + margin-top: 10px; + } } @media (max-width: 899px) { - .footer .copyright-theme-sep { - display: none; - } + .footer .copyright-theme-sep { + display: none; + } } @media (max-width: 899px) { - .footer .copyright-theme { - font-size: 0.75rem; - } + .footer .copyright-theme { + font-size: 0.75rem; + } } div.homepage { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); - grid-gap: 3em; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(20em, 1fr)); + grid-gap: 3em; } ul.posts { - list-style-type: none; - margin: 0; - padding: 0; + list-style-type: none; + margin: 0; + padding: 0; } div.post_summary { - margin-bottom: 1em; - padding: 0.5rem; + margin-bottom: 1em; + padding: 0.5rem; +} + +ul.recent-posts li { + margin-top: 1rem; } diff --git a/lib/jol/blog.ex b/lib/jol/blog.ex index e01962f..45f7e9a 100644 --- a/lib/jol/blog.ex +++ b/lib/jol/blog.ex @@ -44,4 +44,8 @@ defmodule JOL.Blog do posts -> posts end end + + def format_date(date) do + Calendar.strftime(date, "%Y-%m-%d") + end end diff --git a/lib/jol_web/controllers/page_controller.ex b/lib/jol_web/controllers/page_controller.ex index d5a81c7..7683774 100644 --- a/lib/jol_web/controllers/page_controller.ex +++ b/lib/jol_web/controllers/page_controller.ex @@ -4,8 +4,7 @@ defmodule JOLWeb.PageController do @spec home(Plug.Conn.t(), any()) :: Plug.Conn.t() def home(conn, _params) do conn - |> assign(:page_title, "Home") - |> render(:home) + |> render(:home, page_title: "Welcome!", posts: JOL.Blog.recent_posts()) end def about(conn, _params) do diff --git a/lib/jol_web/controllers/page_html/home.html.heex b/lib/jol_web/controllers/page_html/home.html.heex index 0bb4ab0..4c451e3 100644 --- a/lib/jol_web/controllers/page_html/home.html.heex +++ b/lib/jol_web/controllers/page_html/home.html.heex @@ -8,6 +8,16 @@

I write here about those things, about general tech dorkery, and about my experience with being super trans and learning who I am.

+

Recent Posts

+ +