From: Ardis Lu Date: Fri, 30 Sep 2022 06:00:06 +0000 (-0700) Subject: Add info dialog X-Git-Url: https://git.ardis.lu/?a=commitdiff_plain;h=8e01ef51b2c90969ca5b3e87bcaad71b7d2156d1;p=minimal-masonry Add info dialog --- diff --git a/index.html b/index.html index 20a4f0b..b0adc68 100644 --- a/index.html +++ b/index.html @@ -21,6 +21,30 @@ header { display: flex; justify-content: center; + align-items: baseline; + gap: 8px; + } + + .info-button { + background: transparent; + border: none; + border-radius: 4px; + padding: 0; + width: 24px; + height: 24px; + transition: background-color 500ms; + } + + .info-button:hover, + .info-button:focus { + cursor: pointer; + background: hsl(58deg 80% 70%); + transition: background-color 150ms; + } + + dialog { + background: hsl(216deg 20% 90%); + border-radius: 4px; } main { @@ -57,11 +81,31 @@

minimal-masonry

+
+ +

What is this?

+

This website is a minimal reference implementation of the masonry layout.

+

Click here to view the source code on GitHub.

+
+ +
+
+