From 5a5eee9b2e4660444972306ea26c2be7bdb55143 Mon Sep 17 00:00:00 2001 From: cu8code Date: Thu, 18 Apr 2024 19:23:21 +0530 Subject: [PATCH] update --- src/components/Linkstree.astro | 6 ++ src/layouts/Page.astro | 4 +- src/pages/blog.astro | 8 +++ ...-path-finding-algo-with-props-and-cons.mdx | 2 +- src/pages/posts/top-10-common-bugs-in-css.mdx | 63 ------------------- 5 files changed, 18 insertions(+), 65 deletions(-) delete mode 100644 src/pages/posts/top-10-common-bugs-in-css.mdx diff --git a/src/components/Linkstree.astro b/src/components/Linkstree.astro index b7f7ff8..afc0a73 100644 --- a/src/components/Linkstree.astro +++ b/src/components/Linkstree.astro @@ -1,4 +1,10 @@ + +
~Linkedin
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro index 71e9887..377753c 100644 --- a/src/layouts/Page.astro +++ b/src/layouts/Page.astro @@ -25,6 +25,8 @@ let title = 'This is a cool page'; - +
+ +
\ No newline at end of file diff --git a/src/pages/blog.astro b/src/pages/blog.astro index 9281cac..20185c7 100644 --- a/src/pages/blog.astro +++ b/src/pages/blog.astro @@ -7,6 +7,14 @@ import Page from "@/layouts/Page.astro"; a { font-size: 1.8rem; } + + li:nth-child(odd) { + background: #1a1919; + } + + li:nth-child(even) { + background: #252525; + }
    diff --git a/src/pages/posts/common-path-finding-algo-with-props-and-cons.mdx b/src/pages/posts/common-path-finding-algo-with-props-and-cons.mdx index ba6c712..9a444d8 100644 --- a/src/pages/posts/common-path-finding-algo-with-props-and-cons.mdx +++ b/src/pages/posts/common-path-finding-algo-with-props-and-cons.mdx @@ -1,5 +1,5 @@ --- -title: 'common path finding algo with props and cons?' +title: 'common path finding algo with pros and cons?' pubDate: 2024-04-18 description: 'path finding!' author: 'Ankan Roy' diff --git a/src/pages/posts/top-10-common-bugs-in-css.mdx b/src/pages/posts/top-10-common-bugs-in-css.mdx deleted file mode 100644 index 635ed07..0000000 --- a/src/pages/posts/top-10-common-bugs-in-css.mdx +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: 'top 10 common bugs in css?' -pubDate: 2024-04-18 -description: 'common css bugs!' -author: 'Ankan Roy' -layout: ../../layouts/Page.astro ---- - -# Top 10 Known Bugs in CSS - -As software developers, we know that no codebase is perfect, and CSS is no exception. While CSS has come a long way in terms of its capabilities and reliability, there are still a number of known bugs and quirks that can trip up even the most experienced developers. In this blog post, we'll dive into the top 10 known bugs in CSS and explore how to work around them. - -## 1. The Box Model Bug -The box model bug is a classic CSS issue that has been around for a long time. It occurs when the total width of an element is not calculated correctly, leading to unexpected layout issues. This bug is particularly prevalent in older versions of Internet Explorer. - -**Workaround:** Use the `box-sizing` property to ensure that the total width of an element includes its padding and border. - -## 2. The Margin Collapsing Bug -When two elements with vertical margins are placed next to each other, their margins can "collapse" and combine, leading to unexpected spacing issues. This is a common problem when working with layouts. - -**Workaround:** Apply a different background color or border to the elements to visually separate them, or use the `overflow` property to prevent the margin collapsing. - -## 3. The Float Clearing Bug -Floating elements can sometimes cause issues with the layout of other elements on the page. This is particularly problematic when trying to clear floats. - -**Workaround:** Use the `:after` pseudo-element or the `overflow` property to clear floats effectively. - -## 4. The Pixel Rounding Bug -When working with decimal values in CSS, browsers can sometimes round the values differently, leading to alignment issues. - -**Workaround:** Use whole numbers whenever possible, or consider using a CSS preprocessor like Sass to handle the rounding for you. - -## 5. The Overflow Bug -The `overflow` property can behave differently across different browsers, leading to unexpected scrolling or clipping issues. - -**Workaround:** Test your layouts extensively in different browsers and use vendor-prefixed properties to ensure consistent behavior. - -## 6. The Gradient Bug -Gradients can sometimes appear blurry or pixelated, especially on older browsers. - -**Workaround:** Use SVG-based gradients or consider using a CSS preprocessor like Sass to generate high-quality gradients. - -## 7. The Font Rendering Bug -Font rendering can vary widely across different browsers and operating systems, leading to inconsistent text display. - -**Workaround:** Use web fonts or consider using CSS font-smoothing properties to improve font rendering. - -## 8. The Flex Layout Bug -Flexbox is a powerful layout tool, but it can sometimes exhibit unexpected behavior, particularly when dealing with nested flexbox containers. - -**Workaround:** Thoroughly test your flexbox-based layouts and consider using a CSS framework like Bootstrap or Foundation to help manage cross-browser compatibility. - -## 9. The Grid Layout Bug -CSS Grid is a relatively new layout system, and there are still some known bugs and inconsistencies across different browsers. - -**Workaround:** Use feature detection and polyfills to ensure your grid-based layouts work consistently across all target browsers. - -## 10. The Clip-path Bug -The `clip-path` property can be a useful tool for creating complex shapes, but it can sometimes exhibit unexpected behavior, particularly on older browsers. - -**Workaround:** Consider using SVG-based shapes or a CSS preprocessor like Sass to generate your clip-path properties. - -While these are just a few of the known bugs in CSS, understanding and working around them is an essential part of being a successful web developer. By staying up-to-date on the latest CSS developments and best practices, you can ensure that your web applications look and function consistently across all target browsers. \ No newline at end of file