mdibella-dev / mdb-theme-fse Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://www.marcodibella.de
Home Page: https://www.marcodibella.de
Possibly it could appear animated?
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.
Currently, the RIS generator button is included via the interim block of mdb-theme-blocks/single-publication-details
.
The website currently uses two fonts
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.
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.
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.
E.g.: Links in the text (additionally marked with an underscore) and in the main navigation are highlighted differently.
.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;
}
Happens to Hamburger, scroll to top and to down buttons
Buttons should lose their hover state after their action is completed
This small change provides more clarity and increases flexibility in entries.
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.
Code fragment for solving the problem:
.wp-block-navigation ul > li {
margin-left: 0;
}
Code fragment for solving the problem:
.tags ul > li {
padding-left: 0;
margin-left: 0;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.