tags and menu in resources page

This commit is contained in:
jorge 2022-04-08 18:26:32 +02:00
parent 0040d548b5
commit 55ad44c7cc
7 changed files with 141 additions and 19 deletions

File diff suppressed because one or more lines are too long

View File

@ -72,7 +72,7 @@
// 1. Global // 1. Global
// --------- // ---------
$global-font-size:100%; $global-font-size:100%;
$global-width: 100vw; $global-width: 100vw;
$global-lineheight: 1.5; $global-lineheight: 1.5;
@ -471,7 +471,7 @@ $input-line-height: $global-lineheight;
$input-background: scale-color($primary-color, $lightness: 95%); $input-background: scale-color($primary-color, $lightness: 95%);
$input-background-focus: scale-color($primary-color, $lightness: 85%); $input-background-focus: scale-color($primary-color, $lightness: 85%);
$input-background-disabled: $light-gray; $input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray; $input-border: 1px solid $input-background;
$input-border-focus: 1px solid $input-background-focus; $input-border-focus: 1px solid $input-background-focus;
$input-padding: $form-spacing / 2; $input-padding: $form-spacing / 2;
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1); $input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
@ -908,4 +908,3 @@ $grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters; $grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width; $grid-container-max: $global-width;
$xy-block-grid-max: 8; $xy-block-grid-max: 8;

View File

@ -338,19 +338,37 @@ main {
width: auto; width: auto;
} }
.widget_tag_cloud { .widget_tag_cloud {
position: relative;
overflow: visible;
h6 { h6 {
display:none; display:none;
} }
.tagcloud { .tagcloud {
display: none; display: none;
padding: $global-padding*3;
width:50vw;
// max-width: 20rem;
a {
display: inline-block;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
&:before {
content: '#';
display: inline-block;
}
}
} }
&:before { &:before {
content: '#tags'; content: '#tags';
color: $primary-color; color: $primary-color;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
} }
&:hover{ &:hover{
.tagcloud { .tagcloud {
display: inline-block; display: inline-block;
position: absolute;
top: 0;
} }
} }
a{ a{

View File

@ -1,3 +1,4 @@
@include breakpoint(small){ @include breakpoint(small){
.widget_nav_menu { .widget_nav_menu {
ul.menu { ul.menu {
@ -7,6 +8,14 @@
li.menu-item-has-children { li.menu-item-has-children {
display: inline-block; display: inline-block;
position: relative; position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
margin-left: 0;
background-color: $white;
}
}
ul.sub-menu { ul.sub-menu {
list-style: none; list-style: none;
display: none; display: none;
@ -32,20 +41,55 @@
} }
} }
} }
}
}
}
}
@include breakpoint(medium){
.widget_nav_menu {
ul.menu {
// list-style: none;
// margin: 0;
// padding: 0;
li.menu-item-has-children {
// display: inline-block;
// position: relative;
&:hover,&:focus-within { &:hover,&:focus-within {
> ul.sub-menu { > ul.sub-menu {
display: inline-block; // display: inline-block;
position: absolute; position: absolute;
margin-left: 0; // margin-left: 0;
background-color: $white; // background-color: $white;
}
}
ul.sub-menu {
// list-style: none;
// display: none;
li.menu-item-has-children {
// position:relative;
// display: inline-block;
// padding-right:100%;
> a:after {
// content: ' > ';
// display: inline;
// position: absolute;
// color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// top: 0;
// left: 50%;
// margin-left: auto;
// width: 100%;
}
}
} }
} }
} }
} }
} }
}
@include breakpoint(medium){
} }
@include breakpoint(large){ @include breakpoint(large){
} }

View File

