Footer im Opera (Desktop)

[Robert B.]

Moin Torsten,

Obwohl sich meine Meinung nicht geändert hat ein Friedensangebot: hab alles gehostet, keine Schriftendownloads mehr drin, dabei hab ich auch meine Macke in den Griff bekommen (die Lokale-Online-Divergenz nen'n ich das mal, nicht meine persönliche, die bleibt noch ne Weile)

Das ist vor allem ein Friedensangebot an deine Nutzer, weil deren Daten nicht an Dritte weitergegeben werden.

Vielleicht kannst du ja mal ein Auge drauf werfen? (<- DAS IST EIN SCHERZ!)

Eine Frage habe ich dazu: War das schon immer so?

Der Inspektor sagt mir, dass hier FontAwesome deklariert ist, allerdings kann ich die Schriftdatei dazu nicht im Netzwerk-Tab finden. Kann es sein, dass die nicht eingebunden wird? Vielleicht wäre an der Stelle mal ein Blick auf die Unicodeblöcke Dingbats, Verschiedene Symbole, Verschiedene piktografische Symbole oder ähnliche hilfreich 😉

Deine Navigation kann „modern“ natürlich ein nav sein; ob nav-Element oder ID nav, du kannst diese Information zum Stylen verwenden und brauchst dann die CSS-Klasse wrapcircles nicht. Die darin enthaltenen div – semantisch eher eine Liste – kannst du auch mit CSS ansprechen: nth-child. Allerdings frage ich mich, was das span soll:

<div class="circle c-4">
    <span>
        <a class="link" href="start.about.html" title="Ich"></a>
    </span>
</div>

Ob ein Link mit leerem Text, aber einem title, zugänglich ist, kann ich nicht beurteilen.

Dein Code ließe sich unter Verwendung einer Liste jedenfalls deutlich vereinfachen:

<nav>
    <ul>
        <!-- … -->
        <li><a href="start.about.html" title="Über mich"></a>
        <!-- … -->
    </ul>
</nav>

mit

nav {
    position: fixed;
    z-index: 9;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
nav li {
    opacity: .7;
    position: absolute;
    top: -$radius;   /* ← das steht da wirklich, ist aber ungültig */
    left: -$radius;  /* ← das steht da wirklich, ist aber ungültig */
    top: 0;
    left: 0;
    width: 15em;
    height: 15em;
    transition: width 0.3s, height 0.3s, transform 0.3s;
    transform-origin: top left;
    border-bottom-right-radius: 100%;
}
nav li:nth-child(1) {
    /* Regeln der originalen CSS-Klasse c-1 */
    background: #131313;
    transition-delay: 0.1s, 0.1s, 0.1s;
    transform: rotate(18deg);
    z-index: 11;
}
nav li:nth-child(2) {
    /* Regeln der originalen CSS-Klasse c-2 */
}
/* … */

Viele Grüße
Robert