aziz/AstralRinth
0
0
Fork 0
forked from xxxOFFxxx/AstralRinth
Code Pull Requests Activity

Fix Mod page styling

Browse Source
This commit is contained in:
Jai A
2020-05-19 22:39:05 -07:00
parent 251f1941a9
commit 1b1c15694a
7 changed files with 536 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/main.css
View File

@@ -27,7 +27,7 @@ body {
.site-header {
z-index: 2;
position: sticky;
background-color: black;
background-color: #0b75d8;
top: 0;
width: 100%;
height: 75px;

137
static/css/mod.css
View File

@@ -1,9 +1,59 @@
.main-content {
width: 80%;
margin: 30px 20px 0 auto;
width: 45%;
display: flex;
flex-direction: column;
}
.mod-navigation {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.mod-navigation p {
transform:scale(1,2);
}
.navigation-pointer {
color: gray;
background-color: #dfdfdf;
padding: 10px;
border-radius: 5px;
text-decoration: none;
margin-right: 10px;
font-weight: bold;
}
.navigation-text {
color: #0b75d8;
background-color: #c9def2;
padding: 10px;
border-radius: 5px;
text-decoration: none;
margin: 0 10px;
font-weight: bold;
}
.navigation-follow {
display: flex;
flex-direction: row;
align-items: center;
color: white;
background-color: #0b75d8;
text-decoration: none;
font-weight: bold;
padding: 10px;
margin-left: auto;
border-radius: 5px;
}
.navigation-follow img {
height: 15px;
margin-right: 10px;
}
.mod-header {
display: flex;
flex-direction: row;
@@ -12,8 +62,7 @@
width: 100%;
height: 100px;
background-color: white;
margin: 0;
border-bottom: 1px solid darkgrey;
margin: 0 0 20px 0;
}
.mod-icon {
@@ -25,86 +74,84 @@
.mod-title {
display: flex;
flex-direction: column;
margin: 15px 0;
}
.mod-title-text {
margin: 0;
padding: 0;
}
.mod-buttons {
display: flex;
flex-direction: column;
margin: 10px 30px 10px auto;
.mod-title h2 {
font-size: 24px;
}
.mod-button {
margin: 5px 0;
display: flex;
flex-direction: row;
text-decoration: none;
width: 120px;
height: 30px;
}
.mod-button img {
margin: 5px 10px;
width: 20px;
}
.mod-button p {
margin: auto;
font-weight: bold;
}
.download-button {
background-color: #69E781;
color: white;
}
.follow-button {
background-color: red;
color: white;
.mod-title p {
font-size: 18px;
}
.mod-bar {
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
background-color: white;
border-bottom: 1px solid darkgrey;
}
.mod-bar a {
margin: 5px 10px;
margin: 5px 10px 0 0;
padding: 5px;
color: gray;
background-color: #fefefe;
border-radius: 5px 5px 0 0;
border: 1px solid darkgrey;
border-bottom: none;
}
.mod-bar-active {
background-color: white !important;
}
.mod-description {
width: 100%;
background-color: white;
border-radius: 0 5px 5px 5px;
border: 1px solid darkgrey;
border-top: none;
}
.mod-description div {
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 10px;
}
.mod-description img {
max-width: 1000px;
}
.sidebar {
display: flex;
flex-direction: column;
align-items: center;
margin: 30px auto 0 0;
width: 20%;
}
.search-bar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
margin-top: 5px;
margin-bottom: 25px;
padding: 10px 0;
}
.mod-sidebar {
display: flex;
flex-direction: column;
align-items: center;
border-left: 1px solid darkgrey;
width: 20%;
min-height: 100vh;
width: 100%;
height: auto !important;
background-color: white;
}
@@ -186,7 +233,7 @@
}
.sidebar-line {
height: 2px;
height: 1px;
width: 80%;
background-color: darkgrey;
margin: 0 auto;

349
static/css/normalize.css vendored Normal file
View File

@@ -0,0 +1,349 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 2px; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

10
static/images/icon/download-alt.svg
View File

@@ -1,10 +0,0 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px" class="hovered-paths"><g><g>
<g>
<path d="M472,313v139c0,11.028-8.972,20-20,20H60c-11.028,0-20-8.972-20-20V313H0v139c0,33.084,26.916,60,60,60h392 c33.084,0,60-26.916,60-60V313H472z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
</g>
</g><g>
<g>
<polygon points="352,235.716 276,311.716 276,0 236,0 236,311.716 160,235.716 131.716,264 256,388.284 380.284,264 " data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
</g>
</g></g> </svg>
Side by Side

Before

Width:  |  Height:  |  Size: 782 B

2
static/images/icon/follow.svg Normal file
View File

@@ -0,0 +1,2 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" height="512px" viewBox="0 -20 464 464" width="512px" class=""><g><path d="m340 0c-44.773438.00390625-86.066406 24.164062-108 63.199219-21.933594-39.035157-63.226562-63.19531275-108-63.199219-68.480469 0-124 63.519531-124 132 0 172 232 292 232 292s232-120 232-292c0-68.480469-55.519531-132-124-132zm0 0" fill="#ff6243" data-original="#FF6243" class="" style="fill:#FFFFFF" data-old_color="#ff6243"/><path d="m32 132c0-63.359375 47.550781-122.359375 108.894531-130.847656-5.597656-.769532-11.242187-1.15625025-16.894531-1.152344-68.480469 0-124 63.519531-124 132 0 172 232 292 232 292s6-3.113281 16-8.992188c-52.414062-30.824218-216-138.558593-216-283.007812zm0 0" fill="#ff5023" data-original="#FF5023" class="active-path" style="fill:#FFFFFF" data-old_color="#ff5023"/></g> </svg>
Side by Side

After

Width:  |  Height:  |  Size: 843 B

3
static/images/icon/information.svg
View File

@@ -1,2 +1 @@
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" enable-background="new 0 0 524.235 524.235" height="512px" viewBox="0 0 524.235 524.235" width="512px" class=""><g><path d="m262.118 0c-144.53 0-262.118 117.588-262.118 262.118s117.588 262.118 262.118 262.118 262.118-117.588 262.118-262.118-117.589-262.118-262.118-262.118zm17.05 417.639c-12.453 2.076-37.232 7.261-49.815 8.303-10.651.882-20.702-5.215-26.829-13.967-6.143-8.751-7.615-19.95-3.968-29.997l49.547-136.242h-51.515c-.044-28.389 21.25-49.263 48.485-57.274 12.997-3.824 37.212-9.057 49.809-8.255 7.547.48 20.702 5.215 26.829 13.967 6.143 8.751 7.615 19.95 3.968 29.997l-49.547 136.242h51.499c.01 28.356-20.49 52.564-48.463 57.226zm15.714-253.815c-18.096 0-32.765-14.671-32.765-32.765 0-18.096 14.669-32.765 32.765-32.765s32.765 14.669 32.765 32.765c0 18.095-14.668 32.765-32.765 32.765z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFCE00"/></g> </svg>
<svg id="_x31__x2C_5" enable-background="new 0 0 24 24" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m13.861 3.609h-6.144-4.578c-1.417 0-2.564 1.147-2.564 2.564v9.081 2.573c0 1.417 1.147 2.564 2.564 2.564h6.144 4.578c1.417 0 2.564-1.147 2.564-2.564v-9.081-2.573c0-1.417-1.147-2.564-2.564-2.564z" fill="#2196f3"/><path d="m11.875 2.125h-.99c-.297-1.035-1.251-1.8-2.385-1.8s-2.088.765-2.385 1.8h-.99c-.369 0-.675.306-.675.675v1.8c0 .864.711 1.575 1.575 1.575h4.95c.864 0 1.575-.711 1.575-1.575v-1.8c0-.369-.306-.675-.675-.675z" fill="#1976d2"/><path d="m17.5 22.968c-3.015 0-5.467-2.453-5.467-5.468s2.453-5.467 5.467-5.467 5.468 2.453 5.468 5.467-2.453 5.468-5.468 5.468z" fill="#4caf50"/><path d="m17.5 24c-3.584 0-6.5-2.916-6.5-6.5s2.916-6.5 6.5-6.5 6.5 2.916 6.5 6.5-2.916 6.5-6.5 6.5zm0-11.5c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z"/><path d="m17.5 21c-.414 0-.75-.336-.75-.75v-3.5c0-.414.336-.75.75-.75s.75.336.75.75v3.5c0 .414-.336.75-.75.75z"/><circle cx="17.5" cy="14.75" r=".75"/><path d="m9.19 21h-6.44c-1.516 0-2.75-1.233-2.75-2.75v-12.5c0-1.517 1.234-2.75 2.75-2.75h1.88c.414 0 .75.336.75.75s-.336.75-.75.75h-1.88c-.689 0-1.25.561-1.25 1.25v12.5c0 .689.561 1.25 1.25 1.25h6.44c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m16.25 9.59c-.414 0-.75-.336-.75-.75v-3.09c0-.689-.561-1.25-1.25-1.25h-1.87c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h1.87c1.516 0 2.75 1.233 2.75 2.75v3.09c0 .414-.336.75-.75.75z"/><path d="m11.25 6.5h-5.5c-.965 0-1.75-.785-1.75-1.75v-2c0-.414.336-.75.75-.75h1.104c.327-1.153 1.39-2 2.646-2s2.319.847 2.646 2h1.104c.414 0 .75.336.75.75v2c0 .965-.785 1.75-1.75 1.75zm-5.75-3v1.25c0 .138.112.25.25.25h5.5c.138 0 .25-.112.25-.25v-1.25h-1c-.414 0-.75-.336-.75-.75 0-.689-.561-1.25-1.25-1.25s-1.25.561-1.25 1.25c0 .414-.336.75-.75.75z"/><path d="m13.25 9.5h-9.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h9.5c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m10.92 12.5h-7.17c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h7.17c.414 0 .75.336.75.75s-.336.75-.75.75z"/><path d="m9.19 15.5h-5.44c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h5.44c.414 0 .75.336.75.75s-.336.75-.75.75z"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 968 B

After

Width:  |  Height:  |  Size: 2.1 KiB

176
templates/mod_editor.hbs
View File

@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/normalize.css" rel="stylesheet" type="text/css">
<link href="static/css/main.css" rel="stylesheet" type="text/css">
<link href="static/css/mod.css" rel="stylesheet" type="text/css">
@@ -27,28 +28,28 @@
<div class="main-flex">
<div class="main-content">
<div class="mod-header">
<div class="mod-navigation">
<a class="navigation-pointer" href="mods">Mods</a>
<p>></p>
<a class="navigation-text" href="">Mod Name</a>
<a class="navigation-follow" href="">
<img src="static/images/icon/follow.svg" alt="follow">
Follow
</a>
</div>
<div class="mod-header rounded-border gray-border">
<img class="mod-icon" src="...">
<div class="mod-title">
<h3 class="mod-title-text">Mod Name</h3>
<h5 class="mod-title-text">Mod Description</h5>
</div>
<div class="mod-buttons">
<a class="mod-button follow-button" onclick="followMod()">
<img src="static/images/icon/donate.svg" alt="follow">
<p>Follow</p>
</a>
<a href="downloadFilePath" download="fileName" class="mod-button download-button" onclick="followMod()">
<img src="static/images/icon/download-alt.svg" alt="download">
<p>Latest</p>
</a>
<h2 class="mod-title-text">Mod Name</h2>
<p class="mod-title-text">Blah blah blah bla hblahb lahb lahblah blahbl ahbla h blah blahblahb ahblahbl ahbla hblah </p>
</div>
</div>
<div class="mod-bar">
<a>Information</a>
<a>Downloads</a>
<a>Developers</a>
<a>Description</a>
<a>Files</a>
<a>API</a>
<a>Source</a>
<a>Wiki</a>
<a>Issues</a>
@@ -57,81 +58,86 @@
<div class="mod-description">
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, lorem eget maximus cursus, quam est pellentesque leo, quis vulputate ante tellus et lacus. Vestibulum hendrerit finibus gravida. Nulla vitae faucibus massa. Nunc posuere ornare urna ut ultricies. Morbi a velit vestibulum, pulvinar massa nec, rhoncus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ante augue. Morbi nunc libero, ultrices vitae est nec, elementum blandit mauris. Aliquam venenatis faucibus massa in lobortis. Nunc tincidunt lectus in ultrices ultricies. Ut consectetur orci at ligula fringilla dapibus. Praesent porta, neque ut bibendum luctus, diam nibh auctor diam, eu condimentum enim nisi id erat. Nullam fringilla aliquam nulla sed lobortis. Sed ex neque, ultricies nec suscipit nec, aliquet ac mi. Aenean ut ultrices augue. Mauris ut sapien non arcu congue dapibus. Ut ornare ante odio, a rhoncus enim dignissim in. Vestibulum aliquet maximus nisi. Etiam fermentum velit quam, vitae molestie leo consequat malesuada. Vivamus felis nulla, egestas vitae efficitur in, vehicula eu ante. Nunc semper eu nibh sit amet iaculis. Proin eu finibus sapien, a luctus ante. Ut in congue massa. Cras malesuada magna est, id fringilla arcu tempor et. Proin fringilla orci ut tincidunt dictum. Nunc sodales ac urna sit amet fringilla. Donec eget dictum neque. Maecenas maximus libero sem, et lobortis diam imperdiet a. In ultrices quis massa id rutrum. Proin sit amet ex quis diam dapibus interdum vel a turpis. Cras elit ligula, bibendum id lacus id, feugiat mattis arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras elit libero, porttitor eu blandit quis, elementum eget massa. Duis ac quam in neque feugiat egestas. Quisque blandit libero nisl, non convallis neque vestibulum quis. Donec vitae malesuada erat, sed faucibus diam. Duis fringilla eros elit, a pulvinar lacus malesuada feugiat. Integer ac hendrerit arcu. Phasellus quis eros faucibus metus blandit volutpat. Curabitur auctor iaculis leo sit amet tincidunt. Nam odio urna, rutrum non sodales sit amet, euismod at justo. Quisque pharetra ipsum sed sollicitudin pulvinar. Aenean eget cursus tellus, et convallis nisi. Maecenas malesuada lobortis condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla convallis orci magna, quis gravida purus aliquet sit amet. Pellentesque fringilla at nulla sit amet mollis. Cras euismod lorem non justo rhoncus, ut euismod urna egestas. Etiam luctus id lacus ut eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras eget lectus at lacus hendrerit gravida non vitae ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed finibus tincidunt porta. Phasellus fringilla pulvinar pharetra. Praesent tristique mauris metus, vitae pellentesque est vestibulum id. Phasellus vitae nisi in nibh vehicula varius id hendrerit erat. Mauris tempus lorem eu nulla viverra facilisis. Phasellus posuere dui nunc, sit amet consectetur lacus scelerisque maximus.
<img src="https://i.imgur.com/RMH7G49.png">
<img src="https://i.imgur.com/QkjB9Bw.png">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, lorem eget maximus cursus, quam est pellentesque leo, quis vulputate ante tellus et lacus. Vestibulum hendrerit finibus gravida. Nulla vitae faucibus massa. Nunc posuere ornare urna ut ultricies. Morbi a velit vestibulum, pulvinar massa nec, rhoncus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ante augue. Morbi nunc libero, ultrices vitae est nec, elementum blandit mauris. Aliquam venenatis faucibus massa in lobortis. Nunc tincidunt lectus in ultrices ultricies. Ut consectetur orci at ligula fringilla dapibus. Praesent porta, neque ut bibendum luctus, diam nibh auctor diam, eu condimentum enim nisi id erat. Nullam fringilla aliquam nulla sed lobortis. Sed ex neque, ultricies nec suscipit nec, aliquet ac mi. Aenean ut ultrices augue. Mauris ut sapien non arcu congue dapibus. Ut ornare ante odio, a rhoncus enim dignissim in. Vestibulum aliquet maximus nisi. Etiam fermentum velit quam, vitae molestie leo consequat malesuada. Vivamus felis nulla, egestas vitae efficitur in, vehicula eu ante. Nunc semper eu nibh sit amet iaculis. Proin eu finibus sapien, a luctus ante. Ut in congue massa. Cras malesuada magna est, id fringilla arcu tempor et. Proin fringilla orci ut tincidunt dictum. Nunc sodales ac urna sit amet fringilla. Donec eget dictum neque. Maecenas maximus libero sem, et lobortis diam imperdiet a. In ultrices quis massa id rutrum. Proin sit amet ex quis diam dapibus interdum vel a turpis. Cras elit ligula, bibendum id lacus id, feugiat mattis arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras elit libero, porttitor eu blandit quis, elementum eget massa. Duis ac quam in neque feugiat egestas. Quisque blandit libero nisl, non convallis neque vestibulum quis. Donec vitae malesuada erat, sed faucibus diam. Duis fringilla eros elit, a pulvinar lacus malesuada feugiat. Integer ac hendrerit arcu. Phasellus quis eros faucibus metus blandit volutpat. Curabitur auctor iaculis leo sit amet tincidunt. Nam odio urna, rutrum non sodales sit amet, euismod at justo. Quisque pharetra ipsum sed sollicitudin pulvinar. Aenean eget cursus tellus, et convallis nisi. Maecenas malesuada lobortis condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla convallis orci magna, quis gravida purus aliquet sit amet. Pellentesque fringilla at nulla sit amet mollis. Cras euismod lorem non justo rhoncus, ut euismod urna egestas. Etiam luctus id lacus ut eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras eget lectus at lacus hendrerit gravida non vitae ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed finibus tincidunt porta. Phasellus fringilla pulvinar pharetra. Praesent tristique mauris metus, vitae pellentesque est vestibulum id. Phasellus vitae nisi in nibh vehicula varius id hendrerit erat. Mauris tempus lorem eu nulla viverra facilisis. Phasellus posuere dui nunc, sit amet consectetur lacus scelerisque maximus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim, lorem eget maximus cursus, quam est pellentesque leo, quis vulputate ante tellus et lacus. Vestibulum hendrerit finibus gravida. Nulla vitae faucibus massa. Nunc posuere ornare urna ut ultricies. Morbi a velit vestibulum, pulvinar massa nec, rhoncus tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu ante augue. Morbi nunc libero, ultrices vitae est nec, elementum blandit mauris. Aliquam venenatis faucibus massa in lobortis. Nunc tincidunt lectus in ultrices ultricies. Ut consectetur orci at ligula fringilla dapibus. Praesent porta, neque ut bibendum luctus, diam nibh auctor diam, eu condimentum enim nisi id erat. Nullam fringilla aliquam nulla sed lobortis. Sed ex neque, ultricies nec suscipit nec, aliquet ac mi. Aenean ut ultrices augue. Mauris ut sapien non arcu congue dapibus. Ut ornare ante odio, a rhoncus enim dignissim in. Vestibulum aliquet maximus nisi. Etiam fermentum velit quam, vitae molestie leo consequat malesuada. Vivamus felis nulla, egestas vitae efficitur in, vehicula eu ante. Nunc semper eu nibh sit amet iaculis. Proin eu finibus sapien, a luctus ante. Ut in congue massa. Cras malesuada magna est, id fringilla arcu tempor et. Proin fringilla orci ut tincidunt dictum. Nunc sodales ac urna sit amet fringilla. Donec eget dictum neque. Maecenas maximus libero sem, et lobortis diam imperdiet a. In ultrices quis massa id rutrum. Proin sit amet ex quis diam dapibus interdum vel a turpis. Cras elit ligula, bibendum id lacus id, feugiat mattis arcu. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras elit libero, porttitor eu blandit quis, elementum eget massa. Duis ac quam in neque feugiat egestas. Quisque blandit libero nisl, non convallis neque vestibulum quis. Donec vitae malesuada erat, sed faucibus diam. Duis fringilla eros elit, a pulvinar lacus malesuada feugiat. Integer ac hendrerit arcu. Phasellus quis eros faucibus metus blandit volutpat. Curabitur auctor iaculis leo sit amet tincidunt. Nam odio urna, rutrum non sodales sit amet, euismod at justo. Quisque pharetra ipsum sed sollicitudin pulvinar. Aenean eget cursus tellus, et convallis nisi. Maecenas malesuada lobortis condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla convallis orci magna, quis gravida purus aliquet sit amet. Pellentesque fringilla at nulla sit amet mollis. Cras euismod lorem non justo rhoncus, ut euismod urna egestas. Etiam luctus id lacus ut eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Cras eget lectus at lacus hendrerit gravida non vitae ipsum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed finibus tincidunt porta. Phasellus fringilla pulvinar pharetra. Praesent tristique mauris metus, vitae pellentesque est vestibulum id. Phasellus vitae nisi in nibh vehicula varius id hendrerit erat. Mauris tempus lorem eu nulla viverra facilisis. Phasellus posuere dui nunc, sit amet consectetur lacus scelerisque maximus.
</div>
</div>
</div>
<div class="mod-sidebar">
<div class="mod-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/information.svg" class="sidebar-img" alt="Donate">
<h3>Information</h3>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/download.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/followers.svg" alt="Downloads" >
<p>2391</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/created.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/updated.svg" alt="Downloads" >
<p>5/4/2020</p>
</div>
</div>
<div class="sidebar-line"></div>
<div class="sidebar">
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
<div class="donation-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/donate.svg" class="sidebar-img" alt="Donate">
<h3>Donate</h3>
</div>
<a href="" class="donation-link">
<img src="static/images/donation/patreon.png">
</a>
<a href="" class="donation-link">
<img src="static/images/donation/bmc-coffee.gif">
</a>
<a href="" class="donation-link">
<img src="static/images/donation/paypal.jpg">
</a>
</div>
<div class="sidebar-line"></div>
<div class="categories-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/category.svg" class="sidebar-img" alt="Donate">
<h3>Categories</h3>
</div>
<div class="categories">
<img alt="adventure" src="static/images/icon/adventure.svg"/>
<img alt="magic" src="static/images/icon/magic.svg"/>
<img alt="library" src="static/images/icon/library.svg" class="result-image"/>
</div>
</div>
<div class="sidebar-line"></div>
<div class="member-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/contributor.svg" class="sidebar-img" alt="Donate">
<h3>Contributors</h3>
</div>
<div class="contributor-card rounded-border gray-border">
<img src="static/images/icon/cursed.png" alt="">
<div class="contributor-card-text">
<a href="">Username</a>
<small>Role</small>
<div class="mod-sidebar rounded-border gray-border">
<div class="mod-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/information.svg" class="sidebar-img" alt="Donate">
<h3>Information</h3>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/download.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/followers.svg" alt="Downloads" >
<p>2391</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/created.svg" alt="Downloads" >
<p>1,292,112</p>
</div>
<div class="mod-info-entry">
<img src="static/images/icon/updated.svg" alt="Downloads" >
<p>5/4/2020</p>
</div>
</div>
<div class="sidebar-line"></div>
<div class="member-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/contributor.svg" class="sidebar-img" alt="Donate">
<h3>Contributors</h3>
</div>
<div class="contributor-card rounded-border gray-border">
<img src="static/images/icon/cursed.png" alt="">
<div class="contributor-card-text">
<a href="">Username</a>
<small>Role</small>
</div>
</div>
</div>
<div class="sidebar-line"></div>
<div class="categories-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/category.svg" class="sidebar-img" alt="Donate">
<h3>Categories</h3>
</div>
<div class="categories">
<img alt="adventure" src="static/images/icon/adventure.svg"/>
<img alt="magic" src="static/images/icon/magic.svg"/>
<img alt="library" src="static/images/icon/library.svg" class="result-image"/>
</div>
</div>
<div class="sidebar-line"></div>
<div class="donation-info sidebar-entry">
<div class="sidebar-info">
<img src="static/images/icon/donate.svg" class="sidebar-img" alt="Donate">
<h3>Donate</h3>
</div>
<a href="" class="donation-link">
<img src="static/images/donation/patreon.png">
</a>
<a href="" class="donation-link">
<img src="static/images/donation/bmc-coffee.gif">
</a>
<a href="" class="donation-link">
<img src="static/images/donation/paypal.jpg">
</a>
</div>
</div>
</div>