Skip to content

Commit d2b22e7

Browse files
arqunisarqunis
committed
Switch to BEM, add icons for Github and Discord, add custom style to toggle button
1 parent e6f71aa commit d2b22e7

File tree

6 files changed

+308
-133
lines changed

6 files changed

+308
-133
lines changed

‎README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ served by a HTTP server like [Nginx][nginx], though, of course, this site is
1818
meant to be run on Github Pages.
1919

2020
This site uses [TypeScript][ts] and [SCSS][sass-scss] instead of regular
21-
JavaScript and CSS. When writing CSS, the [RSCSS][rscss] system is used.
21+
JavaScript and CSS. When writing CSS, the [BEM][bem] methodology is used.
2222

2323
Media files, like images, sounds, and videos, are stored in the `public/`
2424
directory.
@@ -28,7 +28,7 @@ directory.
2828
[nginx]: https://nginx.org
2929
[ts]: https://typescriptlang.org
3030
[sass-scss]: https://sasscss.com
31-
[rscss]: https://rstacruz.github.io/rscss/
31+
[bem]: https://getbem.com/
3232

3333
## License
3434

‎public/discord.svg

Lines changed: 4 additions & 0 deletions
Loading

‎public/github-mark-white.svg

Lines changed: 5 additions & 0 deletions
Loading

‎public/github-mark.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/index.html

Lines changed: 157 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -78,68 +78,101 @@
7878
<script type="module" src="/index/main.ts"></script>
7979
</head>
8080
<body>
81-
<div class="container">
82-
<header class="header-content">
83-
<nav class="navigation">
84-
<ul class="nav-links">
85-
<li class="item">
86-
<a
87-
class="link -github"
88-
href="https://github.com/serenity-rs/"
81+
<header class="site-header container">
82+
<nav class="navigation">
83+
<ul class="navigation__links">
84+
<li>
85+
<a
86+
class="navigation__links__link"
87+
href="https://github.com/serenity-rs/"
88+
>
89+
<div
90+
class="navigation__links__link__icon github-icon"
8991
>
90-
Github
91-
</a>
92-
</li>
93-
<li class="item">
94-
<a
95-
class="link -discord"
96-
href="https://discord.gg/serenity-rs"
97-
>
98-
Discord
99-
</a>
100-
</li>
101-
</ul>
102-
</nav>
92+
<img
93+
class="navigation__links__link__icon__image github-icon__black"
94+
src="/github-mark.svg"
95+
alt="Black Github logo"
96+
/>
97+
98+
<img
99+
class="navigation__links__link__icon__image github-icon__white"
100+
src="/github-mark-white.svg"
101+
alt="White Github logo"
102+
/>
103+
</div>
103104

104-
<div class="toggler">
105-
<button class="button" id="toggle-button" type="button">
106-
Toggle theme
107-
</button>
108-
</div>
109-
</header>
105+
<div class="navigation__links__link__label">
106+
Github
107+
</div>
108+
</a>
109+
</li>
110+
111+
<li>
112+
<a
113+
class="navigation__links__link"
114+
href="https://discord.gg/serenity-rs"
115+
>
116+
<div class="navigation__links__link__icon">
117+
<img
118+
class="navigation__links__link__icon__image"
119+
src="/discord.svg"
120+
alt="Discord logo"
121+
/>
122+
</div>
110123

111-
<main class="main-content">
112-
<h1 class="caption">
124+
<div class="navigation__links__link__label">
125+
Discord
126+
</div>
127+
</a>
128+
</li>
129+
</ul>
130+
</nav>
131+
132+
<button class="button" type="button" id="toggle-button">
133+
Toggle theme
134+
</button>
135+
</header>
136+
137+
<main class="site-body container">
138+
<div class="site-body__header">
139+
<h1 class="site-body__header__title">
113140
Serenity, a Rust wrapper for the Discord API
114141
</h1>
115142

