mikael-lovqvist/websperiments
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added some css examples

Browse Source
This commit is contained in:
Mikael Lövqvist
2025-08-05 22:54:26 +02:00
parent a7b6a93680
commit 186f9c036a
5 changed files with 188 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
css-examples/insets.css Normal file
View File

@@ -0,0 +1,60 @@
html, body {
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
.viewport {
position: relative;
width: 100%;
height: 100%;
background: #111;
color: white;
font-family: sans-serif;
overflow: hidden;
}
/* Generic overlay base */
.overlay {
position: absolute;
padding: 0.5em 1em;
background: rgba(0, 0, 0, 0.6);
border-radius: 0.5em;
user-select: none;
cursor: pointer;
}
/* Corners */
.top-left {
top: 1em; left: 1em;
}
.top-right {
top: 1em; right: 1em;
}
.bottom-left {
bottom: 1em; left: 1em;
}
.bottom-right {
bottom: 1em; right: 1em;
}
/* Edges */
.top-center {
top: 1em; left: 50%; transform: translateX(-50%);
}
.bottom-center {
bottom: 1em; left: 50%; transform: translateX(-50%);
}
.left-center {
left: 1em; top: 50%; transform: translateY(-50%);
}
.right-center {
right: 1em; top: 50%; transform: translateY(-50%);
}
/* Center */
.center {
top: 50%; left: 50%; transform: translate(-50%, -50%);
}

27
css-examples/insets.html Normal file
View File

@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html>
<head>
<title>Insets</title>
<link rel="stylesheet" href="insets.css">
</head>
<body>
<div class="viewport">
<div class="overlay top-left">Corner</div>
<div class="overlay top-right">Corner</div>
<div class="overlay bottom-left">Corner</div>
<div class="overlay bottom-right">Corner</div>
<div class="overlay top-center">Edge</div>
<div class="overlay bottom-center">Edge</div>
<div class="overlay left-center">Edge</div>
<div class="overlay right-center">Edge</div>
<div class="overlay center">Center</div>
</div>
</body>
</html>

25
css-examples/panels.css Normal file
View File

@@ -0,0 +1,25 @@
.panel-container {
display: grid;
grid-template-columns: 0em 1fr 0em;
transition: grid-template-columns 0.3s ease;
height: 100vh;
}
.side-panel {
background: rgba(0, 0, 0, 0.3);
}
.left-panel {
border-right: 1px solid #444;
}
.right-panel {
border-left: 1px solid #444;
}
.center-panel {
background: #222;
color: white;
padding: 1em;
}

67
css-examples/panels.html Normal file
View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html>
<head>
<title>Insets</title>
<link rel="stylesheet" href="insets.css">
<link rel="stylesheet" href="panels.css">
<style>
.ccw-rotated {
transform: rotate(-0.25turn) translate(0,-3.5em);
}
.cw-rotated {
transform: rotate(0.25turn) translate(0,-3.0em); /* I don't like that I have to do an translation here, especially not assymetrically like this */
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const pc = document.getElementById('pc');
const lp = document.getElementById('lp');
const rp = document.getElementById('rp');
let lp_open = false;
let rp_open = false;
document.getElementById('mm').addEventListener('click', (e) => {
lp_open = !lp_open;
const left = lp_open ? '20' : '0';
const right = rp_open ? '20' : '0';
pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
});
document.getElementById('tb').addEventListener('click', (e) => {
rp_open = !rp_open;
const left = lp_open ? '20' : '0';
const right = rp_open ? '20' : '0';
pc.style.gridTemplateColumns = `${left}em 1fr ${right}em`;
});
});
</script>
</head>
<body>
<div class="viewport">
<div class="panel-container" id="pc">
<div class="side-panel left-panel" id="lp">
<div style="width: 20em;">Left panel</div>
</div>
<div class="viewport">
<div class="center-panel">
Here be the main content
</div>
<div class="overlay left-center ccw-rotated" id="mm">Main Menu</div>
<div class="overlay right-center cw-rotated" id="tb">Tool Box</div>
</div>
<div class="side-panel right-panel" id="rp">
<div style="width: 20em;">Right panel</div>
</div>
</div>
</div>
</body>
</html>