feat(css): upgrade responsive styles throughout #481
Conversation
| {% if include.author %}<strong>~{{ include.author }}{% endif %}</strong>{% | ||
| if include.event %}, <em>{{ include.event }}</em>{% endif %} | ||
| </footer> | ||
| <div class="end"></div> |
There was a problem hiding this comment.
We are using an :after element for the quotes. this adds a new div below the footer (which is the quote author) that after is applied to. This makes it easier to align the close quote with the actual text.
| ### Figure -- align right | ||
|
|
||
| And now we're going to shift things to the **right align**. Again, there should be plenty of room above, below, and to the left of the image. Just look at him there --- Hey guy! Way to rock that right side. I don't care what the left aligned image says, you look great. Don't let anyone else tell you differently. | ||
| Below is a right aligned image |
There was a problem hiding this comment.
Updates to the "kitchen sink" blogpost to test new styles before they go live.
| } | ||
| } | ||
|
|
||
| @include breakpoint('max-width: #$mobile') { |
There was a problem hiding this comment.
will go back and look at this more closely. i'm still fighting with mixin include statements
| } | ||
|
|
||
| /* Notice elements with figures */ | ||
| .notice { |
There was a problem hiding this comment.
there are a lot of styles that should belong in a single scss sheet that are in blanket pyos- scss files (from before we broke out from the theme). we will need to slowly combine and reorganize things to make the code easier to maintain.
| } | ||
|
|
||
|
|
||
| .feature__item--center .archive__item-body, .archive__item-body { |
There was a problem hiding this comment.
Example of a element that should go in a different style sheet vs the page sheet.
| .feature__item { | ||
| width: 95%!important; | ||
| } | ||
| .cards { |
There was a problem hiding this comment.
this belongs in pyos-cards -- again this is the problem! but it will take a good bit of time to clean up!
2 participants
This should close #479 the issue was that the styles weren't in place to properly scale for very narrow devices (ie <480px). This also fixes a few other grid issues.
the bigger issue that is causing a lot of these problems is that there are a lot of overrides in the css from when i was force updating the theme (before breaking away from it). I try to find someone to do an overhaul on the website to make these updates and responsive design in general easier!
for now, i'm starting the process by cleaning up as we update things.