diff --git a/.idea/MatejMa2ur.github.io.iml b/.idea/MatejMa2ur.github.io.iml index 5ec5cda..49ac195 100644 --- a/.idea/MatejMa2ur.github.io.iml +++ b/.idea/MatejMa2ur.github.io.iml @@ -9,5 +9,7 @@ + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml index 23f5a6d..e7cf578 100644 --- a/.idea/jsLibraryMappings.xml +++ b/.idea/jsLibraryMappings.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/index.html b/index.html index fabc1ac..29096bc 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Live @@ -15,63 +15,55 @@ - -
-
-
-

IMPOSSIBLE

-

IS AN

-

OPINION

+
+
+
+
+

IMPOSSIBLE

+

IS AN

+

OPINION

+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
-
- - - - - - - - - - - - - - - - - - - - - - - +
+
+ Projects + About Me +
+ - \ No newline at end of file diff --git a/js/script.js b/js/script.js index abcf07e..84467a7 100644 --- a/js/script.js +++ b/js/script.js @@ -1,6 +1,17 @@ -document.getElementById('theme-switcher').addEventListener('click', function () { +// Function to toggle the theme and save it to session storage +const toggleTheme = () => { const body = document.body; const currentTheme = body.getAttribute('data-bs-theme'); const newTheme = currentTheme === 'light' ? 'dark' : 'light'; body.setAttribute('data-bs-theme', newTheme); + sessionStorage.setItem('theme', newTheme); +}; + +// Add event listener to the theme switcher button +document.getElementById('theme-switcher').addEventListener('click', toggleTheme); + +// Check session storage for saved theme on page load +window.addEventListener('DOMContentLoaded', () => { + const savedTheme = sessionStorage.getItem('theme') || 'light'; + document.body.setAttribute('data-bs-theme', savedTheme); }); \ No newline at end of file diff --git a/style/style.css b/style/style.css index c5ae56c..9b69221 100644 --- a/style/style.css +++ b/style/style.css @@ -40,4 +40,64 @@ body[data-bs-theme="dark"] { --bs-body-color: var(--light-300); --bs-emphasis-color: var(--light-200); --bs-secondary-color: var(--yellow); +} + +.screen{ + position: relative; + height: 100vh; + width: 100%; +} +.links{ + margin-top: 1em; + margin-right: 0.5em; +} + +.links a{ + width: 100%; + padding: 10px 2em; + margin: 0.2em; + border-radius: 5px; + text-decoration: none; + color: var(--light-300); + background-color: var(--bs-secondary-color); +} + +/* Index.html */ +.circle-color, .person-color { + transition: fill 0.4s ease-out; +} +body{ + transition: background-color 0.4s ease-out; +} +svg#theme-switcher { + cursor: pointer; +} +svg#theme-switcher { + width: 612px; + height: 600px; +} + +.tilt-text h2 { + transition: transform 0.3s ease-out; /* Add animation for smooth transition */ +} +/* Media query for phone screens */ +@media (max-width: 576px) { + .tilt-text { + padding-left: 0.8em; + padding-top: 6.5em; + } + .tilt-text h2 { + transform: rotate(-45deg); + margin-left: -0.5em; + } + svg#theme-switcher { + width: 400px; + height: 392px; + } + .hidden-right { + position: absolute; + right: -20%; /* Move element far enough to the right to hide it completely */ + bottom: -5%; + width: 100%; + } } \ No newline at end of file