Skip to content

Commit 6e2050c

Browse files
liskinliskin
committed
Switch to Bootstrap 5; cleanup CSS
We have no idea what version of Bootstrap we had and the collapsible navbar was a hack; let's just do this the right way instead.
1 parent dcdbff9 commit 6e2050c

File tree

6 files changed

+65
-114
lines changed

6 files changed

+65
-114
lines changed

‎README.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,8 @@ The tl;dr is the following:
4141

4242
All the `.md` files in the root (except for `README.md`) will
4343
be converted into `html` files. These go at the root of the
44-
website. The `css` directory has custom styles, as well as
45-
`bootstrap.min.css` for [Bootstrap](https://getbootstrap.com/).
46-
Image should go in the `images` directory.
44+
website. The `css` directory has custom styles.
45+
Images should go in the `images` directory.
4746

4847
The videos that are linked in `videos.html` are hardcoded in
4948
the `_data/videos.yml`

‎_layouts/container.html

-5
This file was deleted.

‎_layouts/header.html

+40-39
Original file line numberDiff line numberDiff line change
@@ -2,55 +2,56 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8">
5-
<meta http-equiv="x-ua-compatible" content="ie=edge">
65
<meta name="viewport" content="width=device-width, initial-scale=1">
76

8-
<!-- Bootstrap CSS -->
9-
<link rel="stylesheet" href="{{ site.baseurl }}{% link css/bootstrap.min.css %}">
7+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
108
<link rel="stylesheet" href="{{ site.baseurl }}{% link css/main.css %}">
119

1210
{% seo %}
1311
{% feed_meta %}
1412
</head>
1513
<body>
16-
<nav class="navbar navbar-expand-lg navbar-light">
17-
<a class="mfont-weight-normal navbar-brand" href="{{ site.baseurl }}{% link index.html %}">
18-
<img src="{{ site.baseurl }}{% link images/xmonad-logo.png %}" class="logo" alt="xmonad logo" id="xmonadLogo">
19-
</a>
20-
<div class="mr-auto">
21-
<h4>xmonad</h4>
22-
<h5 class="quote">“That was easy. xmonad rocks!”</h5>
23-
</div>
24-
<input type="checkbox" id="navbar-toggle-cbox">
25-
<label for="navbar-toggle-cbox" class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
26-
<span class="sr-only">Toggle navigation</span>
27-
<span class="navbar-toggler-icon"></span>
28-
</label>
29-
<div class="collapse navbar-collapse" id="navbarText">
30-
<ul class="navbar-nav ml-auto">
31-
<li class="nav-item">
32-
<a class="nav-link" href="{{ site.baseurl }}{% link index.html %}">Home</a>
33-
</li>
34-
<li class="nav-item">
35-
<a class="nav-link" href="{{ site.baseurl }}{% link documentation.md %}">Documentation</a>
36-
</li>
37-
<li class="nav-item">
38-
<a class="nav-link" href="{{ site.baseurl }}{% link download.md %}">Download</a>
39-
</li>
40-
<li class="nav-item">
41-
<a class="nav-link" href="{{ site.baseurl }}{% link community.md %}">Community</a>
42-
</li>
43-
<li class="nav-item">
44-
<a class="nav-link" href="{{ site.baseurl }}{% link posts.html %}">News/Blog</a>
45-
</li>
46-
<li class="nav-item">
47-
<a class="nav-link" href="https://github.com/xmonad/xmonad">
48-
<img src="{{ site.baseurl }}{% link images/GitHub-Mark-32px.png %}" class="github-logo" alt="github logo">
49-
</a>
50-
</li>
51-
</ul>
14+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
15+
16+
<nav class="navbar navbar-expand-lg navbar-light mb-2">
17+
<div class="container-fluid">
18+
<a class="navbar-brand" href="{{ site.baseurl }}{% link index.html %}">
19+
<img src="{{ site.baseurl }}{% link images/xmonad-logo.png %}" alt="xmonad logo" id="xmonadLogo">
20+
</a>
21+
<div class="me-auto">
22+
<h4>xmonad</h4>
23+
<h5 class="text-secondary">“That was easy. xmonad rocks!”</h5>
24+
</div>
25+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
26+
<span class="navbar-toggler-icon"></span>
27+
</button>
28+
<div class="collapse navbar-collapse" id="navbarText">
29+
<ul class="navbar-nav ms-auto">
30+
<li class="nav-item">
31+
<a class="nav-link" href="{{ site.baseurl }}{% link index.html %}">Home</a>
32+
</li>
33+
<li class="nav-item">
34+
<a class="nav-link" href="{{ site.baseurl }}{% link documentation.md %}">Documentation</a>
35+
</li>
36+
<li class="nav-item">
37+
<a class="nav-link" href="{{ site.baseurl }}{% link download.md %}">Download</a>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link" href="{{ site.baseurl }}{% link community.md %}">Community</a>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="{{ site.baseurl }}{% link posts.html %}">News/Blog</a>
44+
</li>
45+
<li class="nav-item">
46+
<a class="nav-link" href="https://github.com/xmonad/xmonad">
47+
<img src="{{ site.baseurl }}{% link images/GitHub-Mark-32px.png %}" alt="github logo">
48+
</a>
49+
</li>
50+
</ul>
51+
</div>
5252
</div>
5353
</nav>
54+
5455
{{ content }}
5556
</body>
5657
</html>

‎css/bootstrap.min.css

-1
This file was deleted.

‎css/main.css

+20-63
Original file line numberDiff line numberDiff line change
@@ -2,73 +2,30 @@
22
---
33
@import "{{ site.baseurl }}{% link css/font-raleway.css %}";
44

5-
.navbar.my-bg {
6-
background-color: white;
7-
color: black;
8-
}
9-
#navbarText > ul > li > a {
10-
color: #900;
11-
}
12-
#navbarText > ul > li > a:hover {
13-
color: black;
14-
}
15-
.quote {
16-
color: gray;
17-
}
18-
.navbar {
19-
padding-bottom: 20px;
20-
}
5+
/* color/style overrides */
6+
a { color: #900; text-decoration: none; }
7+
a:hover { color: black; }
8+
#navbarText > ul > li > a { color: #900; }
9+
#navbarText > ul > li > a:hover { color: #000; }
10+
.btn-primary { background-color: #900; border-color: #900; }
11+
.btn-primary:hover { background-color: #000; border-color: #000; }
12+
h1, h2 { font-family: Raleway, var(--bs-font-sans-serif); font-weight: 500; }
13+
code { padding: .2rem .4rem; background-color: #f8f9fa; border-radius: .25rem; }
14+
pre code { padding: 0; background-color: transparent; border-radius: 0; }
15+
16+
/* logo and name */
2117
#xmonadLogo {
22-
display: block;
18+
display: inline-block;
2319
max-width: 35px;
2420
width: auto;
2521
height: auto;
2622
}
27-
.example-img {
28-
width: 70%;
29-
}
30-
.logo {
31-
float: left;
32-
}
33-
.name {
34-
color: darkgrey;
35-
font-size: 80px;
36-
}
37-
.name::first-letter {
38-
color: black;
39-
}
40-
.btn-bd-purple {
41-
background-color: #900;
42-
color: white;
43-
}
44-
a {
45-
color: #900;
46-
}
47-
a:hover {
48-
color: black;
49-
}
50-
h1,h2 {
51-
font-family: Raleway, Helvetica, Arial, sans-serif;
52-
font-weight: 500;
53-
}
54-
55-
.list-col-4>ul {
56-
column-count: 4;
57-
}
23+
.name { color: darkgrey; font-size: 80px; }
24+
.name::first-letter { color: black; }
5825

59-
.list-col-3>ul {
60-
column-count: 3;
61-
}
26+
/* lists columns */
27+
.list-col-3 > ul { column-count: 3; }
28+
.list-col-4 > ul { column-count: 4; }
6229

63-
.container img{
64-
display: block;
65-
margin-left: auto;
66-
margin-right: auto;
67-
}
68-
/* For toggling the menu */
69-
#navbar-toggle-cbox:checked ~ .collapse {
70-
display: block;
71-
}
72-
#navbar-toggle-cbox {
73-
display:none
74-
}
30+
/* center images */
31+
.container img { display: block; margin-left: auto; margin-right: auto; }

‎index.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@
66
<div class="container">
77
<!-- logo-->
88
<div class="row align-items-center">
9-
<div class="col-md-6 text-center text-md-left pr-md-5">
10-
<h1 class="mb-3 bd-text-purple-bright name">XMonad</h1>
9+
<div class="col-md-6 text-center text-md-start pr-md-5">
10+
<h1 class="mb-3 name">XMonad</h1>
1111
<p class="lead">A <a href="https://wiki.archlinux.org/index.php/window_manager">dynamically
1212
tiling X11 window manager</a> that is written and
1313
configured in <a href="https://www.haskell.org/">Haskell</a>.</p>
@@ -17,7 +17,7 @@ <h1 class="mb-3 bd-text-purple-bright name">XMonad</h1>
1717
makes work easier, by automating this.
1818
</p>
1919
<div class="d-flex flex-column flex-md-row lead mb-3">
20-
<p><a href="{{ site.baseurl }}{% link tour.md %}" class="btn btn-lg btn-bd-purple mb-3 mb-md-0 mr-md-3" role="button">
20+
<p><a href="{{ site.baseurl }}{% link tour.md %}" class="btn btn-lg btn-primary mb-3 mb-md-0 mr-md-3" role="button">
2121
Getting Started
2222
</a></p>
2323
<p><a href="{{ site.baseurl }}{% link documentation.md %}" class="btn btn-lg btn-outline-secondary">

0 commit comments

Comments
 (0)