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.

Sign up for GitHub

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

Jump to bottom

Better navbar #7

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Better navbar #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
31a4084
changed navbar
mn-xd Aug 29, 2022
e95dfe5
Fixed video not centered
mn-xd Aug 29, 2022
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
View file
Open in desktop
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
View file
Open in desktop
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;
}