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

Jump to bottom

Refine header styles #5

Merged
merged 2 commits into from
Sep 27, 2021
Merged

Refine header styles #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0cba05c
Header/Footer: Refine header styles.
iandunn Sep 23, 2021
2be4821
tweaks
iandunn Sep 27, 2021
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
5 changes: 3 additions & 2 deletions mu-plugins/blocks/global-header-footer/footer.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<!-- wp:group {"tagName":"footer","className":"site-footer"} -->
<footer class="wp-block-group site-footer">
<!-- wp:group {"tagName":"div","className":"site-footer__navigation-container"} -->
<!-- wp:group {"className":"site-footer__navigation-container"} -->
<div class="wp-block-group site-footer__navigation-container">
<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-important","isResponsive":false} -->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
Expand All @@ -31,7 +31,7 @@
<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"OpenVerse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Openverse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:navigation {"orientation":"vertical","className":"site-footer__navigation-community","isResponsive":false} -->
Expand All @@ -51,6 +51,7 @@

<!-- wp:group {"className":"site-footer__logos-container"} -->
<div class="wp-block-group site-footer__logos-container">
<!-- The design calls for two logos, a small "mark" on mobile/tablet, and the full logo for desktops. -->
<!-- wp:image {"width":27,"height":27,"className":"site-footer__wporg-logo-mark"} -->
<figure class="wp-block-image is-resized site-footer__wporg-logo-mark">
<img src="https://wordpress.org/style/images/w-mark.svg" alt="" width="27" height="27" />
Expand Down
147 changes: 106 additions & 41 deletions mu-plugins/blocks/global-header-footer/header.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,44 +13,109 @@

?>

<!-- wp:group {"tagName":"header","className":"site-header","layout":{"inherit":true}} -->
<header class="wp-block-group site-header"><!-- wp:image {"width":160,"height":24,"className":"site-header__wporg-logo"} -->
<figure class="wp-block-image is-resized site-header__wporg-logo"><img src="https://s.w.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24"/></figure>
<!-- /wp:image -->

<!-- wp:navigation {"orientation":"horizontal","isResponsive":true} -->
<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"OpenVerse","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"News","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->

<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation -->

<!-- wp:buttons {"className":"site-header__action-buttons"} -->
<div class="wp-block-buttons site-header__action-buttons"><!-- wp:button {"className":"site-header__search"} -->
<div class="wp-block-button site-header__search"><a class="wp-block-button__link" href="https://wordpress.org/search/">Search</a></div>
<!-- /wp:button -->

<!-- wp:button {"className":"site-header__get_wordpress"} -->
<div class="wp-block-button site-header__get_wordpress"><a class="wp-block-button__link" href="https://wordpress.org/download/">Get WordPress</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></header>
<!-- /wp:group -->
<!-- wp:group {"tagName":"header","className":"site-header"} -->
<header class="wp-block-group site-header">
<!-- The design calls for two logos, a small "mark" on mobile/tablet, and the full logo for desktops. -->
<!-- wp:image {"width":27,"height":27,"className":"site-header__wporg-logo-mark"} -->
iandunn marked this conversation as resolved.
Show resolved Hide resolved
<figure class="wp-block-image is-resized site-header__wporg-logo-mark">
<a href="https://wordpress.org/">
<img src="https://wordpress.org/style/images/w-mark.svg" alt="" width="27" height="27" />
</a>
</figure>
<!-- /wp:image -->

<!-- wp:image {"width":160,"height":24,"className":"site-header__wporg-logo-full"} -->
<figure class="wp-block-image is-resized site-header__wporg-logo-full">
<a href="https://wordpress.org/">
<img src="https://wordpress.org/style/images/wporg-logo.svg?3" alt="" width="160" height="24" />
</a>
</figure>
<!-- /wp:image -->

<!-- wp:group {"className":"site-header__search-container"} -->
<div class="wp-block-group site-header__search-container">
<!-- wp:html -->
<a class="site-header__open-search" href="https://wordpress.org/search/">
<span class="screen-reader-text">Open Search</span>

<img
src="<?php echo esc_url( plugins_url( '/images/search.svg', __FILE__ ) ); ?>"
alt=""
width="18"
height="17"
/>
</a>

<button class="site-header__close-search">
<span class="screen-reader-text">Close Search</span>

<img
src="<?php echo esc_url( plugins_url( '/images/close.svg', __FILE__ ) ); ?>"
alt=""
width="21"
height="21"
/>
</button>
<!-- /wp:html -->

<!-- wp:search {"className":"site-header__search-form","label":"Search","placeholder":"Search WordPress.org...","buttonText":"Submit search"} /-->
</div> <!-- /wp:group -->

<!-- This is the first of two Get WordPress buttons; the other is in the navigation menu.
Two are needed because they have different DOM hierarchies at different breakpoints. -->
<!-- wp:group {"className":"site-header__desktop-get-wordpress-container"} -->
<div class="site-header__desktop-get-wordpress-container">
<a href="https://wordpress.org/download/" class="site-header__desktop-get-wordpress site-header__get-wordpress">Get WordPress</a>
</div> <!-- /wp:group -->

<!-- wp:group {"className":"site-header__menu-container"} -->
<div class="site-header__menu-container">
<!-- wp:html -->
<button class="site-header__open-menu">
<span class="screen-reader-text">Open Navigation Menu</span>

<img
src="<?php echo esc_url( plugins_url( '/images/mobile-menu.svg', __FILE__ ) ); ?>"
alt=""
width="18"
height="15"
/>
</button>

<button class="site-header__close-menu">
<span class="screen-reader-text">Close Menu</span>

