New error page, add legal pages, responsiveness for home page

This commit is contained in:
Jai A
2020-11-02 22:04:40 -07:00
parent b7de47b6fb
commit 4b0b8d4de2
11 changed files with 587 additions and 119 deletions

View File

@@ -32,7 +32,11 @@ export default {
</script>
<style scoped>
[data-ea-type='text'] {
min-height: 70px;
}
[data-ea-type='image'] {
margin: auto 10px;
min-height: 260px;
}
</style>

View File

@@ -243,7 +243,7 @@ export default {
.mod-info {
top: 1rem;
height: calc(100vh - 3rem);
max-height: calc(100vh - 3rem);
position: sticky;
min-width: 270px;
max-width: 270px;

View File

@@ -55,7 +55,7 @@
<h3>Community</h3>
<section>
<nuxt-link to="/support">
<nuxt-link to="/documentation">
<svg
viewBox="0 0 24 24"
fill="none"
@@ -71,7 +71,7 @@
<line x1="14.83" y1="9.17" x2="18.36" y2="5.64" />
<line x1="4.93" y1="19.07" x2="9.17" y2="14.83" />
</svg>
<span>Support</span>
<span>Documentation</span>
</nuxt-link>
<nuxt-link to="/guides">
<svg
@@ -222,6 +222,10 @@
</nav>
</aside>
<main>
<div class="alpha-alert">
Modrinth is in early alpha. You can join our
<a href="https://discord.gg/gFRbNQ2">discord</a> for updates!
</div>
<nuxt />
</main>
</div>
@@ -600,6 +604,16 @@ export default {
}
}
.alpha-alert {
text-align: center;
padding: 1em;
background-color: var(--color-grey-1);
a {
color: var(--color-grey-3);
}
}
.disclosure {
margin-top: auto;
max-width: 250px;

27
layouts/error.vue Normal file
View File

@@ -0,0 +1,27 @@
<template>
<div class="main">
<h1>{{ error.message }}</h1>
<NuxtLink to="/">
An error occurred! Click this text to go back home, and find your way
back!
</NuxtLink>
</div>
</template>
<script>
export default {
props: ['error'],
layout: 'home',
created() {
console.log(this.error)
},
}
</script>
<style lang="scss" scoped>
.main {
margin: 0 auto;
max-width: 800px;
text-align: center;
}
</style>

144
layouts/home.vue Normal file
View File

@@ -0,0 +1,144 @@
<template>
<div>
<header class="columns">
<nuxt-link to="/">
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
</nuxt-link>
<div class="links">
<nuxt-link to="/">Home</nuxt-link>
<nuxt-link to="/mods">Mods</nuxt-link>
<nuxt-link to="/modpacks">Packs</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<a href="https://discord.gg/gFRbNQ2">Discord</a>
</div>
</header>
<nuxt />
<footer>
<div class="logo-wrapper columns">
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
<p class="name">modrinth</p>
</div>
<p class="copyright">© Guavy LLC</p>
<div class="column">
<h4 class="pages">Pages</h4>
<nuxt-link to="/">Home</nuxt-link>
<nuxt-link to="/mods">Mods</nuxt-link>
<nuxt-link to="/packs">Packs</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<nuxt-link to="/guides">Guides</nuxt-link>
</div>
<div class="column">
<h4 class="developers">Developers</h4>
<nuxt-link to="/developers">Documentation</nuxt-link>
<a href="https://github.com/modrinth">Open Source</a>
<a href="https://github.com/modrinth/knossos/issues">Issues</a>
</div>
<div class="column legal-wrapper">
<h4 class="legal">Legal</h4>
<nuxt-link to="/tos">TOS</nuxt-link>
<nuxt-link to="/privacy">Privacy Policy</nuxt-link>
</div>
</footer>
</div>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
header {
width: 100%;
.logo {
margin: 25px 50px;
height: 100px;
}
.links {
margin: auto 0;
a {
text-transform: uppercase;
font-weight: bold;
margin: 0 25px;
&:hover,
&:focus {
background-color: var(--color-grey-1);
color: var(--color-text);
}
&.nuxt-link-exact-active {
border-bottom: 3px var(--color-brand) solid;
}
}
}
}
footer {
justify-content: center;
margin-top: 250px;
margin-bottom: 100px;
display: grid;
column-gap: 50px;
grid-template-columns: 175px 120px 120px 175px;
grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
.logo-wrapper {
grid-column-start: 1;
grid-row-start: 1;
.logo {
width: 30px;
}
.name {
place-self: center;
margin: 0;
font-size: 20px;
font-family: 'Montserrat Alternates', serif;
}
}
.copyright {
grid-column-start: 1;
grid-row-start: 10;
color: var(--color-grey-6);
}
h4 {
font-weight: 600;
margin: 0 0 20px;
grid-row-start: 1;
}
.column {
display: grid;
row-gap: 5px;
grid-template-rows: 40px 20px 20px 20px 20px 20px 20px 20px;
a {
&:hover,
&:focus {
color: var(--color-grey-5);
}
}
}
}
@media screen and (max-width: 550px) {
footer {
column-gap: 10px;
margin-left: 300px !important;
}
.legal-wrapper {
display: none !important;
}
}
@media screen and (max-width: 800px) {
footer {
margin-left: 200px;
}
.copyright,
.logo-wrapper {
display: none;
}
}
</style>

View File

@@ -1,9 +0,0 @@
<template>
<nuxt />
</template>
<script>
export default {}
</script>
<style></style>

34
pages/about.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="main">
<h1>About</h1>
<p>
Founded in 2020, Modrinth was created to provide modders with an open and
intuitive platform to publish their mods on.
</p>
<p>
Our primary goal is to be as open as possible, with all our code being
Open Source, while giving back to the modding community as much as
possible.
</p>
<p>
While we still are in early alpha, we hope we can soon be a major modding
platform for all modders :)
</p>
</div>
</template>
<script>
export default {
auth: false,
layout: 'home',
}
</script>
<style lang="scss" scoped>
.main {
margin: 0 auto;
max-width: 800px;
}
</style>

View File

@@ -0,0 +1,19 @@
<template>
<div class="content">
<h2>Documentation</h2>
<p>Coming Soon!</p>
</div>
</template>
<script>
export default {
auth: false,
}
</script>
<style lang="scss" scoped>
.main {
margin: 0 auto;
max-width: 800px;
}
</style>

View File

@@ -1,16 +1,5 @@
<template>
<div>
<header class="columns">
<nuxt-link to="/">
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
</nuxt-link>
<div class="links">
<nuxt-link to="/">Home</nuxt-link>
<nuxt-link to="/mods">Mods</nuxt-link>
<nuxt-link to="/modpacks">Packs</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
</div>
</header>
<div class="main-hero columns">
<div class="left">
<h1 class="typewriter">{{ currentText }}</h1>
@@ -161,41 +150,13 @@
<img src="~/assets/images/api.gif" alt="api" loading="lazy" />
</div>
</div>
<footer>
<div class="logo-wrapper columns">
<img class="logo" src="~/assets/images/logo.svg" alt="logo" />
<p class="name">modrinth</p>
</div>
<p class="copyright">© Guavy LLC</p>
<div class="column">
<h4 class="pages">Pages</h4>
<nuxt-link to="/">Home</nuxt-link>
<nuxt-link to="/mods">Mods</nuxt-link>
<nuxt-link to="/packs">Packs</nuxt-link>
<nuxt-link to="/about">About</nuxt-link>
<nuxt-link to="/support">Support</nuxt-link>
<nuxt-link to="/guides">Guides</nuxt-link>
</div>
<div class="column">
<h4 class="developers">Developers</h4>
<nuxt-link to="/developers">Documentation</nuxt-link>
<a href="https://github.com/modrinth">Open Source</a>
<a href="https://github.com/modrinth/knossos/issues">Issues</a>
</div>
<div class="column">
<h4 class="legal">Legal</h4>
<nuxt-link to="/tos">Terms of Service</nuxt-link>
<nuxt-link to="/privacy">Privacy Policy</nuxt-link>
<nuxt-link to="/content">Content Policy</nuxt-link>
</div>
</footer>
</div>
</template>
<script>
export default {
auth: false,
layout: 'none',
layout: 'home',
data() {
return {
currentText: 'Open source',
@@ -237,35 +198,6 @@ export default {
width: 50%;
}
header {
width: 100%;
.logo {
margin: 25px 50px;
height: 100px;
}
.links {
margin: auto 0;
a {
text-transform: uppercase;
font-weight: bold;
margin: 0 25px;
&:hover,
&:focus {
background-color: var(--color-grey-1);
color: var(--color-text);
}
&.nuxt-link-active {
border-bottom: 3px var(--color-brand) solid;
}
}
}
}
.main-hero {
height: 600px;
@@ -389,53 +321,43 @@ header {
}
}
img {
color: var(--color-text);
align-self: flex-start;
}
}
footer {
justify-content: center;
margin-top: 250px;
margin-bottom: 100px;
display: grid;
column-gap: 50px;
grid-template-columns: 175px 120px 120px 175px;
grid-template-rows: 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px 20px;
@media screen and (max-width: 500px) {
.hero {
margin-top: 0 !important;
}
}
.logo-wrapper {
grid-column-start: 1;
grid-row-start: 1;
@media screen and (max-width: 1300px) {
.workflow {
display: none;
}
.logo {
width: 30px;
}
.name {
place-self: center;
margin: 0;
font-size: 20px;
font-family: 'Montserrat Alternates', serif;
}
.right {
display: none;
}
.copyright {
grid-column-start: 1;
grid-row-start: 10;
color: var(--color-grey-6);
.left {
padding-left: 0 !important;
text-align: center;
width: 100%;
}
h4 {
font-weight: 600;
margin: 0 0 20px;
grid-row-start: 1;
.hero {
margin-top: 100px;
text-align: center;
margin-left: 0;
width: 100%;
}
.column {
display: grid;
row-gap: 5px;
grid-template-rows: 40px 20px 20px 20px 20px 20px 20px 20px;
a {
&:hover,
&:focus {
color: var(--color-grey-5);
}
}
}
@media screen and (min-width: 1300px) and (max-width: 1500px) {
.hero {
margin-left: 10%;
}
}
</style>

152
pages/privacy.vue Normal file
View File

@@ -0,0 +1,152 @@
<template>
<div class="main">
<h1>Privacy Policy</h1>
<p>
At Modrinth, accessible from https://modrinth.com, one of our main
priorities is the privacy of our visitors. This Privacy Policy document
contains types of information that is collected and recorded by Modrinth
and how we use it.
</p>
<p>
If you have additional questions or require more information about our
Privacy Policy, do not hesitate to contact us.
</p>
<h2>Log Files</h2>
<p>
Modrinth follows a standard procedure of using log files. These files log
visitors when they visit websites. All hosting companies do this and a
part of hosting services' analytics. The information collected by log
files include internet protocol (IP) addresses, browser type, Internet
Service Provider (ISP), date and time stamp, referring/exit pages, and
possibly the number of clicks. These are not linked to any information
that is personally identifiable. The purpose of the information is for
analyzing trends, administering the site, tracking users' movement on the
website, and gathering demographic information.
</p>
<h2>Cookies and Web Beacons</h2>
<p>
Like any other website, Modrinth uses 'cookies'. These cookies are used to
store information including visitors' preferences, and the pages on the
website that the visitor accessed or visited. The information is used to
optimize the users' experience by customizing our web page content based
on visitors' browser type and/or other information.
</p>
<p>
For more general information on cookies, please read
<a href="https://www.privacypolicies.com/blog/cookies/"
>"What Are Cookies"</a
>.
</p>
<h2>Our Advertising Partners</h2>
<p>
Some of advertisers on our site may use cookies and web beacons. Our
advertising partners are listed below. Each of our advertising partners
has their own Privacy Policy for their policies on user data. For easier
access, we hyperlinked to their Privacy Policies below.
</p>
<ul>
<li>
<p>EthicalAds</p>
<p>
<a href="https://www.ethicalads.io/privacy-policy/"
>https://www.ethicalads.io/privacy-policy/</a
>
</p>
</li>
</ul>
<h2>Privacy Policies</h2>
<P
>You may consult this list to find the Privacy Policy for each of the
advertising partners of Modrinth.</P
>
<p>
Third-party ad servers or ad networks uses technologies like cookies,
JavaScript, or Web Beacons that are used in their respective
advertisements and links that appear on Modrinth, which are sent directly
to users' browser. They automatically receive your IP address when this
occurs. These technologies are used to measure the effectiveness of their
advertising campaigns and/or to personalize the advertising content that
you see on websites that you visit.
</p>
<p>
Note that Modrinth has no access to or control over these cookies that are
used by third-party advertisers.
</p>
<h2>Third Party Privacy Policies</h2>
<p>
Modrinth's Privacy Policy does not apply to other advertisers or websites.
Thus, we are advising you to consult the respective Privacy Policies of
these third-party ad servers for more detailed information. It may include
their practices and instructions about how to opt-out of certain options.
</p>
<p>
You can choose to disable cookies through your individual browser options.
To know more detailed information about cookie management with specific
web browsers, it can be found at the browsers' respective websites. What
Are Cookies?
</p>
<h2>Children's Information</h2>
<p>
Another part of our priority is adding protection for children while using
the internet. We encourage parents and guardians to observe, participate
in, and/or monitor and guide their online activity.
</p>
<p>
Modrinth does not knowingly collect any Personal Identifiable Information
from children under the age of 13. If you think that your child provided
this kind of information on our website, we strongly encourage you to
contact us immediately and we will do our best efforts to promptly remove
such information from our records.
</p>
<h2>Online Privacy Policy Only</h2>
<p>
This Privacy Policy applies only to our online activities and is valid for
visitors to our website with regards to the information that they shared
and/or collect in Modrinth. This policy is not applicable to any
information collected offline or via channels other than this website.
</p>
<h2>Consent</h2>
<p>
By using our website, you hereby consent to our Privacy Policy and agree
to its Terms and Conditions.
</p>
</div>
</template>
<script>
export default {
auth: false,
layout: 'home',
}
</script>
<style lang="scss" scoped>
.main {
margin: 0 auto;
max-width: 800px;
}
</style>

161
pages/tos.vue Normal file
View File

@@ -0,0 +1,161 @@
<template>
<div class="main">
<h1>Terms and Conditions</h1>
<h2>1. Terms</h2>
<p>
By accessing this Website, accessible from https://modrinth.com, you are
agreeing to be bound by these Website Terms and Conditions of Use and
agree that you are responsible for the agreement with any applicable local
laws. If you disagree with any of these terms, you are prohibited from
accessing this site. The materials contained in this Website are protected
by copyright and trade mark law.
</p>
<h2>2. Use License</h2>
<p>
Permission is granted to temporarily download one copy of the materials on
Guavy LLC's Website for personal, non-commercial transitory viewing only.
This is the grant of a license, not a transfer of title, and under this
license you may not:
</p>
<ul>
<li>modify or copy the materials;</li>
<li>
use the materials for any commercial purpose or for any public display;
</li>
<li>
attempt to reverse engineer any software contained on Guavy LLC's
Website;
</li>
<li>
remove any copyright or other proprietary notations from the materials;
or
</li>
<li>
transferring the materials to another person or "mirror" the materials
on any other server.
</li>
</ul>
<p>
This will let Guavy LLC to terminate upon violations of any of these
restrictions. Upon termination, your viewing right will also be terminated
and you should destroy any downloaded materials in your possession whether
it is printed or electronic format.
</p>
<h2>3. Disclaimer</h2>
<p>
All the materials on Guavy LLCs Website are provided "as is". Guavy LLC
makes no warranties, may it be expressed or implied, therefore negates all
other warranties. Furthermore, Guavy LLC does not make any representations
concerning the accuracy or reliability of the use of the materials on its
Website or otherwise relating to such materials or any sites linked to
this Website.
</p>
<h2>4. Limitations</h2>
<p>
Guavy LLC or its suppliers will not be hold accountable for any damages
that will arise with the use or inability to use the materials on Guavy
LLCs Website, even if Guavy LLC or an authorize representative of this
Website has been notified, orally or written, of the possibility of such
damage. Some jurisdiction does not allow limitations on implied warranties
or limitations of liability for incidental damages, these limitations may
not apply to you.
</p>
<h2>5. Revisions and Errata</h2>
<p>
The materials appearing on Guavy LLCs Website may include technical,
typographical, or photographic errors. Guavy LLC will not promise that any
of the materials in this Website are accurate, complete, or current. Guavy
LLC may change the materials contained on its Website at any time without
notice. Guavy LLC does not make any commitment to update the materials.
</p>
<h2>6. Links</h2>
<p>
Guavy LLC has not reviewed all of the sites linked to its Website and is
not responsible for the contents of any such linked site. The presence of
any link does not imply endorsement by Guavy LLC of the site. The use of
any linked website is at the users own risk.
</p>
<h2>7. Site Terms of Use Modifications</h2>
<p>
Guavy LLC may revise these Terms of Use for its Website at any time
without prior notice. By using this Website, you are agreeing to be bound
by the current version of these Terms and Conditions of Use.
</p>
<h2>8. Your Privacy</h2>
<p>Please read our <nuxt-link to="/privacy"> Privacy Policy</nuxt-link>.</p>
<h2>9. Governing Law</h2>
<p>
Any claim related to Guavy LLC's Website shall be governed by the laws of
us without regards to its conflict of law provisions.
</p>
<h2>10. Content</h2>
<p>
When you upload text, software, mods, scripts, graphics, photos, audio,
videos, links, interactive features and other materials that may be viewed
on, or accessed through Modrinth, we refer to it as “Content”.
</p>
<ul>
<li>
You must own or have the necessary licenses, rights, consents, and
permissions to store, share or distribute the Content that is uploaded
under your Modrinth account.
</li>
<li>
You are responsible for all activity and Content that is uploaded under
your Modrinth account.
</li>
<li>
You must not transmit any viruses, worms, malware, or any other code of
a destructive nature through Modrinth.
</li>
<li>
You retain all of your ownership rights to your Content. We do not claim
any ownership in or to any of your Content.
</li>
<li>
To enable us to provide the services of Modrinth, you hereby grant us a
worldwide, non-exclusive, royalty-free, and unrestricted license to use,
reproduce, distribute copies, prepare derivative works of, or display
Content in connection with Modrinth in any medium and for any purpose
(including commercial purposes), which is irrevocable.
</li>
</ul>
</div>
</template>
<script>
export default {
auth: false,
layout: 'home',
}
</script>
<style lang="scss" scoped>
.main {
margin: 0 auto;
max-width: 800px;
}
</style>