move index js file to project root

remove unused svg
further visual improvements
2022-08-27 16:51:33 +03:00 · 2022-08-27 16:51:14 +03:00 · 2022-08-27 16:50:42 +03:00 · 2022-08-27 16:33:37 +03:00 · 2022-08-27 15:57:49 +03:00
4 changed files with 61 additions and 93 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,4 +1,5 @@
 node_modules/
+testing/

 # the only files that need to be generated are .html, so just exclude them
 out/*.html
--- a/src/index.js
+++ b/src/index.js
@ -41,17 +41,13 @@ const data = {
 };

 const linkButton = ({ link, text, selected=false }) => `
-    <a href="${link}" class="button-default${selected ? " button-selected" : ""}">${text}</a>
+    <a href="${link}" class="${selected ? "Button Button-selected" : "Button"}">${text}</a>
 `;

 const navigation = ({currentName}) => `
-    <nav class="card layout-card noselect">
-        <div class="float-left">
-            <b class="navigation-branding-text">${data.navigationBrandingText}</b>
-        </div>
-        <div class="align-right">
-            ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
-        </div>
+    <nav class="Navigation Card Card-layout">
+        <b class="Navigation-branding">${data.navigationBrandingText}</b>
+        ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
    </nav>
 `;

@ -67,7 +63,7 @@ const makePage = ({ name, description, title }) => content => [`
    </head>
    <body>
        ${navigation({currentName: name})}
-        <main class="card layout-card" id="content">
+        <main class="Card Card-layout">
            ${content}
        </main>
    </body>
@ -94,10 +90,10 @@ const projectsPage = async () => makePage({
        .filter(a => !a.archived)
        .map(
            repo =>`
-            <div class="card inner-card">
-                <div>
+            <div class="Card Card-inner">
+                <div class="Project-top">
                    <b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
-                    <a class="button-default float-right" href=${repo.html_url}>view >></a>
+                    <a class="Button Project-top-view" href=${repo.html_url}>view >></a>
                </div>
                ${repo.description ? `<p>${repo.description}</p>` : ""}
            </div>`
@ -110,16 +106,13 @@ const pages = {
    "projects.html": projectsPage,
    "index.html": indexPage
 };
-let renderedPageCache = null;

 const renderPages = async () => {
-    if (renderedPageCache) return renderedPageCache;
-
-    renderedPageCache = {};
+    let renderedPages = {};
    for (const [pageName, builder] of Object.entries(pages)) {
-        renderedPageCache[pageName] = await builder();
+        renderedPages[pageName] = await builder();
    }
-    return renderedPageCache;
+    return renderedPages;
 };

 const deployPages = async () => {
@ -133,8 +126,4 @@ const deployPages = async () => {
    }
 };

-const deployAll = async () => {
-    await deployPages();
-};
-
-deployAll();
+deployPages();
--- a/out/res/style.css
+++ b/out/res/style.css
@ -6,8 +6,8 @@
  --button-accent-color: #3d3d3d;
  --selected-bg-color: #2e2e2e;
  --hover-bg-color: #4d4d4d;
-  --card-border-radius: 0.5rem;
-  --button-border-radius: 0.5rem;
+  --card-border-radius: 14px;
+  --button-border-radius: 12px;
  --main-font-weight: 500;
  --cards-length: 675px;

@ -16,108 +16,90 @@

 body {
  background-color: var(--body-bg-color);
-  background-image: url(wave.svg);
-  background-size: 100% auto;
-  background-repeat: no-repeat;
  font-family: var(--fonts-regular);
  font-weight: var(--main-font-weight);
-  
  color: #000000;
 }

-br {
-  display: block;
-  content: "";
-  margin-top: 2px;
+* {
+  box-sizing: border-box;
 }

-.card {
+/* Card */
+
+.Card {
  margin: 6px;
  padding: 8px;
  background: var(--accent-bg-color);
  border-radius: var(--card-border-radius);
 }

