diff --git a/public/images/post-images/gatsby-to-astro-with-claude-code/claude-code-mobile.png b/public/images/post-images/gatsby-to-astro-with-claude-code/claude-code-mobile.png
new file mode 100644
index 0000000..3e0f27e
Binary files /dev/null and b/public/images/post-images/gatsby-to-astro-with-claude-code/claude-code-mobile.png differ
diff --git a/public/images/post-images/gatsby-to-astro-with-claude-code/dead-code-traycer.png b/public/images/post-images/gatsby-to-astro-with-claude-code/dead-code-traycer.png
new file mode 100644
index 0000000..f799b6b
Binary files /dev/null and b/public/images/post-images/gatsby-to-astro-with-claude-code/dead-code-traycer.png differ
diff --git a/src/components/astro/Nav.astro b/src/components/astro/Nav.astro
index a0b61e5..b099514 100644
--- a/src/components/astro/Nav.astro
+++ b/src/components/astro/Nav.astro
@@ -53,6 +53,8 @@
.navbar .flex {
justify-content: space-between;
+ align-items: center;
+ flex-wrap: nowrap;
}
.navbar a {
@@ -68,6 +70,8 @@
font-weight: 700;
letter-spacing: 0.02em;
text-decoration: none;
+ white-space: nowrap;
+ flex-shrink: 0;
}
.navbar a.brand:hover {
@@ -94,4 +98,69 @@
#dark-mode-button:hover {
opacity: 0.7;
}
+
+ /* Mobile touch targets */
+ @media screen and (max-width: 600px) {
+ .nav-links {
+ gap: 0.5rem;
+ }
+
+ .nav-links a {
+ padding: 0.4rem;
+ min-height: 44px;
+ display: flex;
+ align-items: center;
+ font-size: 0.85rem;
+ }
+
+ #dark-mode-button {
+ min-width: 44px;
+ min-height: 44px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .nav-links {
+ gap: 0.25rem;
+ }
+
+ .nav-links a {
+ padding: 0.3rem;
+ font-size: 0.8rem;
+ }
+
+ .navbar a.brand {
+ font-size: 0.9rem;
+ }
+
+ #dark-mode-button {
+ min-width: 40px;
+ min-height: 40px;
+ padding: 0;
+ }
+ }
+
+ @media screen and (max-width: 375px) {
+ .nav-links {
+ gap: 0.15rem;
+ }
+
+ .nav-links a {
+ padding: 0.25rem;
+ font-size: 0.75rem;
+ }
+
+ .navbar a.brand {
+ font-size: 0.85rem;
+ }
+
+ #dark-mode-button {
+ min-width: 36px;
+ min-height: 36px;
+ font-size: 0.9rem;
+ }
+ }
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index 5b68e8c..a180179 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -20,7 +20,7 @@ const {
-
+
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 4a26996..282e672 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -167,4 +167,29 @@ const timeline = [
min-width: auto;
}
}
+
+ /* Mobile optimizations */
+ @media screen and (max-width: 600px) {
+ .about {
+ padding: 1.5rem 1rem 0;
+ }
+
+ .timeline-item {
+ gap: 1rem;
+ }
+
+ .timeline-item .year {
+ min-width: 70px;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .about {
+ padding: 1.25rem 0.875rem 0;
+ }
+
+ .connect .links {
+ gap: 1rem;
+ }
+ }
diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index 0eb0bec..10bf0d2 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -123,4 +123,37 @@ const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
font-size: 1.8rem;
}
}
+
+ /* Mobile optimizations */
+ @media screen and (max-width: 600px) {
+ .brutalist-page {
+ padding-top: 1.5rem;
+ }
+
+ .page-header h1 {
+ font-size: 1.3rem;
+ }
+
+ .post-date {
+ min-width: 3.5rem;
+ }
+
+ .post-list li {
+ gap: 1rem;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .brutalist-page {
+ padding-top: 1.25rem;
+ }
+
+ .page-header h1 {
+ font-size: 1.2rem;
+ }
+
+ .post-date {
+ font-size: 0.8rem;
+ }
+ }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8b44edd..2019ba0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -112,4 +112,37 @@ const sortedPosts = allPosts.sort((a, b) => {
padding-top: 3rem;
}
}
+
+ /* Mobile optimizations */
+ @media screen and (max-width: 600px) {
+ .home {
+ padding: 1.5rem 1rem 0;
+ }
+
+ .intro {
+ font-size: 0.9rem;
+ }
+
+ .links {
+ font-size: 0.85rem;
+ }
+
+ .posts a {
+ font-size: 0.9rem;
+ }
+ }
+
+ @media screen and (max-width: 480px) {
+ .home {
+ padding: 1.25rem 0.875rem 0;
+ }
+
+ .intro {
+ font-size: 0.875rem;
+ }
+
+ .posts li {
+ padding: 0.25rem 0;
+ }
+ }
diff --git a/src/style.css b/src/style.css
index 6bcb8fe..1f47fb4 100644
--- a/src/style.css
+++ b/src/style.css
@@ -121,6 +121,27 @@ section > h2 {
}
}
+/* Mobile section spacing */
+@media screen and (max-width: 600px) {
+ section {
+ margin: 1.5rem 0;
+ }
+
+ section > h2 {
+ font-size: 1.5rem;
+ }
+
+ .section-button {
+ margin-left: 1rem;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ section {
+ margin: 1.25rem 0;
+ }
+}
+
.container {
max-width: 825px;
padding: 0 1.5rem;
@@ -132,72 +153,27 @@ section > h2 {
max-width: 600px;
}
-.newsletter-subscribe-button {
- font-family: Roboto;
- font-size: 18px;
- line-height: 12px;
- font-weight: 500;
- font-style: normal;
- text-decoration: none;
- text-transform: none;
- color: #ffffff;
- background-color: #4a86e8;
- padding-top: 10px;
- padding-bottom: 10px;
- padding-left: 10px;
- padding-right: 10px;
- border-style: none;
- border-color: #fafafa;
- border-top-right-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-
-.newsletter-container {
- border-radius: 10px;
- padding-top: 5px;
- padding-left: 5px;
- padding-right: 5px;
- padding-bottom: 20px;
- border-top-width: 5px;
- border-left-width: 5px;
- border-right-width: 5px;
- border-bottom-width: 5px;
- text-align: center;
-}
-
-.newletter-container-size {
- width: 760px;
- height: 150px;
- border: "1px solid #EEE";
- background: "white"
+@media screen and (min-width: 800px) {
+ .container {
+ padding: 0 2rem;
+ }
}
-.newsleter-form-field {
- font-family: Roboto;
- font-size: 18px;
- line-height: 14px;
- font-weight: 400;
- font-style: normal;
- text-align: left;
- padding-right: 4px;
- padding-left: 4px;
- padding-bottom: 4px;
- padding-top: 4px;
- border-color: #5D7CFA;
- border-top-style: none;
- border-right-style: none;
- border-bottom-style: solid;
- border-left-style: none;
- background-color: #ffffff
+@media screen and (max-width: 600px) {
+ .container {
+ padding: 0 1rem;
+ }
}
-div.revue-form-group {
- padding-top: 11px;
+@media screen and (max-width: 480px) {
+ .container {
+ padding: 0 0.875rem;
+ }
}
-@media screen and (min-width: 800px) {
+@media screen and (max-width: 360px) {
.container {
- padding: 0 2rem;
+ padding: 0 0.75rem;
}
}
@@ -400,53 +376,55 @@ h5 {
}
}
-/* Sidebar */
+/* Mobile typography scaling */
+@media screen and (max-width: 600px) {
+ h1 {
+ font-size: 2rem;
+ }
-.aside-content {
- margin-top: 1rem;
- border-radius: 0.35rem;
-}
+ h2 {
+ font-size: 1.5rem;
+ }
-aside {
- min-width: 260px;
-}
+ h3 {
+ font-size: 1.3rem;
+ }
-aside p,
-aside ul,
-aside a {
- font-size: 0.95rem;
- margin-bottom: 0;
-}
+ h4 {
+ font-size: 1.15rem;
+ }
-aside ul {
- padding-left: 1rem;
+ p,
+ ol,
+ ul,
+ dl,
+ table,
+ blockquote {
+ font-size: 1rem;
+ }
}
-aside h3 {
- margin-top: 0;
- margin-bottom: 1rem;
- padding-bottom: 0.25rem;
- font-size: 1.1rem;
- color: var(--dark-font-color);
- border-bottom: 1px solid var(--border);
-}
+@media screen and (max-width: 480px) {
+ h1 {
+ font-size: 1.75rem;
+ }
-aside section {
- margin: 1.5rem 0;
- background: var(--light-background);
- padding: 1.5rem;
- border-radius: 0.35rem;
- border: 1px solid var(--border);
-}
+ h2 {
+ font-size: 1.4rem;
+ }
-.aside-content section:last-child {
- margin-bottom: 0;
+ h3 {
+ font-size: 1.2rem;
+ }
}
-@media print {
- aside,
- .aside-content {
- display: none;
+@media screen and (max-width: 360px) {
+ h1 {
+ font-size: 1.6rem;
+ }
+
+ h2 {
+ font-size: 1.3rem;
}
}
@@ -611,6 +589,40 @@ a.button.secondary:hover {
}
}
+/* Mobile lead section */
+@media screen and (max-width: 600px) {
+ .lead {
+ padding: 1.75rem 0;
+ }
+
+ .lead h1 {
+ font-size: 1.4rem;
+ }
+
+ .lead p {
+ font-size: 1rem;
+ }
+
+ .lead img {
+ height: 120px;
+ width: 120px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .lead {
+ padding: 1.5rem 0;
+ }
+
+ .lead h1 {
+ font-size: 1.3rem;
+ }
+
+ a.button {
+ padding: 0.65rem 0.9rem;
+ }
+}
+
p.subtitle {
color: var(--medium-font-color);
font-size: 1.3rem;
@@ -639,10 +651,6 @@ a:hover {
background: none;
}
-a.gatsby-resp-image-link:hover {
- border-bottom: none;
-}
-
a code[class*='language-'] {
color: var(--link-color) !important;
}
@@ -735,6 +743,59 @@ main {
}
}
+/* Mobile navbar touch targets */
+@media screen and (max-width: 600px) {
+ .navbar a {
+ font-size: 0.85rem;
+ padding: 0.4rem;
+ min-height: 44px;
+ display: flex;
+ align-items: center;
+ }
+
+ .navbar button {
+ min-width: 44px;
+ min-height: 44px;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .navbar {
+ padding: 0.4rem;
+ }
+
+ .navbar a {
+ padding: 0.3rem;
+ font-size: 0.8rem;
+ }
+
+ .navbar a.brand {
+ font-size: 0.9rem;
+ }
+
+ .navbar button {
+ min-width: 40px;
+ min-height: 40px;
+ }
+}
+
+@media screen and (max-width: 375px) {
+ .navbar a {
+ padding: 0.25rem;
+ font-size: 0.75rem;
+ }
+
+ .navbar a.brand {
+ font-size: 0.85rem;
+ }
+
+ .navbar button {
+ min-width: 36px;
+ min-height: 36px;
+ font-size: 0.9rem;
+ }
+}
+
@media screen and (min-width: 800px) {
.emoji {
margin: 0 0.5rem 0 0.1rem;
@@ -1092,33 +1153,8 @@ header u {
}
}
-.post-thumbnail {
- display: block !important;
-}
-
-.post-thumbnail.gatsby-image-wrapper {
- min-width: 75px;
- height: 75px !important;
- width: 75px !important;
- margin-bottom: 0.5rem;
-}
-
-@media screen and (min-width: 800px) {
- .post-thumbnail.gatsby-image-wrapper {
- min-width: 100px;
- height: 100px !important;
- width: 100px !important;
- margin-right: 1.5rem;
- margin-bottom: 0;
- }
-}
-
/* Search */
-.search-form {
- display: flex;
-}
-
[type='search'] {
padding: 0.8rem 1rem;
border: 1px solid var(--border);
@@ -1132,12 +1168,6 @@ header u {
margin-bottom: 3rem;
}
-.search-form [type='search'] {
- border-right: none;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
-}
-
::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
@@ -1146,52 +1176,6 @@ header u {
color: var(--light-font-color);
}
-/* Suggested */
-
-.suggested {
- flex-direction: column;
- align-items: stretch;
- margin-left: -1rem;
- margin-right: -1rem;
- padding: 0;
-}
-
-.suggested span {
- font-weight: 400;
- display: block;
- font-size: 0.9rem;
- color: var(--transparent-text);
-}
-
-.suggested a {
- background: none;
- margin: 0.5rem 1rem;
- border-bottom: none;
- transition: all 0.2s ease;
- padding: 1.5rem;
- border-radius: 0.35rem;
- background: var(--light-background);
- border: 1px solid var(--border);
- color: var(--heading-color);
-}
-
-.suggested a:hover {
- transform: translate3D(0, -1px, 0);
- background: var(--lighter-background);
-}
-
-@media screen and (min-width: 800px) {
- .suggested {
- flex-direction: row;
- }
- .suggested a {
- flex: 0 0 calc(50% - 2rem);
- }
- .suggested a:first-of-type {
- text-align: right;
- }
-}
-
/* Helpers */
.small {
@@ -1364,72 +1348,6 @@ kbd {
}
}
-/* Guide */
-
-.guides .gatsby-image-wrapper {
- height: 50px !important;
- width: 50px !important;
- min-width: 50px;
- margin-right: 1rem;
-}
-
-.guides.front-page img {
- height: 50px !important;
- width: 50px !important;
- min-width: 50px;
- margin-right: 1rem;
-}
-
-.guide {
- display: flex;
- padding: 1.5rem 0;
- border-bottom: 1px solid var(--border);
-}
-
-.guide h2 {
- font-size: 1.3rem;
- font-weight: 600;
- padding-bottom: 0.5rem;
- margin: 0 0 0.5rem 0;
- border-bottom: none;
-}
-
-.guide a h2:hover {
- text-decoration: underline;
-}
-
-.guide p {
- font-weight: 400;
- margin: 0;
- line-height: 1.5;
- color: var(--light-font-color);
-}
-
-.guides.front-page .guide {
- border-bottom: none;
-}
-
-@media screen and (min-width: 800px) {
- .guides.front-page img {
- margin-right: 2rem;
- }
-
- .guides .gatsby-image-wrapper {
- height: 100px !important;
- width: 100px !important;
- min-width: 100px;
- margin-right: 2rem;
- }
-
- .guide {
- padding: 2rem 0;
- }
-
- .guides.front-page .guide {
- padding: 1.5rem 0;
- }
-}
-
::selection {
background: #3b5bdb;
color: white;
@@ -1455,6 +1373,13 @@ kbd {
display: flex;
}
+@media screen and (max-width: 1200px) {
+ .toc,
+ .toc-heading {
+ display: none;
+ }
+}
+
.notfound {
line-height: 1.6;
}
\ No newline at end of file