~avalos/devault-css

devault-css/index.html -rw-r--r-- 7.6 KiB
f1ef5a23avalos t 5 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="theme-color" content="#ffffff">
		<title>DeVault CSS</title>
		<link href="dist/css/base.css" rel="stylesheet"/>

		<!-- Icons -->
		<link href="dist/css/fa.min.css" rel="stylesheet" media="all" />
	</head>
	<body>
		<nav class="container navbar navbar-light navbar-expand-sm">
			<span class="navbar-brand">
				<a href="#"><i class="icon far fa-circle"></i> devault css</a>
			</span>
			<ul class="navbar-nav">
				<li class="nav-item"><a class="nav-link active" href="#">home</a></li>
				<li class="nav-item"><a class="nav-link" href="https://git.sr.ht/~avalos/devault-css">repo</a></li>
				<li class="nav-item"><a class="nav-link" href="https://todo.sr.ht/~avalos/devault-css">issues</a>
			</ul>
			<div class="login">
				<span class="navbar-text">
					<a href="">Login</a> &mdash; <a href="#">Register</a>
				</span>
			</div>
		</nav>
		<div class="header-tabbed">
			<div class="container">
				<ul class="nav nav-tabs">
					<h2>
						devault css
					</h2>
					<li class="nav-item">
						<a class="nav-link active" href="#">article</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">source</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#">history</a>
					</li>
				</ul>
			</div>
		</div>
		<div class="container">
			<div class="content">	
				<p>
					<strong>Welcome to devault css!</strong>
					This suite of open source stylesheets is the suite of open source stylesheets you've been waiting for. We've taken the wisdom of the most successful open-source communities and turned it into a suite of efficient open source stylesheets.
				</p>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-4 event-list">
					<div class="event">
						<h3>Minimalist, retro, lightweight</h3>
						<p>
							Aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics… aesthetics…
						</p>
						<a class="btn btn-primary btn-block" href="https://en.wikipedia.org/wiki/Aesthetics">
							Aesthetics <i class="icon fas fa-caret-right"></i></a>
					</div>
				</div>
				<div class="col-md-4 event-list">
					<div class="event">
						<h3>Bootstrap compatible</h3>
						<p>
							Sourcehut stylesheets are basically a customized version of Bootstrap CSS, with extra classes and colors, and stuff, so, it shouldn't be too hard to learn.
						</p>
						<a class="btn btn-primary btn-block" href="https://getbootstrap.com">
							Bootstrap <i class="icon fas fa-caret-right"></i></a>
					</div>
				</div>
				<div class="col-md-4 event-list">
					<div class="event">
						<h3>Free as in freedom</h3>
						<p>
							Yeah, you're free to use them in your websites, devault css is licensed under MIT. It is also free as in free beer, <b>but you can voluntarily donate to Drew DeVault and pay a Sourcehut plan (I'd really appreciate it!).</b>
						</p>
						<a class="btn btn-primary btn-block" href="https://drewdevault.com/backers">
							Donate to Drew DeVault <i class="icon fas fa-caret-right"></i></a>
						<a class="btn btn-primary btn-block" href="https://sourcehut.org/pricing/">
							Sourcehut pricing <i class="icon fas fa-caret-right"></i></a>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="event-list row">
				<div class="event toc col-md-12">
					<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">
							<li><a href="#requirements">Requirements</a></li>
							<li><a href="#instructions">Instructions</a></li>
						</ul>
						<li><a href="#documentation">Documentation</a></li>
						<li><a href="#credits">Credits</a></li>
					</ol>
				</div>
			</div>
		</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>
					<li>Sass</li>
				</ul>
				<h3 id="instructions">Instructions</h3>
				<div class="hightlight">
					<pre>sass scss/base.scss dist/css/base.css</pre>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="content">
				<h2 id="documentation">Documentation</h2>
				<p style="word-wrap: break-word;">Coming sooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooon!</p>
			</div>
		</div>
		<div class="container">
			<div class="content">
				<h2 id="credits">Credits</h2>
				<p>
					Credits go mainly to Sourcehut developers, I just extracted the CSS stylesheets and that's it, I don't think I even deserve donations for this, but feel free to donate a small quantity to me. <b>But preferably donate to Drew!</b>
					
				</p>
				<ul>
					<li>Stylesheets taken from <a href="https://git.sr.ht/~sircmpwn/core.sr.ht">core.sr.ht</a>.</li>
					<li>Icon font used is <a href="https://fontawesome.com">FontAwesome</a>.</li>
					<li>Stylesheets extracted by <a href="https://avalos.me">avalos</a>.</li>
				</ul>
				<p>
					<a class="btn btn-default" href="https://liberapay.com/avalos">
						Donate to avalos <i class="icon fas fa-caret-right"></i></a>
				</p>
			</div>
		</div>
	</body>
</html>