Skip to content

Commit

Permalink
Events: Clean up stylesheet (#1172)
Browse files Browse the repository at this point in the history
* Clean up wporg-google-map.pcss.

* Break out the css that isn't related to the map to event-list.pcss.

* Clean up contributors.pcss.

* Clean up cover.pcss.

* Clean up misc.pcss.

* Clean up the rest.
  • Loading branch information
renintw authored Dec 12, 2023
1 parent 37f2ee0 commit 130a1f5
Show file tree
Hide file tree
Showing 8 changed files with 185 additions and 208 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@ body {
.wp-site-blocks .is-layout-constrained,
.wp-block-post-content-is-layout-constrained {
& .alignwide {

/* See note about about the `global` sizes. */
max-width: var( --wp--custom--layout--wide-size ) !important;
max-width: var(--wp--custom--layout--wide-size) !important;
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
.wporg-marker-list__container {
padding-left: 0;

.wporg-marker-list-item {
border: 1px solid var(--wp--preset--color--light-grey-1);
border-bottom: none;
padding: var(--wp--preset--spacing--20);
list-style: none;
font-size: var(--wp--preset--font-size--small);

&:first-child {
border-radius: 2px 2px 0 0;
}

&:last-child {
border-radius: 0 0 2px 2px;
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
}

@media (--large) {
display: grid;
align-items: start;
gap: var(--wp--preset--spacing--20);
grid-template-columns: 45% 1fr 2fr;
}

@media (--xlarge) {
font-size: var(--wp--preset--font-size--normal);
}

@media (--wide) {
grid-template-columns: 45% 1fr 1.5fr;
}

@media (--huge) {
grid-template-columns: 55% 1fr 1fr;
}

@media (--xhuge) {
grid-template-columns: 60% 1fr 1fr;
}

.wporg-marker-list-item__title {
margin: 0;
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--body--typography--line-height);
--wp--preset--spacing--30: 0;

&.a {
text-decoration: none;
}

@media (--xlarge) {
font-size: var(--wp--preset--font-size--normal);
}
}

.wporg-marker-list-item__location {

@media (--medium-small) {
margin-top: 2px;
margin-bottom: -2px;
}

@media (--small) {
display: inline;
}
}

.wporg-marker-list-item__date-time {

@media (--small) {
display: inline-flex;
justify-content: flex-end;
white-space: nowrap;
align-items: center;
}

@media (--wide) {
display: flex;
}
}

.wporg-marker-list-item__location::after,
.wporg-google-map__date::after {
content: "";
margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */
margin-left: 10px;
margin-right: 10px;
height: 3px;
width: 3px;
border-radius: 3px;
background: var(--wp--preset--color--charcoal-5);
display: inline-block;
vertical-align: middle;
}

.wporg-marker-list-item__location::after {

@media (--small-only), (--large) {
display: none;
}
}
}
}
Original file line number Diff line number Diff line change
@@ -1,144 +1,3 @@
.wporg-marker-list__container {
padding-left: 0;
}

.wporg-marker-list-item {
border: 1px solid var(--wp--preset--color--light-grey-1);
border-bottom: none;
padding: var(--wp--preset--spacing--20);
list-style: none;
font-size: var(--wp--preset--font-size--small);

@media (--large) {
display: grid;
align-items: start;
gap: var(--wp--preset--spacing--20);
grid-template-columns: 45% 1fr 2fr;
}

@media (--xlarge) {
font-size: var(--wp--preset--font-size--normal);
}

@media (--wide) {
grid-template-columns: 45% 1fr 1.5fr;
}

@media (--huge) {
grid-template-columns: 55% 1fr 1fr;
}

@media (--xhuge) {
grid-template-columns: 60% 1fr 1fr;
}

&:last-child {
border-bottom: 1px solid var(--wp--preset--color--light-grey-1);
}

.wporg-marker-list-item__title {
margin: 0;
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--small);
line-height: var(--wp--custom--body--typography--line-height);
--wp--preset--spacing--30: 0;

@media (--xlarge) {
font-size: var(--wp--preset--font-size--normal);
}

}

.wporg-marker-list-item__title a {
text-decoration: none;
}


.wporg-marker-list-item__location {

@media (--medium-small) {
margin-top: 2px;
margin-bottom: -2px;
}

@media (--small) {
display: inline;
}
}

.wporg-marker-list-item__date-time {

@media (--small) {
display: inline-flex;
justify-content: right;
}

@media (--medium) {
.wporg-google-map__date {
display: block;
}
}

@media (--huge) {
white-space: nowrap;

.wporg-google-map__date {
display: inline-block;
}
}
}

.wporg-google-map__date {
position: relative;
}

.wporg-marker-list-item__location::after,
.wporg-google-map__date::after {
content: '';
margin-top: -1px; /* vertical-middle doesn't subtract the size of the element */
margin-left: 10px;
margin-right: 10px;
height: 3px;
width: 3px;
border-radius: 3px;
background: var(--wp--preset--color--charcoal-5);
display: inline-block;
vertical-align: middle;
}

.wporg-marker-list-item__location::after {

@media (--small-only) {
display: none;
}

@media (--large) {
display: none;
}
}

@media (--wide) {
.wporg-marker-list-item__date-time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
}

.wporg-google-map__date:after {
display: inline-block;
}
}

&:first-child {
border-radius: 2px 2px 0 0;
}

&:last-child {
border-radius: 0 0 2px 2px;
}
}

.wporg-map-marker__title {
font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--normal);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@

/* Until we move to multi-select we should show the count so users know there is a filter applied. */
.wporg-query-filter__toggle.has-no-filter-applied span,
.wporg-query-filter__toggle.has-no-filter-applied span,
.wporg-query-filter__toggle.is-single-select span {
display: inline-block;
display: inline-block;
}

@media(max-width: 889px) {
.wporg-query-filters {
max-width:100%;
overflow-x: scroll
}
.wporg-query-filters {

@media (max-width: 889px) {
max-width: 100%;
overflow-x: scroll;
}
}
Original file line number Diff line number Diff line change
@@ -1,22 +1,25 @@
.wporg-events__contributors {
.is-style-links-list li:first-child {
border-top: none;
}
.is-style-links-list {
li {
border-color: var(--wp--preset--color--light-grey-1);

.is-style-links-list li:last-child {
border-bottom: none;
}
a {
color: var(--wp--preset--color--charcoal-0);
}

.is-style-links-list li {
border-color: var(--wp--preset--color--light-grey-1);
&:first-child {
border-top: none;
}

a {
color: var(--wp--preset--color--charcoal-0);
&:last-child {
border-bottom: none;
}
}
}

@media screen and (min-width: 1170px) {
.wporg-events__contributors__image {
.wporg-events__contributors__image {

@media screen and (min-width: 1170px) {
min-width: 565px;
align-self: flex-start;
}
Expand Down
Loading

0 comments on commit 130a1f5

Please sign in to comment.