Realigning "Earn Points" Buttons on SG Player Page?

[cyanliu]

hii! 🌻

Something I've noticed while playing the SG is the difference in how these buttons are aligned on smaller viewport sizes, somewhere in the realm of 500px - 800px

On itty bitty screen widths (i.e. my mobile device, or very narrow browser windows) the experience looks something like this

or on slightly wider browser widths:

From what I can tell, the I Read, Listened to, or Watched something! button is

1. Touching the button above it because there's no vertical margin between the elements
2. Slightly askew to the right because of the base-margin-left class assigned to that button
   

   summergame/templates/summergame-player-info.html.twig

   Lines 14 to 17 in de1de43

   	<a class="button" href="/summergame/player/{{ player.pid }}/gamecode">I have a Game Code!</a>
   	{% if summergame_points_enabled %}
   	<a class="button base-margin-left" href="/summergame/player/{{ player.pid }}/consume">I Read, Listened to, or Watched something!</a>
   	{% endif %}

---

I fiddled around with the CSS, added a base-margin-small-bottom class to the first anchor tag and removed the base-margin-left class from the second, and got something that behaves a little bit more like this:

but then there was an additional problem: I wanted to preserve the horizontal margin between the elements when they do display side by side at wider screen widths, but I couldn't just also add a base-margin-right class, because there's a rule defined somewhere outside of this code base that looks something like this:

.button:first-child {
  margin-right:0;
  margin-left:0;
}

which overrides the styles from base-margin-right. I did notice there was an existing precedent for inline styles, so one option could just be to go from the existing

summergame/templates/summergame-player-info.html.twig

Lines 14 to 17 in de1de43

	<a class="button" href="/summergame/player/{{ player.pid }}/gamecode">I have a Game Code!</a>
	{% if summergame_points_enabled %}
	<a class="button base-margin-left" href="/summergame/player/{{ player.pid }}/consume">I Read, Listened to, or Watched something!</a>
	{% endif %}

to something like

 <a  class="button base-margin-small-bottom" style="margin-right: 1.5em;" href="/summergame/player/{{ player.pid }}/gamecode">I have a Game Code!</a> 
 {% if summergame_points_enabled %} 
   <a class="button" href="/summergame/player/{{ player.pid }}/consume">I Read, Listened to, or Watched something!</a> 
 {% endif %}

So my questions are: what are your thoughts on the existing layout, how do we feel about changing it, and to what extent should the styles be rewritten? 😅 I figured I'd start the conversation going in an issue before just going in and making a PR

[taleon]

Hi there! Thanks for passing this on. We use a Sass compiler for most of our CSS, so sometimes our public repos only have very specific styling things.

We'll take a look at our styles to fix this and make sure we don't impact other global styling!