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

@ -4,3 +4,4 @@ title="About Us"
<hr>
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);
$body_background: rgba(30, 30, 30, 1);
$content_background: rgb(35, 35, 35);
body {
margin: 0;
font-family: 'Fira Code', monospace;
// Sidebar
nav {
height: 100%;
position: fixed;
@ -11,12 +17,26 @@ body {
background: $sidebar_background;
padding-top: 32px;
padding-bottom: 16px;
img {
width: 100%;
}
border-right-style: solid;
border-width: 2px;
border-color: black;
color: white;
div {
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 {
@ -31,7 +51,8 @@ body {
margin: auto;
border: 1px solid white;
padding: 13px;
max-width: 1000px;
max-width: 92%;
background: $content_background;
}
}
}

View File

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