@ -72,7 +72,7 @@
// 1. Global // 1. Global
// --------- // ---------
$global-font-size:100%; $global-font-size:100%;
$global-width: 100vw; $global-width: 100vw;
$global-lineheight: 1.5; $global-lineheight: 1.5;
@ -471,7 +471,7 @@ $input-line-height: $global-lineheight;
$input-background: scale-color($primary-color, $lightness: 95%); $input-background: scale-color($primary-color, $lightness: 95%);
$input-background-focus: scale-color($primary-color, $lightness: 85%); $input-background-focus: scale-color($primary-color, $lightness: 85%);
$input-background-disabled: $light-gray; $input-background-disabled: $light-gray;
$input-border: 1px solid $medium-gray; $input-border: 1px solid $input-background;
$input-border-focus: 1px solid $input-background-focus; $input-border-focus: 1px solid $input-background-focus;
$input-padding: $form-spacing / 2; $input-padding: $form-spacing / 2;
$input-shadow: none;// inset 0 1px 2px rgba($black, 0.1); $input-shadow: none;// inset 0 1px 2px rgba($black, 0.1);
@ -908,4 +908,3 @@ $grid-padding-gutters: $grid-margin-gutters;
$grid-container-padding: $grid-padding-gutters; $grid-container-padding: $grid-padding-gutters;
$grid-container-max: $global-width; $grid-container-max: $global-width;
$xy-block-grid-max: 8; $xy-block-grid-max: 8;

View File

@ -338,19 +338,37 @@ main {
width: auto; width: auto;
} }
.widget_tag_cloud { .widget_tag_cloud {
position: relative;
overflow: visible;
h6 { h6 {
display:none; display:none;
} }
.tagcloud { .tagcloud {
display: none; display: none;
padding: $global-padding*3;
width:50vw;
// max-width: 20rem;
a {
display: inline-block;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
&:before {
content: '#';
display: inline-block;
}
}
} }
&:before { &:before {
content: '#tags'; content: '#tags';
color: $primary-color; color: $primary-color;
background-color: scale-color($anchor-color, $lightness: 90%);
padding:$global-padding/4 $global-padding/2;
} }
&:hover{ &:hover{
.tagcloud { .tagcloud {
display: inline-block; display: inline-block;
position: absolute;
top: 0;
} }
} }
a{ a{

View File

@ -1,3 +1,4 @@
@include breakpoint(small){ @include breakpoint(small){
.widget_nav_menu { .widget_nav_menu {
ul.menu { ul.menu {
@ -7,6 +8,14 @@
li.menu-item-has-children { li.menu-item-has-children {
display: inline-block; display: inline-block;
position: relative; position: relative;
&:hover,&:focus-within {
> ul.sub-menu {
display: inline-block;
position: absolute;
margin-left: 0;
background-color: $white;
}
}
ul.sub-menu { ul.sub-menu {
list-style: none; list-style: none;
display: none; display: none;
@ -32,20 +41,55 @@
} }
} }
} }
}
}
}
}
@include breakpoint(medium){
.widget_nav_menu {
ul.menu {
// list-style: none;
// margin: 0;
// padding: 0;
li.menu-item-has-children {
// display: inline-block;
// position: relative;
&:hover,&:focus-within { &:hover,&:focus-within {
> ul.sub-menu { > ul.sub-menu {
display: inline-block; // display: inline-block;
position: absolute; position: absolute;
margin-left: 0; // margin-left: 0;
background-color: $white; // background-color: $white;
}
}
ul.sub-menu {
// list-style: none;
// display: none;
li.menu-item-has-children {
// position:relative;
// display: inline-block;
// padding-right:100%;
> a:after {
// content: ' > ';
// display: inline;
// position: absolute;
// color: scale-color($anchor-color, $lightness: 80%);
}
&:hover,&:focus-within {
> ul.sub-menu {
// display: inline-block;
position: absolute;
// top: 0;
// left: 50%;
// margin-left: auto;
// width: 100%;
}
}
} }
} }
} }
} }
} }
}
@include breakpoint(medium){
} }
@include breakpoint(large){ @include breakpoint(large){
} }