Web Dev Solutions

Catalin Mititiuc

From 2d3fc1cd22ffcc61ec178eeaf97f3a4d7cba98bf Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 20 Apr 2024 19:34:06 -0700 Subject: Use CSS transformations instead of manipulating the viewBox --- public/assets/css/style.css | 40 ++++++++ public/assets/images/41156165560-4438592e93-o.webp | Bin 0 -> 585068 bytes public/assets/images/image.svg | 108 +++++++++++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 public/assets/css/style.css create mode 100644 public/assets/images/41156165560-4438592e93-o.webp create mode 100644 public/assets/images/image.svg (limited to 'public/assets') diff --git a/public/assets/css/style.css b/public/assets/css/style.css new file mode 100644 index 0000000..db47790 --- /dev/null +++ b/public/assets/css/style.css @@ -0,0 +1,40 @@ +body { + text-align: center; + max-width: 100vw; +} + +.container { + padding: 0; + max-width: 586.033px; + max-height: 586.033px; + margin: 0 auto; + overflow: hidden; + border: 1px solid steelblue; + background-color: gray; +} + +img, object { + touch-action: none; +} + +img { + max-width: 100%; + border: 1px solid silver; + transform: scale(0.9); +} + +.container object, .container.switch img { + display: block; +} + +.container img, .container.switch object { + display: none; +} + +button .button-text.raster, button.switch .button-text.svg { + display: none; +} + +button.switch .button-text.raster { + display: inline; +} diff --git a/public/assets/images/41156165560-4438592e93-o.webp b/public/assets/images/41156165560-4438592e93-o.webp new file mode 100644 index 0000000..2ad3fa4 Binary files /dev/null and b/public/assets/images/41156165560-4438592e93-o.webp differ diff --git a/public/assets/images/image.svg b/public/assets/images/image.svg new file mode 100644 index 0000000..29f9306 --- /dev/null +++ b/public/assets/images/image.svg @@ -0,0 +1,108 @@ + + + + + + -- cgit v1.2.3