Incomplete redesign.

This commit is contained in:
天クマ 2025-10-26 21:51:13 -03:00
commit 25ea17f0f8
3 changed files with 36 additions and 26 deletions

View file

@ -1,26 +1,28 @@
--- ---
layout: "skeleton.njk" layout: "skeleton.njk"
--- ---
<div id="projectHeader"> <div>
{% if logo %} <div id="projectHeader">
<img src="{{ page.dir }}{{ logo }}"> {% if logo %}
{% endif %} <img src="{{ page.dir }}{{ logo }}">
<div id="projectTitleSubtitle"> {% endif %}
<div id="projectTitleAuthor"> <div id="projectTitleSubtitle">
<h1 id="projectTitle">{{ name }}</h1> <div id="projectTitleAuthor">
<p id="projectAuthor">by <a href="/authors/{{ author }}">{{ author }}</a></p> <h1 id="projectTitle">{{ name }}</h1>
<p id="projectAuthor">by <a href="/authors/{{ author }}">{{ author }}</a></p>
</div>
<p id="projectSubtitle">{{ subtitle }}</p>
</div> </div>
<p id="projectSubtitle">{{ subtitle }}</p> <a id="downloadLink" href="{{ downloadLink }}"><button id="downloadButton">{% if downloadLink %}Download{% else %}Unavailable{% endif %}</button></a>
</div> </div>
<a id="downloadLink" href="{{ downloadLink }}"><button id="downloadButton">{% if downloadLink %}Download{% else %}Unavailable{% endif %}</button></a> {% include "project_image.njk" %}
</div> <main id="projectDescription">
{% include "project_image.njk" %} {% if content %}
<main id="projectDescription"> {{ content | safe }}
{% if content %} {% else %}
{{ content | safe }} <h2>Oopsie! :<</h2>
{% else %} <p>Seems like we don't have a description for this project.</p>
<h2>Oopsie! :<</h2> <p class="errorQuote"><i>"If only the clockworks could speak<br>I wouldn't be so alone"</i></p>
<p>Seems like we don't have a description for this project.</p> {% endif %}
<p class="errorQuote"><i>"If only the clockworks could speak<br>I wouldn't be so alone"</i></p> </main>
{% endif %} </div>
</main>

View file

@ -8,7 +8,9 @@
</head> </head>
<body> <body>
<div id="everythingHelper"> <div id="everythingHelper">
{% include "header.njk" %} <aside>
{% include "header.njk" %}
</aside>
{{ content | safe }} {{ content | safe }}
</div> </div>
</body> </body>

View file

@ -25,6 +25,11 @@ header {
display: flex; display: flex;
} }
aside {
width: fit-content;
min-width: 20vw;
}
a { a {
text-decoration: none; text-decoration: none;
color: var(--accent-color); color: var(--accent-color);
@ -53,13 +58,10 @@ button:hover {
code { code {
background-color: darkslategray; background-color: darkslategray;
color: var(--accent-color); color: var(--accent-color);
/* outline: 1px solid white; */
padding-left: .2em; padding-left: .2em;
padding-right: .2em; padding-right: .2em;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border-radius: 2px; border-radius: 2px;
/* margin-left: 2px;
margin-right: 2px; */
display: inline-block; display: inline-block;
} }
@ -80,6 +82,7 @@ img {
#linksBox { #linksBox {
padding: 10px; padding: 10px;
display: flex; display: flex;
flex-direction: column;
width: 100%; width: 100%;
background-color: black; background-color: black;
outline: 2px solid gray; outline: 2px solid gray;
@ -94,9 +97,11 @@ img {
} }
#everythingHelper { #everythingHelper {
max-width: 60%; max-width: 80%;
margin: auto; margin: auto;
transform: .2s; transform: .2s;
display: flex;
gap: 3em;
} }
#headerLinks { #headerLinks {
@ -107,6 +112,7 @@ img {
#title { #title {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
text-align: center;
} }
.searchItemImage { .searchItemImage {