116-
<div class="logo">
117-
<img src="/logo.png" alt="Serenity logo" />
118-
</div>
143+
<img
144+
class="site-body__header__logo"
145+
src="/logo.png"
146+
alt="Serenity logo"
147+
width="256"
148+
height="256"
149+
/>
119150

120-
<p class="text">
151+
<p class="site-body__header__description">
121152
Serenity is a HTTP and gateway wrapper around
122153
<a href="https://discord.com">Discord</a>'s API, written in
123154
the
124155
<a href="https://rust-lang.org">Rust programming language</a
125156
>.
126157
</p>
127158

128-
<p class="text">
159+
<p class="site-body__header__description">
129160
It offers a high-level, easy to use API for creating bots
130161
using Discord's official API.
131162
</p>
163+
</div>
132164

165+
<div class="site-body__body">
133166
<div class="projects">
134-
<h2 class="caption">Projects:</h2>
167+
<h2 class="projects__title">Projects:</h2>
135168

136-
<ul class="list" role="navigation">
137-
<li class="serenity-project item">
138-
<h3 class="caption" id="project-serenity">
169+
<ul class="projects__list" role="navigation">
170+
<li class="projects__list__project project">
171+
<h3 class="project__heading" id="project-serenity">
139172
Serenity
140173
</h3>
141174

142-
<p class="text -indent">
175+
<p class="project__description">
143176
The main project, providing support for
144177
Discord's Gateway and REST APIs.
145178
</p>
@@ -148,17 +181,26 @@ <h3 class="caption" id="project-serenity">
148181
Github repository
149182
</a>
150183

151-
<div class="doc-links">
152-
<h4 class="caption">Documentation links:</h4>
153-
154-
<ul class="links" role="navigation">
155-
<li class="item">
184+
<div class="project__documentation">
185+
<h4 class="project__documentation__heading">
186+
Documentation links:
187+
</h4>
188+
189+
<ul
190+
class="project__documentation__links"
191+
role="navigation"
192+
>
193+
<li
194+
class="project__documentation__links__link"
195+
>
156196
<a href="https://docs.rs/serenity">
157197
Latest crates.io release
158198
</a>
159199
</li>
160200

161-
<li class="item">
201+
<li
202+
class="project__documentation__links__link"
203+
>
162204
<a
163205
href="https://serenity-rs.github.io/serenity/current/serenity/index.html"
164206
>
@@ -167,7 +209,9 @@ <h4 class="caption">Documentation links:</h4>
167209
</a>
168210
</li>
169211

170-
<li class="item">
212+
<li
213+
class="project__documentation__links__link"
214+
>
171215
<a
172216
href="https://serenity-rs.github.io/serenity/next/serenity/index.html"
173217
>
@@ -179,12 +223,12 @@ <h4 class="caption">Documentation links:</h4>
179223
</div>
180224
</li>
181225

182-
<li class="serenity-project item">
183-
<h3 class="caption" id="project-songbird">
226+
<li class="projects__list__project project">
227+
<h3 class="project__heading" id="project-songbird">
184228
Songbird
185229
</h3>
186230

187-
<p class="text -indent">
231+
<p class="project__description">
188232
Songbird provides support for the voice portion
189233
of Discord's API.
190234
</p>
@@ -193,17 +237,26 @@ <h3 class="caption" id="project-songbird">
193237
Github repository
194238
</a>
195239

196-
<div class="doc-links">
197-
<h4 class="caption">Documentation links:</h4>
198-
199-
<ul class="links" role="navigation">
200-
<li class="item">
240+
<div class="project__documentation">
241+
<h4 class="project__documentation__heading">
242+
Documentation links:
243+
</h4>
244+
245+
<ul
246+
class="project__documentation__links"
247+
role="navigation"
248+
>
249+
<li
250+
class="project__documentation__links__link"
251+
>
201252
<a href="https://docs.rs/songbird">
202253
Latest crates.io release
203254
</a>
204255
</li>
205256

