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'
|
||||
faq = 'Häufige Fragen'
|
||||
faq-short = 'FAQ'
|
||||
close = 'Schliessen'
|
||||
|
|
@ -15,3 +15,4 @@ no-projects-found = 'No projects found'
|
|||
no-more-projects = 'No more projects available'
|
||||
faq = 'Frequently Asked Questions'
|
||||
faq-short = 'FAQ'
|
||||
close = 'Close'
|
||||
|
|
@ -19,5 +19,7 @@
|
|||
{{ partial "contact.html" . }}
|
||||
</div>
|
||||
|
||||
{{ partial "copyright-modal.html" . }}
|
||||
|
||||
{{ partial "scrollTop.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">
|
||||
<p>© {{ dateFormat "2006" now }}</p>
|
||||
<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">
|
||||
{{ range .Site.Data.socialmedia }}
|
||||
{{ if .footer }}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{{ .Site.Params.Title }}</title>
|
||||
<meta name="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 rel="icon" type="image/svg+xml" href="{{ .Site.Params.faviconPathSVG | 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);
|
||||
});
|
||||
|
||||
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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue