diff --git a/config.toml b/config.toml index f6270e8..3add938 100644 --- a/config.toml +++ b/config.toml @@ -14,11 +14,13 @@ render_emoji = true external_links_target_blank = true [extra] +# Website +domain_name = "ewpratten.com" +# Me name = "Evan Pratten" profession = "Software Developer" -email = "contact@ewpratten.com" -twitter = "ewpratten" +profile_photo = "https://avatars.githubusercontent.com/u/21065412" +# Accounts +email = "evan@ewpratten.com" github = "ewpratten" -qrz = "va3zza" linkedin = "ewpratten" -profile_photo = "https://avatars.githubusercontent.com/u/21065412" \ No newline at end of file diff --git a/sass/styles/fixes/instagram.scss b/sass/styles/fixes/instagram.scss new file mode 100644 index 0000000..4b7360c --- /dev/null +++ b/sass/styles/fixes/instagram.scss @@ -0,0 +1,3 @@ +#instagram-embed-0 { + margin: auto !important; +} diff --git a/sass/styles/fixes/markdown.scss b/sass/styles/fixes/markdown.scss new file mode 100644 index 0000000..33d2ad1 --- /dev/null +++ b/sass/styles/fixes/markdown.scss @@ -0,0 +1,4 @@ +.markdown-body table { + margin: auto !important; + width: fit-content !important; +} diff --git a/sass/styles/fixes/mermaid.scss b/sass/styles/fixes/mermaid.scss new file mode 100644 index 0000000..186b927 --- /dev/null +++ b/sass/styles/fixes/mermaid.scss @@ -0,0 +1,4 @@ +.mermaid { + width: fit-content; + margin: auto; +} diff --git a/sass/styles/fixes/tiktok.scss b/sass/styles/fixes/tiktok.scss new file mode 100644 index 0000000..8f575b9 --- /dev/null +++ b/sass/styles/fixes/tiktok.scss @@ -0,0 +1,4 @@ +.tiktok-embed { + border: none !important; + margin: auto !important; +} diff --git a/sass/styles/fixes/youtube.scss b/sass/styles/fixes/youtube.scss new file mode 100644 index 0000000..d6be07d --- /dev/null +++ b/sass/styles/fixes/youtube.scss @@ -0,0 +1,9 @@ +.yt-embed { + width: 100%; + height: 400px; + + iframe { + width: 100%; + height: 100%; + } +} diff --git a/sass/styles/layout.scss b/sass/styles/layout.scss deleted file mode 100644 index f182fe1..0000000 --- a/sass/styles/layout.scss +++ /dev/null @@ -1,321 +0,0 @@ -h1, -h2, -h3, -h4, -h5, -h6 { - font-family: "Urbanist", sans-serif; - font-weight: bolder; -} -p, -li, -span { - font-family: "Rubik", sans-serif; - font-weight: normal; -} -a { - text-decoration: none; - - &:visited { - color: blue; - } - - &:hover { - color: blueviolet; - } -} - -body { - // margin-bottom: 30px; - margin: 0; -} - -.mobile-hidden { - @media only screen and (max-width: 650px) { - display: none; - } -} - -.yt-embed { - width: 100%; - height: 400px; - - iframe { - width: 100%; - height: 100%; - } -} - -.container { - max-width: 700px; - margin: auto; - padding-left: 10px; - padding-right: 10px; -} - -.profile-card { - margin-top: 30px; - margin-bottom: 30px; - margin-left: auto; - margin-right: auto; - - .row { - width: max-content; - max-width: 95vw; - margin: auto; - overflow-wrap: normal; - - .headshot-container { - display: inline-block; - max-width: 150px; - @media only screen and (max-width: 399px) { - display: block; - margin: auto; - text-align: center; - } - img { - width: 100%; - } - } - .text-container { - display: inline-block; - margin-left: 20px; - h1, - p { - margin: 0px; - a { - text-decoration: none; - } - } - } - } -} - -.navigation-bar { - text-align: center; - p { - margin: 0px; - a { - text-decoration: none; - } - } -} - -.blog-post-li { - margin: 0.25em; -} - -.gray { - color: gray; -} - -ul { - padding-left: 20px; -} - -.events-list { - & > li { - color: gray; - } - & > ul { - & > li { - & > div { - display: table-row; - & > span { - display: table-cell; - - &:first-of-type { - color: gray; - width: 30px; - text-align: center; - padding-right: 8px; - - // Only Firefox supports this - // letter-spacing: -0.35em; - // text-transform: full-width; - } - } - } - } - } -} - -.mermaid { - width: fit-content; - margin: auto; -} - -.zola-github-card { - border-radius: 5px; - padding-top: 5px; - padding-bottom: 1px; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - transition: all 0.1s ease 0s; - - &:hover { - box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 15px; - } -} - -#instagram-embed-0 { - margin: auto !important; -} - -.tiktok-embed { - border: none !important; - margin: auto !important; -} - -.markdown-body table { - margin: auto !important; - width: fit-content !important; -} - -.blog-post-listing-item { - color: black !important; - & > div { - border-left: solid rgb(201, 201, 201) 5px; - &:hover { - border-left: solid black 5px; - } - padding-left: 5px; - } - - h4, - h1, - p { - padding: 0; - margin: 0; - } - - h1 { - margin-bottom: 10px; - } - - &:hover { - color: rgb(85, 85, 85) !important; - } -} - -.pn-previous, -.pn-next { - border: 1px solid black; - border-radius: 5px; - padding: 5px; - color: black !important; - &:hover { - color: rgb(85, 85, 85) !important; - border: 1px solid rgb(85, 85, 85) !important; - } -} - -#footer { - margin-top: 2em; - text-align:center; -} - -.carded-section { - border: 1px solid black; - width: 100%; - - & > .header { - background-color: aliceblue; - padding-left: 30px; - padding-right: 30px; - padding-top: 15px; - padding-bottom: 15px; - - border-bottom: 1px solid rgb(201, 201, 201); - & > span { - font-size: 1.5em; - font-weight: bolder; - } - } - & > .content { - padding-left: 15px; - padding-right: 15px; - } -} - -.portfolio-sellout { - margin-top: 15px; - background-color: #afa79e; - border-radius: 5px; - text-align: center; - // color: white; - padding-top: 5px; - padding-bottom: 5px; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - // & > p > a { - // color: aqua; - // } -} - -.hover-help { - &:hover { - cursor: help; - } - border-bottom: 1px double rgb(171, 167, 167); -} - -.small { - font-size: 0.5em; -} - -.hover-shadow { - &:hover { - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - } -} - -#main-skills { - display: flex; - flex-wrap: wrap; - width: 100%; - justify-content: space-evenly; - @media screen and (max-width: 455px) { - justify-content: left; - } - - ul { - margin:0; - } -} - - -.project { - border: 1px solid gray; - border-radius: 5px; - padding: 1em; - margin-bottom: 1em; - - p { - margin-top:0.25em; - margin-bottom:0.25em; - } - h3 { - border-bottom: 1px solid lightgrey; - margin-top:0.25em; - margin-bottom:0.5em; - padding-bottom: 0.5em; - } - ul{ - margin-bottom:0; - } -} - -.homepage-showoff { - padding-left: 1em; - padding-right: 1em; - padding-top: 0.25em; - padding-bottom: 0.25em; - - background-color: #e3e3e3; - color: black; -} - -.home-list { - &>ul>li { - padding-top:0.5em; - } -} \ No newline at end of file diff --git a/sass/styles/project_mosaic.scss b/sass/styles/project_mosaic.scss deleted file mode 100644 index acc92f8..0000000 --- a/sass/styles/project_mosaic.scss +++ /dev/null @@ -1,51 +0,0 @@ -.project-mosaic { - display: flex; - flex-wrap: wrap; - justify-content: space-evenly; - width: 100%; - - @media (min-width: 437px) { - .project-small { - max-width: 175px !important; - } - } - - .conform-height { - height: unset !important; - } - - .project { - border: 1px solid #ccc; - border-radius: 5px; - padding: 1rem; - margin-bottom: 1rem; - max-width: 300px; - height: max-content; - - img { - margin-bottom: 0.5em; - border-bottom: 1px solid #ccc; - padding-bottom: 0.75em; - width: 100%; - } - - h3 { - margin: 0; - margin-bottom: 0.25em; - } - - p { - margin-top: 0; - color: rgb(84, 84, 84); - } - - span { - display: inline-block; - border-top: 1px solid #ccc; - font-size: 2em; - width: 100%; - padding-top: 0.25em; - text-align: center; - } - } -} diff --git a/sass/styles/typography.scss b/sass/styles/typography.scss new file mode 100644 index 0000000..7a71634 --- /dev/null +++ b/sass/styles/typography.scss @@ -0,0 +1,44 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto&family=Urbanist:wght@700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,700;1,400;1,700&display=swap"); + +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: "Urbanist", sans-serif; + font-weight: bolder; +} +p, +li, +span { + font-family: "Rubik", sans-serif; + font-weight: normal; +} +a { + text-decoration: none; + + &:visited { + color: blue; + } + + &:hover { + color: blueviolet; + } +} + +body { + margin: 0; +} + +.gray { + color: gray; +} + +.hover-help { + &:hover { + cursor: help; + } + border-bottom: 1px double rgb(171, 167, 167); +} diff --git a/sass/styles/utils.scss b/sass/styles/utils.scss new file mode 100644 index 0000000..4ab5116 --- /dev/null +++ b/sass/styles/utils.scss @@ -0,0 +1,15 @@ +.mobile-hidden { + @media only screen and (max-width: 650px) { + display: none; + } +} + +.small { + font-size: 0.5em; +} + +.hover-shadow { + &:hover { + box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; + } +} diff --git a/templates/base.html b/templates/base.html index 5e1a75e..346f830 100644 --- a/templates/base.html +++ b/templates/base.html @@ -1,165 +1,73 @@ +{# Allow extenders to pass through variables #} +{% block variable_wormhole %} +{% set title = "NO TITLE SET" %} +{% set description = "" %} +{% set is_article = false %} +{% endblock variable_wormhole %} + - {% block head %} - - - - - - + {# Page metadata #} - - {% if current_url %} - - {% endif %} + {% include "components/metadata/advertise-rss.html" %} + {% include "components/metadata/opengraph.html" %} - - - - - {% block title %}{% endblock title %} | {{config.extra.name}} + {# Page title #} + {{title}} | {{config.title}} + {# Preconnects for external resources #} - - + + {# External styles #} + - - - - + {# Site-wide styles #} + + + + + + + - - - - - - - {% endblock head %} + {# Component styles #} + {% block component_styles %} + {% endblock component_styles %} -
-
- {% block profile %} -
-
- Headshot -
-
-

{{config.extra.name}}

-

- {{config.extra.profession}} -

- - {{config.extra.email}}
- - {{config.extra.github}}
- - {{config.extra.linkedin}}
- - {{config.extra.qrz}} -

-
-
- {% endblock profile %} -
-
-
-

- Home | - Blog | - {# Rabbit Hole | #} - {# My Work | #} - {# Network | #} - Contact - {# Hobbies #} - {# WHOIS #} - {# RFC #} -

-
-
-
- {% block content %} - {% endblock content %} + + {# The whole page #} +
+ + {# Actual content #} +
+
+ {% block content %}{% endblock content %} +
- + {# Footer #} + {% include "components/footer.html" %}
- - - - - - - {# URL Rewriter for retrylife.ca #} - - - {# Meta magic for mastodon verification #} - + {# External scripts #} + \ No newline at end of file diff --git a/templates/components/footer.html b/templates/components/footer.html new file mode 100644 index 0000000..e69de29 diff --git a/templates/components/metadata/advertise-rss.html b/templates/components/metadata/advertise-rss.html new file mode 100644 index 0000000..92c8697 --- /dev/null +++ b/templates/components/metadata/advertise-rss.html @@ -0,0 +1,5 @@ +{% if current_url %} + +{% endif %} + + \ No newline at end of file diff --git a/templates/components/metadata/opengraph.html b/templates/components/metadata/opengraph.html new file mode 100644 index 0000000..50302f0 --- /dev/null +++ b/templates/components/metadata/opengraph.html @@ -0,0 +1,21 @@ +{# Site info #} + + + + +{# Page image #} + + +{# Page description #} + + + + +{# Page title #} + + +{# Article-specifics #} +{% if is_article %} + +{% endif %} \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index af3d886..2d8af1c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,44 +1,13 @@ {% extends "base.html" %} -{% block title %} -{{section.title}} -{% endblock title %} -{% block head %} +{# Pass data through to the base template #} +{% block variable_wormhole %} {{ super() }} - - - - - - - - - - - -{# Handle flags #} - -{% endblock head %} +{% set title = section.title %} +{% set description = config.description %} +{% endblock variable_wormhole %} +{# Page content #} {% block content %} -{#
-
#} -{{section.content | safe}} -{#
#} + {{ section.content | safe }} {% endblock content %} \ No newline at end of file diff --git a/templates/page.html b/templates/page.html index 71c094b..524e817 100644 --- a/templates/page.html +++ b/templates/page.html @@ -1,118 +1,14 @@ {% extends "base.html" %} -{% block title %} -{{page.title}} -{% endblock title %} - -{% block head %} -{# #} +{# Pass data through to the base template #} +{% block variable_wormhole %} {{ super() }} +{% set title = page.title %} +{% set description = page.description %} +{% set is_article = true %} +{% endblock variable_wormhole %} -{# Disable crawling if requested #} -{% if page.extra.no_crawl %} - -{% endif %} - -{% if page.extra.uses_katex %} - - -{% endif %} - - - -{% if page.description %} - - -{% else %} - - -{% endif %} - - -{# Handle auto-centering request #} -{% if page.extra.auto_center_images %} - -{% endif %} - -{# Handle flags #} -{% if page.extra.uses_flags %} - -{% endif %} - -{# Handle loading JSONLD #} -{% if page.extra.is_rfc or page.description and page.date %} - -{% endif %} - -{# Handle redirects if needed #} -{% if page.extra.redir_to %} - -{% endif %} - -{% endblock head %} - -{% block profile %} -
-
- Headshot -
-
-

{{config.extra.name}}

-

- {{config.extra.profession}} -

-
-
-{% endblock profile %} - +{# Page content #} {% block content %} -

-
- {% if page.description %} -

{{page.title}}

-

- - /* - {{page.description}} - */ - -

- {% else %} -

{{page.title}}

- {% endif %} -
- {{page.content | safe}} -
- -
- -{% if page.extra.uses_twitter %} - -{% endif %} -{% if page.extra.uses_graphviz %} - -{% endif %} + {{ page.content | safe }} {% endblock content %} \ No newline at end of file diff --git a/templates/section.html b/templates/section.html index 2f0690a..3489058 100644 --- a/templates/section.html +++ b/templates/section.html @@ -1,113 +1,13 @@ {% extends "base.html" %} -{% block title %} -{{section.title}} -{% endblock title %} -{% block head %} +{# Pass data through to the base template #} +{% block variable_wormhole %} {{ super() }} +{% set title = section.title %} +{% set description = section.description %} +{% endblock variable_wormhole %} -{# Disable crawling if requested #} -{% if section.extra.no_crawl %} - -{% endif %} - - -{% if section.description %} - - -{% else %} - - -{% endif %} - -{# Handle listing blog posts nicely in search #} -{% if section.extra.inject_blog_posts %} - -{% endif %} -{% endblock head %} - +{# Page content #} {% block content %} -{% if section.extra.enable_gh_markdown %} -
-{% endif %} -{{section.content | safe}} -{% if section.extra.enable_gh_markdown %} -
-{% endif %} - -{# Blog posts #} -{% if section.extra.inject_blog_posts %} - -

{{title_year}}

- -

- {% endif %} - -{# RFCs #} -{% if section.extra.inject_rfcs %} - -{% endif %} - -{# Notes #} -{% if section.extra.inject_notes %} - -{% endif %} - + {{ section.content | safe }} {% endblock content %} \ No newline at end of file