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