diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..03444b5 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,21 @@ +version: 2 +updates: + - package-ecosystem: bundler + directory: / + schedule: + interval: monthly + open-pull-requests-limit: 1 + groups: + ruby-dependencies: + patterns: + - "*" + + - package-ecosystem: github-actions + directory: / + schedule: + interval: monthly + open-pull-requests-limit: 1 + groups: + github-actions: + patterns: + - "*" diff --git a/.gitignore b/.gitignore index 57510a2..0c3e5ab 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ _site/ +.sass-cache/ diff --git a/404.html b/404.html index 402968c..86ddf9e 100644 --- a/404.html +++ b/404.html @@ -1,5 +1,9 @@ --- layout: base +title: Unfortunately, 404 +permalink: /404.html +noindex: true +sitemap: false ---
diff --git a/_config.yml b/_config.yml index 3a1aace..08bf722 100644 --- a/_config.yml +++ b/_config.yml @@ -4,7 +4,7 @@ lang: en author: name: Daria Lutchenko description: > - A blog about technical writing. + A blog on technical writing and product management. url: "https://techdaria.com" baseurl: "" logo: /assets/images/social-preview.png @@ -16,10 +16,17 @@ plugins: - jekyll-seo-tag - jekyll-remote-theme - jekyll-paginate + - jekyll-sitemap paginate: 5 paginate_path: "/page:num/" +defaults: + - scope: + path: "" + values: + image: /assets/images/social-preview.png + sass: quiet_deps: true silence_deprecations: [import] diff --git a/_includes/custom-head.html b/_includes/custom-head.html index f57f636..417f004 100644 --- a/_includes/custom-head.html +++ b/_includes/custom-head.html @@ -1,22 +1,12 @@ - - - - - - - - - - - - - - + - - + + +{% if page.noindex %} + +{% endif %} diff --git a/_includes/footer.html b/_includes/footer.html index e710926..e301cc1 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,5 +1,3 @@ - -
diff --git a/_includes/linkedin-button.html b/_includes/linkedin-button.html index 9244cc9..bb6942d 100644 --- a/_includes/linkedin-button.html +++ b/_includes/linkedin-button.html @@ -1,47 +1,11 @@ {% if include.url %} - - - - -
- - Comment + + + Comment +
{% endif %} diff --git a/_includes/nav-items.html b/_includes/nav-items.html index fecc600..a0fa52e 100644 --- a/_includes/nav-items.html +++ b/_includes/nav-items.html @@ -2,7 +2,7 @@ {%- for path in include.paths -%} {%- assign hyperpage = site.pages | where: "path", path | first -%} {%- if hyperpage.title %} - {{ hyperpage.title | escape }} + {{ hyperpage.title | escape }} {%- endif -%} {%- endfor %} diff --git a/_includes/post-links.html b/_includes/post-links.html index 36d4590..934773b 100644 --- a/_includes/post-links.html +++ b/_includes/post-links.html @@ -3,9 +3,15 @@ const postContent = document.querySelector('.post-content'); if (postContent) { const links = postContent.getElementsByTagName('a'); - for (let link of links) { - if (!link.target) { - link.target = '_blank'; + for (const link of links) { + link.target = '_blank'; + link.relList.add('noopener', 'noreferrer'); + if (!link.getAttribute('aria-label')?.includes('opens in a new tab')) { + const describedBy = link.getAttribute('aria-describedby'); + link.setAttribute( + 'aria-describedby', + [describedBy, 'new-tab-description'].filter(Boolean).join(' ') + ); } } } diff --git a/_includes/social.html b/_includes/social.html index fb5b3bc..e2a30eb 100644 --- a/_includes/social.html +++ b/_includes/social.html @@ -1,20 +1,27 @@ {% if paginator.total_pages > 1 %} -
+
+ {% endif %} {%- endif -%} diff --git a/_layouts/post.html b/_layouts/post.html index 1e613b6..f676e74 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -1,31 +1,31 @@ --- layout: base --- -
+
+
Back to Posts
-

{{ page.title | escape }}

+

{{ page.title | escape }}

{%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%} {%- if page.modified_date %}Published:{% endif %} -
-
+
{{ content }} {% if page.linkedin %} diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss index 60678d0..448cf0c 100644 --- a/_sass/minima/_layout.scss +++ b/_sass/minima/_layout.scss @@ -23,7 +23,6 @@ padding-right: 45px; } - // Prevent any hover/focus/active effects &:hover, &:focus, &:active, &:visited { text-decoration: none !important; color: $text-color !important; @@ -32,88 +31,83 @@ .site-nav { float: right; - border: none; - background-color: inherit; - label[for="nav-trigger"], #nav-trigger { + .nav-trigger { display: none; } + .nav-items { + display: flex; + align-items: center; + gap: $spacing-unit * 0.5; + } + .nav-item { color: $text-color; - &:not(:last-child) { - margin-right: $spacing-unit * 0.5; + text-decoration: none; + + &:hover, + &.is-active { + color: $accent-color; + text-decoration: underline; + text-underline-offset: 4px; } } @include media-query($on-medium) { position: absolute; - top: 9px; + top: 5px; right: $spacing-unit * 0.6; + z-index: 20; + min-width: 44px; background-color: $background-color; border: 1px solid $border-color-01; border-radius: 5px; text-align: right; - label[for="nav-trigger"] { - display: block; - float: right; - width: 36px; - height: 36px; + .nav-trigger { + display: flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + box-sizing: border-box; + margin: 0 0 0 auto; + padding: 0; + line-height: 1; cursor: pointer; - } - - .menu-icon { - float: right; - width: 36px; - height: 26px; - line-height: 0; - padding-top: 18px; - text-align: center; + list-style: none; - &::before { - font-family: "Font Awesome 7 Free"; - font-weight: 900; + &::marker { + content: ""; } - > svg path { - fill: $border-color-03; + &::-webkit-details-marker { + display: none; } } - #nav-trigger { - ~ label[for=nav-trigger] .menu-icon { - &::before { - content: "\f0c9"; - font-size: 1.25em; - } - } - ~ .nav-items { - clear: both; - display: none - } - &:checked { - ~ label[for=nav-trigger] .menu-icon { - &::before { - content: "\f00d"; - font-size: 1.5em; - } - } - ~ .nav-items { - display: block; - padding-bottom: 5px; - .nav-item { - margin-left: 20px; - padding: 5px 10px; - } - } - } + .menu-icon { + width: 24px; + height: 24px; + display: block; + margin: auto; + fill: none; + stroke: currentColor; + stroke-linecap: round; + stroke-width: 2; + } + + .nav-items { + display: block; + clear: both; + padding-bottom: 5px; } .nav-item { display: block; - margin-right: $spacing-unit * 0.5; - padding: 5px 0; + margin: 0 5px; + padding: 8px 10px; color: $text-color; line-height: $base-line-height; } diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index 4dfc5f4..91b915a 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -20,8 +20,36 @@ .align-items-center { align-items: center !important; } .justify-content-center { justify-content: center !important; } +.visually-hidden { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; +} + +.skip-link { + position: fixed; + top: 0.5rem; + left: 0.5rem; + z-index: 1000; + padding: 0.75rem 1rem; + color: $background-color; + background: $text-color; + border-radius: 4px; + transform: translateY(-150%); + + &:focus { + transform: translateY(0); + } +} + // Focus state mixin for consistent focus styles -@mixin focus-state($color: $accent-color) { +@mixin focus-state($color: $focus-color) { &:focus-visible { outline: 2px solid $color; outline-offset: 2px; @@ -98,7 +126,7 @@ padding: 1rem 0; &:not(:last-child) { - border-bottom: 1px solid #d4d0cc; + border-bottom: 1px solid $border-color; } .post-title { @@ -111,7 +139,7 @@ color: $accent-color; text-decoration: none; transition: color 0.2s ease; - + &:hover { color: darken($accent-color, 10%); text-decoration: underline; @@ -187,7 +215,7 @@ table { td { border: none; - border-bottom: 1px solid #d4d0cc; + border-bottom: 1px solid $border-color; padding: 1rem 1.25rem; color: $text-color; vertical-align: top; @@ -242,8 +270,36 @@ table { } } -// Blog post links -.post-content a[target="_blank"] { +.linkedin-button-container { + width: 100%; + margin: 2rem 0; +} + +.linkedin-button { + display: inline-flex; + align-items: center; + gap: 8px; + box-sizing: border-box; + padding: 8px 15px; + color: white !important; + background-color: #0077b5; + border: 1px solid #0077b5; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + line-height: 1.5; + text-decoration: none; + transition: all 0.2s ease; + + &:hover { + color: white !important; + background-color: #006097; + border-color: #006097; + text-decoration: none; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + @include focus-state(); } // Footer and social media @@ -256,11 +312,11 @@ table { @include button-style($text-muted, transparent, $background-color, $text-muted); min-width: 40px; min-height: 40px; - + .grey { @extend .text-muted; } - + &:hover .grey { color: $background-color !important; } @@ -273,6 +329,18 @@ input, select, textarea, .nav-item, -.site-title { +.site-title, +.nav-trigger { @include focus-state(); +} + +@media (prefers-reduced-motion: reduce) { + *, + *::before, + *::after { + scroll-behavior: auto !important; + transition-duration: 0.01ms !important; + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + } } \ No newline at end of file diff --git a/_sass/minima/custom-variables.scss b/_sass/minima/custom-variables.scss index 1ca966f..f9fbd2a 100644 --- a/_sass/minima/custom-variables.scss +++ b/_sass/minima/custom-variables.scss @@ -9,3 +9,7 @@ $text-secondary: #3a3a3a; // Secondary text (medium gray) // Accent color $accent-color: #0d7377; // Teal for interactive elements + +// Shared component colors +$border-color: #d4d0cc; +$focus-color: $accent-color; diff --git a/about.md b/about.md index 3424488..7b44f8d 100644 --- a/about.md +++ b/about.md @@ -6,7 +6,7 @@ permalink: /about ## Welcome! -Hi, I’m Daria. A technical writer turned team lead. +Hi, I’m Daria. A technical writer turned product lead. Profile picture diff --git a/assets/images/site.webmanifest b/assets/images/site.webmanifest index 39e0866..6046995 100644 --- a/assets/images/site.webmanifest +++ b/assets/images/site.webmanifest @@ -1,6 +1,6 @@ { - "name": "TechDaria", - "short_name": "TechDaria", + "name": "Technically, Daria", + "short_name": "Technically, Daria", "icons": [ { "src": "/assets/images/web-app-manifest-192x192.png", @@ -15,7 +15,7 @@ "purpose": "maskable" } ], - "theme_color": "#ffffff", - "background_color": "#ffffff", + "theme_color": "#f5f3f0", + "background_color": "#f5f3f0", "display": "standalone" } \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..2208eb0 --- /dev/null +++ b/robots.txt @@ -0,0 +1,7 @@ +--- +layout: null +--- +User-agent: * +Allow: / + +Sitemap: {{ '/sitemap.xml' | absolute_url }}