Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Better navbar #7

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
106 changes: 65 additions & 41 deletions site/index.html
Original file line number Diff line number Diff line change
@@ -1,52 +1,76 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="master.css" />
<link rel="icon" href="favicon.png" />
<title>Sway</title>
</head>
<body>
<div class="container">
<nav class="navbar">
<a class="navbar-brand" href="/">Sway</a>
<a class="nav-link" href="https://github.com/swaywm/sway/releases">Releases ≫</a>
<a class="nav-link" href="https://github.com/swaywm/sway">Source Code ≫</a>
<a class="nav-link" href="https://github.com/swaywm/sway/wiki">Wiki ≫</a>
<a class="nav-link" href="https://web.libera.chat/gamja/?channels=#sway">Support Chat ≫</a>
</nav>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="master.css" />
<link rel="icon" href="favicon.png" />
<title>Sway</title>
</head>

<body>
<div class="container">
<nav class="navbar-wrapper">
<div class="logo-hamburger_wrapper">
<li><a class="navbar-brand" href="">SWAY</a></li>
<div class="hamburger" onclick="onClick()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</div>
<ul class="navbar" id="nav">
<li><a href="https://github.com/swaywm/sway/releases">Releases</a></li>
<li><a href="https://github.com/swaywm/sway">Source Code</a></li>
<li><a href="https://github.com/swaywm/sway/wiki">Wiki</a></li>
<li><a href="https://web.libera.chat/gamja/?channels=#sway">Support Chat</a></li>
</ul>
</nav>
<div>
<div class="logo-wrapper">
<img class="logo" src="logo.png" alt="Sway" />
</div>
<div class="main">
<video controls>
<source src="https://swaywm.org/intro.webm" type="video/webm">
<track src="subtitles/intro.vtt" kind="captions" srclang="en" label="English">
<track src="subtitles/intro-it_IT.vtt" kind="captions" srclang="it" label="Italiano">
<p>Your browser does not support HTML5 video.</p>
</video>
<h1><img src="logo.png" id="logo" alt="Sway" /></h1>
<p>
Sway is a tiling Wayland compositor and a drop-in replacement for the
<a href="http://i3wm.org/">i3 window manager</a> for X11. It works
with your existing i3 configuration and supports most of i3's
features, plus a few extras.
</p>
<p>
Sway allows you to arrange your application windows <em>logically</em>,
rather than <em>spatially</em>. Windows are arranged into a grid by
default which maximizes the efficiency of your screen and can be
quickly manipulated using only the keyboard.
</p>
<p>
Sway is documented via manpages. For a list of available manpages, refer
to <code>man -k sway</code>.
</p>
<p>
We also maintain the <a href="https://gitlab.freedesktop.org/wlroots/wlroots">
wlroots</a> project to provide a modular basis for Sway and other
Wayland compositors to build upon, and we <a href="https://gitlab.freedesktop.org/wlroots/wlr-protocols">
publish standards</a> for interoperable Wayland desktops.
</p>
<div class="sway-text">
<p>
Sway is a tiling Wayland compositor and a drop-in replacement for the
<a href="http://i3wm.org/">i3 window manager</a> for X11. It works
with your existing i3 configuration and supports most of i3's
features, plus a few extras.
</p>
<p>
Sway allows you to arrange your application windows <em>logically</em>,
rather than <em>spatially</em>. Windows are arranged into a grid by
default which maximizes the efficiency of your screen and can be
quickly manipulated using only the keyboard.
</p>
<p>
Sway is documented via manpages. For a list of available manpages, refer
to <code>man -k sway</code>.
</p>
<p>
We also maintain the <a href="https://gitlab.freedesktop.org/wlroots/wlroots">
wlroots</a> project to provide a modular basis for Sway and other
Wayland compositors to build upon, and we <a href="https://gitlab.freedesktop.org/wlroots/wlr-protocols">
publish standards</a> for interoperable Wayland desktops.
</p>
</div>
</div>
</div>
</body>
</html>
</div>
<script>
function onClick() {
document.getElementById("nav").classList.
toggle("navbar-clicked");
}
</script>
</body>

