Merge branch 'master' of https://github.com/malimalik/Web-Dev-Simplified-Official-Blog into next-js-app-router-cache

Author: malimalik

src/blogComponents/cssPseudoElements/FirstLetter.astro

@@ -0,0 +1,11 @@
+<p class="first-letter">
+  <slot />
+</p>
+
+<style>
+  .first-letter::first-letter {
+    font-size: 2em;
+    color: var(--theme-red);
+    font-weight: bold;
+  }
+</style>

src/blogComponents/cssPseudoElements/FirstLine.astro

@@ -0,0 +1,9 @@
+<p class="first-line">
+  <slot />
+</p>
+
+<style>
+  .first-line::first-line {
+    color: var(--theme-red);
+  }
+</style>

src/blogComponents/cssPseudoElements/Selection.astro

@@ -0,0 +1,10 @@
+<p class="selection">
+  <slot />
+</p>
+
+<style>
+  .selection::selection {
+    background-color: var(--theme-red);
+    color: white;
+  }
+</style>

src/blogComponents/cssPseudoElements/Tooltip.astro

@@ -0,0 +1,22 @@
+<button class="tooltip" data-tooltip="Hovered">
+  Hover Me
+</button>
+
+<style>
+  .tooltip {
+    position: relative;
+    margin-bottom: 1rem;
+    padding: .5rem;
+    font-size: 1rem;
+  }
+
+  .tooltip:hover::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + .25rem);
+    transform: translateX(-50%);
+    background-color: var(--theme-blue);
+    padding: .25rem .5rem;
+  }
+</style>

src/blogComponents/cssPseudoElements/firstLetter.astro

@@ -0,0 +1,11 @@
+<p class="first-letter">
+  <slot />
+</p>
+
+<style>
+  .first-letter::first-letter {
+    font-size: 2em;
+    color: var(--theme-red);
+    font-weight: bold;
+  }
+</style>

src/blogComponents/cssPseudoElements/firstLine.astro

@@ -0,0 +1,9 @@
+<p class="first-line">
+  <slot />
+</p>
+
+<style>
+  .first-line::first-line {
+    color: var(--theme-red);
+  }
+</style>

src/blogComponents/cssPseudoElements/selection.astro

@@ -0,0 +1,10 @@
+<p class="selection">
+  <slot />
+</p>
+
+<style>
+  .selection::selection {
+    background-color: var(--theme-red);
+    color: white;
+  }
+</style>

src/blogComponents/cssPseudoElements/tooltip.astro

@@ -0,0 +1,22 @@
+<button class="tooltip" data-tooltip="Hovered">
+  Hover Me
+</button>
+
+<style>
+  .tooltip {
+    position: relative;
+    margin-bottom: 1rem;
+    padding: .5rem;
+    font-size: 1rem;
+  }
+
+  .tooltip:hover::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    left: 50%;
+    bottom: calc(100% + .25rem);
+    transform: translateX(-50%);
+    background-color: var(--theme-blue);
+    padding: .25rem .5rem;
+  }
+</style>