Random CSS experiments
Specifically playing with has selector, but there is also a mapkit test
This commit is contained in:
parent
70ad2cec50
commit
063dbdd28e
|
|
@ -0,0 +1,49 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<script src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.core.js" crossorigin async data-callback="initMapKit"
|
||||||
|
data-libraries="map"
|
||||||
|
data-initial-token="eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkJHV0M3OTI1V0MifQ.eyJpc3MiOiJWRTdZTTVWVkpCIiwiaWF0IjoxNjY4MzYyMzYzLCJleHAiOjE2OTk4MzM2MDAsIm9yaWdpbiI6Imh0dHBzOi8vKi5ybWNnLmRldiwgaHR0cDovLzEyNy4wLjAuMTozMDAwLCBodHRwOi8vbG9jYWxob3N0OjMwMDAifQ.JOAnDMffZ90tk03qH1BEVCNpFo_-5eaUj1gmTgwHXl0tK-sfA4kVhNQ1UyOUaPuM1SR57rwImhjTiX-mNMwKtA"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 600px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="map"></div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
|
||||||
|
(async () => {
|
||||||
|
const tokenID = "eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkJHV0M3OTI1V0MifQ.eyJpc3MiOiJWRTdZTTVWVkpCIiwiaWF0IjoxNjY4MzYyMzYzLCJleHAiOjE2OTk4MzM2MDAsIm9yaWdpbiI6Imh0dHBzOi8vKi5ybWNnLmRldiwgaHR0cDovLzEyNy4wLjAuMTozMDAwLCBodHRwOi8vbG9jYWxob3N0OjMwMDAifQ.JOAnDMffZ90tk03qH1BEVCNpFo_-5eaUj1gmTgwHXl0tK-sfA4kVhNQ1UyOUaPuM1SR57rwImhjTiX-mNMwKtA";
|
||||||
|
|
||||||
|
if (!window.mapkit || window.mapkit.loadedLibraries.length === 0) {
|
||||||
|
// mapkit.core.js or the libraries are not loaded yet.
|
||||||
|
// Set up the callback and wait for it to be called.
|
||||||
|
await new Promise(resolve => { window.initMapKit = resolve });
|
||||||
|
|
||||||
|
// Clean up
|
||||||
|
delete window.initMapKit;
|
||||||
|
}
|
||||||
|
|
||||||
|
mapkit.init({
|
||||||
|
authorizationCallback: function (done) {
|
||||||
|
done(tokenID);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const map = new mapkit.Map("map");
|
||||||
|
})();
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"livePreview.defaultPreviewPath": "/playing-with-has/index.html"
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Playing with has selector</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
<script src="script.js" defer></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>:has Playground</h1>
|
||||||
|
</header>
|
||||||
|
<!-- ideas: -->
|
||||||
|
|
||||||
|
<!-- highlight box that has hover but blur others -->
|
||||||
|
|
||||||
|
<!-- search to toggle classes that highlight certain matches -->
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section id="section1">
|
||||||
|
<!-- Section 1 -->
|
||||||
|
<h2>Section 1 - simple :has</h2>
|
||||||
|
|
||||||
|
<h3>
|
||||||
|
What do <span>you</span> think?
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<h3>
|
||||||
|
What do you think?
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<!-- selective margins based on if a subtitle is there -->
|
||||||
|
<div class="header-group">
|
||||||
|
<h3>Blog Post Title</h3> <!-- main spacing applied here -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="header-group">
|
||||||
|
<h3>Blog Post Title</h3>
|
||||||
|
<div class="subtitle"> <!-- main spacing applied here -->
|
||||||
|
This is a subtitle
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="section2">
|
||||||
|
<!-- Section 2 -->
|
||||||
|
<h2>Section 2 - has for light dark switch</h2>
|
||||||
|
|
||||||
|
<div class="switch">
|
||||||
|
<label class="switch__label" for="switch">Light / Dark</label>
|
||||||
|
<input id="switch" class="switch__input" name="switch" type="checkbox">
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section id="section3">
|
||||||
|
<h2>Section 3</h2>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<i class="nf nf-fa-heart"></i> 2024 using <i class="nf nf-md-microsoft_visual_studio_code"></i> <i
|
||||||
|
class="nf nf-dev-apple"></i>
|
||||||
|
<i class="nf nf-dev-css3"></i> <i class="nf nf-linux-archlinux"></i>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
console.log("Hello world");
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
@import "https://www.nerdfonts.com/assets/css/webfont.css";
|
||||||
|
|
||||||
|
/* makes sizing simpler */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* remove default spacing */
|
||||||
|
/* force styling of type through styling, rather than elements */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
/* font: inherit; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* dark mode user-agent-styles */
|
||||||
|
/* improves punctuation in supported browsers */
|
||||||
|
html {
|
||||||
|
color-scheme: dark light;
|
||||||
|
hanging-punctuation: first last;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* min body height */
|
||||||
|
body {
|
||||||
|
min-height: 100svh;
|
||||||
|
font-family:
|
||||||
|
system-ui,
|
||||||
|
-apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
"Segoe UI",
|
||||||
|
Roboto,
|
||||||
|
Oxygen,
|
||||||
|
Ubuntu,
|
||||||
|
Cantarell,
|
||||||
|
"Open Sans",
|
||||||
|
"Helvetica Neue",
|
||||||
|
sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* responsive images/videos */
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Improved heading in supported browsers */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
text-wrap: balance;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* improve readability with max-width on paragraphs and lists */
|
||||||
|
/* prevent orphans in supported browsers */
|
||||||
|
p,
|
||||||
|
li {
|
||||||
|
max-width: var(--p-max-width, 65ch);
|
||||||
|
text-wrap: pretty;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* My css */
|
||||||
|
|
||||||
|
section {
|
||||||
|
min-height: 100svh;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:has(span) {
|
||||||
|
color: lightblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3:not(:has(span)) {
|
||||||
|
color: lightsalmon;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 > span {
|
||||||
|
color: lightpink;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.subtitle {
|
||||||
|
margin: 0 0 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-group:has(h3):has(.subtitle) h3 {
|
||||||
|
margin: 0 0 0.2rem 0; /* reduce spacing on header, because subtitle will handle it */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:not(:has(img)) {
|
||||||
|
border: 1px solid var(--my-amazing-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* section 2 */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-color: rgb(11, 58, 33);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch {
|
||||||
|
display: grid;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch__label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.switch__input::before {
|
||||||
|
content: "Light";
|
||||||
|
margin-inline-start: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch__input::after {
|
||||||
|
content: "Dark";
|
||||||
|
margin-inline-end: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root:has(.switch__input:checked) {
|
||||||
|
--bg-color: rgb(0, 26, 255);
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch__input:checked {
|
||||||
|
/* color: aquamarine; */
|
||||||
|
background-color: blueviolet;
|
||||||
|
}
|
||||||
|
|
||||||
|
#section2 {
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue