Made some tab hovering effects, and some general touch ups

This commit is contained in:
Finnder 2022-03-24 23:14:52 -04:00
parent d19460fa1e
commit a6bfc73895
3 changed files with 29 additions and 7 deletions

View File

@ -2,5 +2,6 @@
title="About Us" title="About Us"
+++ +++
<hr> <hr>
We like linux :) We like linux :)

View File

@ -1,9 +1,15 @@
$sidebar_width: 20%; @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300&display=swap');
$sidebar_width: 15%;
$sidebar_background: rgba(45, 45, 45, 1); $sidebar_background: rgba(45, 45, 45, 1);
$body_background: rgba(30, 30, 30, 1); $body_background: rgba(30, 30, 30, 1);
$content_background: rgb(35, 35, 35);
body { body {
margin: 0; margin: 0;
font-family: 'Fira Code', monospace;
// Sidebar
nav { nav {
height: 100%; height: 100%;
position: fixed; position: fixed;
@ -11,12 +17,26 @@ body {
background: $sidebar_background; background: $sidebar_background;
padding-top: 32px; padding-top: 32px;
padding-bottom: 16px; padding-bottom: 16px;
img { border-right-style: solid;
width: 100%; border-width: 2px;
} border-color: black;
color: white;
div { div {
padding: 0 16px 0 16px; padding: 0 16px 0 16px;
} }
// Refrence to the tab interface
.tabs {
a {
text-decoration: none;
color: grey;
&:hover {
color: white;
background-color: rgba(40, 40, 40, 0.5);
}
}
}
} }
main { main {
@ -31,7 +51,8 @@ body {
margin: auto; margin: auto;
border: 1px solid white; border: 1px solid white;
padding: 13px; padding: 13px;
max-width: 1000px; max-width: 92%;
background: $content_background;
} }
} }
} }

View File

@ -2,7 +2,7 @@
<div> <div>
<a href="/"><img src="{{ get_url(path='logo.png') }}"></a> <a href="/"><img src="{{ get_url(path='logo.png') }}"></a>
</div> </div>
<div> <div class="tabs">
<ul> <ul>
{% for page in config.extra.toolbar_pages %} {% for page in config.extra.toolbar_pages %}
<li> <li>