diff --git a/index.html b/index.html index 707b63d..de72471 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,17 @@ - Requires https://github.com/forresttindall/Github-Activity-Calendar --> - + + + + + + + + + + +
@@ -37,7 +47,6 @@
  • Projects
  • Experience
  • Contact
    • -
    • +
    • diff --git a/styles/experience-section.css b/styles/experience-section.css new file mode 100644 index 0000000..58d0588 --- /dev/null +++ b/styles/experience-section.css @@ -0,0 +1,74 @@ + +/* Experience */ +.experience-card { + background: var(--text-background-colour); + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; + margin-top: 2rem; +} +.experience-card h3 { + margin-bottom: 0; +} +.experience-date { + color: var(--primary-colour); + font-size: 0.9rem; + width: 50%; + min-width: 50%; + -webkit-text-fill-color: inherit; + text-decoration: none; + pointer-events: none; +} +.experience-card:last-child { + margin-bottom: 0; +} +.experience-company-and-date { + display: flex; + justify-content: space-between; + align-items: center; + text-align: left; + width: 100%; + margin-bottom: 0.25rem; +} +.experience-description { + margin: 0.5rem 0; +} +.experience-additional-entry { + list-style-type: disc; + width: 100%; +} +.experience-header { + 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 { + font-weight: bold; + margin: 0; + width: fit-content; +} +.experience-additional-entry .experience-company { + margin-left: 5px; + margin-right: auto; +} +.experience-additional-entry .experience-date { + font-weight: normal; + margin-left: auto; +} +.experience-additional-entry:not(:first-of-type) .experience-job-title::after { + content: " at "; + font-weight: normal; +} +.experience-additional-entry .experience-company::after { + content: " "; +} +.experience-additional-entry .experience-description:last-of-type { + margin-top: 0; + margin-bottom: 1rem; +} \ No newline at end of file diff --git a/styles/expertise-section.css b/styles/expertise-section.css new file mode 100644 index 0000000..f2decd1 --- /dev/null +++ b/styles/expertise-section.css @@ -0,0 +1,14 @@ +/* Expertise Section */ +.expertise-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; +} + +.expertise-card { + background: var(--text-background-colour); + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin-bottom: 2rem; +} \ No newline at end of file diff --git a/styles/footer.css b/styles/footer.css new file mode 100644 index 0000000..f3b43b5 --- /dev/null +++ b/styles/footer.css @@ -0,0 +1,12 @@ +/* Footer styles */ +footer { + background-color: var(--primary-colour); + color: var(--text-background-colour); + text-align: center; + padding: 2rem 1rem; + margin-top: 4rem; +} + +footer a { + color: var(--text-background-colour); +} \ No newline at end of file diff --git a/styles/github-contributions-calendar.css b/styles/github-contributions-calendar.css new file mode 100644 index 0000000..a51d7a7 --- /dev/null +++ b/styles/github-contributions-calendar.css @@ -0,0 +1,24 @@ +/* GitHub Contributions Calendar */ +.github-calendar { + width: fit-content; + margin-left: auto; + margin-right: auto; +} +/* Hide broken statistics */ +.github-calendar > :not(:first-child) { + display: none; +} +/* Hide the "How we calculate contributions" text */ +.github-calendar .js-calendar-graph .width-full .float-left { + display: none; +} +/* Change title text */ +.github-calendar table.js-calendar-graph-table > caption:first-child { + color: transparent; + font-size: 0; +} +.github-calendar table.js-calendar-graph-table > caption:first-child::before { + content: "GitHub Contributions Calendar"; + color: var(--text-colour); + font-size: 1rem; +} \ No newline at end of file diff --git a/styles/google-translate.css b/styles/google-translate.css new file mode 100644 index 0000000..a842cb9 --- /dev/null +++ b/styles/google-translate.css @@ -0,0 +1,15 @@ + +/* Google Translate + - Hide poorly styled iframes +*/ +#google_translate_element { + background-color: white; + border-radius: 0.25vh; + padding: 0.5vh; +} +iframe.skiptranslate { + display: none !important; +} +body { + top: 0px !important; +} \ No newline at end of file diff --git a/styles/header.css b/styles/header.css new file mode 100644 index 0000000..fb89b42 --- /dev/null +++ b/styles/header.css @@ -0,0 +1,12 @@ + +/* Header styles */ +header { + background-color: var(--primary-colour); + color: var(--text-background-colour); + padding: 2rem 1rem; + text-align: center; +} + +header h1 { + color: var(--text-background-colour); +} \ No newline at end of file diff --git a/styles/home.css b/styles/home.css new file mode 100644 index 0000000..a4a7b07 --- /dev/null +++ b/styles/home.css @@ -0,0 +1,43 @@ + + +/* Main content styles */ +main { + max-width: 1200px; + margin: 0 auto; + padding: 2rem 1rem; +} + +section { + margin-bottom: 3rem; +} + +h1, h2, h3 { + margin-bottom: 1rem; +} + +ul, li { + list-style-position: outside; +} + +/* Common card styles */ +.expertise-card h3, +.project-card h3, +.experience-card h3 { + color: var(--secondary-colour); +} + +/* Responsive design */ +@media (max-width: 768px) { + nav ul { + flex-direction: column; + align-items: center; + gap: 1rem; + } + + .expertise-grid, + .projects-grid { + grid-template-columns: 1fr; + } +} + + diff --git a/styles/main.css b/styles/main.css new file mode 100644 index 0000000..74b8fe0 --- /dev/null +++ b/styles/main.css @@ -0,0 +1,19 @@ + +:root {} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-colour); + background-color: var(--page-background-colour); +} + +h1, h2, h3 { + color: var(--primary-colour); +} diff --git a/styles/navigation.css b/styles/navigation.css new file mode 100644 index 0000000..fa3b266 --- /dev/null +++ b/styles/navigation.css @@ -0,0 +1,26 @@ +/* Navigation */ +nav { + background-color: var(--secondary-colour); + padding: 1rem; + position: sticky; + top: 0; + z-index: 100; +} + +nav ul { + list-style: none; + display: flex; + justify-content: center; + gap: 2rem; +} + +nav a { + color: var(--text-background-colour); + text-decoration: none; + font-weight: 500; + transition: color 0.3s; +} + +nav a:hover { + color: var(--accent-colour); +} \ No newline at end of file diff --git a/styles/projects-section.css b/styles/projects-section.css new file mode 100644 index 0000000..b412fd6 --- /dev/null +++ b/styles/projects-section.css @@ -0,0 +1,98 @@ + +/* Projects */ +.projects-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + margin-top: 2rem; +} + +.project-card-gridslot { +} +.project-card { + background: var(--text-background-colour); + padding: 1.5rem; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + height: fit-content; +} + +.project-card .button { + display: inline-block; + padding: 0.5rem 1rem; + background-color: var(--accent-colour); + color: var(--text-background-colour); + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s; +} + +.project-card .button:hover { + background-color: #2b6cb0; +} + + +/* +.project-thumbnails { + position: relative; +} + +.project-thumbnail { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 0; + overflow: hidden; + transition: height 0.3s ease; +} + +.project-thumbnail img { + width: 100%; + display: block; +} + +/* .project-card .button:hover + .project-thumbnail */ +/* +.project-card .button.project_demo_partsenterprise_erp:hover + .project-thumbnail.project_demo_partsenterprise_erp, +.project-card .button.project_demo_partsenterprise_store:hover + .project-thumbnail.project_demo_partsenterprise_store, +.project-card .button.project_demo_live_partsenterprise_store:hover + .project-thumbnail.project_demo_live_partsenterprise_store, +.project-card .button.project_demo_partserp:hover + .project-thumbnail.project_demo_partserp + +*/ +/* +.project-links .button.project_demo_partsenterprise_erp:hover ~ .project-thumbnails .project_demo_partsenterprise_erp, +.project-links .button.project_demo_partsenterprise_store:hover ~ .project-thumbnails .project_demo_partsenterprise_store, +.project-links .button.project_demo_live_partsenterprise_store:hover ~ .project-thumbnails .project_demo_live_partsenterprise_store, +.project-links .button.project_demo_partserp:hover ~ .project-thumbnails .project_demo_partserp +* / +.project-thumbnail.active +{ + height: 200px; /* Adjust the height as needed * / +} +*/ +.project-detail-button { + font-size: 0.9rem; + text-decoration: underline; + margin-top: 1vh; + cursor: pointer; + width: fit-content; +} +.project-thumbnail { + margin-top: 2vh; +} +.project-thumbnail img { + max-width: 100%; + height: auto; +} +.project-detail-container { + display: none; +} +.project-detail-container.active { + display: block; +} + +.project-links { + text-align: center; + margin-top: 1vh; +} diff --git a/styles/styles.css b/styles/styles.css deleted file mode 100644 index c770480..0000000 --- a/styles/styles.css +++ /dev/null @@ -1,464 +0,0 @@ -/* Modern CSS reset and variables */ -:root { - /* Claude dark blue / grey theme */ - --text-colour: #1a202c; - --primary-colour: #2d3748; - --secondary-colour: #4a5568; - --accent-colour: #4299e1; - --page-background-colour: #f7fafc; - --text-background-colour: white; -} -:root[data-theme="purple"] { - /* Purple theme - - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff - */ - --text-colour: #10002B; /* very dark */ - --primary-colour: #240046; /* medium dark */ - --secondary-colour: #3C096C; /* dark */ - --accent-colour: #C77DFF; /* light */ - --page-background-colour: #E0AAFF; /* very light */ - --text-background-colour: white; -} -:root[data-theme="red"], -:root[data-theme="light"] { - /* Red theme - - https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000 - - https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc - */ - --text-colour: #2B0000; - --primary-colour: #740000; - --secondary-colour: #B50000; - --accent-colour: #E35053; - --page-background-colour: #F6CACC; - --text-background-colour: white; -} -:root[data-theme="dark"] { - /* - --text-colour: #E0E0E0; - --primary-colour: #BB86FC; - --secondary-colour: #03DAC6; - --accent-colour: #FF4081; - --page-background-colour: #121212; - --text-background-colour: black; - */ - /* - --text-colour: #E0E0E0; /* Light * / - --primary-colour: #740000; /* Dark * / - --secondary-colour: #B50000; /* Medium * / - --accent-colour: #FF4081; /* Light-medium * / - --page-background-colour: #121212; /* Dark * / - --text-background-colour: black; /* Black * / - */ - --text-colour: #E0E0E0; /* Light Gray */ - --primary-colour: #980000; /* Slightly lighter Dark Red */ - --secondary-colour: #D30000; /* Slightly lighter Medium Red */ - --accent-colour: #FF4081; /* Pink */ - --page-background-colour: #121212; /* Dark Gray */ - --text-background-colour: black; /* Dark Red */ -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - line-height: 1.6; - color: var(--text-colour); - background-color: var(--page-background-colour); -} - -/* Header styles */ -header { - background-color: var(--primary-colour); - color: var(--text-background-colour); - padding: 2rem 1rem; - text-align: center; -} - -header h1 { - color: var(--text-background-colour); -} - -nav { - background-color: var(--secondary-colour); - padding: 1rem; - position: sticky; - top: 0; - z-index: 100; -} - -nav ul { - list-style: none; - display: flex; - justify-content: center; - gap: 2rem; -} - -nav a { - color: var(--text-background-colour); - text-decoration: none; - font-weight: 500; - transition: color 0.3s; -} - -nav a:hover { - color: var(--accent-colour); -} - -/* Google Translate styles - - Hide poorly styled iframes -*/ -#google_translate_element { - background-color: white; - border-radius: 0.25vh; - padding: 0.5vh; -} -iframe.skiptranslate { - display: none !important; -} -body { - top: 0px !important; -} - -/* Toggle light mode / dark mode button */ -.theme-switch { - background: none; - border: none; - cursor: pointer; - width: 5vh; - height: 5vh; - padding: 0; - display: flex; - align-items: center; - justify-content: center; - position: relative; - margin-top: auto; - border-radius: 2.5vh; -} -.theme-switch:hover { - background-color: var(--primary-colour); -} -.theme-switch img.theme-icon, -.theme-switch svg.theme-icon { - width: 100%; - height: 100%; - object-fit: contain; - transition: opacity 1s ease, transform 1s ease; - position: absolute; - margin-top: auto; -} -img.theme-icon.dark-mode-icon { - top: 0vh; - left: -0.1vh; -} -svg.theme-icon.light-mode-icon { - width: 4vh; - height: 4vh; - top: 0.55vh; - left: 0.45vh; -} -svg.theme-icon.light-mode-icon .background { - fill: var(--secondary-colour); -} -.theme-switch:hover svg.theme-icon.light-mode-icon .background { - fill: var(--primary-colour); -} -svg.theme-icon.light-mode-icon .sun { - fill: var(--text-colour); - stroke: var(--text-colour); -} -/* -svg.theme-icon { - width: 2vh; - height: 2vh; -} -*/ - -/* Hide the icon that doesn't match the current theme */ -[data-theme="light"] .theme-switch .dark-mode-icon { - opacity: 1; - display: block; - transform: rotate(0deg); -} -[data-theme="light"] .theme-switch .light-mode-icon { - opacity: 0; - display: none; - transform: rotate(90deg); -} - -[data-theme="dark"] .theme-switch .dark-mode-icon { - opacity: 0; - display: none; - transform: rotate(-90deg); -} -[data-theme="dark"] .theme-switch .light-mode-icon { - opacity: 1; - display: block; - transform: rotate(0deg); -} - -/* Main content styles */ -main { - max-width: 1200px; - margin: 0 auto; - padding: 2rem 1rem; -} - -section { - margin-bottom: 3rem; -} - -h1, h2, h3 { - color: var(--primary-colour); - margin-bottom: 1rem; -} - -ul, li { - list-style-position: outside; -} - -.expertise-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; -} - -.expertise-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-bottom: 2rem; -} - -/* Projects */ -.projects-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 2rem; - margin-top: 2rem; -} - -.project-card-gridslot { -} -.project-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - height: fit-content; -} - -.expertise-card h3, -.project-card h3, -.experience-card h3 { - color: var(--secondary-colour); -} - -.button { - display: inline-block; - padding: 0.5rem 1rem; - background-color: var(--accent-colour); - color: var(--text-background-colour); - text-decoration: none; - border-radius: 4px; - transition: background-color 0.3s; -} - -.button:hover { - background-color: #2b6cb0; -} -/* -.project-thumbnails { - position: relative; -} - -.project-thumbnail { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 0; - overflow: hidden; - transition: height 0.3s ease; -} - -.project-thumbnail img { - width: 100%; - display: block; -} - -/* .project-card .button:hover + .project-thumbnail */ -/* -.project-card .button.project_demo_partsenterprise_erp:hover + .project-thumbnail.project_demo_partsenterprise_erp, -.project-card .button.project_demo_partsenterprise_store:hover + .project-thumbnail.project_demo_partsenterprise_store, -.project-card .button.project_demo_live_partsenterprise_store:hover + .project-thumbnail.project_demo_live_partsenterprise_store, -.project-card .button.project_demo_partserp:hover + .project-thumbnail.project_demo_partserp - -*/ -/* -.project-links .button.project_demo_partsenterprise_erp:hover ~ .project-thumbnails .project_demo_partsenterprise_erp, -.project-links .button.project_demo_partsenterprise_store:hover ~ .project-thumbnails .project_demo_partsenterprise_store, -.project-links .button.project_demo_live_partsenterprise_store:hover ~ .project-thumbnails .project_demo_live_partsenterprise_store, -.project-links .button.project_demo_partserp:hover ~ .project-thumbnails .project_demo_partserp -* / -.project-thumbnail.active -{ - height: 200px; /* Adjust the height as needed * / -} -*/ -.project-detail-button { - font-size: 0.9rem; - text-decoration: underline; - margin-top: 1vh; - cursor: pointer; - width: fit-content; -} -.project-thumbnail { - margin-top: 2vh; -} -.project-thumbnail img { - max-width: 100%; - height: auto; -} -.project-detail-container { - display: none; -} -.project-detail-container.active { - display: block; -} - -.project-links { - text-align: center; - margin-top: 1vh; -} - -/* Experience */ -.experience-card { - background: var(--text-background-colour); - padding: 1.5rem; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - margin-bottom: 2rem; - margin-top: 2rem; -} -.experience-card h3 { - margin-bottom: 0; -} -.experience-date { - color: var(--primary-colour); - font-size: 0.9rem; - width: 50%; - min-width: 50%; - -webkit-text-fill-color: inherit; - text-decoration: none; - pointer-events: none; -} -.experience-card:last-child { - margin-bottom: 0; -} -.experience-company-and-date { - display: flex; - justify-content: space-between; - align-items: center; - text-align: left; - width: 100%; - margin-bottom: 0.25rem; -} -.experience-description { - margin: 0.5rem 0; -} -.experience-additional-entry { - list-style-type: disc; - width: 100%; -} -.experience-header { - 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 { - font-weight: bold; - margin: 0; - width: fit-content; -} -.experience-additional-entry .experience-company { - margin-left: 5px; - margin-right: auto; -} -.experience-additional-entry .experience-date { - font-weight: normal; - margin-left: auto; -} -.experience-additional-entry:not(:first-of-type) .experience-job-title::after { - content: " at "; - font-weight: normal; -} -.experience-additional-entry .experience-company::after { - content: " "; -} -.experience-additional-entry .experience-description:last-of-type { - margin-top: 0; - margin-bottom: 1rem; -} - -/* Footer styles */ -footer { - background-color: var(--primary-colour); - color: var(--text-background-colour); - text-align: center; - padding: 2rem 1rem; - margin-top: 4rem; -} - -footer a { - color: var(--text-background-colour); -} - -/* Responsive design */ -@media (max-width: 768px) { - nav ul { - flex-direction: column; - align-items: center; - gap: 1rem; - } - - .expertise-grid, - .projects-grid { - grid-template-columns: 1fr; - } -} - - -/* GitHub Contributions Calendar */ -.github-calendar { - width: fit-content; - margin-left: auto; - margin-right: auto; -} -/* Hide broken statistics */ -.github-calendar > :not(:first-child) { - display: none; -} -/* Hide the "How we calculate contributions" text */ -.github-calendar .js-calendar-graph .width-full .float-left { - display: none; -} -/* Change title text */ -.github-calendar table.js-calendar-graph-table > caption:first-child { - color: transparent; - font-size: 0; -} -.github-calendar table.js-calendar-graph-table > caption:first-child::before { - content: "GitHub Contributions Calendar"; - color: var(--text-colour); - font-size: 1rem; -} \ No newline at end of file diff --git a/styles/themes.css b/styles/themes.css new file mode 100644 index 0000000..0d60543 --- /dev/null +++ b/styles/themes.css @@ -0,0 +1,135 @@ +/* Modern CSS reset and variables */ +:root { + /* Claude dark blue / grey theme */ + --text-colour: #1a202c; + --primary-colour: #2d3748; + --secondary-colour: #4a5568; + --accent-colour: #4299e1; + --page-background-colour: #f7fafc; + --text-background-colour: white; +} +:root[data-theme="purple"] { + /* Purple theme + - https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff + */ + --text-colour: #10002B; /* very dark */ + --primary-colour: #240046; /* medium dark */ + --secondary-colour: #3C096C; /* dark */ + --accent-colour: #C77DFF; /* light */ + --page-background-colour: #E0AAFF; /* very light */ + --text-background-colour: white; +} +:root[data-theme="red"], +:root[data-theme="light"] { + /* Red theme + - https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000 + - https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc + */ + --text-colour: #2B0000; + --primary-colour: #740000; + --secondary-colour: #B50000; + --accent-colour: #E35053; + --page-background-colour: #F6CACC; + --text-background-colour: white; +} +:root[data-theme="dark"] { + /* + --text-colour: #E0E0E0; + --primary-colour: #BB86FC; + --secondary-colour: #03DAC6; + --accent-colour: #FF4081; + --page-background-colour: #121212; + --text-background-colour: black; + */ + /* + --text-colour: #E0E0E0; /* Light * / + --primary-colour: #740000; /* Dark * / + --secondary-colour: #B50000; /* Medium * / + --accent-colour: #FF4081; /* Light-medium * / + --page-background-colour: #121212; /* Dark * / + --text-background-colour: black; /* Black * / + */ + --text-colour: #E0E0E0; /* Light Gray */ + --primary-colour: #980000; /* Slightly lighter Dark Red */ + --secondary-colour: #D30000; /* Slightly lighter Medium Red */ + --accent-colour: #FF4081; /* Pink */ + --page-background-colour: #121212; /* Dark Gray */ + --text-background-colour: black; /* Dark Red */ +} + +/* Toggle light mode / dark mode button */ +.theme-switch { + background: none; + border: none; + cursor: pointer; + width: 5vh; + height: 5vh; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + position: relative; + margin-top: auto; + border-radius: 2.5vh; +} +.theme-switch:hover { + background-color: var(--primary-colour); +} +.theme-switch img.theme-icon, +.theme-switch svg.theme-icon { + width: 100%; + height: 100%; + object-fit: contain; + transition: opacity 1s ease, transform 1s ease; + position: absolute; + margin-top: auto; +} +img.theme-icon.dark-mode-icon { + top: 0vh; + left: -0.1vh; +} +svg.theme-icon.light-mode-icon { + width: 4vh; + height: 4vh; + top: 0.55vh; + left: 0.45vh; +} +svg.theme-icon.light-mode-icon .background { + fill: var(--secondary-colour); +} +.theme-switch:hover svg.theme-icon.light-mode-icon .background { + fill: var(--primary-colour); +} +svg.theme-icon.light-mode-icon .sun { + fill: var(--text-colour); + stroke: var(--text-colour); +} +/* +svg.theme-icon { + width: 2vh; + height: 2vh; +} +*/ + +/* Hide the icon that doesn't match the current theme */ +[data-theme="light"] .theme-switch .dark-mode-icon { + opacity: 1; + display: block; + transform: rotate(0deg); +} +[data-theme="light"] .theme-switch .light-mode-icon { + opacity: 0; + display: none; + transform: rotate(90deg); +} + +[data-theme="dark"] .theme-switch .dark-mode-icon { + opacity: 0; + display: none; + transform: rotate(-90deg); +} +[data-theme="dark"] .theme-switch .light-mode-icon { + opacity: 1; + display: block; + transform: rotate(0deg); +}