liquidex/treehouse
liquidex/treehouse
1
Fork 0
Code Issues 39 Activity

add logo/homepage link

Browse source
This commit is contained in:
liquidex 2023-08-27 15:27:42 +02:00
parent 09ff8a742e
commit 2c2d529056
2 changed files with 47 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
static/css/main.css
View file

@ -1,9 +1,23 @@
/* Color scheme. */
:root {
--background-color: rgb(255, 253, 246);
--text-color: #55423e;
--shaded-background: rgba(0, 0, 0, 5%);
--border-1: rgba(0, 0, 0, 15%);
--border-2: rgba(0, 0, 0, 30%);
}
/* Article-style layout. Center everything and give it a maximum width */ /* Article-style layout. Center everything and give it a maximum width */
body { body {
max-width: 1200px; max-width: 1200px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
display: flex;
flex-direction: column;
} }
main { main {
@ -19,8 +33,8 @@ main {
/* Choose more pretty colors than vanilla HTML */ /* Choose more pretty colors than vanilla HTML */
body { body {
background-color: rgb(255, 253, 246); background-color: var(--background-color);
color: #55423e; color: var(--text-color);
} }
/* Set up typography */ /* Set up typography */
@ -117,7 +131,7 @@ body {
pre { pre {
padding: 8px 12px; padding: 8px 12px;
margin: 12px 0; margin: 12px 0;
background-color: rgba(0, 0, 0, 5%); background-color: var(--shaded-background);
border-radius: 8px; border-radius: 8px;
} }
@ -148,7 +162,7 @@ a:visited {
blockquote { blockquote {
margin: 0; margin: 0;
padding: 2px 12px; padding: 2px 12px;
border-left: 4px solid rgba(0, 0, 0, 15%); border-left: 4px solid var(--border-1px);
} }
/* And tables. */ /* And tables. */
@ -160,19 +174,20 @@ table {
table, table,
th, th,
td { td {
border: 1px solid rgba(0, 0, 0, 30%); border: 1px solid var(--border-2);
border-collapse: collapse; border-collapse: collapse;
padding: 4px 10px; padding: 4px 10px;
} }
th { th {
background-color: rgba(0, 0, 0, 5%); background-color: var(--shaded-background);
--recursive-wght: 700; --recursive-wght: 700;
--recursive-casl: 0.5; --recursive-casl: 0.5;
} }
/* Style the noscript dialog a little more prettily. */ /* Style the noscript box a little more prettily. */
.noscript { .noscript {
padding: 16px; padding: 16px;
background-color: #fde748; background-color: #fde748;
@ -191,3 +206,18 @@ th {
.noscript p:last-child { .noscript p:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
/* Give the logo on the top some nicer looks */
nav {
display: flex;
}
nav .logo {
width: 48px;
height: 48px;
padding: 16px;
display: block;
opacity: 100%;
color: var(--text-color);
}

14
template/tree.hbs
View file

@ -19,6 +19,16 @@
</head> </head>
<body> <body>
<nav>
<a href="{{ site }}/" title="Back to homepage">
<svg class="logo" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M8 3H7H6V4V5H4V6H6V9V10H7H10V12H11V10H12H13V9V8V7H12H11H10V8V9H7V6H8H9V5V4V3H8ZM12 9H11V8H12V9ZM7 5V4H8V5H7ZM3 5H2V6H3V5ZM10 13H11V14H10V13Z"
fill="currentColor" />
</svg>
</a>
</nav>
<noscript> <noscript>
<div class="noscript" role="note"> <div class="noscript" role="note">
<p>hey! looks like you have <strong>JavaScript disabled.</strong><br> <p>hey! looks like you have <strong>JavaScript disabled.</strong><br>
@ -39,10 +49,6 @@
</div> </div>
</noscript> </noscript>
<nav>
<a href="{{ site }}/" title="Back to index"></a>
</nav>
<main class="tree"> <main class="tree">
{{{ tree }}} {{{ tree }}}
</main> </main>