switch the layout to a wider one that leans slightly to the left of the page

this is to make space on the right for a nice background in the future
This commit is contained in:
りき萌 2024-10-29 18:14:01 +01:00
parent 1fdf65e7a3
commit 523a364fa9
12 changed files with 487 additions and 327 deletions

View file

@ -7,28 +7,27 @@
</head>
<body>
{{#> components/_nav.hbs }}
{{!-- For /index, include a "new" link that goes to the curated news feed page. --}}
{{#if (eq page.tree_path "index")}}
<a href="{{ config.site }}/treehouse/new" data-cast="new">new</a>
{{/if}}
{{/ components/_nav.hbs }}
<!-- Empty span to push noscript over to the next grid cell.
Browsers turn <noscript> tags into <span style="display: inline !important;"> with no
additional classes, and we can't easily select that in CSS. -->
<span></span>
{{> components/_noscript.hbs }}
{{> components/_nav.hbs }}
{{> components/_header.hbs }}
{{!--
NOTE: ~ because components/_tree.hbs must not include any extra indentation, because it may
contain pre elements which shouldn't be indented.
--}}
{{~> components/_tree.hbs }}
<th-emoji-tooltips></th-emoji-tooltips>
{{!-- For all pages except the one linked from the footer, include the footer icon. --}}
{{#if (ne page.tree_path "treehouse")}}
{{> components/_footer.hbs }}
{{/if}}
<th-emoji-tooltips></th-emoji-tooltips>
</body>
</html>

View file

@ -6,6 +6,7 @@
<link rel="preload" href="{{ asset 'font/Recursive_VF_1.085.woff2' }}" as="font" type="font/woff2"
crossorigin="anonymous">
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
<link rel="stylesheet" href="{{ asset 'css/main.css' }}">
<link rel="stylesheet" href="{{ asset 'css/icons.css' }}">
<link rel="stylesheet" href="{{ asset 'css/tree.css' }}">

View file

@ -0,0 +1,16 @@
<section class="page-header">
{{#if page.breadcrumbs}}
<ol class="breadcrumbs">
<li class="root-breadcrumb">
<a href="{{ config.site }}/">
{{{ include_static 'svg/object/logo.svg' }}}
</li>
</a>
{{{ page.breadcrumbs }}}
</ol>
{{/if}}
{{#if (ne page.title page.tree_path)}}
<h1 class="page-title"><a href="{{ config.site }}/{{ page.tree_path }}">{{ page.title }}</a></h1>
{{/if}}
</section>

View file

@ -1,23 +1,19 @@
<nav>
<nav id="nav-logo">
<a href="{{ config.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>
{{{ include_static 'svg/object/logo.svg' }}}
</a>
<div class="nav-page">
{{#if page.breadcrumbs}}
<ol class="breadcrumbs">
{{{ page.breadcrumbs }}}
</ol>
{{/if}}
{{#if (and (ne page.title config.user.title) (ne page.title page.tree_path))}}
<h1 class="page-title"><a href="{{ config.site }}/{{ page.tree_path }}">{{ page.title }}</a></h1>
{{/if}}
</div>
{{> @partial-block }}
</nav>
{{!--
I don't have any idea where to put this right now.
There's no obvious place, and even when it is there, I hate the hideous red badge on new entries.
No time to figure it out. Will do later.
{{#if (eq page.tree_path 'index')}}
<nav id="nav-links">
<a href="{{ config.site }}/treehouse/new" data-cast="new">new</a>
</nav>
{{/if}}
--}}

View file

@ -5,7 +5,7 @@
<head>
<title>treehouse iframe sandbox</title>
<link rel="stylesheet" href="{{ asset 'css/main.css' }}">
<link rel="stylesheet" href="{{ asset 'css/base.css' }}">
<style>
body {