</html>
193 changes: 112 additions & 81 deletions site/master.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
* {
box-sizing: inherit;
padding: 0;
margin: 0;
}

html {
Expand All @@ -16,112 +18,93 @@ body {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
font-size: 1rem;
height: 100%;
line-height: 1.5;
margin: 0;
}

.container {
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding-left: 15px;
padding-right: 15px;
position: relative;
width: 960px;
}
.container {}

.navbar-brand {
display: inline-block;
font-size: 1.25rem;
line-height: inherit;
margin-right: 1rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
font-size: 1.5rem;
text-decoration: none;
white-space: nowrap;
color: rgb(255, 255, 255);
}

.navbar-brand,
.navbar-brand:hover {
color: rgba(0, 0, 0, 0.9);
.navbar-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
background-color: black;
padding: 1.5rem;
}

.navbar {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
position: relative;
list-style: none;
}

.row {
display: flex;
flex-wrap: wrap;
}

.nav-link {
color: rgba(0, 0, 0, 0.8);
text-decoration: underline;
display: block;
padding: 0.5em 0.5rem 0.5rem 0;
.line {
height: 4px;
width: 45px;
background-color: white;
margin: 10px;
border-radius: 2px;
}

.nav-link:hover,
.nav-link:focus {
color: rgba(0, 0, 0, 0.7);
.navbar li {
padding: 0 0.5rem;
}

@media (min-width: 992px) {
.navbar {
align-items: center;
flex-direction: row;
}

.left-column {
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
padding-right: 20px;
}
.navbar li a {
color: white;
text-decoration: none;
transition: 0.5s;

.right-column {
flex: 0 0 66.6666666666%;
max-width: 66.6666666666%;
padding-left: 10px;
}
}

.nav-link {
display: block;
padding-left: 0.5rem;
}
.navbar li a:hover,
.navbar li a:focus {
transition: 0.5s;
color: rgb(141, 141, 141);
}

.main a {
color: #013159;
text-decoration: underline;


.main {
display: flex;
align-items: center;
padding: 1rem;
flex-direction: row-reverse;
max-width: 1900px;
margin-left: auto;
margin-right: auto;
}

video {
max-width: 50%;
box-shadow: 0 0 3px 3px #444;
margin-left: 1rem;
float: right;
width: 50%;

}

@media (max-width: 640px) {
video {
float: none;
margin-left: 0;
margin-bottom: 1rem;
max-width: 100%;
}
.logo-wrapper {
display: flex;
justify-content: center;
align-items: center;
}

#logo {
max-width: 300px;
vertical-align: middle;
.logo {
width: 100%;
max-width: 400px;
margin: 1rem;
}

.sway-text {
width: 50%;
padding: 1rem;
color: #292b2c;
}
.sway-text a{
color: white;
font-weight: bold;
}

code {
Expand All @@ -133,13 +116,61 @@ code {
border-radius: 0.25rem;
}

p {
.sway-text p {
margin-top: 0;
margin-bottom: 1rem;
}

h1 {
margin: 0 0 0.5rem 0;
font-size: 2.5rem;
line-height: 1.1;
.logo-hamburger_wrapper {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}

@media (max-width: 900px) {
video {
width: 100%;
}

.navbar-wrapper {
padding: 1rem;
flex-direction: column;
}

.main {
flex-direction: column;
}

.sway-text {
width: 100%;
}

.navbar {
display: none;

}
}

@media (min-width: 900px) {
.hamburger {
display: none;
}
.logo-hamburger_wrapper{
width: min-content;
}
}

.navbar-clicked {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}

.navbar-clicked li {
display: flex;
align-items: center;
height: 100%;
padding: 1rem;
}