Browse Source

updated navbar for better mobile usage

pull/25/head
xnacly 1 year ago
parent
commit
54755ccd6e
  1. 12
      app.html
  2. 62
      assets/css/style.css
  3. 1
      components/hero.vue
  4. 20
      components/navbar.vue
  5. 1
      pages/index.vue

12
app.html

@ -12,4 +12,16 @@
<body {{ BODY_ATTRS }}>
{{ APP }}
</body>
<script>
window.onload = () => {
const navbar = document.getElementsByClassName("navbar_right")[0]
.classList;
document.querySelector("#toggle").addEventListener("click", () => {
if (navbar.contains("hidden")) {
return navbar.remove("hidden");
}
navbar.add("hidden");
});
};
</script>
</html>

62
assets/css/style.css

@ -37,6 +37,10 @@ section {
nav {
width: 100%;
position: sticky;
top: 0;
z-index: 9999;
background-color: var(--background-color);
}
a {
@ -618,6 +622,7 @@ h3 {
align-items: center;
justify-content: center;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color-accent: #111111;
@ -635,7 +640,6 @@ h3 {
#main_header {
font-size: 3rem;
}
section {
text-align: center;
}
@ -689,15 +693,57 @@ h3 {
padding: 0;
padding-left: 0.5rem;
}
.navbar_right {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
#navbar_container {
align-items: flex-end !important;
justify-content: center;
flex-direction: column;
}
#toggle {
display: inline !important;
}
.hidden {
display: none !important;
}
}
@media screen and (max-width: 1000px) {
#back_button {
display: inline;
}
.navbar_right {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.navbar_right a {
margin: 1rem;
}
.navbar_right a:hover {
color: var(--fosscord) !important;
}
#navbar_left {
display: none;
}
}
.navbar_right a:hover,
#navbar_left a:hover {
color: var(--fosscord) !important;
}
.social_link_extra {
display: none;
}
@media screen and (max-width: 800px) {
.left_footer_el_container {
display: none;
}
.social_link_extra {
display: inline;
}
#back_button {
font-weight: 700;
}
#toggle {
display: none;
background-color: var(--background-color);
color: white;
border: none;
}

1
components/hero.vue

@ -1,7 +1,6 @@
<template>
<div>
<div id="hero_container">
<navbar />
<section id="hero" class="container">
<h2 id="main_header">
Fosscord for better and secure communication

20
components/navbar.vue

@ -1,12 +1,24 @@
<template>
<nav class="text-center container" id="nav">
<nav class="text-center" id="nav">
<div id="navbar_container">
<div id="navbar_left">
<NuxtLink to="/" class="link logo color-main">fosscord.com</NuxtLink>
</div>
<button id="toggle">
<svg
xmlns="http://www.w3.org/2000/svg"
height="32px"
viewBox="0 0 24 24"
width="32px"
fill="white"
>
<path d="M0 0h24v24H0z" fill="none" />
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
</svg>
</button>
<div class="navbar_right">
<NuxtLink to="/" class="link mr-15 color-main nav_link" id="back_button"
>Home</NuxtLink
>Fosscord.com</NuxtLink
>
<NuxtLink to="/about/" class="link mr-15 color-main nav_link"
>About</NuxtLink
@ -16,9 +28,9 @@
>Roadmap</NuxtLink
>
<!-- <NuxtLink to="/contributors/" class="link mr-15 color-main nav_link"
<NuxtLink to="/contributors/" class="link mr-15 color-main nav_link"
>Contributors</NuxtLink
> -->
>
<a
href="https://docs.fosscord.com/"

1
pages/index.vue

@ -1,6 +1,7 @@
<template>
<div class="full_size">
<warning />
<navbar />
<hero />
<announcement />
<sections />

Loading…
Cancel
Save