fix: Pico logo

picocss · Feb 16, 2024 · a1d3d30 · a1d3d30
1 parent 42191b8
commit a1d3d30
Show file tree

Hide file tree

Showing 13 changed files with 117 additions and 39 deletions.
diff --git a/v1-basic-template/README.md b/v1-basic-template/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Basic template
 | Pico version | Tech stack |

diff --git a/v1-bootstrap-grid/README.md b/v1-bootstrap-grid/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Pico + Bootstrap grid system
 | Pico version | Tech stack |

diff --git a/v1-classless/README.md b/v1-classless/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Classless
 | Pico version | Tech stack |

diff --git a/v1-company/README.md b/v1-company/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Company
 | Pico version | Tech stack |

diff --git a/v1-google-amp/README.md b/v1-google-amp/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Google Amp
 | Pico version | Tech stack |

diff --git a/v1-preview-rtl/README.md b/v1-preview-rtl/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Right-to-left (RTL) preview
 | Pico version | Tech stack |

diff --git a/v1-preview/README.md b/v1-preview/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Preview
 | Pico version | Tech stack |

diff --git a/v1-sign-in/README.md b/v1-sign-in/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Sign in
 | Pico version | Tech stack |

diff --git a/v2-conditional-styling/README.md b/v2-conditional-styling/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Conditional Styling
 | Pico version | Tech stack |

diff --git a/v2-html-classless/README.md b/v2-html-classless/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Class-less preview
 | Pico version | Tech stack |

diff --git a/v2-react-classless-login/README.md b/v2-react-classless-login/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # React class-less login
 | Pico version | Tech stack |

diff --git a/v2-react-color-schemes-and-modal/README.md b/v2-react-color-schemes-and-modal/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # React color schemes and modal
 | Pico version | Tech stack |

diff --git a/v2-sass-customized-design-system/README.md b/v2-sass-customized-design-system/README.md
@@ -1,6 +1,12 @@
-<a href="https://picocss.com/">
-  <img src="https://picocss.com/img/logo.svg" width="64" height="64">
-</a>
+<p>
+  <a href="https://picocss.com" target="_blank">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-dark.svg">
+      <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg">
+      <img alt="Pico CSS" src="https://raw.githubusercontent.com/picocss/pico/HEAD/.github/logo-light.svg" width="auto" height="60">
+    </picture>
+  </a>
+</p>
 
 # Customized design system
 | Pico version | Tech stack |