Jetzt, da wir einen Bereich für Blogbeiträge haben, können wir uns wirklich mit der Typografie von Blogbeiträgen befassen. Das ist wohl die wichtigste Typografie auf der Website, da dies der Ort ist, an dem ein Leser die meiste Zeit mit dem Betrachten verbringen wird.
Wir beginnen mit der Überlegung zu Überschriften-Tags und deren Größe. Dann gestalten wir das <time>-Element, das auf der gesamten Website allgegenwärtig sein wird.
Wir erinnern uns daran, dass man Kleinbuchstaben nie mit zusätzlichem Abstand versieht, obwohl wir Schafe stehlen.
Wir fügen eine weitere wichtige Farbe zu unserer bits.scss-Datei hinzu: $blue, die für Links auf der gesamten Website verwendet wird. Wir experimentieren mit einigen anderen Link-Styles, entscheiden uns aber letztendlich dagegen. Die Zustände für Hover/Fokus/Aktiv werden einfach durch die Darken()-Funktion von Sass erreicht.
Wir erhöhen die Schriftgröße des ersten Absatzes des Artikels. Das ist einfach stilistisch cool, aber es ist auch ein kleiner psychologischer Trick, um Leute zum Lesen und Interesse am Artikel zu bewegen. Es ist auch ein Trick für mich als Autor. Ich weiß, dass dieser Absatz super groß sein wird, also sollte ich ihn gut machen!
Dieses erste Absatz-Ding ist vielleicht ein wenig fragil. Zum Beispiel haben wir einen Platzhalter für eine zukünftige Google AdSense-Anzeige eingefügt, die dann den Selektor bricht. Aber wir werden es reparieren!
Hallo Chris,
Ich genieße diese Videos wirklich und lerne so viel aus dem Workflow. Benutzen Sie ein bestimmtes Farbschema in Sublime oder ist es ein individuell angepasstes?
Es ist eines der eingebauten Schemata in Sublime Text 2: Twilight.
Danke für die Links „vorheriges Video“ & „nächstes Video“. :) Außerdem funktionieren die Vimeo-Videos für mich viel schneller.
Super, danke Paul.
Ich werde diesen Kommentar vergraben, nur um den Kommentar-Thread speziell auf den Inhalt dieses Videos zu beschränken.
Warum nicht einfach eine Klasse für diesen einführenden Absatz verwenden? nth-child funktioniert, aber wie Sie sagten, könnten sich die Dinge in Zukunft ändern und dann müssten Sie auch das CSS ändern, während Sie mit einer einfachen Klasse wie .lead oder etwas Ähnlichem nie wieder etwas anfassen müssten. Sie können sie sogar auf anderen Teilen der Website wiederverwenden.
Das würde funktionieren, aber im Fall von CSS-Tricks wollte ich, dass über 1.000 alte Beiträge ebenfalls diesen Stil erhalten, und das Aktualisieren dieser ist so gut wie ausgeschlossen.
Vielleicht kann ich eines Tages einen Praktikanten einstellen, dessen einzige Aufgabe es ist, das Archiv der Beiträge durchzugehen und das Markup zu aktualisieren sowie Dinge wie Tagging und Kategorisierung durchzuführen. Das wäre großartig =)
Ich verstehe, ich hatte völlig vergessen, dass es auch für frühere Beiträge gelten musste.
Haha, das wäre großartig, wenn auch nicht sehr lohnend für sie. :)
Sie sollten verwenden
h2+time{display:block}
es zielt nur auf time, wenn es nach einem h2 kommt
http://jsfiddle.net/JCSEh/
Das ist die perfekte Anwendung für diesen Selektor =)
Ich hätte ein Head-Element für die Kombination aus Überschrift und Zeit gewählt.
Gibt es Gründe, dies nicht zu verwenden?
Auch eine vollkommen akzeptable Option.
„Du weißt, dass du Kleinbuchstaben nie mit zusätzlichem Abstand versiehst, oder? … es sei denn, du klaust Schafe.“ HaAAahHhAAaaaaA
Ich habe geschrien, dass du nth-of-type verwenden sollst :P
Was war der Kommentar, den Sie über das nie mit Abstand versehene Kleinbuchstaben gemacht haben? Etwas über das Stehlen von Schafen?
http://webtypography.net/2.1.7