<img
src="<?php echo esc_url( plugins_url( '/images/close.svg', __FILE__ ) ); ?>"
alt=""
width="21"
height="21"
/>
</button>
<!-- /wp:html -->

<!-- wp:navigation {"orientation":"horizontal","className":"site-header__navigation"} -->
<!-- wp:navigation-link {"label":"Add-ons","url":"#","kind":"custom","isTopLevelLink":false} -->
<!-- wp:navigation-link {"label":"Plugins","url":"https://wordpress.org/plugins/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Themes","url":"https://wordpress.org/themes/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Blocks","url":"https://wordpress.org/plugins/browse/blocks/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Patterns","url":"https://wordpress.org/patterns/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Images","url":"https://wordpress.org/openverse/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"Learn","url":"https://learn.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Support","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":false} -->
<!-- wp:navigation-link {"label":"Documentation","url":"https://wordpress.org/support/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Forums","url":"https://wordpress.org/support/forums/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"News","url":"https://wordpress.org/news","kind":"custom","isTopLevelLink":true,"className":"current-menu-item"} /-->
<!-- wp:navigation-link {"label":"About","url":"https://wordpress.org/about/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Get Involved","url":"https://make.wordpress.org/","kind":"custom","isTopLevelLink":false} -->
<!-- wp:navigation-link {"label":"Five for the Future","url":"https://wordpress.org/five-for-the-future/","kind":"custom","isTopLevelLink":true} /-->
<!-- /wp:navigation-link -->
<!-- wp:navigation-link {"label":"Showcase","url":"https://wordpress.org/showcase/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Mobile","url":"https://wordpress.org/mobile/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Hosting","url":"https://wordpress.org/hosting/","kind":"custom","isTopLevelLink":true} /-->
<!-- wp:navigation-link {"label":"Get WordPress","url":"https://wordpress.org/download/","kind":"custom","isTopLevelLink":true,"className":"site-header__mobile-get-wordpress site-header__get-wordpress"} /-->
<!-- /wp:navigation -->
</div> <!-- /wp:group -->
</header> <!-- /wp:group -->
4 changes: 4 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/close.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/mobile-menu.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions mu-plugins/blocks/global-header-footer/images/search.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 15 additions & 18 deletions mu-plugins/blocks/global-header-footer/postcss/common.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,30 @@

/*
* Variables, mixins, etc
*
* Breakpoints should be synced with `wporg-parent-2021` (or `wporg-news-2021` until parent exists).
*/
@custom-media --tablet (min-width: 876px);
/* Breakpoints should be synced with `wporg-parent-2021` (or `wporg-news-2021` until parent exists). */
@custom-media --tablet (min-width: 890px);
@custom-media --desktop (min-width: 1152px);
@custom-media --desktop-wide (min-width: 1320px);

:root {
--site-footer-nav-block-margin-bottom: 25px;
}
/*
* Shared styles
*/

.wp-block-group.site-header,
.wp-block-group.site-footer {
--active-menu-item-border-height: 4px;

background-color: var(--wp--preset--color--dark-grey);
}

/*
* Shared styles
*/
& .wp-block-image {
margin: 0;
}

& .wp-block-navigation-item {
color: var(--wp--preset--color--white);
}
}

/*
* Override Gutenberg's block gap, because it doesn't make sense for a header/footer.
Expand All @@ -41,11 +46,3 @@
.site-footer [class*="wp-container-"] > * + * {
margin-top: initial;
}

.wp-block-navigation.wp-block-navigation a {
color: var(--wp--preset--color--white);
}

.site-header__wporg-logo-full, .site-footer__wporg-logo-full {
display: none;
}
47 changes: 26 additions & 21 deletions mu-plugins/blocks/global-header-footer/postcss/footer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,36 +23,52 @@
}

& [class*="wp-container-"].site-footer__logos-container {
position: relative;
display: flex;
flex-wrap: wrap;
margin-top: calc(66px - var(--site-footer-nav-block-margin-bottom));
margin-top: calc(66px - var(--wp--style--block-gap));

@media (--tablet) {
justify-content: space-between;
flex-wrap: nowrap;
}
}

& .wp-block-image {
text-align: left;
}

& .site-footer__wporg-logo-mark {
flex-basis: 65%;
margin-bottom: 0;

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

& .site-footer__wporg-logo-full {
display: none;

@media (--tablet) {
display: inline;
flex-basis: 33%;
}
}

& .wp-block-social-links {
position: relative;
top: -3px; /* Align with W logo. */
justify-content: flex-end;
flex-basis: 35%;
column-gap: 0;
min-width: 100px;

@media (--tablet) {
top: -11px; /* Align with W logo. */
justify-content: flex-end;
flex-basis: 33%;
order: 3;
}
}

& .wp-block-social-links,
Expand All @@ -64,35 +80,24 @@
padding-bottom: 0;
}

& .wp-block-social-links .wp-social-link:last-child {
margin-right: 0;
}

& .wp-block-social-links .wp-social-link svg {
width: 29px;
height: 29px;
fill: var(--wp--preset--color--white);
}

& .wp-block-social-links {
@media (--tablet) {
justify-content: flex-end;
flex-basis: 33%;
order: 3;
}
}

& .wp-block-image.site-footer__code_is_poetry {
flex-basis: 100%;
margin-top: 9px;
margin-bottom: 0;

@media (--tablet) {
flex-basis: 33%;
order: 2;
text-align: right; /* Optical illusion to make this image look more centered. */
position: absolute;
top: 0;
left: calc( 50% - ( 188px / 2 ) ); /* Must match width of the image. */
width: 188px;
height: 13px;
margin-top: 3px;
}
}

& .wp-block-image {
text-align: left;
}
}
Loading