~avalos/devault-css

f1ef5a2306b5d822bb7bb45993dd5824242c406f — avalos 5 months ago 76347aa master
t
1 files changed, 20 insertions(+), 0 deletions(-)

M index.html
M index.html => index.html +20 -0
@@ 94,6 94,9 @@
					<h3>Table of contents</h3>
					<ol>
						<li>
							<a href="#design-philosophy">Philosophy</a>
						</li>
						<li>
							<a href="#compilation">Compilation</a>
						</li>
						<ul style="list-style: none; padding-left: 1rem">


@@ 108,6 111,23 @@
		</div>
		<div class="container">
			<div class="content">
				<h2 id="philosophy">Philosophy</h2>
				<figure class="quote">
					<blockquote cite="https://drewdevault.com/2019/03/04/sourcehut-design.html">
						<p>Sourcehut is known for its brutalist design, with its mostly shades-of-gray appearance, conservative color usage, and minimal distractions throughout.</p>
						<p>…</p>
						<p>The nav can take you away from this page, but it’s colored a light grey to avoid being distracting and each link is another engineering tool - no marketing material or fluff. Contrast with GitHub: a large, dark, attention grabbing navbar with links to direct you away from the content and towards marketing pages. If you’re logged out, you get a giant sign-up box which pushes the content halfway off the page. Colors here are also distracting: note the large line of colorful avatars that catches your eye despite almost certainly being unrelated to your purpose on this page.</p>
						<p>…</p>
						<p>The last important point in sourcehut’s design is the use of icons, or rather the lack thereof. Icons are used extremely conservatively on sr.ht. Interactive icons (things you are expected to click) are never shown without text that clarifies what happens when you click them. Informational icons usually have a tooltip which explains their meaning, and are quite rare - only used in cases where real estate limits the use of text. Assigning an icon to every action or detail is not necessary and would add more distractions to the screen.</p>
					</blockquote>
					<figcaption>
						&mdash; Drew Devaut, <a href="https://drewdevault.com/2019/03/04/sourcehut-design.html" style="font-style: italic;">Sourcehut's spartan approach to web design </a>
					</figcaption>
				</figure>
			</div>
		</div>
		<div class="container">
			<div class="content">
				<h2 id="compilation">Compilation</h2>
				<h3 id="requirements">Requirements</h3>
				<ul>