Sidebar and CSS

FossilOrigin-Name: be86fd86012ce13cfd6543d374870491da9d4fa64208de2ac22575f2dafdf3b7
This commit is contained in:
me@ow.nekobit.net 2022-01-27 04:36:03 +00:00
parent 87f9b89929
commit b9922b8b7e
2 changed files with 57 additions and 2 deletions

49
dist/ratfe.css vendored
View file

@ -63,11 +63,14 @@ div#content
div#content main
{
flex: 1;
min-width: 0;
min-height: 600px;
}
div#content aside
{
width: 180px;
max-width: 180px;
min-width: 180px;
background-color: #fcfcfc;
}
@ -77,6 +80,51 @@ div#content aside
border-right: 1px solid #cacaca;
}
#leftbar ul
{
margin: 0;
padding: 0;
}
#leftbar ul li
{
list-style-type: none;
}
input[type=button], input[type=submit], .sidebarbtn
{
background: linear-gradient(#fff, #f1f1f1);
color: #000;
}
input[type=button]:hover, input[type=submit]:hover, .sidebarbtn:hover
{
background: linear-gradient(#aa0000, #600000);
color: #fff;
cursor: pointer;
}
input[type=button]:active, input[type=submit]:active, .sidebarbtn:active
{
background: linear-gradient(#600000, #aa0000);
color: #fff;
cursor: pointer;
}
input[type=button], input[type=submit]
{
border: 1px solid #cacaca;
padding: 3px 15px;
}
.sidebarbtn
{
border-bottom: 1px solid #dadada;
display: block;
padding: 8px 8px 8px 16px;
text-decoration: none;
}
#rightbar
{
border-left: 1px solid #cacaca;
@ -127,6 +175,7 @@ div#content aside
.status .status-content
{
margin: 2px 0 0 0;
overflow-wrap: break-word;
}
.status-visibility

View file

@ -1,9 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>%s</title>
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" type="text/css" href="ratfe.css">
<link rel="stylesheet" type="text/css" href="../dist/ratfe.css">
</head>
<body>
<div id="display-wrapper">
@ -22,13 +24,17 @@
<div id="content">
<!-- Navigation -->
<aside id="leftbar">
<ul>
<li><a class="sidebarbtn" href="#">Home</a></li>
<li><a class="sidebarbtn" href="#">Notifications</a></li>
<li><a class="sidebarbtn" href="#">Local</a></li>
<li><a class="sidebarbtn" href="#">Federated</a></li>
</ul>
</aside>
<!-- Display for posts -->
<main>
%s
</main>
<!-- Notifications and such -->