diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 528aa6e..940bd98 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -467,7 +467,7 @@ h1, h2, h3, h4, h5, h6 { position: absolute; bottom: 0; left: 0; - width: clamp(800px, 20vw, 280px); + width: clamp(150px, 20vw, 280px); z-index: 2; } diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 49caa6e..e8fa514 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,5 +20,9 @@ <% end %> <%= yield %> + <% unless content_for?(:page) && yield(:page) == 'signin' %> + bottom-left decoration + bottom-right decoration + <% end %> diff --git a/app/views/pages/shop.html.erb b/app/views/pages/shop.html.erb index 56d89af..3373bcb 100644 --- a/app/views/pages/shop.html.erb +++ b/app/views/pages/shop.html.erb @@ -61,11 +61,25 @@ 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6W5FN41Y/vecteezy_3d-monitor-for-office_53739745.png?pub_secret=6a16537f48', 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6EN1NVP1/vecteezy_sleek-black-computer-monitor-with-vibrant-red-abstract_56609224.png?pub_secret=5e30e2cd74' ] if cat == 'Monitor' %> + <% images_for_headphones = [ + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A75HW036Y/vecteezy_sleek-white-wireless-headphones-premium-audio-bluetooth_55130517.png?pub_secret=51ed82f735', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6VJMSHLK/vecteezy_modern-silver-headphones-for-audiophiles_51767617.png?pub_secret=c9009d25e9', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6VJMAZRR/vecteezy_headphone-png-with-ai-generated_26773824.png?pub_secret=7edb592517', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6ZUNQC8N/vecteezy_3d-gaming-headphone_53295526.png?pub_secret=72d6d1c41a' + ] if cat == 'Headphones' %> + <% images_for_webcam = [ + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A7W9U4HU0/vecteezy_ai-generated-security-camera-on-transparent-background-ai_39213084.png?pub_secret=0ec47b5d57', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A75J7CTDJ/vecteezy_high-definition-webcam-modern-design-sleek-silver-black_67821519.png?pub_secret=22c6d549e5', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6VK098QK/vecteezy_sleek-modern-webcam-for-conferencing-and-streaming_60580277.png?pub_secret=02494c1a84', + 'https://files.slack.com/files-pri/T09V59WQY1E-F0A6ZV27UQN/vecteezy_camera-with-lens_54402726.png?pub_secret=6527a83f20' + ] if cat == 'Webcam' %> <% variants.each_with_index do |(label_text, key), variant_idx| %> <% img_src = ( (cat == 'Keyboard' && images_for_keyboard && images_for_keyboard[variant_idx]) || (cat == 'Mouse' && images_for_mouse && images_for_mouse[variant_idx]) || (cat == 'Monitor' && images_for_monitor && images_for_monitor[variant_idx]) || + (cat == 'Headphones' && images_for_headphones && images_for_headphones[variant_idx]) || + (cat == 'Webcam' && images_for_webcam && images_for_webcam[variant_idx]) || '/images/signin/hackclub.svg' ) %> <% amount_map = { 'standard' => 50, 'quality' => 110, 'advanced' => 170, 'professional' => 230 } %> diff --git a/public/images/img_2168.png b/public/images/img_2168.png new file mode 100644 index 0000000..4d22106 Binary files /dev/null and b/public/images/img_2168.png differ diff --git a/public/images/img_2180.png b/public/images/img_2180.png new file mode 100644 index 0000000..f961105 Binary files /dev/null and b/public/images/img_2180.png differ diff --git a/public/images/untitled_artwork.png b/public/images/untitled_artwork.png new file mode 100644 index 0000000..fc52cf7 Binary files /dev/null and b/public/images/untitled_artwork.png differ diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index dc61f4e..2ccbbca 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -671,7 +671,7 @@ a.project-row:hover { .shop-variant__thumb img { width: 100%; height: 100%; - object-fit: cover; + object-fit: contain; } .shop-variant__meta { display: flex; @@ -1012,6 +1012,25 @@ a.project-row:hover { } } +/* Global corner images */ +.corner-img { + position: fixed; + bottom: 0; + z-index: 5; + pointer-events: none; + user-select: none; +} +.corner-img--left { + left: 0; + width: clamp(120px, 14vw, 220px); + height: auto; +} +.corner-img--right { + right: 0; + width: clamp(120px, 16vw, 260px); + height: auto; +} + /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { * {