Commits on Jan 17, 2023

1. fix gasp between backgrounds of body and sidebar divs …

   The issue is the linear-gradient in the body background seems to not working
   really correctly with pixel dimensions (in Firefox at least): if you
   zoom in / out the page you'll see the body background to not always
   correctly update the rendering (and so you'll see a growing gasp for
   example).
   
   Due to this issue, there was a gap between the backgrounds of the body and the
   sidebar elements. PR linuxfrorg#354 tried to solve this by adjusting the
   linear-gradient pixel dimensions, but due to the bug of linear-gradient
   implementation, it was not working when window was resized or page zoomed.
   
   As the linear-gradient usage in the body background was clearly already a
   workaround to create two vertical color stripes, we replace it with
   another workaround using the CSS feature which allows to define multiple
   background images with different size and position.
   
   First background image is defined with the sidebar color (using
   linear-gradient with only one color) and the width which resolve the
   pixel gasp reported in linuxfrorg#354 (which means the width should be the
   branding width + body border width). To be able to define a color as an
   image, we use again linear-gradient, but, this time it fills all the
   stripe with the same color, so we won't have error due to
   linear-gradient implementation.
   
   Second image is defined from the first image position for the rest of the body
   block with the container color.
   
   This new workaround idea comes from this StackOverflow answer which
   explain how to create pixel perfect horizontal stripes:
   https://stackoverflow.com/a/24829344

   

   Trim committed Jan 17, 2023
   Configuration menu

   • View commit details
   • Copy full SHA for 9d85d2b
   • Browse repository at this point

   Copy the full SHA

   9d85d2b View commit details

   Browse the repository at this point in the history