Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Centralizing parent and child theme list and heading styles into SASS partials #165

Merged
merged 9 commits into from
Nov 6, 2024
Merged

Centralizing parent and child theme list and heading styles into SASS partials #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
31789f3
Updated style for child theme lists to match parent
djanelle-mit Oct 18, 2024
750e2b7
Centralized list styles in SCSS
djanelle-mit Oct 22, 2024
2a354e4
Tweaks to lists and centralizing heading styles
djanelle-mit Oct 23, 2024
9b2d296
Tweaks to line height and spacing between list items
djanelle-mit Oct 30, 2024
b731047
Swapped margin to padding to avoid margin collapse on chrome
djanelle-mit Oct 30, 2024
ae6f426
Incrementing versions for parent and child theme style sheets
djanelle-mit Oct 31, 2024
4d99c29
Removing errant end comment
djanelle-mit Oct 31, 2024
ee99a44
Changed child theme version from semantic to X.Y
djanelle-mit Nov 6, 2024
1e2d482
** Why are these changes being introduced:
djanelle-mit Nov 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 1 addition & 60 deletions web/app/themes/mitlib-child/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
Theme Name: MITlib Child
Author: MIT Libraries
Version: 1.0.2
Version: 1.3
Description: A child theme of the MIT Libraries' parent, focused on sites built primarily with static pages.
Template: mitlib-parent

Expand Down Expand Up @@ -44,14 +44,6 @@ b, strong {
word-wrap: normal;
}

.childTheme ul {
list-style-type:none;
}

.childTheme ol {
list-style-type:decimal;
}