-.card.inner-card {
+.Card.Card-layout {
+  margin: 28px auto;
+  padding: 24px;
+  width: clamp(200px, 100%, var(--cards-length));
+}
+
+.Card.Card-inner {
  margin: 4px;
-  margin-bottom: 28px;
-  padding: 18px;
-  border: solid var(--accent-color) 1px;
+  margin-bottom: 24px;
+  padding: 16px;
 }

-.card.layout-card {
-  margin: 36px auto;
-  padding: 26px;
-  width: var(--cards-length);
-  box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
+/* Navigation */
+
+.Navigation {
+  display: flex;
+  flex-direction: row;
 }

-.grayed-out {
-  color: var(--grayed-text-color);
-}
-
-.align-right {
-  text-align: right;
-}
-.float-right {
-  float: right;
-} 
-.float-left {
-  float: left;
-}
-
-.navigation-branding-text {
-  text-decoration: none;
+.Navigation-branding {
  display: inline-block;
-  padding: 8px;
-  font-size: 18px;
-  white-space: nowrap;
-  margin-left: 10px;
-  margin-right: 10px;
-}
-
-.noselect {
  user-select: none;
+  padding: 8px;
+  white-space: nowrap;
 }

-.button-default {
-  display: inline-block;
+.Navigation .Button {
+  margin-left: 14px;
+}
+
+.Navigation .Button:first-of-type {
+  margin-left: auto;
+}
+
+/* Button */
+
+.Button {
+  display: block;
  text-decoration: none;
  border: none;
  background-color: var(--accent-bg-color);
  border-radius: var(--button-border-radius);
-  padding: 8px;
-  font-size: 18px;
-  white-space: nowrap;
-  margin-left: 10px;
-  margin-right: 10px;
+  padding: 10px;
  color: var(--button-accent-color);
  cursor: pointer;
-  outline: none;
-  min-width: 56px;
  text-align: center;
 }

-.button-default:hover:not(.button-selected) {
+.Button:hover:not(.Button-selected) {
  color: var(--accent-bg-color);
  background-color: var(--hover-bg-color);
 }

-.button-selected {
+.Button.Button-selected {
  color: var(--accent-bg-color);
  background-color: var(--selected-bg-color);
 }

-.input {
-  border: none;
-  outline: none;
-  border-radius: 4px;
-  padding: 3px;
-  margin: 8px;
+/* Project */
+
+.Project-top {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }

-@media screen and (max-width: 768px) {
-  .card.layout-card {
-    width: 80%;
-  }
-}
+.Project-top-view {
+  margin-left: auto;
+}
--- a/out/res/wave.svg
+++ b/out/res/wave.svg
@ -1,4 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" preserveAspectRatio="none" version="1.1">
-    <rect x="0" y="0" width="900" height="600" fill="#2E2E2E"/>
-    <path style="filter: drop-shadow(1px 3px 3px rgba(0, 0, 0, 0.4));" filter="url(#dropShadow)" d="M0 128L21.5 119.5C43 111 86 94 128.8 93.7C171.7 93.3 214.3 109.7 257.2 112.2C300 114.7 343 103.3 385.8 96.3C428.7 89.3 471.3 86.7 514.2 101C557 115.3 600 146.7 642.8 147.2C685.7 147.7 728.3 117.3 771.2 108.5C814 99.7 857 112.3 878.5 118.7L900 125L900 0L878.5 0C857 0 814 0 771.2 0C728.3 0 685.7 0 642.8 0C600 0 557 0 514.2 0C471.3 0 428.7 0 385.8 0C343 0 300 0 257.2 0C214.3 0 171.7 0 128.8 0C86 0 43 0 21.5 0L0 0Z" fill="#d4d3d3" stroke-linecap="round" stroke-linejoin="miter"/>
-</svg>
Author	SHA1	Message	Date
hippoz	5e667d6738	move index js file to project root	2022-08-27 16:51:33 +03:00
hippoz	a0ae74f01a	remove unused svg	2022-08-27 16:51:14 +03:00
hippoz	7fca6da2ff	further visual improvements	2022-08-27 16:50:42 +03:00
hippoz	2a320d4bd9	completely refactor css + visual improvements	2022-08-27 16:33:37 +03:00
hippoz	609c06a819	improve css responsiveness	2022-08-27 15:57:49 +03:00