Plots2: Update @media on blog.css

[quinn-codes-synthesis]

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

• [x] 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

• [x] 📝 Update the file app/assets/stylesheets/blog.css in the plots2 repository (press the little pen Icon) and edit the line as shown below.

See this page for some help in taking your first steps!

Below is a "diff" showing in red (and a -) which lines to remove, and in green (and a +) which lines to add:

@@ -5,15 +5,14 @@
   line-height:1.3em;
 }

-.blog h2, .blog h1 {
+.blog h1 {
   text-align:center;
   padding:10px 40px;
 }

-/* this may not be doing anything: */
 @media (max-width:400px) {
-  .blog h2, .blog h1 {
-    padding:10px 10px;
+  .blog h1 {
+    padding:10px;
   }
 }

• [x] 💾 Commit your changes

• [x] 🔀 Start a Pull Request. There are two ways how you can start a pull request:

1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

2. You can also edit files directly in your browser and open a pull request from there.

• [x] 🏁 Done Ask in comments for a review :)

🤔❓ Questions?

Leave a comment below!

Is someone else already working on this?

We encourage you to link to this issue by mentioning the issue # in your pull request, so we can see if someone's already started on it. If someone seem stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

[welcome[bot]]

Thanks for opening your first issue! This space is protected by our Code of Conduct - and we're here to help.
Please follow the issue template to help us help you 👍🎉😄
If you have screenshots or a gif to share demonstrating the issue, that's really helpful! 📸

[quinn-codes-synthesis]

This is reserved for @Codeama ! :)

[Codeama]

@quinn-codes-synthesis I'll get on it. Thanks very much!

[quinn-codes-synthesis]

Also, I want to tag @publiclab/reviewers to please look this code over. I've tried to do my due diligence to check for any issues or bugs this code may introduce, but I'll readily admit I'm not super familiar with the codebase yet.

Here's what this code is intended to fix:

• There doesn't appear to be any h2 descendants from an element of class .blog in the current iteration of the codebase. I suspect this is a leftover from something that was removed ages ago. Thus, the .blog h2 parts can be removed.

• The @media definitely works, it's just... subtle, at least on every device I tested on. I think the comment shouldn't need to be there anymore.

• padding:10px 10px; is redundant due to the way clockwise notation works. padding: 10px conveys the same information -- that the padding is to be 10px on top and bottom, and on left and right.

In addition, I think there's an argument to be made that using vw or similar for a responsive heading would be a better choice overall than changing the padding with an @media, but I've tried to stick to the original code as much as possible here for simplicity's sake (and because I don't know the rationale behind the original code).

[jywarren]

This is great. Thank you so much, what a well-written issue! Adding your uncertainties or unknowns below in a comment is always helpful too because it can help out the person who solves it. Fantastic!!!