.childTheme hr {
border:1px solid #eee;
margin:2em 0;
Expand Down Expand Up @@ -605,49 +597,6 @@ dd.wp-caption-text {
text-transform: uppercase;
}

.entry-content h2 {
font-size:21px;
font-size:1.3rem;
line-height:1.3;
font-weight: 600;
margin-top: .75em;
margin-bottom: .3em;
}

.entry-content h3 {
margin: 1em 0 .3em 0;
font-size:18px;
font-size:1.1rem;
font-weight: 600;
line-height:1.3;
}

.entry-content h4 {
margin: 1em 0 .3em 0;
font-size:16px;
font-size:1rem;
font-weight: 600;
line-height:1.3;
}

.entry-content h5 {
margin: 1em 0 .3em 0;
padding: 0;
font-size:15px;
font-size:.9rem;
font-weight: 600;
line-height:1.3;
}

.entry-content h6 {
margin: 1em 0 .3em 0;
font-size:13px;
font-size:.8rem;
font-weight: 600;
line-height:1.3;
text-transform: uppercase;
}

.main-content .post h2,.category .post h3,.search .post h3 {
font-size:24px;
line-height:28px;
Expand All @@ -666,14 +615,6 @@ dd.wp-caption-text {
margin-top:10px;
}

.post ul,
.post ol,
.main-content .entry-content ul,
.main-content .entry-content ol {
margin-left:1em;
margin-bottom: 20px;
}

.post:not(:last-of-type):after {
background:#ccc;
content:'';
Expand Down
7 changes: 0 additions & 7 deletions web/app/themes/mitlib-parent/css/scss/_main.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,13 +82,6 @@ img {
padding: 20px 20px 20px 20px;
}

.entry-content ul li {
list-style: disc;
margin-left: 40px;
margin-bottom: 5px;
line-height: 23px;
}

.entry-content ul, #mainContent ul {
margin-bottom: 10px;
}
Expand Down
14 changes: 13 additions & 1 deletion web/app/themes/mitlib-parent/css/scss/partials/_home.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,26 @@ body.page-home {
color: #fff;
}

// this rule restricts old and poorly scoped header styling to the main libraries homepage
// these rules override our central typography styles to preserve the original design of the homepage
.libraries-home {

h1,
h2,
h3 {
font-weight: 300;
}

h2 {
@include rem-first(font-size, 2.125);
margin: 0;
}

.wrap-loc-info, .excerpt-news {
h3 {
@include rem-first(font-size, 1.375);
margin: 0;
}
}
}

.home {
Expand Down
5 changes: 5 additions & 0 deletions web/app/themes/mitlib-parent/css/scss/partials/_locations.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
.locationPage {
h3 {
@include bp-tablet--portrait {
font-size: 1.375em;
}
}
.reserve {
background: #666;
color: #fff;
Expand Down
79 changes: 64 additions & 15 deletions web/app/themes/mitlib-parent/css/scss/partials/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,81 @@ body {
}

h1 {
@include rem-first(font-size, 2.25);
@include rem-first(font-size, 1.75);
font-weight: 400;
line-height: 1.25;
}

h2 {
@include rem-first(font-size, 1.825);
h2, h3, h4, h5, h6 {
font-weight: 400;
@include bp-tablet--landscape {
font-size: 2.125em;
}
a {
font-weight: 400;
}
margin: 15px 0 10px;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rule appears to impact the front page in a way we may not be comfortable with - there are h3s on the hours block which pick up this margin in a way that seems noteworthy.

Screenshot 2024-11-04 at 10 26 35 AM

Copy link
Author

@djanelle-mit djanelle-mit Nov 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh yes, this must have changed in the latest iteration. I also noticed that the size of the H2s also shifted, so I'll probably need to untangle this a bit more.

From a practical standpoint, is it worth implementing the page-specific styles in the partial files of the appropriate name? For example, using _home.scss for the homepage specific heading styles? Keep the typography file completely global? I can move the page-specific overrides on like 46 of _typography.scss, too. I think that makes sense to me over grouping all the heading-specific overrides into a section of typography.

Either way, I think I'll need another round of iteration on this.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given that we have a _home.scss module already, I can see a good argument for putting any page-specific styles there, and leaving the basic thrust of your cleanup in place as you've built it so far. That would let us put all the rules for a given feature in the same place, rather than checking each base module for any overrides for a given feature.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The other option, which I mention only for completeness and not because I favor it, would be to put the styles in the mitlib-pull-hours plugin which defines this specific widget. I'm not as big a fan of that, however, because that puts on the road to having styles in both the themes and in the various plugins which contribute to the UI - which feels worse from a maintenance perspective.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great, I'll lean into the modules for specific pages, I think that's the right approach.

I like the idea of trying to keep the distinction that plugins only provide content/functionality and lean on the theme for the styling (as much as we're able to). I suppose if we introduce something really novel and we're confident the styling should be consistent in all the places it appears, we could consider putting the styles with the plugin, but that seems like it could get messy quickly.

line-height: 1.25;

a {font-weight: 400;}
}

h2 {
@include rem-first(font-size, 1.29);
font-weight: 600;
}

h3 {
font-size: 1.25em;
font-weight: 400;
@include bp-tablet--portrait {
font-size: 1.375em;
@include rem-first(font-size, 1.14);
font-weight: 600;
}

h4 {
@include rem-first(font-size, 1);
font-weight: 700;
}

h5 {
@include rem-first(font-size, 0.85);
font-weight: 700;
}

h6 {
@include rem-first(font-size, 0.85);
}

/* Page / Post Content typography */
.post,
.entry-content,
.comment-content,
.mu_register {

ul {
list-style: disc outside;
margin: 0 0 1.715rem;
}
a {
font-weight: 400;

ol {
list-style: decimal outside none;
margin: 0 0 1.715rem;
}

ul ul, ol ol, ol ol, ul ol, ol ul { margin-bottom: 0; }

li {
margin: 0 0 8px 2.25rem;
line-height: 1.5em;

ol, ul {
padding-top: 8px;
}
}

ul.arrows li{
list-style: none !important;
}

p {
margin: 0 0 24px;
line-height: 1.7;
}
}


a {
color: $brand-primary;
text-decoration: none;
Expand Down
8 changes: 8 additions & 0 deletions web/app/themes/mitlib-parent/css/scss/partials/pages/_hours.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -450,3 +450,11 @@ div.libraryAlert {
width: 100% !important;
}
}

/* Overriding new centralized heading styles */
.page-hours h3 {
@include bp-tablet--portrait {
font-size: 1.375em;
}
margin: 0;
}
102 changes: 1 addition & 101 deletions web/app/themes/mitlib-parent/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*
Theme Name: MITlib Parent
Author: MIT Libraries
Version: 0.5
Version: 0.6
Description: The parent theme for the MIT Libraries' Pentagram-designed identity.

*/
Expand Down Expand Up @@ -664,107 +664,7 @@ article.sticky .featured-post {
margin-bottom: 1.714285714rem;
line-height: 1.25;
}
/* .entry-content h2,
.comment-content h2,
.entry-content h3,
.comment-content h3,
.entry-content h4,
.comment-content h4,
.entry-content h5,
.comment-content h5,
.entry-content h6,
.comment-content h6 {
margin: 24px 0;
margin: 1.714285714rem 0;
line-height: 1.714285714;
} */


.entry-content h1,
.comment-content h1 {
font-size: 2rem;
font-size: 28px;
line-height: 1.25;
}
.entry-content h2,
.comment-content h2,
.mu_register h2 {
font-size: 1.285714286rem;
line-height: 1.25;
margin: 15px 0 10px;
}
.entry-content h3,
.comment-content h3 {
font-size: 1.142857143rem;
line-height: 1.25;
margin: 15px 0 10px;
}
.entry-content h4,
.comment-content h4 {
font-size: 14px;
font-size: 1rem;
line-height: 1.846153846;
margin: 15px 0 10px;
}
.entry-content h5,
.comment-content h5 {
font-size: 0.928571429rem;
font-size: 13px;
line-height: 1.846153846;
margin: 15px 0 10px;
}
.entry-content h6,
.comment-content h6 {
font-size: 0.857142857rem;
font-size: 12px;
line-height: 1.846153846;
margin: 15px 0 10px;
}
.entry-content p,
.entry-summary p,
.comment-content p,
.mu_register p {
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
line-height: 1.714285714;
}
.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul,
.mu_register ul {
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
line-height: 1.714285714;
}
.entry-content ul ul,
.comment-content ul ul,
.entry-content ol ol,
.comment-content ol ol,
.entry-content ul ol,
.comment-content ul ol,
.entry-content ol ul,
.comment-content ol ul {
margin-bottom: 0;
}
.entry-content ul,
.comment-content ul,
.mu_register ul {
list-style: disc outside;
}
.entry-content ul.arrows li{
list-style: none !important;
}
.entry-content ol,
.comment-content ol {
list-style: decimal outside none;
}
.entry-content li,
.comment-content li,
.mu_register li {
margin: 0 0 0 36px;
margin: 0 0 0 2.571428571rem;
}
.entry-content blockquote,
.comment-content blockquote {
margin-bottom: 24px;
Expand Down
Loading