add nicer layout on the css

thanks @fursona for the headstart on css grid layout
This commit is contained in:
Luna 2019-04-15 04:14:28 -03:00
parent a8b4493d0b
commit 8e880830e8
2 changed files with 82 additions and 30 deletions

View File

@ -1,3 +1,55 @@
#content { :root {
text-align: center; --background-color: #11151c;
--title-color: #ad7a99;
--text-color: #a1a6b4;
--link-color: #b4d2e7;
/* todo */
--anoter: #364156;
}
html, body {
background: var(--background-color);
}
h1, p {
font-size: 20px;
/* ok i dont have verdana lmao help */
font-family: "Verdana", sans-serif;
color: var(--text-color);
}
h1 {
font-size: 30px;
color: var(--title-color);
}
/* main page layout for the description and links */
#page {
display: grid;
grid-template-columns: 1fr 600px 1fr;
grid-gap: 50px;
}
article {
font-size: 13px;
grid-column-start: 2;
grid-column-end: 3;
}
aside {
grid-column-start: 3;
grid-column-end: 4;
}
/* custom color for <a>'s */
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
text-decoration: underline;
} }

View File

@ -3,42 +3,42 @@
<title>{{ inst_name }} - index</title> <title>{{ inst_name }} - index</title>
<link href="css/index.css" rel="stylesheet"> <link href="css/index.css" rel="stylesheet">
</head> </head>
<body> <body>
<main id="content"> <h1 class="title">
<h1> {{ inst_name }} | a Litecord instance
welcome to {{ inst_name }}, a Litecord instance </h1>
</h1>
<p> <div id="page">
Litecord is an open-source reimplementation of the Discord API.
</p>
<p> <article>
Discord frontend modifications being hosted in this instance <p>Litecord is an open-source reimplementation
are not, and will never be, related to the Litecord project. of the Discord API.</p>
</p>
<p> <p>Discord frontend modifications being hosted
By accessing an instance containing such modifications, the instance in this instance are not, and will never be,
is breaking the Discord Terms of Service. Proceed with caution. related to the Litecord project.</p>
</p>
<p> <p>By accessing an instance containing such
It supports nodeinfo, despite not being part modifications, the instance is breaking the Discord
in any federated network. Terms of Service. Proceed with caution.
</p> </p>
<p> <p>It supports nodeinfo, despite not being part
<a href="https://gitlab.com/litecord/litecord"> in any federated network.
</p>
</article>
<aside>
<p><a href="https://gitlab.com/litecord/litecord">
Litecord source code Litecord source code
</a> </a></p>
</p> <p><a href="{{request.protocol}}/nodeinfo/2.1.json">
<p>
<a href="{{request.protocol}}/nodeinfo/2.1.json">
This instance's nodeinfo (general statistics) This instance's nodeinfo (general statistics)
</a> </a></p>
</p> </aside>
</div>
</main>
</body> </body>
</html> </html>