mirror of
https://github.com/michivonah/website-v3.git
synced 2025-12-22 21:36:28 +01:00
implement copyright modal
This commit is contained in:
parent
de30887234
commit
e39b216212
10 changed files with 155 additions and 3 deletions
13
content/de/copyright.md
Normal file
13
content/de/copyright.md
Normal file
|
|
@ -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/)
|
||||||
13
content/en/copyright.md
Normal file
13
content/en/copyright.md
Normal file
|
|
@ -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/)
|
||||||
|
|
@ -15,3 +15,4 @@ no-projects-found = 'Keine Projekte gefunden'
|
||||||
no-more-projects = 'Keine weiteren Projekte verfügbar'
|
no-more-projects = 'Keine weiteren Projekte verfügbar'
|
||||||
faq = 'Häufige Fragen'
|
faq = 'Häufige Fragen'
|
||||||
faq-short = 'FAQ'
|
faq-short = 'FAQ'
|
||||||
|
close = 'Schliessen'
|
||||||
|
|
@ -15,3 +15,4 @@ no-projects-found = 'No projects found'
|
||||||
no-more-projects = 'No more projects available'
|
no-more-projects = 'No more projects available'
|
||||||
faq = 'Frequently Asked Questions'
|
faq = 'Frequently Asked Questions'
|
||||||
faq-short = 'FAQ'
|
faq-short = 'FAQ'
|
||||||
|
close = 'Close'
|
||||||
|
|
@ -19,5 +19,7 @@
|
||||||
{{ partial "contact.html" . }}
|
{{ partial "contact.html" . }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{ partial "copyright-modal.html" . }}
|
||||||
|
|
||||||
{{ partial "scrollTop.html" . }}
|
{{ partial "scrollTop.html" . }}
|
||||||
{{ partial "footer.html" . }}
|
{{ partial "footer.html" . }}
|
||||||
11
layouts/partials/copyright-modal.html
Normal file
11
layouts/partials/copyright-modal.html
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
<div class="copyright modal hidden">
|
||||||
|
{{ with .Site.GetPage "copyright" }}
|
||||||
|
<div class="modal-bar">
|
||||||
|
<h1>{{ .Title }}</h1>
|
||||||
|
<button class="close-modal-btn" alt='{{ T "close" }}' title='{{ T "close" }}' name='{{ T "close" }}'><i class='{{ .Params.close_icon }}'></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-content">
|
||||||
|
{{ .Content }}
|
||||||
|
</div>
|
||||||
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
|
@ -2,6 +2,9 @@
|
||||||
<div class="footer-part">
|
<div class="footer-part">
|
||||||
<p>© {{ dateFormat "2006" now }}</p>
|
<p>© {{ dateFormat "2006" now }}</p>
|
||||||
<a href="{{ .Site.Params.legalLink }}" alt='{{ T "legal" }}' title='{{ T "legal" }}'>{{ T "legal" }}</a>
|
<a href="{{ .Site.Params.legalLink }}" alt='{{ T "legal" }}' title='{{ T "legal" }}'>{{ T "legal" }}</a>
|
||||||
|
{{ with .Site.GetPage "copyright" }}
|
||||||
|
<a class="copyright-modal-link" href='#{{ .Params.slug }}' alt='{{ .Title }}' title='{{ .Title }}'>{{ .Title }}</a>
|
||||||
|
{{ end }}
|
||||||
<div class="sm-icons">
|
<div class="sm-icons">
|
||||||
{{ range .Site.Data.socialmedia }}
|
{{ range .Site.Data.socialmedia }}
|
||||||
{{ if .footer }}
|
{{ if .footer }}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="{{ .Site.LanguageCode }}">
|
<html lang="{{ .Site.LanguageCode }}">
|
||||||
<head>
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
<title>{{ .Site.Params.Title }}</title>
|
<title>{{ .Site.Params.Title }}</title>
|
||||||
<meta name="mobile-web-app-title" content="{{ .Site.Params.Title }}">
|
<meta name="mobile-web-app-title" content="{{ .Site.Params.Title }}">
|
||||||
<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.Title }}">
|
<meta name="apple-mobile-web-app-title" content="{{ .Site.Params.Title }}">
|
||||||
<meta charset="UTF-8">
|
|
||||||
<link id="favicon" rel="icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
|
<link id="favicon" rel="icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
|
||||||
<link rel="icon" type="image/svg+xml" href="{{ .Site.Params.faviconPathSVG | relURL }}">
|
<link rel="icon" type="image/svg+xml" href="{{ .Site.Params.faviconPathSVG | relURL }}">
|
||||||
<link rel="shortcut icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
|
<link rel="shortcut icon" type="image/png" href="{{ .Site.Params.faviconPath | relURL }}">
|
||||||
|
|
|
||||||
|
|
@ -53,6 +53,18 @@ document.querySelector(".project-load-btn").addEventListener('click', function()
|
||||||
loadMoreContent('.project-list', 3);
|
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
|
// Generic functions
|
||||||
function toggleDisplayByClass(className, displayType){
|
function toggleDisplayByClass(className, displayType){
|
||||||
let items = document.getElementsByClassName(className);
|
let items = document.getElementsByClassName(className);
|
||||||
|
|
|
||||||
|
|
@ -1061,6 +1061,84 @@ nav.small .nav-links a:last-child:focus{
|
||||||
outline: none;
|
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 */
|
/* GENERAL ANIMATIONS */
|
||||||
/* only css on scroll animations: https://www.youtube.com/watch?v=0TnO1GzKWPc */
|
/* only css on scroll animations: https://www.youtube.com/watch?v=0TnO1GzKWPc */
|
||||||
@media (prefers-reduced-motion: no-preference){
|
@media (prefers-reduced-motion: no-preference){
|
||||||
|
|
@ -1102,6 +1180,12 @@ nav.small .nav-links a:last-child:focus{
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fade-in-no-scale-flex{
|
||||||
|
animation: fade-in-no-scale-flex var(--baseDuration) linear;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.fade-out{
|
.fade-out{
|
||||||
animation: fade-out var(--baseDuration) linear;
|
animation: fade-out var(--baseDuration) linear;
|
||||||
animation-fill-mode: forwards;
|
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{
|
@keyframes fade-out{
|
||||||
0%{
|
0%{
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -1203,5 +1298,6 @@ nav.small .nav-links a:last-child:focus{
|
||||||
|
|
||||||
100%{
|
100%{
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue