diff options
author | 2023-07-25 14:54:12 +0000 | |
---|---|---|
committer | 2023-07-25 14:54:12 +0000 | |
commit | ec40c8ccbe40f84b834f21915cbf1e6bb470346e (patch) | |
tree | e7ec3856ac5772687a4ccc42b3d497f90a58ba24 /examples/blog | |
parent | 8e14621659e86b4970f2486f13d8c7384f5ff9d9 (diff) | |
download | astro-ec40c8ccbe40f84b834f21915cbf1e6bb470346e.tar.gz astro-ec40c8ccbe40f84b834f21915cbf1e6bb470346e.tar.zst astro-ec40c8ccbe40f84b834f21915cbf1e6bb470346e.zip |
[ci] format
Diffstat (limited to 'examples/blog')
-rw-r--r-- | examples/blog/astro.config.mjs | 2 | ||||
-rw-r--r-- | examples/blog/src/components/Footer.astro | 26 | ||||
-rw-r--r-- | examples/blog/src/components/Header.astro | 31 | ||||
-rw-r--r-- | examples/blog/src/consts.ts | 2 | ||||
-rw-r--r-- | examples/blog/src/layouts/BlogPost.astro | 10 | ||||
-rw-r--r-- | examples/blog/src/pages/blog/index.astro | 13 | ||||
-rw-r--r-- | examples/blog/src/styles/global.css | 75 |
7 files changed, 104 insertions, 55 deletions
diff --git a/examples/blog/astro.config.mjs b/examples/blog/astro.config.mjs index 40e75a89e..3b2f75c84 100644 --- a/examples/blog/astro.config.mjs +++ b/examples/blog/astro.config.mjs @@ -7,4 +7,4 @@ import sitemap from '@astrojs/sitemap'; export default defineConfig({ site: 'https://example.com', integrations: [mdx(), sitemap()], -});
\ No newline at end of file +}); diff --git a/examples/blog/src/components/Footer.astro b/examples/blog/src/components/Footer.astro index 8c5e2f871..d77e49ec2 100644 --- a/examples/blog/src/components/Footer.astro +++ b/examples/blog/src/components/Footer.astro @@ -6,13 +6,33 @@ const today = new Date(); © {today.getFullYear()} Your name here. All rights reserved. <div class="social-links"> <a href="https://m.webtoo.ls/@astro" target="_blank"> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/mastodon"><path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path></svg> + <svg + viewBox="0 0 16 16" + aria-hidden="true" + width="32" + height="32" + astro-icon="social/mastodon" + ><path + fill="currentColor" + d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" + ></path></svg + > </a> <a href="https://twitter.com/astrodotbuild" target="_blank"> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter"><path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/twitter" + ><path + fill="currentColor" + d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" + ></path></svg + > </a> <a href="https://github.com/withastro/astro" target="_blank"> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" astro-icon="social/github" + ><path + fill="currentColor" + d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" + ></path></svg + > </a> </div> </footer> diff --git a/examples/blog/src/components/Header.astro b/examples/blog/src/components/Header.astro index d559509ae..647320834 100644 --- a/examples/blog/src/components/Header.astro +++ b/examples/blog/src/components/Header.astro @@ -14,15 +14,30 @@ import { SITE_TITLE } from '../consts'; <div class="social-links"> <a href="https://m.webtoo.ls/@astro" target="_blank"> <span class="sr-only">Follow Astro on Mastodon</span> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path></svg> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" + ><path + fill="currentColor" + d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z" + ></path></svg + > </a> <a href="https://twitter.com/astrodotbuild" target="_blank"> <span class="sr-only">Follow Astro on Twitter</span> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"-><path fill="currentColor" d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"></path></svg> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" - + ><path + fill="currentColor" + d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z" + ></path></svg + > </a> <a href="https://github.com/withastro/astro" target="_blank"> <span class="sr-only">Go to Astro's GitHub repo</span> - <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> + <svg viewBox="0 0 16 16" aria-hidden="true" width="32" height="32" + ><path + fill="currentColor" + d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" + ></path></svg + > </a> </div> </nav> @@ -35,11 +50,12 @@ import { SITE_TITLE } from '../consts'; box-shadow: 0 2px 8px rgba(var(--black), 5%); } h2 { - margin: 0;; + margin: 0; font-size: 1em; } - h2 a, h2 a.active { + h2 a, + h2 a.active { text-decoration: none; } nav { @@ -48,7 +64,7 @@ import { SITE_TITLE } from '../consts'; justify-content: space-between; } nav a { - padding: 1em .5em; + padding: 1em 0.5em; color: var(--black); border-bottom: 4px solid transparent; text-decoration: none; @@ -57,7 +73,8 @@ import { SITE_TITLE } from '../consts'; text-decoration: none; border-bottom-color: var(--accent); } - .social-links, .social-links a { + .social-links, + .social-links a { display: flex; } @media (max-width: 720px) { diff --git a/examples/blog/src/consts.ts b/examples/blog/src/consts.ts index b42411da8..0df8a61f4 100644 --- a/examples/blog/src/consts.ts +++ b/examples/blog/src/consts.ts @@ -2,4 +2,4 @@ // You can import this data from anywhere in your site by using the `import` keyword. export const SITE_TITLE = 'Astro Blog'; -export const SITE_DESCRIPTION = 'Welcome to my website!';
\ No newline at end of file +export const SITE_DESCRIPTION = 'Welcome to my website!'; diff --git a/examples/blog/src/layouts/BlogPost.astro b/examples/blog/src/layouts/BlogPost.astro index da1cafe58..e67b2b30f 100644 --- a/examples/blog/src/layouts/BlogPost.astro +++ b/examples/blog/src/layouts/BlogPost.astro @@ -42,10 +42,10 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; line-height: 1; } .title h1 { - margin: 0 0 .5em 0; + margin: 0 0 0.5em 0; } .date { - margin-bottom: .5em; + margin-bottom: 0.5em; color: rgb(var(--gray)); } .last-updated-on { @@ -58,7 +58,9 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; <Header /> <main> <article> - <div class="hero-image">{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}</div> + <div class="hero-image"> + {heroImage && <img width={1020} height={510} src={heroImage} alt="" />} + </div> <div class="prose"> <div class="title"> <div class="date"> @@ -80,4 +82,4 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; </main> <Footer /> </body> -</html>
\ No newline at end of file +</html> diff --git a/examples/blog/src/pages/blog/index.astro b/examples/blog/src/pages/blog/index.astro index f549d3e15..a5c329a87 100644 --- a/examples/blog/src/pages/blog/index.astro +++ b/examples/blog/src/pages/blog/index.astro @@ -23,7 +23,7 @@ const posts = (await getCollection('blog')).sort( display: flex; flex-wrap: wrap; gap: 2rem; - list-style-type: none; + list-style-type: none; margin: 0; padding: 0; } @@ -46,7 +46,7 @@ const posts = (await getCollection('blog')).sort( font-size: 2.369rem; } ul li img { - margin-bottom: .5rem; + margin-bottom: 0.5rem; border-radius: 12px; } ul li a { @@ -61,7 +61,8 @@ const posts = (await getCollection('blog')).sort( margin: 0; color: rgb(var(--gray)); } - ul li a:hover h4, ul li a:hover .date { + ul li a:hover h4, + ul li a:hover .date { color: rgb(var(--accent)); } ul a:hover img { @@ -69,7 +70,7 @@ const posts = (await getCollection('blog')).sort( } @media (max-width: 720px) { ul { - gap: .5em; + gap: 0.5em; } ul li { width: 100%; @@ -95,7 +96,9 @@ const posts = (await getCollection('blog')).sort( <a href={`/blog/${post.slug}/`}> <img width={720} height={360} src={post.data.heroImage} alt="" /> <h4 class="title">{post.data.title}</h4> - <p class="date"><FormattedDate date={post.data.pubDate} /></p> + <p class="date"> + <FormattedDate date={post.data.pubDate} /> + </p> </a> </li> )) diff --git a/examples/blog/src/styles/global.css b/examples/blog/src/styles/global.css index 5ec3e0013..fe9ecf0b8 100644 --- a/examples/blog/src/styles/global.css +++ b/examples/blog/src/styles/global.css @@ -4,24 +4,25 @@ License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md */ - :root { - --accent: #2337FF; - --accent-dark: #000D8A; +:root { + --accent: #2337ff; + --accent-dark: #000d8a; --black: 15, 18, 25; --gray: 96, 115, 159; --gray-light: 229, 233, 240; --gray-dark: 34, 41, 57; --gray-gradient: rgba(var(--gray-light), 50%), #fff; - --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%); + --box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%), + 0 16px 32px rgba(var(--gray), 33%); } - @font-face { +@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } - @font-face { +@font-face { font-family: 'Atkinson'; src: url('/fonts/atkinson-bold.woff') format('woff'); font-weight: 700; @@ -47,27 +48,33 @@ main { margin: auto; padding: 3em 1em; } -h1, h2, h3, h4, h5, h6 { - margin: 0 0 .5rem 0; +h1, +h2, +h3, +h4, +h5, +h6 { + margin: 0 0 0.5rem 0; color: rgb(var(--black)); line-height: 1.2; } -h1 { - font-size: 3.052em; +h1 { + font-size: 3.052em; } -h2 { - font-size: 2.441em; +h2 { + font-size: 2.441em; } -h3 { - font-size: 1.953em; +h3 { + font-size: 1.953em; } -h4 { - font-size: 1.563em; +h4 { + font-size: 1.563em; } -h5 { - font-size: 1.25em; +h5 { + font-size: 1.25em; } -strong, b { +strong, +b { font-weight: 700; } a { @@ -129,19 +136,19 @@ hr { } .sr-only { - border: 0; - padding: 0; - margin: 0; - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; - /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ - clip: rect(1px 1px 1px 1px); - /* maybe deprecated but we need to support legacy browsers */ - clip: rect(1px, 1px, 1px, 1px); - /* modern browsers, clip-path works inwards from each corner */ - clip-path: inset(50%); - /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ - white-space: nowrap; + border: 0; + padding: 0; + margin: 0; + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ + clip: rect(1px 1px 1px 1px); + /* maybe deprecated but we need to support legacy browsers */ + clip: rect(1px, 1px, 1px, 1px); + /* modern browsers, clip-path works inwards from each corner */ + clip-path: inset(50%); + /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ + white-space: nowrap; } |