diff --git a/content/de/copyright.md b/content/de/copyright.md new file mode 100644 index 0000000..1d2940c --- /dev/null +++ b/content/de/copyright.md @@ -0,0 +1,13 @@ +--- +title: "Copyright" +slug: "copyright" +close_icon: "ai-cross" +--- + +Auf dieser Seite verwendete Ressourcen: +- [Akar Icons](https://akaricons.com/) +- [BGJar](https://bgjar.com/) +- [CSS Text Animations - prismic.io](https://prismic.io/blog/css-text-animations) +- [Source Sans 3 - Google Fonts](https://fonts.google.com/specimen/Source+Sans+3) +- [Typewriter Effect - CSS Tricks](https://css-tricks.com/snippets/css/typewriter-effect/) +- [Uiverse](https://uiverse.io/) diff --git a/content/en/copyright.md b/content/en/copyright.md new file mode 100644 index 0000000..c091ab7 --- /dev/null +++ b/content/en/copyright.md @@ -0,0 +1,13 @@ +--- +title: "Copyright" +slug: "copyright" +close_icon: "ai-cross" +--- + +Resources used on this page: +- [Akar Icons](https://akaricons.com/) +- [BGJar](https://bgjar.com/) +- [CSS Text Animations - prismic.io](https://prismic.io/blog/css-text-animations) +- [Source Sans 3 - Google Fonts](https://fonts.google.com/specimen/Source+Sans+3) +- [Typewriter Effect - CSS Tricks](https://css-tricks.com/snippets/css/typewriter-effect/) +- [Uiverse](https://uiverse.io/) diff --git a/i18n/de.toml b/i18n/de.toml index 34b457e..c99a695 100644 --- a/i18n/de.toml +++ b/i18n/de.toml @@ -14,4 +14,5 @@ load-more = 'Mehr laden' no-projects-found = 'Keine Projekte gefunden' no-more-projects = 'Keine weiteren Projekte verfügbar' faq = 'Häufige Fragen' -faq-short = 'FAQ' \ No newline at end of file +faq-short = 'FAQ' +close = 'Schliessen' \ No newline at end of file diff --git a/i18n/en.toml b/i18n/en.toml index e3ba4bc..20fcbf9 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -14,4 +14,5 @@ load-more = 'Load more' no-projects-found = 'No projects found' no-more-projects = 'No more projects available' faq = 'Frequently Asked Questions' -faq-short = 'FAQ' \ No newline at end of file +faq-short = 'FAQ' +close = 'Close' \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index a1b2393..973c1b6 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -19,5 +19,7 @@ {{ partial "contact.html" . }} +{{ partial "copyright-modal.html" . }} + {{ partial "scrollTop.html" . }} {{ partial "footer.html" . }} \ No newline at end of file diff --git a/layouts/partials/copyright-modal.html b/layouts/partials/copyright-modal.html new file mode 100644 index 0000000..3de3b2b --- /dev/null +++ b/layouts/partials/copyright-modal.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 66cd8fc..f5ea40b 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -2,6 +2,9 @@

© {{ dateFormat "2006" now }}

{{ T "legal" }} + {{ with .Site.GetPage "copyright" }} + {{ .Title }} + {{ end }}
{{ range .Site.Data.socialmedia }} {{ if .footer }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 6ceba89..c05c09e 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -1,10 +1,10 @@ + {{ .Site.Params.Title }} - diff --git a/static/main.js b/static/main.js index bccd696..9b8343b 100644 --- a/static/main.js +++ b/static/main.js @@ -53,6 +53,18 @@ document.querySelector(".project-load-btn").addEventListener('click', function() loadMoreContent('.project-list', 3); }); +document.querySelector(".copyright .close-modal-btn").addEventListener('click', function(){ + toggleClass(".copyright", "fade-in-no-scale-flex"); + toggleClass(".copyright", "fade-out-no-scale"); +}); + +document.querySelector(".copyright-modal-link").addEventListener('click', function(){ + const copyrightModal = document.querySelector(".copyright"); + copyrightModal.classList.remove("hidden"); + copyrightModal.classList.remove("fade-out-no-scale"); + copyrightModal.classList.add("fade-in-no-scale-flex"); +}); + // Generic functions function toggleDisplayByClass(className, displayType){ let items = document.getElementsByClassName(className); diff --git a/static/style.css b/static/style.css index f5ab401..1af1fc9 100644 --- a/static/style.css +++ b/static/style.css @@ -1061,6 +1061,84 @@ nav.small .nav-links a:last-child:focus{ outline: none; } +/* COPYRIGHT MODAL */ +.modal{ + --top: calc(var(--navSmallHeight) - 15px); + width: calc(100% - 40px); + max-width: 700px; + height: auto; + padding: 10px 30px; + box-sizing: border-box; + position: fixed; + top: var(--top); + left: 50%; + transform: translate(-50%, calc(100% - (100% - var(--top)))); + background: var(--primary); + color: var(--color); + border-radius: var(--baseRadius); + transition: var(--baseTransition); + + display: flex; + flex-direction: column; + box-shadow: 0px 8px 24px var(--background); +} + +.modal.hidden{ + display: none; +} + +.modal ::selection{ + background: var(--color); + color: var(--secondary); +} + +.modal-bar{ + display: flex; + flex-direction: row; + justify-content: space-between; + align-content: stretch; + align-items: center; +} + +.modal-bar h1{ + margin-block: 10px; +} + +.modal-bar button{ + background: transparent; + border: none; + outline: none; + color: inherit; + font-size: 2rem; + transition: var(--baseTransition); + cursor: pointer; +} + +.modal-bar button:hover, +.modal-bar abutton:focus{ + rotate: -45deg; + filter: drop-shadow(0 0 0.8rem var(--color)); +} + +.modal-content{ + margin: 0; +} + +.modal-content a{ + color: var(--color); + text-decoration: underline; + text-decoration-thickness: 2px; + text-decoration-color: var(--color); + transition: var(--baseTransition); +} + +.modal-content a:hover, +.modal-content a:focus{ + background: var(--color); + color: var(--secondary); + outline: none; +} + /* GENERAL ANIMATIONS */ /* only css on scroll animations: https://www.youtube.com/watch?v=0TnO1GzKWPc */ @media (prefers-reduced-motion: no-preference){ @@ -1102,6 +1180,12 @@ nav.small .nav-links a:last-child:focus{ overflow: hidden; } + .fade-in-no-scale-flex{ + animation: fade-in-no-scale-flex var(--baseDuration) linear; + animation-fill-mode: forwards; + overflow: hidden; + } + .fade-out{ animation: fade-out var(--baseDuration) linear; animation-fill-mode: forwards; @@ -1183,6 +1267,17 @@ nav.small .nav-links a:last-child:focus{ } } +@keyframes fade-in-no-scale-flex{ + 0%{ + opacity: 0; + } + + 100%{ + opacity: 1; + display: flex; + } +} + @keyframes fade-out{ 0%{ opacity: 1; @@ -1203,5 +1298,6 @@ nav.small .nav-links a:last-child:focus{ 100%{ opacity: 0; + display: none; } } \ No newline at end of file