Skip to content

Commit

Permalink
Switch to Bootstrap 5; cleanup CSS
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@liskin
liskin committed Aug 2, 2021
1 parent dcdbff9 commit 6e2050c
Show file tree
Hide file tree
Showing 6 changed files with 65 additions and 114 deletions.
5 changes: 2 additions & 3 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,9 +41,8 @@ The tl;dr is the following:

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

The videos that are linked in `videos.html` are hardcoded in
the `_data/videos.yml`
Expand Down
5 changes: 0 additions & 5 deletions _layouts/container.html
View file

This file was deleted.

79 changes: 40 additions & 39 deletions _layouts/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,55 +2,56 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

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

{% seo %}
{% feed_meta %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="mfont-weight-normal navbar-brand" href="{{ site.baseurl }}{% link index.html %}">
<img src="{{ site.baseurl }}{% link images/xmonad-logo.png %}" class="logo" alt="xmonad logo" id="xmonadLogo">
</a>
<div class="mr-auto">
<h4>xmonad</h4>
<h5 class="quote">“That was easy. xmonad rocks!”</h5>
</div>
<input type="checkbox" id="navbar-toggle-cbox">
<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">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</label>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link index.html %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link documentation.md %}">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link download.md %}">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link community.md %}">Community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link posts.html %}">News/Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/xmonad/xmonad">
<img src="{{ site.baseurl }}{% link images/GitHub-Mark-32px.png %}" class="github-logo" alt="github logo">
</a>
</li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light mb-2">
<div class="container-fluid">
<a class="navbar-brand" href="{{ site.baseurl }}{% link index.html %}">
<img src="{{ site.baseurl }}{% link images/xmonad-logo.png %}" alt="xmonad logo" id="xmonadLogo">
</a>
<div class="me-auto">
<h4>xmonad</h4>
<h5 class="text-secondary">“That was easy. xmonad rocks!”</h5>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link index.html %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link documentation.md %}">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link download.md %}">Download</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link community.md %}">Community</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ site.baseurl }}{% link posts.html %}">News/Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/xmonad/xmonad">
<img src="{{ site.baseurl }}{% link images/GitHub-Mark-32px.png %}" alt="github logo">
</a>
</li>
</ul>
</div>
</div>
</nav>

{{ content }}
</body>
</html>
1 change: 0 additions & 1 deletion css/bootstrap.min.css
View file

This file was deleted.

83 changes: 20 additions & 63 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,73 +2,30 @@
---
@import "{{ site.baseurl }}{% link css/font-raleway.css %}";

.navbar.my-bg {
background-color: white;
color: black;
}
#navbarText > ul > li > a {
color: #900;
}
#navbarText > ul > li > a:hover {
color: black;
}
.quote {
color: gray;
}
.navbar {
padding-bottom: 20px;
}
/* color/style overrides */
a { color: #900; text-decoration: none; }
a:hover { color: black; }
#navbarText > ul > li > a { color: #900; }
#navbarText > ul > li > a:hover { color: #000; }
.btn-primary { background-color: #900; border-color: #900; }
.btn-primary:hover { background-color: #000; border-color: #000; }
h1, h2 { font-family: Raleway, var(--bs-font-sans-serif); font-weight: 500; }
code { padding: .2rem .4rem; background-color: #f8f9fa; border-radius: .25rem; }
pre code { padding: 0; background-color: transparent; border-radius: 0; }

/* logo and name */
#xmonadLogo {
display: block;
display: inline-block;
max-width: 35px;
width: auto;
height: auto;
}
.example-img {
width: 70%;
}
.logo {
float: left;
}
.name {
color: darkgrey;
font-size: 80px;
}
.name::first-letter {
color: black;
}
.btn-bd-purple {
background-color: #900;
color: white;
}
a {
color: #900;
}
a:hover {
color: black;
}
h1,h2 {
font-family: Raleway, Helvetica, Arial, sans-serif;
font-weight: 500;
}

.list-col-4>ul {
column-count: 4;
}
.name { color: darkgrey; font-size: 80px; }
.name::first-letter { color: black; }

.list-col-3>ul {
column-count: 3;
}
/* lists columns */
.list-col-3 > ul { column-count: 3; }
.list-col-4 > ul { column-count: 4; }

.container img{
display: block;
margin-left: auto;
margin-right: auto;
}
/* For toggling the menu */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
#navbar-toggle-cbox {
display:none
}
/* center images */
.container img { display: block; margin-left: auto; margin-right: auto; }
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
<div class="container">
<!-- logo-->
<div class="row align-items-center">
<div class="col-md-6 text-center text-md-left pr-md-5">
<h1 class="mb-3 bd-text-purple-bright name">XMonad</h1>
<div class="col-md-6 text-center text-md-start pr-md-5">
<h1 class="mb-3 name">XMonad</h1>
<p class="lead">A <a href="https://wiki.archlinux.org/index.php/window_manager">dynamically
tiling X11 window manager</a> that is written and
configured in <a href="https://www.haskell.org/">Haskell</a>.</p>
Expand All @@ -17,7 +17,7 @@ <h1 class="mb-3 bd-text-purple-bright name">XMonad</h1>
makes work easier, by automating this.
</p>
<div class="d-flex flex-column flex-md-row lead mb-3">
<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">
<p><a href="{{ site.baseurl }}{% link tour.md %}" class="btn btn-lg btn-primary mb-3 mb-md-0 mr-md-3" role="button">
Getting Started
</a></p>
<p><a href="{{ site.baseurl }}{% link documentation.md %}" class="btn btn-lg btn-outline-secondary">
Expand Down

0 comments on commit 6e2050c

Please sign in to comment.