xarxaprod
/
oficinasuport-wp-theme
3
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

styled + icons and buttons as :after in links

This commit is contained in:
jorge 2022-12-30 13:23:05 +01:00
parent 00b2e66250
commit b9a758dd35
6 changed files with 185 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
sass/base/elements/_buttons.scss
View File

@ -22,3 +22,42 @@ input[type="submit"],
border-color: $color__border-button-focus; border-color: $color__border-button-focus;
} }
} }
.button-more {
position:relative;
a {
padding-right: 1rem;
}
a::after {
content: "+";
display: inline-block;
position: absolute;
right: 0.4rem;
top: 55%;
font-family: $font__black;
font-size: 2rem;
line-height: 0;
}
&:hover a::after{
content: ">";
right: 0.3rem;
font-size:1.5rem;
}
}
.type-ofisuport-ajut {
.button-more {
width: 3rem;
height: 3rem;
a {
font-size: 0px;
&::after {
font-size:3rem;
right:0.5rem;
}
}
&:hover a::after {
font-size: 2rem;
right: 0.3rem;
}
}
}

46
sass/layouts/_no-sidebar.scss
View File

@ -15,11 +15,9 @@
} }
> main { > main {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
> aside { > aside {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
> footer { > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
@ -47,10 +45,16 @@
} }
} }
.site-main { .site-main {
padding: 0 1rem;
h1,h2,h3,h4,h5,h6,.entry-content { h1,h2,h3,h4,h5,h6,.entry-content {
margin: 0; margin: 0;
} }
} }
.home-featured {
padding: 0 1rem;
}
.site-footer {
}
} }
.ofisuport-destacats,.ofisuport-featured,.archive-posts { .ofisuport-destacats,.ofisuport-featured,.archive-posts {
display: grid; display: grid;
@ -58,16 +62,28 @@
gap: $grid__gap; gap: $grid__gap;
} }
} }
@media screen and (max-width: 48em) {
//only smaller than 48em
.no-sidebar {
.site-header {
}
.site-main {
}
.home-featured {
}
.site-footer {
}
}
}
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
//only bigger than 48em
.no-sidebar { .no-sidebar {
.site { .site {
> header { > header {
} }
> main { > main {
padding: 0 2rem;
} }
> aside { > aside {
padding: 0 2rem;
} }
> footer { > footer {
} }
@ -80,6 +96,17 @@
border-top: 1px solid $color__grey-lighter; border-top: 1px solid $color__grey-lighter;
} }
} }
.site-main {
padding: 0 2rem;
h1,h2,h3,h4,h5,h6,.entry-content {
margin:0;
}
}
.home-featured {
padding: 0 2rem;
}
.site-footer {
}
&.single { &.single {
.site-main { .site-main {
width: 45rem; width: 45rem;
@ -96,15 +123,14 @@
} }
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
//only bigger than 80rem
.no-sidebar { .no-sidebar {
.site { .site {
> header { > header {
} }
> main { > main {
padding: 0;
} }
> aside { > aside {
padding: 0;
} }
> footer { > footer {
} }
@ -118,5 +144,13 @@
.secondary { .secondary {
} }
} }
.site-main {
padding: 0;
}
.home-featured {
padding: 0;
}
.site-footer {
}
} }
} }

27
sass/plugins/guttemberg/_guttemberg.scss
View File

@ -15,26 +15,31 @@
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
min-height: $font__size-body*4.8; min-height: $font__size-body*4.8;
font-family: $font__black; font-family: $font__black;
font-size: $font__size-body*2.3; font-size: $font__size-body*2;
line-height: $font__line-height-body*0.8; line-height: $font__line-height-body*0.8;
} }
p { p {
font-family: $font__bold; font-family: $font__bold;
font-size: $font__size-body*0.9; font-size: $font__size-body*0.9;
} }
.big-plus-wrapper { a {
color: $color__white;
text-decoration: none;
&::after {
content: "+";
position: absolute; position: absolute;
bottom: -1rem;
left: 0.7rem;
font-size: 5rem;
}
&:hover {
color: $color__grey-light;
&::after {
content: ">";
font-size: 3rem;
bottom: 0; bottom: 0;
} }
.big-plus.white .wp-block-button__link { }
margin: 0;
padding: 0;
color: $color__white;
background-color: transparent;
font-size: $font__size-body*4.5;
line-height: 0;
font-weight: bold;
font-family: $font__black;
} }
} }
} }

112
style.css
View File

