saved changes

cu8code · Apr 18, 2024 · 7b1f8ff · 7b1f8ff
1 parent 5a5eee9
commit 7b1f8ff
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/mdx": "^2.3.1",
     "@astrojs/react": "^3.3.0",
     "@astrojs/tailwind": "^5.1.0",
+    "@fontsource/twinkle-star": "^5.0.19",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Linkstree.astro b/src/components/Linkstree.astro
@@ -5,7 +5,7 @@
     }
 </style>
 
-<div>
+<div class="max-width">
     <div>
         <div><a href="https://www.linkedin.com/in/usrbincat">~Linkedin</a></div>
         <div><a href="https://twitter.com/cu8code">~Twitter</a></div>

diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro
@@ -1,14 +1,41 @@
 <style>
-    .navigation-link{
-        font-size: 1.5rem;
+    nav {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .navigation-link {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+    }
+
+    .left {
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        align-items: center;
+    }
+    .logo {
+        width: 60px;
+        height: 50px;
+        background: yellow;
+        border-radius: 10% 35% 35% 10%;
     }
 </style>
-<nav>
-    <div>Ankan Roy</div>
-    <br>
-    <div>
-        <div class="navigation-link"><a href="/">~Home</a></div>
-        <div class="navigation-link"><a href="/blog">~Blog</a></div>
-        <div class="navigation-link"><a href="mailto:8ankanroy@gmail.com">~Colloborate</a></div>
+<nav class="max-width">
+    <div class="left">
+        <div class="logo"></div>
+        <div>
+            <div>Ankan</div>
+            <div>Roy</div>
+        </div>
+    </div>
+    <div class="navigation-link">
+        <div><a href="/">~Home</a></div>
+        <div><a href="/blog">~Blog</a></div>
+        <div><a href="mailto:8ankanroy@gmail.com">~Colloborate</a></div>
     </div>
 </nav>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -1,25 +1,34 @@
 ---
 import Navigation from "@/components/Navigation.astro";
 import Linkstree from "@/components/Linkstree.astro";
-let title = 'This is a cool page';
 ---
 
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{title}</title>
+    <title>This is a cool website</title>
 </head>
 <style is:global>
+    :root{
+        --primary-font-color: #fff2d5;
+        --primary-bg: #000000;
+    }
     body {
         font-family: monospace;
         font-size: 0.9rem;
-        background-color: black;
-        color: whitesmoke;
+        background-color: var(--primary-bg);
+        color: var(--primary-font-color);
     }
     a {
-        color: yellow;
+        color: #fff2d5;
+    }
+    .max-width {
+        max-width: 1400px;
+        align-items: center;
+        justify-content: center;
+        margin: 0 auto;
     }
 </style>
 <body>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -3,5 +3,5 @@ import Page from "@/layouts/Page.astro";
 ---
 
 <Page>
-    <h1>I like simple and clean website!</h1>
+
 </Page>
diff --git a/src/pages/posts/sudo-selector-in-css.mdx b/src/pages/posts/sudo-selector-in-css.mdx
@@ -0,0 +1,77 @@
+---
+title: 'sudo selector in css?'
+pubDate: 2024-04-19
+description: 'sudo selector in css!'
+author: 'Ankan Roy'
+layout: ../../layouts/Page.astro
+---
+
+1. **::before**:
+   - This pseudo-element inserts content before the content of the selected element.
+   - It's commonly used to add decorative elements or textual content before an element.
+   - You can define its style using CSS properties like `content`, `display`, `position`, `background`, etc.
+   - Example:
+     ```css
+     .element::before {
+         content: "Before text";
+         display: block;
+         background-color: #ccc;
+     }
+     ```
+
+2. **::after**:
+   - This pseudo-element inserts content after the content of the selected element.
+   - It's often used for decorative purposes or to add additional content to an element.
+   - Like '::before', you can style it using various CSS properties.
+   - Example:
+     ```css
+     .element::after {
+         content: "After text";
+         display: block;
+         color: red;
+     }
+     ```
+
+1. **::first-line**: This pseudo-element targets the first line of text within an element. It allows you to style only the first line, such as changing its font, color, or adding decorations.
+
+    ```css
+    p::first-line {
+        font-weight: bold;
+        color: blue;
+    }
+    ```
+
+2. **::first-letter**: Similar to `::first-line`, `::first-letter` targets the first letter of the text content within an element. It's often used for decorative purposes or for drop caps.
+
+    ```css
+    p::first-letter {
+        font-size: 150%;
+        color: red;
+    }
+    ```
+
+3. **::placeholder**: This pseudo-element targets the placeholder text in an input field or textarea. It allows you to style the placeholder text separately from the input text.
+
+    ```css
+    input::placeholder {
+        color: #999;
+        font-style: italic;
+    }
+    ```
+
+4. **::selection**: This pseudo-element allows you to style the portion of a document that has been highlighted by the user. It's commonly used to customize the appearance of selected text.
+
+    ```css
+    ::selection {
+        background-color: #ffcc00;
+        color: #333;
+    }
+    ```
+
+5. **::marker**: This pseudo-element targets the marker box of a list item. It allows you to style the bullet or numbering of list items.
+
+    ```css
+    ul::marker {
+        color: blue;
+    }
+    ```