diff --git a/_includes/project.njk b/_includes/project.njk index c12d473..48163b0 100644 --- a/_includes/project.njk +++ b/_includes/project.njk @@ -1,26 +1,28 @@ --- layout: "skeleton.njk" --- -
- {% if logo %} - - {% endif %} -
-
-

{{ name }}

-

by {{ author }}

+
+
+ {% if logo %} + + {% endif %} +
+
+

{{ name }}

+

by {{ author }}

+
+

{{ subtitle }}

-

{{ subtitle }}

+
- -
-{% include "project_image.njk" %} -
- {% if content %} - {{ content | safe }} - {% else %} -

Oopsie! :<

-

Seems like we don't have a description for this project.

-

"If only the clockworks could speak
I wouldn't be so alone"

- {% endif %} -
\ No newline at end of file + {% include "project_image.njk" %} +
+ {% if content %} + {{ content | safe }} + {% else %} +

Oopsie! :<

+

Seems like we don't have a description for this project.

+

"If only the clockworks could speak
I wouldn't be so alone"

+ {% endif %} +
+
\ No newline at end of file diff --git a/_includes/skeleton.njk b/_includes/skeleton.njk index d52cbc4..1775cdd 100644 --- a/_includes/skeleton.njk +++ b/_includes/skeleton.njk @@ -8,7 +8,9 @@
- {% include "header.njk" %} + {{ content | safe }}
diff --git a/assets/styles.css b/assets/styles.css index 8b55deb..6c15c43 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -25,6 +25,11 @@ header { display: flex; } +aside { + width: fit-content; + min-width: 20vw; +} + a { text-decoration: none; color: var(--accent-color); @@ -53,13 +58,10 @@ button:hover { code { background-color: darkslategray; color: var(--accent-color); - /* outline: 1px solid white; */ padding-left: .2em; padding-right: .2em; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-radius: 2px; - /* margin-left: 2px; - margin-right: 2px; */ display: inline-block; } @@ -80,6 +82,7 @@ img { #linksBox { padding: 10px; display: flex; + flex-direction: column; width: 100%; background-color: black; outline: 2px solid gray; @@ -94,9 +97,11 @@ img { } #everythingHelper { - max-width: 60%; + max-width: 80%; margin: auto; transform: .2s; + display: flex; + gap: 3em; } #headerLinks { @@ -107,6 +112,7 @@ img { #title { margin-top: auto; margin-bottom: auto; + text-align: center; } .searchItemImage {