mdibella-dev / mdb-theme-fse Goto Github PK

Possibly it could appear animated?

• Create a Footer which contains the buttons to the social media profiles, links to the imprint and to the mail address
• Restore the ability of the navbar to become a sidebar on larger displays
• Add the scroll to top link to the sidebar
• Add a scroll to bottom link to the sidebar
• Add a jump to home link to the sidebar (with a "Home" icon)
• Remove the mdb logo

More like this:

Code solution:

https://codyhouse.co/gem/vertical-timeline/

Using a three columns grid in #main can help to enhance the whitespace control. It could also improve the placement of the scrollup button.

Experiences with a new theme have shown that some settings set by normalize may collide with those of theme.json or hamonize badly.

https://make.wordpress.org/core/2021/06/29/on-layout-and-content-width-in-wordpress-5-8/
https://css-tricks.com/using-the-new-constrained-layout-in-wordpress-block-themes/

Should a shadow be added to the preceding element (alternatively: a gradient or a darker background color to the following element?) to achieve more plasticity?

Currently, the RIS generator button is included via the interim block of mdb-theme-blocks/single-publication-details.

Solution: Use -webkit-mask-image instead of mask-image

The website currently uses two fonts

• Inter
• Roboto Slab

The fonts are included via theme.json with the name of the font family. This name also corresponds to the slug, which has the consequence that Gutenberg constructs selectors like the following from it: --wp--preset--font-family--roboto-slab

It seems better to designate the fonts as primary (Inter) or secondary (Roboto Slab) according to their use.

The corresponding selectors would then be --wp--preset--font-family--primary and --wp--preset--font-family--secondary.

Advantage: The fonts could be exchanged in the theme.json without having to adjust the style sheet.

Currently, the wrapper element that comprises the navbar is tagged

Due to the variable display of the navbar - sometimes as a header, sometimes as a sidebar - this tag seems misleading.

Suggestion: tag the wrapper element with the

maybe 24px instead of 18px?

The #app container serves as a wrapper for the entire website.

At the same time Gutenberg adds its own wrapper (.wp-site-blocks) which includes all templates and blocks and with that also #app.

The idea: transfer the settings made by #app to .wp-site-block to remove the unnecessary double strictures and reduce DOM depth.

Sample: _embed.scss

.wp-block-image.is-style-shaded {
    // spacing
    margin-top: calc(2.5 * #{$base--gap});
    margin-bottom: calc(2.5 * #{$base--gap});

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    figcaption {
        margin-top: 1.3rem;
    }

    img {
        //background: cssvar(background-universal);
        box-shadow: 0 8px 10px 0 rgba(0,0,0,.35);
        border-radius: $base--border-radius;
    }
}

can be changed into:

.wp-block-image.is-style-shaded {
    // spacing
    margin-top: calc(2.5 * #{$base--gap});
    margin-bottom: calc(2.5 * #{$base--gap});

    &:first-child {
        margin-top: 0;
    }

    &:last-child {
        margin-bottom: 0;
    }

    .wp-element-caption {
        margin-top: 1.3rem;
    }

    img {
        //background: cssvar(background-universal);
        box-shadow: 0 8px 10px 0 rgba(0,0,0,.35);
        border-radius: $base--border-radius;
    }
}

Is there still a need to highlight external links?

Apart from display errors (the arrow can slip into the next line if the actual link ends on the right-hand side of the text), this provides the user with additional information that is not of any real or necessary benefit. Furthermore, the reading flow can be disturbed.

Just for fun: The 404 lettering could vary and/or be animated

Additionally, funny sayings could be displayed, for example:

"This is not the page you are looking for" - Yoda

Perhaps this could also lead to the development of a "quote generator block"

Recent changes to the design of links and buttons have introduced a number of inconsistencies that unnecessarily complicate the user experience and future developments.

1. Missing hover effect

There is no hover effect for the loadmore element publikationsliste and for the block element wp-block-navigation (style: pagenavigation).

In the absence of any other style markup, it may not be possible for the user to recognize that these are elements that can be activated.

2. Inconsistent hover effect

E.g.: Links in the text (additionally marked with an underscore) and in the main navigation are highlighted differently.

3. Three different "button" styles

.wp-block-image.is-style-transparent is basically just .wp-block-image with some spacing.

This results in the possibility of merging the two styles. The prerequisite is that the possibility to set the spacing manually by the author is activated via the theme.json in the block editor.

After this, it would be necessary to consider whether the new style (probably: wp-block-image) already carries a default spacing or not.

Problem 1: There is no visible demarcation between the post tags and the upstream design element (paragraph, image, etc.), such as increased spacing, a heading, a separator line, etc.

Problem 2: The question arises whether the use of buttons as post tag references is at all purposeful. Perhaps a term list (as provided in the WordPress core block element) should rather be used.

This list should then perhaps be designed with the Inconsolata font to emphasize that this is a secondary navigation element.

Incorrectly, the ul in #primary and #secondary inherits a left padding.

Solution:

#primary ul, #secondary ul {
padding-left: 0;
}

Creates unnecessary space between admin bar and following content

Happens to Hamburger, scroll to top and to down buttons

Buttons should lose their hover state after their action is completed

Der Teaserblock wird durch die Überschrift und dem nachfolgenden Button graphisch eingekesselt.

This small change provides more clarity and increases flexibility in entries.

Currently, the "Jump up" button is positioned at the bottom right of the screen.

Problem: The button is hard to find in mobile and very small windows because it overlaps the body text.

Currently, the navbar is the only site component that uses class names instead of id.

Happened since 6.1.1

Should links in paragraphs be highlighted with an underscore (disappears when hovering over it), i.e. exactly the opposite behavior as currently.

Unaffected by this would be especially the links in the slideout menu as well as in the teasers

The following code corrected the indentation of list items (see image).

ol > li, ul > li {
  padding-left: .5rem;
  margin-left: 1.5rem;
}

Unfortunately, this has caused display errors in various places.

wp-block-navigation

Code fragment for solving the problem:

.wp-block-navigation ul > li {
margin-left: 0;
}

post button tags

Code fragment for solving the problem:

.tags ul > li {
  padding-left: 0;
  margin-left: 0;
}