206-
<li class="item">
257+
<li
258+
class="project__documentation__links__link"
259+
>
207260
<a
208261
href="https://serenity-rs.github.io/songbird/current/songbird/index.html"
209262
>
@@ -212,7 +265,9 @@ <h4 class="caption">Documentation links:</h4>
212265
</a>
213266
</li>
214267

215-
<li class="item">
268+
<li
269+
class="project__documentation__links__link"
270+
>
216271
<a
217272
href="https://serenity-rs.github.io/songbird/next/songbird/index.html"
218273
>
@@ -224,14 +279,16 @@ <h4 class="caption">Documentation links:</h4>
224279
</div>
225280
</li>
226281

227-
<li class="serenity-project item">
228-
<h3 class="caption" id="project-poise">Poise</h3>
282+
<li class="projects__list__project project">
283+
<h3 class="project__heading" id="project-poise">
284+
Poise
285+
</h3>
229286

230-
<p class="text -indent">
287+
<p class="project__description">
231288
Poise is a command framework for Serenity.
232289
</p>
233290

234-
<p class="text -indent">
291+
<p class="project__description">
235292
It has support for prefix-based commands (e.g.
236293
<code>!ping</code>), as well as Discord's
237294
application commands, which natively integrate
@@ -242,17 +299,26 @@ <h3 class="caption" id="project-poise">Poise</h3>
242299
Github repository
243300
</a>
244301

245-
<div class="doc-links">
246-
<h4 class="caption">Documentation links:</h4>
247-
248-
<ul class="links" role="navigation">
249-
<li class="item">
302+
<div class="project__documentation">
303+
<h4 class="project__documentation__heading">
304+
Documentation links:
305+
</h4>
306+
307+
<ul
308+
class="project__documentation__links"
309+
role="navigation"
310+
>
311+
<li
312+
class="project__documentation__links__link"
313+
>
250314
<a href="https://docs.rs/poise">
251315
Latest crates.io release
252316
</a>
253317
</li>
254318

255-
<li class="item">
319+
<li
320+
class="project__documentation__links__link"
321+
>
256322
<a
257323
href="https://serenity-rs.github.io/poise/current/poise/index.html"
258324
>
@@ -261,7 +327,9 @@ <h4 class="caption">Documentation links:</h4>
261327
</a>
262328
</li>
263329

264-
<li class="item">
330+
<li
331+
class="project__documentation__links__link"
332+
>
265333
<a
266334
href="https://serenity-rs.github.io/poise/next/poise/index.html"
267335
>
@@ -274,30 +342,34 @@ <h4 class="caption">Documentation links:</h4>
274342
</li>
275343
</ul>
276344
</div>
345+
</div>
277346

278-
<p class="text">
347+
<div class="site-body__footer">
348+
<p class="site-body__footer__invite">
279349
If you need help, wish to consult or discuss with us, join
280350
the
281-
<a href="https://discord.gg/serenity-rs">
351+
<a
352+
class="site-body__footer__invite__link"
353+
href="https://discord.gg/serenity-rs"
354+
>
282355
Serenity Discord server</a
283356
>!
284357
</p>
285358

286-
<div class="widget">
287-
<iframe
288-
src="https://discord.com/widget?id=381880193251409931&theme=dark"
289-
width="350"
290-
height="500"
291-
allowtransparency="true"
292-
frameborder="0"
293-
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
294-
></iframe>
295-
</div>
296-
</main>
297-
298-
<footer class="footer-content">
299-
<p>Made by Serenity developers</p>
300-
</footer>
301-
</div>
359+
<iframe
360+
class="site-body__footer__widget"
361+
src="https://discord.com/widget?id=381880193251409931&theme=dark"
362+
width="350"
363+
height="500"
364+
allowtransparency="true"
365+
frameborder="0"
366+
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
367+
></iframe>
368+
</div>
369+
</main>
370+
371+
<footer class="site-footer container">
372+
<p class="site-footer__attribution">Made by Serenity developers</p>
373+
</footer>
302374
</body>
303375
</html>

0 commit comments

Comments
 (0)