Fix(UI): \n 1. Prevent experience section dates from being detected as phone numbers on iOS on Safari. \n 2. Improved bullet point styling on all cards.

This commit is contained in:
2025-03-05 20:15:32 +00:00
parent c237680b30
commit e5e29273a9
4 changed files with 21 additions and 29 deletions

View File

@@ -7,22 +7,14 @@
<!-- SEO -->
<meta name="yandex-verification" content="6d6eae9d533ef680" />
<!-- Security -->
<!--
<meta http-equiv="X-Frame-Options" content="SAMEORIGIN">
<meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate">
-->
<!-- Stylesheets -->
<!--
GitHub Contributions Calendar (light mode default)
- Statistics under calendar do not work.
-->
<link rel="stylesheet" href="https://unpkg.com/github-calendar@latest/dist/github-calendar-responsive.css" />
<!--
GitHub Contributions Calendar (dark mode default)
- Statistics under calendar do not work.
- Requires https://github.com/forresttindall/Github-Activity-Calendar
<link rel="stylesheet" href="./Github-Activity-Calendar/github-calendar.css"/>
-->
<link rel="stylesheet" href="styles/experience-section.css">
<link rel="stylesheet" href="styles/expertise-section.css">
<link rel="stylesheet" href="styles/footer.css">
@@ -34,6 +26,8 @@
<link rel="stylesheet" href="styles/navigation.css">
<link rel="stylesheet" href="styles/projects-section.css">
<link rel="stylesheet" href="styles/themes.css">
<!-- Prevent detecting of experience section date ranges as phone numbers on Safari on iOS -->
<meta name="format-detection" content="telephone=no">
</head>
<body>
<header>
@@ -87,14 +81,14 @@
<p>Enhanced ERPNext platform with UK-specific accounting features and e-commerce integration. Supports multi-channel retail operations with automated order processing.</p>
<p class="project-detail-button">Show details</p>
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
<p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul><!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>UK tax compliance and reporting modules</li>
<li>Real-time inventory synchronisation</li>
<li>Multi-storefront management</li>
<li>Automated order fulfillment</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p>
<p><strong>Technologies:</strong> Python, MySQL / MariaDB, Docker</p> <!-- p style="margin-bottom: 1rem" -->
</div>
<div class="project-thumbnail">
<img src="content/images/PARTSEnterprise_store_live-page-home.webp" alt="Live PARTS Enterprise Store">
@@ -112,14 +106,14 @@
<p>A robust, open-source ERP framework showcasing system architecture and development practices. Over 100K lines of production-grade code.</p>
<p class="project-detail-button">Show details</p>
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
<p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>Data integrity verification</li>
<li>Authentication and role-based access control</li>
<li>Custom reporting API</li>
<li>Database abstraction layer and unit test coverage</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p>
<p><strong>Technologies:</strong> Python - Flask, MySQL / MariaDB, JavaScript</p> <!-- p style="margin-bottom: 1rem" -->
</div>
<div class="project-thumbnail">
<img src="content/images/partsERP-page-product_category.webp" alt="Demo PARTS ERP Site">
@@ -136,14 +130,14 @@
<p>VBA Excel automation that simplifies complex data processing between multiple spreadsheets.</p>
<p class="project-detail-button">Show details</p>
<div class="project-detail-container">
<p style="margin: 0.5rem 0"><strong>Key Features:</strong></p>
<ul style="margin: 1rem 0; list-style-position: inside;">
<p><strong>Key Features:</strong></p> <!-- p style="margin: 0.5rem 0" -->
<ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li>Multi-system transaction matching</li>
<li>Configurable validation rules</li>
<li>Automated error detection</li>
<li>Audit trail generation</li>
</ul>
<p style="margin-bottom: 1rem"><strong>Technologies:</strong> VBA, Excel Object Model</p>
<p><strong>Technologies:</strong> VBA, Excel Object Model</p> <!-- p style="margin-bottom: 1rem" -->
</div>
<!--
<div class="project-thumbnail">
@@ -202,7 +196,7 @@
<div class="experience-card">
<h3>Additional Experience</h3>
<ul style="margin: 1rem 0; list-style-position: inside;">
<ul> <!-- style="margin: 1rem 0; list-style-position: inside;" -->
<li class="experience-additional-entry">
<div class="experience-company-and-date">
<p class="experience-job-title">STEM Tutor</p>

View File

@@ -7,22 +7,23 @@
}
.experience-date {
color: var(--primary-colour) !important;
font-size: 0.9rem;
font-size: 0.95rem;
width: 50%;
min-width: 50%;
-webkit-text-fill-color: inherit;
text-decoration: none !important;
pointer-events: none;
-webkit-text-fill-color: inherit !important;
-webkit-text-decoration: none !important;
pointer-events: none !important;
}
.experience-card:last-child {
margin-bottom: 0;
}
.experience-company-and-date {
display: flex;
display: inline-flex;
justify-content: space-between;
align-items: center;
text-align: left;
width: 100%;
width: 90%;
margin-bottom: 0.25rem;
}
.experience-description {
@@ -36,10 +37,6 @@
display: flex;
align-items: center;
}
.experience-additional-entry .experience-company-and-date {
display: flex;
width: 100%;
}
.experience-additional-entry .experience-job-title,
.experience-additional-entry .experience-company,
.experience-additional-entry .experience-date {

View File

@@ -16,7 +16,7 @@ h1, h2, h3 {
}
ul, li {
list-style-position: outside;
list-style-position: inside;
}
/* Common card styles */
@@ -41,7 +41,7 @@ ul, li {
/* Responsive design */
@media (max-width: 768px) {
nav ul {
flex-direction: column;
flex-direction: row;
align-items: center;
gap: 1rem;
}

View File

@@ -12,6 +12,7 @@ nav ul {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
nav ul li {
margin-top: auto;