resources submenus and tags adjustments

This commit is contained in:
jorge 2022-04-24 03:36:25 +02:00
parent d36c307f52
commit 647ffc36d4
18 changed files with 295 additions and 291 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true; $enable-code-inline: true;
$anchor-color: $primary-color; $anchor-color: $primary-color;
$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%); $anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
$anchor-text-decoration: none; $anchor-text-decoration: none;
$anchor-text-decoration-hover: none; $anchor-text-decoration-hover: none;
$hr-width: $global-width; $hr-width: $global-width;

View File

@ -25,8 +25,8 @@
//@include foundation-switch; //@include foundation-switch;
@include foundation-table; @include foundation-table;
// Basic components // Basic components
@include foundation-badge; // @include foundation-badge;
@include foundation-breadcrumbs; // @include foundation-breadcrumbs;
@include foundation-callout; @include foundation-callout;
@include foundation-card; @include foundation-card;
@include foundation-dropdown; @include foundation-dropdown;

View File

@ -1,5 +1,5 @@
button,.button { button,.button {
min-width: 20rem; // min-width: 20rem;
} }
.hero { .hero {
button,.button { button,.button {

View File

@ -4,38 +4,38 @@
/** === Includes === */ /** === Includes === */
@charset 'utf-8'; // @charset 'utf-8';
//
@import 'settings'; // @import 'settings';
@import 'foundation'; // @import 'foundation';
//
@include foundation-typography; // @include foundation-typography;
@include foundation-button; // @include foundation-button;
@include foundation-table; // @include foundation-table;
/** === Content Width === */ /** === Content Width === */
.wp-block { .wp-block {
width: calc(100vw - (2 * 10)); // width: calc(100vw - (2 * 10));
@each $breakpoint, $size in $grid-margin-gutters { // @each $breakpoint, $size in $grid-margin-gutters {
//
@include breakpoint($breakpoint) { // @include breakpoint($breakpoint) {
width: calc(100vw - ($size)); // width: calc(100vw - ($size));
} // }
//
} // }
} }
/** === Base Typography === */ /** === Base Typography === */
body { body {
font-size: $global-font-size; // font-size: $global-font-size;
font-family: $body-font-family; // font-family: $body-font-family;
color: $body-font-color; // color: $body-font-color;
} }
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block .editor-post-title__input{ .editor-post-title__block .editor-post-title__input{
@extend h1; // @extend h1;
} }
/** === Button === */ /** === Button === */
@ -43,17 +43,17 @@ body {
// add general foundation button styling to button in editor // add general foundation button styling to button in editor
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -61,26 +61,26 @@ body {
&.is-style-outline:hover, &.is-style-outline:hover,
&.is-style-outline:focus, &.is-style-outline:focus,
&.is-style-outline:active { &.is-style-outline:active {
background: transparent; // background: transparent;
} }
} }
/** === File === */ /** === File === */
.wp-block-file__button{ .wp-block-file__button{
@include button(); // @include button();
} }
/** === Pullquote === */ /** === Pullquote === */
.wp-block-paragraph.has-background{ .wp-block-paragraph.has-background{
padding: rem-calc(20px 30px); // padding: rem-calc(20px 30px);
} }
/** === Table === */ /** === Table === */
.wp-block-table td{ .wp-block-table td{
border: none; // border: none;
} }
/** === Latest Posts grid view === */ /** === Latest Posts grid view === */
.wp-block-latest-posts.is-grid{ .wp-block-latest-posts.is-grid{
list-style: none; // list-style: none;
} }

View File

@ -6,11 +6,11 @@ Frontend styles for gutenberg blocks
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
.has-#{$color}-background-color { .has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
.has-#{$color}-color { .has-#{$color}-color {
color: $code; // color: $code;
} }
} }
@ -19,27 +19,27 @@ Frontend styles for gutenberg blocks
// add general foundation button styling // add general foundation button styling
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
&.has-#{$color}-background-color { &.has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
&.has-#{$color}-color { &.has-#{$color}-color {
color: $code; // color: $code;
} }
} }
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -56,10 +56,10 @@ Frontend styles for gutenberg blocks
/** === File === */ /** === File === */
.wp-block-file .wp-block-file__button{ .wp-block-file .wp-block-file__button{
@include button(); // @include button();
} }
/** === Image === */ /** === Image === */
.wp-block-image { .wp-block-image {
margin: 0; // margin: 0;
} }

View File

@ -19,26 +19,3 @@
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
//button,.button,
//header nav,
//.hero .claim
//{
// font-variant:all-small-caps;
//}
//
//
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
// a {
// color: $black;
// }
//}

View File

@ -360,75 +360,6 @@ main {
width: auto; width: auto;
overflow: visible; overflow: visible;
} }
.widget_tag_cloud {
position: relative;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: rgba(255,255,255,0.1);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
} }
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;

View File

@ -13,15 +13,24 @@
color: $black; color: $black;
justify-content: left !important; justify-content: left !important;
} }
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto; width:auto;
li.menu-item-has-children { li.menu-item-has-children {
> a { > a {
&:after { &:after {
content:'+'; display:block;
margin-left:auto; width:0;
padding-left: $global-padding/2; height:0;
display: inline-block; border:inset 6px;
color: scale-color($anchor-color, $lightness: 85%); content:'';
border-bottom-width:0;
border-top-style:solid;
border-color: $anchor-color-alt transparent transparent transparent;
margin-top: 0px;
margin-left: 5px;
} }
} }
ul.sub-menu { ul.sub-menu {
@ -32,14 +41,24 @@
top:0; top:0;
margin:0; margin:0;
padding:0; padding:0;
width: 100%; width: auto;
visibility:hidden; visibility:hidden;
opacity:0; opacity:0;
transition: transform 0.5s; transition: transform 0.5s;
transform: translateY(-$global-padding); transform: translateY(-$global-padding);
li.menu-item-has-children {
> a {
&:after {
border-bottom-width: 6px;
border-right-width: 0;
border-right-style:solid;
border-color: transparent transparent transparent $anchor-color-alt;
margin-left: 10px;
}
}
}
} }
&:hover { &:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a { > a {
color: scale-color($anchor-color, $lightness: 50%); color: scale-color($anchor-color, $lightness: 50%);
&:after { &:after {
@ -51,6 +70,9 @@
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu { ul.sub-menu {
top: 0%; top: 0%;
left: 100%; left: 100%;
@ -60,6 +82,77 @@
} }
} }
} }
.widget_tag_cloud {
position: relative;
overflow: visible;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: scale-color($tags-background-color, $alpha: -100%);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
text-align: center;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block !important;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
@include breakpoint(small){ @include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){

View File

@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true; $enable-code-inline: true;
$anchor-color: $primary-color; $anchor-color: $primary-color;
$anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%); $anchor-color-hover: $primary-color;//scale-color($anchor-color, $lightness: -14%);
$anchor-color-alt: scale-color($anchor-color, $lightness: 50%);
$anchor-text-decoration: none; $anchor-text-decoration: none;
$anchor-text-decoration-hover: none; $anchor-text-decoration-hover: none;
$hr-width: $global-width; $hr-width: $global-width;

View File

@ -25,8 +25,8 @@
//@include foundation-switch; //@include foundation-switch;
@include foundation-table; @include foundation-table;
// Basic components // Basic components
@include foundation-badge; // @include foundation-badge;
@include foundation-breadcrumbs; // @include foundation-breadcrumbs;
@include foundation-callout; @include foundation-callout;
@include foundation-card; @include foundation-card;
@include foundation-dropdown; @include foundation-dropdown;

View File

@ -1,5 +1,5 @@
button,.button { button,.button {
min-width: 20rem; // min-width: 20rem;
} }
.hero { .hero {
button,.button { button,.button {

View File

@ -4,38 +4,38 @@
/** === Includes === */ /** === Includes === */
@charset 'utf-8'; // @charset 'utf-8';
//
@import 'settings'; // @import 'settings';
@import 'foundation'; // @import 'foundation';
//
@include foundation-typography; // @include foundation-typography;
@include foundation-button; // @include foundation-button;
@include foundation-table; // @include foundation-table;
/** === Content Width === */ /** === Content Width === */
.wp-block { .wp-block {
width: calc(100vw - (2 * 10)); // width: calc(100vw - (2 * 10));
@each $breakpoint, $size in $grid-margin-gutters { // @each $breakpoint, $size in $grid-margin-gutters {
//
@include breakpoint($breakpoint) { // @include breakpoint($breakpoint) {
width: calc(100vw - ($size)); // width: calc(100vw - ($size));
} // }
//
} // }
} }
/** === Base Typography === */ /** === Base Typography === */
body { body {
font-size: $global-font-size; // font-size: $global-font-size;
font-family: $body-font-family; // font-family: $body-font-family;
color: $body-font-color; // color: $body-font-color;
} }
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block .editor-post-title__input{ .editor-post-title__block .editor-post-title__input{
@extend h1; // @extend h1;
} }
/** === Button === */ /** === Button === */
@ -43,17 +43,17 @@ body {
// add general foundation button styling to button in editor // add general foundation button styling to button in editor
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -61,26 +61,26 @@ body {
&.is-style-outline:hover, &.is-style-outline:hover,
&.is-style-outline:focus, &.is-style-outline:focus,
&.is-style-outline:active { &.is-style-outline:active {
background: transparent; // background: transparent;
} }
} }
/** === File === */ /** === File === */
.wp-block-file__button{ .wp-block-file__button{
@include button(); // @include button();
} }
/** === Pullquote === */ /** === Pullquote === */
.wp-block-paragraph.has-background{ .wp-block-paragraph.has-background{
padding: rem-calc(20px 30px); // padding: rem-calc(20px 30px);
} }
/** === Table === */ /** === Table === */
.wp-block-table td{ .wp-block-table td{
border: none; // border: none;
} }
/** === Latest Posts grid view === */ /** === Latest Posts grid view === */
.wp-block-latest-posts.is-grid{ .wp-block-latest-posts.is-grid{
list-style: none; // list-style: none;
} }

View File

@ -6,11 +6,11 @@ Frontend styles for gutenberg blocks
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
.has-#{$color}-background-color { .has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
.has-#{$color}-color { .has-#{$color}-color {
color: $code; // color: $code;
} }
} }
@ -19,27 +19,27 @@ Frontend styles for gutenberg blocks
// add general foundation button styling // add general foundation button styling
.wp-block-button__link { .wp-block-button__link {
@extend .button; // @extend .button;
@each $color, $code in $foundation-palette { @each $color, $code in $foundation-palette {
&.has-#{$color}-background-color { &.has-#{$color}-background-color {
background-color: $code; // background-color: $code;
} }
&.has-#{$color}-color { &.has-#{$color}-color {
color: $code; // color: $code;
} }
} }
} }
// add special styling for squared buttons // add special styling for squared buttons
&.is-style-squared .wp-block-button__link { &.is-style-squared .wp-block-button__link {
border-radius: 0; // border-radius: 0;
} }
// add outline styles // add outline styles
&.is-style-outline .wp-block-button__link{ &.is-style-outline .wp-block-button__link{
@extend .hollow; // @extend .hollow;
} }
// set transparent background to block for outline button // set transparent background to block for outline button
@ -56,10 +56,10 @@ Frontend styles for gutenberg blocks
/** === File === */ /** === File === */
.wp-block-file .wp-block-file__button{ .wp-block-file .wp-block-file__button{
@include button(); // @include button();
} }
/** === Image === */ /** === Image === */
.wp-block-image { .wp-block-image {
margin: 0; // margin: 0;
} }

