From 8e880830e802a6c6c6d0743913bf3aea43f6a571 Mon Sep 17 00:00:00 2001 From: Luna Date: Mon, 15 Apr 2019 04:14:28 -0300 Subject: [PATCH] add nicer layout on the css thanks @fursona for the headstart on css grid layout --- static/css/index.css | 56 ++++++++++++++++++++++++++++++++++++++++++-- static/index.html | 56 ++++++++++++++++++++++---------------------- 2 files changed, 82 insertions(+), 30 deletions(-) diff --git a/static/css/index.css b/static/css/index.css index 913110b..e9c8a72 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,3 +1,55 @@ -#content { - text-align: center; +:root { + --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 's */ +a { + color: var(--link-color); + text-decoration: none; +} + +a:hover { + text-decoration: underline; } diff --git a/static/index.html b/static/index.html index 15bb124..6457b9c 100644 --- a/static/index.html +++ b/static/index.html @@ -3,42 +3,42 @@ {{ inst_name }} - index + -
-

- welcome to {{ inst_name }}, a Litecord instance -

+

+ {{ inst_name }} | a Litecord instance +

-

- Litecord is an open-source reimplementation of the Discord API. -

+
-

- Discord frontend modifications being hosted in this instance - are not, and will never be, related to the Litecord project. -

+
+

Litecord is an open-source reimplementation + of the Discord API.

-

- By accessing an instance containing such modifications, the instance - is breaking the Discord Terms of Service. Proceed with caution. -

+

Discord frontend modifications being hosted + in this instance are not, and will never be, + related to the Litecord project.

-

- It supports nodeinfo, despite not being part - in any federated network. -

+

By accessing an instance containing such + modifications, the instance is breaking the Discord + Terms of Service. Proceed with caution. +

-

- +

It supports nodeinfo, despite not being part + in any federated network. +

+
+ + + +
-