beenull/themes-wordpress
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added squares to header and footer

Browse source
This commit is contained in:
Maggie Cabrera 2021-05-10 14:52:32 +02:00
parent 1f471237ec
commit 0e51f23c2e
5 changed files with 78 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
quadrat/assets/theme.css
View file

@ -367,7 +367,13 @@ a:active, a:focus {
background: var(--wp--custom--color--secondary);
}
.site-header > .wp-block-group {
.site-header {
position: relative;
}
.site-header .wp-block-group {
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
flex-wrap: wrap;
@ -377,33 +383,33 @@ a:active, a:focus {
}
@media (min-width: 480px) {
.site-header > .wp-block-group {
.site-header .wp-block-group {
padding: var(--wp--custom--margin--vertical);
}
}
.site-header > .wp-block-group .wp-block-site-logo {
.site-header .wp-block-group .wp-block-site-logo {
margin-right: var(--wp--custom--margin--horizontal);
}
@media (max-width: 479px) {
.site-header > .wp-block-group .wp-block-site-logo {
.site-header .wp-block-group .wp-block-site-logo {
flex-basis: 100%;
margin: 20px 0;
text-align: center;
}
}
.site-header > .wp-block-group .wp-block-site-logo a > img {
.site-header .wp-block-group .wp-block-site-logo a > img {
height: 64px;
width: auto;
}
.site-header > .wp-block-group .wp-block-site-title {
.site-header .wp-block-group .wp-block-site-title {
margin: 0;
}
.site-header > .wp-block-group .wp-block-navigation {
.site-header .wp-block-group .wp-block-navigation {
margin-left: auto;
padding-right: 0;
}
@ -412,6 +418,19 @@ a:active, a:focus {
text-decoration: none;
}
.site-header:before {
content: "";
background-color: var(--wp--custom--color--secondary);
-webkit-clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
position: absolute;
height: 100vw;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
.post-meta {
align-items: center;
justify-content: center;
@ -441,6 +460,24 @@ a:active, a:focus {
color: var(--wp--custom--color--foreground);
}
.site-footer.wp-block-group {
position: relative;
overflow: visible;
}
.site-footer.wp-block-group:before {
content: "";
background-color: var(--wp--custom--color--secondary);
-webkit-clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
position: absolute;
height: 100vw;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
.wp-block-post-featured-image {
margin-top: 0;
}

4
quadrat/block-template-parts/footer.html
View file

@ -1,5 +1,5 @@
<!-- wp:group {"layout":{"inherit":true},"style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
<div class="wp-block-group" style="padding-top:150px;padding-bottom: 150px">
<!-- wp:group {"className":"site-footer","style":{"spacing":{"padding":{"top":"150px","bottom":"150px"}}}} -->
<div class="wp-block-group site-footer" style="padding-top:150px;padding-bottom: 150px">
<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Powered by WordPress</p>

15
quadrat/sass/_footer.scss Normal file
View file

@ -0,0 +1,15 @@
.site-footer.wp-block-group {
position: relative;
overflow: visible;
&:before {
content: "";
background-color: var(--wp--custom--color--secondary);
clip-path: polygon(41vw 49vw, 100vw 68vw, 100vw 100vw, 18vw 100vw);
position: absolute;
height: 100vw;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
}
}

17
quadrat/sass/_header.scss
View file

@ -1,5 +1,8 @@
.site-header {
> .wp-block-group {
position: relative;
.wp-block-group {
display: flex;
justify-content: space-between;
align-items: center;
display: flex;
flex-wrap: wrap;
@ -39,4 +42,16 @@
.wp-block-site-title a {
text-decoration: none;
}
&:before {
content: "";
background-color: var(--wp--custom--color--secondary);
clip-path: polygon(13vw 0, 100vw 0, 100vw 28vw, 52vw 63vw, 9vw 3vw);
position: absolute;
height: 100vw;
top: 0;
left: 0;
right: 0;
z-index: -1;
}
}

1
quadrat/sass/theme.scss
View file

@ -19,6 +19,7 @@
@import "elements/links";
@import "header";
@import "meta";
@import "footer";
.wp-block-post-featured-image {
margin-top: 0;