@ -753,6 +753,50 @@ input[type="submit"]:focus,
border-color: #222; border-color: #222;
} }
.button-more {
position: relative;
}
.button-more a {
padding-right: 1rem;
}
.button-more a::after {
content: "+";
display: inline-block;
position: absolute;
right: 0.4rem;
top: 55%;
font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 2rem;
line-height: 0;
}
.button-more:hover a::after {
content: ">";
right: 0.3rem;
font-size: 1.5rem;
}
.type-ofisuport-ajut .button-more {
width: 3rem;
height: 3rem;
}
.type-ofisuport-ajut .button-more a {
font-size: 0px;
}
.type-ofisuport-ajut .button-more a::after {
font-size: 3rem;
right: 0.5rem;
}
.type-ofisuport-ajut .button-more:hover a::after {
font-size: 2rem;
right: 0.3rem;
}
input[type="text"], input[type="text"],
input[type="email"], input[type="email"],
input[type="url"], input[type="url"],
@ -820,11 +864,9 @@ textarea {
} }
.no-sidebar .site > main { .no-sidebar .site > main {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
.no-sidebar .site > aside { .no-sidebar .site > aside {
grid-column: 2 / 4; grid-column: 2 / 4;
padding: 0 1rem;
} }
.no-sidebar .site > footer { .no-sidebar .site > footer {
grid-column: 1 / -1; grid-column: 1 / -1;
@ -850,9 +892,15 @@ textarea {
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
} }
.no-sidebar .site-main {
padding: 0 1rem;
}
.no-sidebar .site-main h1, .no-sidebar .site-main h2, .no-sidebar .site-main h3, .no-sidebar .site-main h4, .no-sidebar .site-main h5, .no-sidebar .site-main h6, .no-sidebar .site-main .entry-content { .no-sidebar .site-main h1, .no-sidebar .site-main h2, .no-sidebar .site-main h3, .no-sidebar .site-main h4, .no-sidebar .site-main h5, .no-sidebar .site-main h6, .no-sidebar .site-main .entry-content {
margin: 0; margin: 0;
} }
.no-sidebar .home-featured {
padding: 0 1rem;
}
.ofisuport-destacats, .ofisuport-featured, .archive-posts { .ofisuport-destacats, .ofisuport-featured, .archive-posts {
display: grid; display: grid;
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
@ -861,18 +909,21 @@ textarea {
} }
@media screen and (min-width: 48em) { @media screen and (min-width: 48em) {
.no-sidebar .site > main {
padding: 0 2rem;
}
.no-sidebar .site > aside {
padding: 0 2rem;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
flex-flow: column; flex-flow: column;
} }
.no-sidebar .site-header .secondary { .no-sidebar .site-header .secondary {
border-top: 1px solid #eee; border-top: 1px solid #eee;
} }
.no-sidebar .site-main {
padding: 0 2rem;
}
.no-sidebar .site-main h1, .no-sidebar .site-main h2, .no-sidebar .site-main h3, .no-sidebar .site-main h4, .no-sidebar .site-main h5, .no-sidebar .site-main h6, .no-sidebar .site-main .entry-content {
margin: 0;
}
.no-sidebar .home-featured {
padding: 0 2rem;
}
.no-sidebar.single .site-main { .no-sidebar.single .site-main {
width: 45rem; width: 45rem;
margin: 0 auto; margin: 0 auto;
@ -886,17 +937,17 @@ textarea {
} }
@media screen and (min-width: 80em) { @media screen and (min-width: 80em) {
.no-sidebar .site > main {
padding: 0;
}
.no-sidebar .site > aside {
padding: 0;
}
.no-sidebar .site-header .main { .no-sidebar .site-header .main {
width: 80em; width: 80em;
margin: auto; margin: auto;
flex-flow: row; flex-flow: row;
} }
.no-sidebar .site-main {
padding: 0;
}
.no-sidebar .home-featured {
padding: 0;
}
} }
/*-------------------------------------------------------------- /*--------------------------------------------------------------
@ -1326,7 +1377,7 @@ textarea {
.black-blocs .wp-block-column h1, .black-blocs .wp-block-column h2, .black-blocs .wp-block-column h3, .black-blocs .wp-block-column h4, .black-blocs .wp-block-column h5, .black-blocs .wp-block-column h6 { .black-blocs .wp-block-column h1, .black-blocs .wp-block-column h2, .black-blocs .wp-block-column h3, .black-blocs .wp-block-column h4, .black-blocs .wp-block-column h5, .black-blocs .wp-block-column h6 {
min-height: 4.8rem; min-height: 4.8rem;
font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 2.3rem; font-size: 2rem;
line-height: 1.04; line-height: 1.04;
} }
@ -1335,20 +1386,27 @@ textarea {
font-size: 0.9rem; font-size: 0.9rem;
} }
.black-blocs .wp-block-column .big-plus-wrapper { .black-blocs .wp-block-column a {
position: absolute; color: #fff;
bottom: 0; text-decoration: none;
} }
.black-blocs .wp-block-column .big-plus.white .wp-block-button__link { .black-blocs .wp-block-column a::after {
margin: 0; content: "+";
padding: 0; position: absolute;
color: #fff; bottom: -1rem;
background-color: transparent; left: 0.7rem;
font-size: 4.5rem; font-size: 5rem;
line-height: 0; }
font-weight: bold;
font-family: "din-black", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; .black-blocs .wp-block-column a:hover {
color: #ccc;
}
.black-blocs .wp-block-column a:hover::after {
content: ">";
font-size: 3rem;
bottom: 0;
} }
/* Contact Form 7 /* Contact Form 7

2
style.css.map
View File

File diff suppressed because one or more lines are too long

2
template-parts/section-featured.php
View File

@ -9,7 +9,7 @@
?> ?>
<aside> <aside id="destacats" class="home-featured home-destacats">
<?php <?php
// Detect plugin. For use on Front End only. // Detect plugin. For use on Front End only.
include_once( ABSPATH . 'wp-admin/includes/plugin.php' ); include_once( ABSPATH . 'wp-admin/includes/plugin.php' );