View File

@ -19,26 +19,3 @@
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal; font-weight: normal;
} }
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6,
//button,.button,
//header nav,
//.hero .claim
//{
// font-variant:all-small-caps;
//}
//
//
//h1,h2,h3,h4,h5,h6,
//.h1,.h2,.h3,.h4,.h4,.h5,.h6 {
// a {
// color: $black;
// }
//}

View File

@ -360,75 +360,6 @@ main {
width: auto; width: auto;
overflow: visible; overflow: visible;
} }
.widget_tag_cloud {
position: relative;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: rgba(255,255,255,0.1);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
} }
&.top.secondary { &.top.secondary {
align-content: center; align-content: center;

View File

@ -13,15 +13,24 @@
color: $black; color: $black;
justify-content: left !important; justify-content: left !important;
} }
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto; width:auto;
li.menu-item-has-children { li.menu-item-has-children {
> a { > a {
&:after { &:after {
content:'+'; display:block;
margin-left:auto; width:0;
padding-left: $global-padding/2; height:0;
display: inline-block; border:inset 6px;
color: scale-color($anchor-color, $lightness: 85%); content:'';
border-bottom-width:0;
border-top-style:solid;
border-color: $anchor-color-alt transparent transparent transparent;
margin-top: 0px;
margin-left: 5px;
} }
} }
ul.sub-menu { ul.sub-menu {
@ -32,14 +41,24 @@
top:0; top:0;
margin:0; margin:0;
padding:0; padding:0;
width: 100%; width: auto;
visibility:hidden; visibility:hidden;
opacity:0; opacity:0;
transition: transform 0.5s; transition: transform 0.5s;
transform: translateY(-$global-padding); transform: translateY(-$global-padding);
li.menu-item-has-children {
> a {
&:after {
border-bottom-width: 6px;
border-right-width: 0;
border-right-style:solid;
border-color: transparent transparent transparent $anchor-color-alt;
margin-left: 10px;
}
}
}
} }
&:hover { &:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
> a { > a {
color: scale-color($anchor-color, $lightness: 50%); color: scale-color($anchor-color, $lightness: 50%);
&:after { &:after {
@ -51,6 +70,9 @@
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: translateY(0px); transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu { ul.sub-menu {
top: 0%; top: 0%;
left: 100%; left: 100%;
@ -60,6 +82,77 @@
} }
} }
} }
.widget_tag_cloud {
position: relative;
overflow: visible;
margin-left: $global-margin;
$tags-background-color: scale-color($anchor-color, $lightness: 95%);
a {
display: inline;
color: $black;
&:before, &:after {
display: inline-block;
}
}
h6 {
visibility: hidden;
opacity: 0;
width: 0;
height: 0;
}
&:before {
content: '#tags';
color: $primary-color;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
}
&:hover{
.tagcloud {
top: 1.6rem;
visibility: visible;
opacity: 1;
transform: translateY(0px);
background-color: scale-color($tags-background-color, $alpha: -100%);
@include breakpoint(small){
width: 80vw;
right: -1rem;
text-align: right;
}
@include breakpoint(medium){
width: 90vw;
right: -15vw;
text-align: center;
}
@include breakpoint(large){
width: 90vw;
right: -25vw;
}
}
}
.tagcloud {
position: absolute;
visibility:hidden;
opacity:0;
transition: transform 0.5s,background-color 0.5s;
transform: translateY(-$global-padding);
background-color: $tags-background-color;
padding: $global-padding;
a {
display: inline-block !important;
background-color: $tags-background-color;
padding:$global-padding/4 $global-padding/2;
font-size: $global-font-size * 0.7 !important;
&:before {
content: '#';
display: inline-block;
}
&:hover {
color: $anchor-color;
}
}
}
}
@include breakpoint(small){ @include breakpoint(small){
} }
@include breakpoint(medium){ @include breakpoint(medium){