Last active
October 1, 2024 18:07
-
-
Save jonathanstegall/091a50f84161fa1a14d678d24d388de9 to your computer and use it in GitHub Desktop.
draft of design changes to add a max-width to regulation pages that we could also use across the site
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* html changes for body: | |
| - use .ds-l-container on the .content class | |
| - use .ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--3 on .left-sidebar | |
| - use .ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--6 on .reg-text | |
| - use .ds-l-col--12 ds-l-md-col--4 ds-l-lg-col--3 on .right-sidebar | |
| */ | |
| .header--content-wrapper { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| width: 100%; | |
| max-width: 1440px; | |
| margin: 0 auto; | |
| } | |
| .content.ds-l-container { | |
| padding: 24px 16px; | |
| } | |
| /* main.css */ | |
| main { | |
| /* display: table-cell; */ | |
| } | |
| aside.left-sidebar { | |
| /* box-sizing: unset; */ | |
| } | |
| aside.left-sidebar { | |
| /* flex-shrink: 0; */ | |
| } | |
| aside.right-sidebar { | |
| /* box-sizing: content-box; */ | |
| /* max-width: 400px; */ | |
| } | |
| @media (min-width: 1280px) { | |
| aside.right-sidebar { | |
| /* padding: 16px 32px; */ | |
| } | |
| } | |
| aside.right-sidebar { | |
| /* padding: 16px; */ | |
| } | |
| .ds-l-container { | |
| /* max-width: 1040px; */ | |
| max-width: 1440px; | |
| } | |
| @media (min-width: 1440px) { | |
| .reg-text .up-to-date.subpart { | |
| /* padding: 0 48px; */ | |
| } | |
| .reg-text .up-to-date { | |
| /* padding: 0 0 0 10px; */ | |
| } | |
| } | |
| .reg-text .up-to-date { | |
| /* box-sizing: unset; */ | |
| /* max-width: 53rem; */ | |
| /* margin: 40px auto 10px !important; */ | |
| } | |
| .reg-text .up-to-date + article { | |
| /* margin: 0 auto 40px; */ | |
| } | |
| @media (min-width: 1440px) { | |
| article { | |
| /* margin: 40px auto; */ | |
| /* padding: 0 48px; */ | |
| } | |
| } | |
| article { | |
| /* box-sizing: unset; */ | |
| /* max-width: 53rem; */ | |
| /* margin-top: 40px; */ | |
| /* margin-bottom: 32px; */ | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment