From a32b4021d258bcce96e72ff8dd35837dfa62aebb Mon Sep 17 00:00:00 2001 From: Dylan Bolger Date: Fri, 21 Aug 2026 14:51:35 -0500 Subject: mobile-friendliness --- assets/css/main.css | 88 ++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 81 insertions(+), 7 deletions(-) (limited to 'assets/css/main.css') diff --git a/assets/css/main.css b/assets/css/main.css index 576bc83..8340c15 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -17,11 +17,12 @@ url('../fonts/source-code-pro-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/source-code-pro-v14-latin-regular.svg#SourceCodePro') format('svg'); -/* Add a black background color to the top navigation */ + /* Add a black background color to the top navigation */ } body { - max-width: 80% !important; /* sorry water.css */ + max-width: 80% !important; + /* sorry water.css */ } @@ -53,8 +54,8 @@ section#intro { } .topnav { - background-color: #333; - overflow: hidden; + background-color: #333; + overflow: hidden; } * { @@ -62,7 +63,8 @@ section#intro { } /* Style the links inside the navigation bar */ -.topnav a, .topnav p { +.topnav a, +.topnav p { float: left; color: #f2f2f2; text-align: center; @@ -102,7 +104,9 @@ div.exp-title-company-top { margin-top: 10px; } -div.exp-title-company, div.exp-skills-dates, div.exp-detail { +div.exp-title-company, +div.exp-skills-dates, +div.exp-detail { display: flex; justify-content: space-between; align-items: baseline; @@ -184,7 +188,77 @@ ul.nows { padding-left: 0; } -summary, details { +summary, +details { font-size: 14px; text-decoration: none; +} + +@media screen and (max-width: 886px) { + + body { + max-width: 95% !important; + } + + section#intro { + flex-direction: column; + align-items: center; + text-align: center; + } + + .topnav { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + padding: 2px 4px; + } + + .topnav-right { + display: flex; + flex-wrap: wrap; + justify-content: flex-end; + width: auto; + } + + .topnav a, + .topnav p { + float: none; + display: inline-block; + padding: 4px 6px; + font-size: 14px; + text-align: center; + margin: 0; + } + + div.exp-title-company, + div.exp-detail, + div.project-title-stack { + flex-direction: column; + align-items: flex-start; + gap: 4px; + } + + span.exp-company { + text-align: left; + } + + .mobile-hide { + display: none !important; + } + + div.project-desc { + font-size: 13px; + } + + span.project-stack { + font-size: 14px; + } + + p.experience-desc { + font-size: 12px; + } + + h1 { + font-size: 1.8em !important; + } } \ No newline at end of file -- cgit v1.2.3