update shared ribbon styles

[yueyuzhao]

Resolves

• Resolves shared ribbon too big on non 4:3 aspect ratio displays #16

Proposed Changes

Update shared ribbon styles

Reason for Changes

The project thumb size are in vh unit, which is 4:3. To comply with the thumb image, the shared ribbon and bow should also be in vh unit. Also the position of projectthumb is relative, so we can use position: absolute; to position ribbon and bow safely.

Since we are not supporting Android 4.4, we can use vh and calc in our stylesheet files.

• Can I use ViewPort Units
• Can I use calc

Test Coverage

• iPad mini 2 (iOS 12.5) (4:3)
• Galaxy Tab A (Android 5.1) (16:9)
• Kindle Fire HD8 (Android 5.1) (16:9)
• JD Tablet (Android 6.0) (4:3)
• iPad mini 6 (iOS 15) (16:9) (simulator)