arcHIVE-tech/arc-hive-wordpress-theme
arcHIVE-tech
/
arc-hive-wordpress-theme
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/assets/css/app.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/assets/css/editor.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/assets/scss/_settings.scss vendored
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;

4
dist/assets/scss/app.scss vendored
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;

2
dist/assets/scss/components/_buttons.scss vendored
View File

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

56
dist/assets/scss/editor.scss vendored
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;
}

18
dist/assets/scss/global/_gutenberg.scss vendored
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;
}

23
dist/assets/scss/global/_typography.scss vendored
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-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;
// }
//}

69
dist/assets/scss/modules/_content.scss vendored
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;

107
dist/assets/scss/modules/_navigation.scss vendored
View File

@ -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){

1
src/assets/scss/_settings.scss
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;

4
src/assets/scss/app.scss
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;

2
src/assets/scss/components/_buttons.scss
View File

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

56
src/assets/scss/editor.scss
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;
}

18
src/assets/scss/global/_gutenberg.scss
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;
}

23
src/assets/scss/global/_typography.scss
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-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;
// }
//}

69
src/assets/scss/modules/_content.scss
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;

107
src/assets/scss/modules/_navigation.scss
View File

@ -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){