Browse Source

use nuxt layouts, css improvments, scope styles

pull/28/head
Khaleel Gibran 1 year ago
parent
commit
defcfcfc8a
  1. 22
      assets/css/style.css
  2. 13
      components/about.vue
  3. 2
      components/announcement.vue
  4. 24
      components/navbar.vue
  5. 52
      components/sections.vue
  6. 8
      layouts/default.vue
  7. 3
      pages/about.vue
  8. 3
      pages/contributors.vue
  9. 3
      pages/index.vue
  10. 3
      pages/roadmap.vue

22
assets/css/style.css

@ -18,8 +18,8 @@ body {
line-height: 26px;
color: #2e2e2e;
-webkit-font-smoothing: antialiased;
text-align: justify;
text-justify: inter-character;
/* text-align: justify;
text-justify: inter-character; */
background: var(--background-color-accent);
}
@ -433,10 +433,9 @@ h3 {
.description {
font-size: 20px;
line-height: 30px;
line-height: 1.5;
margin-top: 0.25rem;
margin-bottom: 1rem;
font-weight: 600;
color: #5f5f5f !important;
}
@ -485,9 +484,9 @@ h3 {
.fg-fosscord {
color: var(--fosscord);
}
#button_ {
/* #button_ {
margin: 0.5rem;
}
} */
.footer {
display: flex;
align-items: center;
@ -753,3 +752,14 @@ h3 {
color: white;
border: none;
}
/* Nuxt page transitions */
.page-enter-active,
.page-leave-active {
transition: opacity 0.5s;
}
.page-enter,
.page-leave-to {
opacity: 0;
}

13
components/about.vue

@ -97,10 +97,21 @@
</section>
</template>
<style>
<style scoped>
@media screen and (max-width: 600px) {
#about_section {
text-align: left;
}
}
ul {
line-height: 1.5;
margin-top: 20px;
margin-bottom: 20px;
}
ul > li {
margin-top: 10px;
margin-bottom: 10px;
}
</style>

2
components/announcement.vue

@ -8,7 +8,7 @@
>
<h2 class="small">
Thanks for <span class="fg-fosscord">{{ stars }}</span> Github
Stars!
stars!
</h2>
<div class="description">
<div>

24
components/navbar.vue

@ -2,11 +2,12 @@
<nav class="text-center" id="nav">
<div id="navbar_container">
<div id="navbar_left">
<NuxtLink to="/" class="link logo color-main">fosscord.com</NuxtLink>
<NuxtLink to="/" class="link logo color-main"
><img src="https://raw.githubusercontent.com/fosscord/fosscord/master/assets/logo/logo.svg" height="30px" width="30px" class="fosscord-logo" /> &nbsp;<span class="fosscord-logo-text">Fosscord</span></NuxtLink>
</div>
<div id="toggle_container">
<NuxtLink to="/" class="link logo color-main" id="back_button"
>fosscord.com</NuxtLink
>Fosscord</NuxtLink
>
<button id="toggle" @click="showMobileNavbar = !showMobileNavbar">
<svg
@ -48,7 +49,10 @@
>
-->
</div>
<div class="navbar_right mobile_navbar" v-show="this.showMobileNavbar === true">
<div
class="navbar_right mobile_navbar"
v-show="this.showMobileNavbar === true"
>
<NuxtLink to="/about/" class="link mr-15 color-main nav_link"
>About</NuxtLink
>
@ -84,9 +88,9 @@ export default {
data() {
return {
showMobileNavbar: false,
}
}
}
};
},
};
</script>
<style>
@ -107,6 +111,14 @@ export default {
color: #2e2e2e;
} */
.fosscord-logo {
vertical-align: middle;
}
.fosscord-logo-text {
vertical-align: middle;
}
@media (prefers-color-scheme: dark) {
#nav .link {
color: white;

52
components/sections.vue

@ -3,24 +3,22 @@
<div class="container px-xl-0 container-feature">
<div class="row" id="concept_main_container">
<div class="col-lg-6 col-md-10" id="concept_second_container">
<h2 class="small">
About Fosscord
</h2>
<h2 class="small">About Fosscord</h2>
<div class="mt-25 mb-35 f-22 color-heading text-adaptive description">
Fosscord is Free Open Source Software compatible to
<a href="https://discord.com">Discord</a>. It's a Chat, Voice and
Video platform similar to Slack, Rocket.chat and Discord-compatible.
Fosscord is a free and open source software compatible with
<a href="https://discord.com">Discord</a>. It's a chat, voice and
video platform similar to Slack and Rocket.chat.
</div>
<div class="mb-30 mb-md-0 d-sm-flex align-items-center buttons">
<a
href="https://docs.fosscord.com/"
class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1"
id="button_"
id="button-docs"
>Documentation</a
>
<NuxtLink
to="/about/"
id="button_"
id="button_ button-readMore"
class="btn bg-fosscord mb-20 mb-sm-0 mr-15 action-1"
>Read More</NuxtLink
>
@ -47,10 +45,11 @@
<h2 class="small">Contribute now!</h2>
<div class="mt-25 mb-35 f-22 color-heading text-adaptive description">
Currently fosscord is still in development and we can't say when we
will be able to release fosscord completely. In total
will be able to release fosscord completely. In total,
<span class="fg-fosscord">20</span> developers are working on this
project. Feel free to check out the documentation or the GitHub
repositories.
project. Feel free to check out the
<a href="https://docs.fosscord.org">documentation</a> or the
<a href="https://github.com/fosscord">GitHub repositories</a>.
</div>
<a
href="https://github.com/fosscord/fosscord/issues/10"
@ -154,7 +153,7 @@
with Fosscord as long as you publish all changes under the
<a href="https://github.com/fosscord/fosscord/blob/master/LICENSE"
>GNU Affero General Public License v3.0</a
>
>.
</div>
<!-- <div class="mb-30 mb-md-0 d-sm-flex align-items-center buttons">
<NuxtLink
@ -341,6 +340,7 @@
<h2 class="small">FAQ</h2>
<div class="mt-25 mb-35 f-22 color-heading text-adaptive description">
<h4 class="white">Why did you develop Fosscord?</h4>
<br />
Personal opinion:
<ul>
<li>
@ -366,7 +366,6 @@
technologies
</li>
</ul>
<h4 class="white">How do you make money?</h4>
<ul>
<li>
@ -395,9 +394,9 @@
</section>
</template>
<style>
<style scoped>
.container-feature {
margin: 10rem auto;
margin: 7rem auto;
}
#contribute_text {
@ -416,10 +415,29 @@
#faq {
text-align: justify;
}
#button-docs {
margin-bottom: 0.5rem;
}
}
.buttons {
/* .buttons {
display: flex;
justify-content: space-evenly;
justify-content: right;
} */
#button-docs {
margin-right: 0.5rem;
}
ul {
line-height: 1.5;
margin-top: 20px;
margin-bottom: 20px;
}
ul > li {
margin-top: 10px;
margin-bottom: 10px;
}
</style>

8
layouts/default.vue

@ -0,0 +1,8 @@
<template>
<div class="app">
<warning />
<navbar />
<Nuxt />
<fossfooter />
</div>
</template>

3
pages/about.vue

@ -1,9 +1,6 @@
<template>
<div>
<warning />
<navbar />
<about />
<fossfooter />
</div>
</template>
<script></script>

3
pages/contributors.vue

@ -1,9 +1,6 @@
<template>
<div>
<warning />
<navbar />
<founders />
<contributors />
<fossfooter />
</div>
</template>

3
pages/index.vue

@ -1,12 +1,9 @@
<template>
<div class="full_size">
<warning />
<navbar />
<hero />
<announcement />
<sections />
<!--<randomfacts />-->
<fossfooter />
</div>
</template>

3
pages/roadmap.vue

@ -1,12 +1,9 @@
<template>
<div>
<warning />
<navbar />
<div class="roadmap_container">
<roadmapapi />
<roadmapclient />
<roadmapmedia />
</div>
<fossfooter />
</div>
</template>
Loading…
Cancel
Save