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;
$anchor-color: $primary-color;
$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-hover: none;
$hr-width: $global-width;

View File

@ -25,8 +25,8 @@
//@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
// @include foundation-badge;
// @include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@ -69,7 +69,7 @@
// global project styles
@import "global/wp-overrides"; //errors
@import "global/wp-admin"; //errors
@import "global/wp-admin"; //errors
@import "global/typography";
@import "global/gutenberg";
@import "global/colors";
@ -112,4 +112,4 @@
// gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/'));
// });
// });

View File

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

View File

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

View File

@ -14,31 +14,8 @@
@mixin font-worksans-medium {
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
}
}
@mixin font-worksans-mediumitalic {
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
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;
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 {
align-content: center;

View File

@ -1,4 +1,4 @@
.widget_nav_menu {
.widget_nav_menu {
.menu-resources-menu-container {
position: relative;
}
@ -13,15 +13,24 @@
color: $black;
justify-content: left !important;
}
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto;
li.menu-item-has-children {
> a {
&:after {
content:'+';
margin-left:auto;
padding-left: $global-padding/2;
display: inline-block;
color: scale-color($anchor-color, $lightness: 85%);
display:block;
width:0;
height:0;
border:inset 6px;
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 {
@ -32,14 +41,24 @@
top:0;
margin:0;
padding:0;
width: 100%;
width: auto;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
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 {
background-color: scale-color($anchor-color, $lightness: 98%);
> a {
color: scale-color($anchor-color, $lightness: 50%);
&:after {
@ -51,6 +70,9 @@
visibility: visible;
opacity: 1;
transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu {
top: 0%;
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(medium){

View File

@ -181,6 +181,7 @@ $paragraph-text-rendering: optimizeLegibility;
$enable-code-inline: true;
$anchor-color: $primary-color;
$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-hover: none;
$hr-width: $global-width;

View File

@ -25,8 +25,8 @@
//@include foundation-switch;
@include foundation-table;
// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
// @include foundation-badge;
// @include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@ -69,7 +69,7 @@
// global project styles
@import "global/wp-overrides"; //errors
@import "global/wp-admin"; //errors
@import "global/wp-admin"; //errors
@import "global/typography";
@import "global/gutenberg";
@import "global/colors";
@ -112,4 +112,4 @@
// gulp.task('icons', function() {
// return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
// .pipe(gulp.dest(dist+'/assets/webfonts/'));
// });
// });

View File

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

View File

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

View File

@ -14,31 +14,8 @@
@mixin font-worksans-medium {
font-face: worksans-medium, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: normal;
}
}
@mixin font-worksans-mediumitalic {
font-face: worksans-mediumitalic, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
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;
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 {
align-content: center;

View File

@ -1,4 +1,4 @@
.widget_nav_menu {
.widget_nav_menu {
.menu-resources-menu-container {
position: relative;
}
@ -13,15 +13,24 @@
color: $black;
justify-content: left !important;
}
.is-active > a {
background: unset;
color: scale-color($anchor-color, $saturation: -50%, $lightness: 50%)
}
width:auto;
li.menu-item-has-children {
> a {
&:after {
content:'+';
margin-left:auto;
padding-left: $global-padding/2;
display: inline-block;
color: scale-color($anchor-color, $lightness: 85%);
display:block;
width:0;
height:0;
border:inset 6px;
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 {
@ -32,14 +41,24 @@
top:0;
margin:0;
padding:0;
width: 100%;
width: auto;
visibility:hidden;
opacity:0;
transition: transform 0.5s;
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 {
background-color: scale-color($anchor-color, $lightness: 98%);
> a {
color: scale-color($anchor-color, $lightness: 50%);
&:after {
@ -51,6 +70,9 @@
visibility: visible;
opacity: 1;
transform: translateY(0px);
&:hover {
background-color: scale-color($anchor-color, $lightness: 98%);
}
ul.sub-menu {
top: 0%;
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(medium){