diff --git a/projects/apple/mapkit/index.html b/projects/apple/mapkit/index.html new file mode 100644 index 0000000..1805851 --- /dev/null +++ b/projects/apple/mapkit/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + + + +
+ + + + + \ No newline at end of file diff --git a/projects/random/.vscode/settings.json b/projects/random/.vscode/settings.json new file mode 100644 index 0000000..203b215 --- /dev/null +++ b/projects/random/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "livePreview.defaultPreviewPath": "/playing-with-has/index.html" +} \ No newline at end of file diff --git a/projects/random/playing-with-has/index.html b/projects/random/playing-with-has/index.html new file mode 100644 index 0000000..cc292bf --- /dev/null +++ b/projects/random/playing-with-has/index.html @@ -0,0 +1,68 @@ + + + + + + + Playing with has selector + + + + + +
+

:has Playground

+
+ + + + + + +
+
+ +

Section 1 - simple :has

+   +

+ What do you think? +

+ +

+ What do you think? +

+ + +
+

Blog Post Title

+
+ +
+

Blog Post Title

+
+ This is a subtitle +
+
+
+
+ +

Section 2 - has for light dark switch

+ +
+ + +
+
+
+

Section 3

+
+
+ + + + + \ No newline at end of file diff --git a/projects/random/playing-with-has/script.js b/projects/random/playing-with-has/script.js new file mode 100644 index 0000000..b179ee9 --- /dev/null +++ b/projects/random/playing-with-has/script.js @@ -0,0 +1 @@ +console.log("Hello world"); diff --git a/projects/random/playing-with-has/style.css b/projects/random/playing-with-has/style.css new file mode 100644 index 0000000..7d35b9e --- /dev/null +++ b/projects/random/playing-with-has/style.css @@ -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); +}