diff --git a/site/src/about/aboutme/index.html b/site/src/about/aboutme/index.html index 4cb73e0..1402a75 100644 --- a/site/src/about/aboutme/index.html +++ b/site/src/about/aboutme/index.html @@ -69,27 +69,27 @@
Discover the full range of services and software offered here
- Linktree -Learn more here
+ Linktree + + + + + + + + + + + + diff --git a/site/src/about/index.html b/site/src/about/index.html index 904fda5..7350aea 100644 --- a/site/src/about/index.html +++ b/site/src/about/index.html @@ -35,17 +35,18 @@ -Discover the full range of services and software offered here
- +Learn more here
+ Linktree + + + + + + + + + + diff --git a/site/src/css/analytics.css b/site/src/css/analytics.css new file mode 100644 index 0000000..6ddb0c1 --- /dev/null +++ b/site/src/css/analytics.css @@ -0,0 +1,62 @@ +/* + Analytics +*/ +.analytics-notice { + z-index: 10000; + bottom: -450px; + right: 5px; + width: 300px; + height: 400px; + position: fixed; + background-color: var( --color-background-analytics ); + border-radius: 20px; + padding: 10px; + text-align: center; + display: flex; + flex-direction: column; + align-items: center; + overflow: scroll; + transition: bottom 1s; +} + +.analytics-notice.show { + bottom: 5px; +} + +.analytics-button { + color: var( --color-text-primary ); + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 1rem; + cursor: pointer; +} + +#matomo-opt-out { + color: var( --color-text-primary ) !important; +} + +.analytics-notice .small-symbol { + position: fixed; + bottom: -3px; + border-top-left-radius: 10px; + border-top-right-radius: 10px; + background-color: var( --color-background-analytics ); + border: solid black 1px; + cursor: pointer; + transition: all 1s; + padding-left: 20px; + padding-right: 20px; + padding-bottom: 5px; + right: 10px; + transition-delay: 2s; + z-index: 10001; + font-size: 1.5rem; +} + +.analytics-notice.show .small-symbol { + bottom: -100px; + transition-delay: 0s; +} diff --git a/site/src/css/footer.css b/site/src/css/footer.css index 1ac574a..7de7fb5 100644 --- a/site/src/css/footer.css +++ b/site/src/css/footer.css @@ -6,103 +6,72 @@ footer { } footer .logo { + margin-top: 20px; height: 40vh; + border-radius: 20px; } .footer-container { display: flex; - flex-direction: row; + flex-direction: column; justify-content: center; align-items: center; + width: 100%; + margin-bottom: 50px; } .footer-text-container { display: flex; - flex-direction: row; + flex-direction: column; + justify-content: center; + align-items: center; min-width: calc( ( 100% - 40vh - 50px ) / 2 ); - margin-left: auto; - margin-right: auto; + width: 80%; } .footer-category { display: flex; flex-direction: column; - margin-left: auto; - margin-right: auto; + width: 80%; } .footer-category a { color: var( --color-text-primary ); text-decoration: none; transition: all 0.5s; - font-size: 1rem; + transform: scale(1); + transition: transform 0.75s; } .footer-category a:hover { color: var( --color-button-hover ); - font-size: 1.1rem; + transform: scale(1.1); } -/* - Analytics -*/ -.analytics-notice { - z-index: 10000; - bottom: -450px; - right: 5px; - width: 300px; - height: 400px; - position: fixed; - background-color: var( --color-background-analytics ); - border-radius: 20px; - padding: 10px; - text-align: center; - display: flex; - flex-direction: column; - align-items: center; - overflow: scroll; - transition: bottom 1s; -} -.analytics-notice.show { - bottom: 5px; -} +@media only screen and (min-width: 999px) { + footer .logo { + margin-top: unset; + border-radius: 0; + } + .footer-container { + flex-direction: row; + margin-bottom: unset; + } -.analytics-button { - color: var( --color-text-primary ); - position: absolute; - top: 10px; - right: 10px; - background: none; - border: none; - font-size: 1rem; - cursor: pointer; -} - -#matomo-opt-out { - color: var( --color-text-primary ) !important; -} - -.analytics-notice .small-symbol { - position: fixed; - bottom: -3px; - border-top-left-radius: 10px; - border-top-right-radius: 10px; - background-color: var( --color-background-analytics ); - border: solid black 1px; - cursor: pointer; - transition: all 1s; - padding-left: 20px; - padding-right: 20px; - padding-bottom: 5px; - right: 10px; - transition-delay: 2s; - z-index: 10001; - font-size: 1.5rem; -} - -.analytics-notice.show .small-symbol { - bottom: -100px; - transition-delay: 0s; + .footer-text-container { + align-items: flex-start; + justify-content: flex-start; + flex-direction: row; + width: unset; + margin-left: auto; + margin-right: auto; + } + + .footer-category { + margin-left: auto; + margin-right: auto; + width: unset; + } } diff --git a/site/src/css/nav.css b/site/src/css/nav.css index fe0f6e2..a33705f 100644 --- a/site/src/css/nav.css +++ b/site/src/css/nav.css @@ -1,5 +1,3 @@ -/* TODO: Update... */ - nav { width: 100vw; height: 20vh; @@ -21,10 +19,24 @@ nav { height: 100%; } +.nav-top-bar .logo-wrapper:hover { + transform: unset; +} + nav a { /* TODO: Update colours */ color: var( --color-text-primary ); text-decoration: none; + transform: scale(1); + transition: transform 0.75s; +} + +nav a:hover { + transform: scale(1.1); +} + +.nav-link-wrapper { + margin-bottom: 30px; } .nav-link-dropdown a { @@ -71,10 +83,15 @@ nav a { } .nav-top-bar .logo { + height: 100%; +} + +.nav-top-bar .logo-wrapper { display: unset; height: 90%; border-radius: 20px; margin-left: 20px; + overflow: hidden; } .nav-menu.active { @@ -82,6 +99,7 @@ nav a { } .nav-link-header { + font-size: 1.2rem; display: flex; flex-direction: row; justify-content: center; @@ -149,6 +167,10 @@ nav a { @media only screen and (min-width: 900px) { + nav a:hover { + transform: unset; + } + .nav-menu .logo-wrapper { display: unset; } @@ -198,6 +220,7 @@ nav a { position: relative; margin-left: 3%; margin-right: 3%; + margin-bottom: unset; } .nav-link-header { diff --git a/site/src/css/side-by-side.css b/site/src/css/side-by-side.css new file mode 100644 index 0000000..e69de29 diff --git a/site/src/css/style.css b/site/src/css/style.css index 40cacc8..6bb8ae4 100644 --- a/site/src/css/style.css +++ b/site/src/css/style.css @@ -3,6 +3,7 @@ @import url( '/css/nav.css' ); @import url( '/css/colors.css' ); @import url( '/css/footer.css' ); +@import url( '/css/analytics.css' ); /* Color Theme */ :root, :root.light { diff --git a/site/src/css/wrapfig.css b/site/src/css/wrapfig.css index c07129e..f2660b9 100644 --- a/site/src/css/wrapfig.css +++ b/site/src/css/wrapfig.css @@ -1,5 +1,5 @@ .wrapfig-wrapper { - width: 80%; + width: 100%; position: relative; } @@ -45,4 +45,4 @@ .wrapfig-text.right { margin-left: auto; } -} \ No newline at end of file +} diff --git a/site/src/footer.html b/site/src/footer.html index 8f682d5..c15171a 100644 --- a/site/src/footer.html +++ b/site/src/footer.html @@ -27,7 +27,7 @@Log into any of my services with one single account, or apply to get access to the SDKs to integrate them into your own projects
+ To AccountVarious open source projects are in the works at janishutz.com, with help from the community.
+ ProjectsApps to improve your day-to-day life by providing useful features helping you stay safe and organized.
+ iOS AppsLooking for a new website, an online booking tool or similar? Check out my previous projects
+Professional wire calculation software to aid in building high voltage lines safely
+ ConductorCalc