theBreadCompany/homepage
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

add privacy policy overlay

Browse source
This commit is contained in:
theBreadCompany 2025-06-16 01:37:55 +02:00
parent 6dcd5957c9
commit f28da5782c
2 changed files with 62 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

45
index.css
View file

@ -19,8 +19,8 @@
background: transparent;
}
html, body {
font-family: "Fira sans", Helvetica, sans-serif;
body {
font-family: Cantarell, "Fira sans", Helvetica, sans-serif;
background-color: var(--background);
color: var(--text);
height: 100vh;
@ -137,7 +137,7 @@ ul.h-list {
height: 24px;
background-color: lightgray;
border-radius: 4px;
margin: 18.72px 0
margin: 18.72px 0;
}
.product-placeholder-icon {
width: 50px;
@ -155,6 +155,7 @@ ul.h-list {
margin-bottom: 16px;
border-radius: 4px;
}
.r-flex-h > a { width: 100%; }
.separator {
height: 100%;
@ -207,11 +208,7 @@ ul.h-list {
width: 2em;
height: 2em;
}
.page-bar[bottom="true"] {
border-top: unset;
}
.product[placeholder="true"],
.page-bar[bottom="true"] > * {
.product[placeholder="true"] {
display: none;
}
}
@ -233,6 +230,38 @@ ul.h-list {
cursor: pointer;
font-size: 1.5em;
}
#privacy-notice-switch,
#theme-switch input[type="checkbox"] {
display: none;
}
.overlay {
display: none;
backdrop-filter: blur(10px);
margin: none;
}
#privacy-notice-switch:checked ~ .overlay {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay-bar { width: 100%; }
.overlay-bar > label {
margin-left: auto;
color: var(--text);
background-color: currentColor;
mask-image: url("https://api.iconify.design/mdi:close.svg");
width: 2em;
height: 2em;
mask-size: 100%;
}
.overlay-content {
background-color: var(--background);
border-radius: 8px;
box-shadow: 0px 0px 15px var(--primary);
padding: 1em;
max-width: 60vw;
}

35
index.html
View file

@ -8,13 +8,6 @@
<title>thebread.dev</title>
</head>
<body>
<!--
<div id="content" class="glass-text">
<h2>soon™</h1>
<h4>have a look at my <a href="cdn.thebread.dev">cdn</a></h4>
<h4>or visit my friends <a href="https://emma.pizza">Emma</a> and <a href="https://henhaa.art">Henrik</a></h4>
</div>
-->
<div class="scroll-container">
<div class="page-bar" top="true">
<img src="https://cdn.thebread.dev/logos/bread_borderless.svg" alt="thebreadcompany logo" style="height: 50%; aspect-ratio: 1; margin-left: 2em">
@ -161,9 +154,31 @@
</div>
<div class="page-bar" bottom="true">
<div style="margin-left: 2em; margin-right: auto">(c) thebread.dev 2025</div>
<div style="margin-right: 2em;" class="flex-h txt-list">
<div>Impressum</div>
<div>Datenschutzerklärung</div>
<div style="margin-right: 2em;" class="flex-h">
<!--<div>Impressum</div>
<div>Datenschutzerklärung</div>-->
<input type="checkbox" id="privacy-notice-switch">
<label for="privacy-notice-switch">Privacy Notice</label>
<div id="privacy-notice" class="overlay center-v center-h">
<div>
<div class="overlay-content">
<div class="overlay-bar flex-h center-v">
<h2>Privacy Notice</h2>
<label for="privacy-notice-switch"></label>
</div>
<p>In order for this page to work, some technical data is collected:</p>
<ul>
<li>IP address</li>
<li>User Agent</li>
</ul>
<p>This data is also logged on the server this page is running on. Your browser also sends this data to the following remotes to obtain content for this website:</p>
<ul>
<li>cdn.thebread.dev</li>
<li>api.iconify.design</li>
</ul>
<p>Your browser may cache this content, but no data is explicitly saved by this page. There are currently no cookies.</p>
</div>
</div>
</div>
</div>
</div>