Compare commits

..

5 commits

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
4 changed files with 61 additions and 93 deletions

1
.gitignore vendored
View file

@ -1,4 +1,5 @@
node_modules/ node_modules/
testing/
# the only files that need to be generated are .html, so just exclude them # the only files that need to be generated are .html, so just exclude them
out/*.html out/*.html

View file

@ -41,17 +41,13 @@ const data = {
}; };
const linkButton = ({ link, text, selected=false }) => ` 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}) => ` const navigation = ({currentName}) => `
<nav class="card layout-card noselect"> <nav class="Navigation Card Card-layout">
<div class="float-left"> <b class="Navigation-branding">${data.navigationBrandingText}</b>
<b class="navigation-branding-text">${data.navigationBrandingText}</b>
</div>
<div class="align-right">
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")} ${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
</div>
</nav> </nav>
`; `;
@ -67,7 +63,7 @@ const makePage = ({ name, description, title }) => content => [`
</head> </head>
<body> <body>
${navigation({currentName: name})} ${navigation({currentName: name})}
<main class="card layout-card" id="content"> <main class="Card Card-layout">
${content} ${content}
</main> </main>
</body> </body>
@ -94,10 +90,10 @@ const projectsPage = async () => makePage({
.filter(a => !a.archived) .filter(a => !a.archived)
.map( .map(
repo =>` repo =>`
<div class="card inner-card"> <div class="Card Card-inner">
<div> <div class="Project-top">
<b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b> <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> </div>
${repo.description ? `<p>${repo.description}</p>` : ""} ${repo.description ? `<p>${repo.description}</p>` : ""}
</div>` </div>`
@ -110,16 +106,13 @@ const pages = {
"projects.html": projectsPage, "projects.html": projectsPage,
"index.html": indexPage "index.html": indexPage
}; };
let renderedPageCache = null;
const renderPages = async () => { const renderPages = async () => {
if (renderedPageCache) return renderedPageCache; let renderedPages = {};
renderedPageCache = {};
for (const [pageName, builder] of Object.entries(pages)) { for (const [pageName, builder] of Object.entries(pages)) {
renderedPageCache[pageName] = await builder(); renderedPages[pageName] = await builder();
} }
return renderedPageCache; return renderedPages;
}; };
const deployPages = async () => { const deployPages = async () => {
@ -133,8 +126,4 @@ const deployPages = async () => {
} }
}; };
const deployAll = async () => { deployPages();
await deployPages();
};
deployAll();

View file

@ -6,8 +6,8 @@
--button-accent-color: #3d3d3d; --button-accent-color: #3d3d3d;
--selected-bg-color: #2e2e2e; --selected-bg-color: #2e2e2e;
--hover-bg-color: #4d4d4d; --hover-bg-color: #4d4d4d;
--card-border-radius: 0.5rem; --card-border-radius: 14px;
--button-border-radius: 0.5rem; --button-border-radius: 12px;
--main-font-weight: 500; --main-font-weight: 500;
--cards-length: 675px; --cards-length: 675px;
@ -16,108 +16,90 @@
body { body {
background-color: var(--body-bg-color); 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-family: var(--fonts-regular);
font-weight: var(--main-font-weight); font-weight: var(--main-font-weight);
color: #000000; color: #000000;
} }
br { * {
display: block; box-sizing: border-box;
content: "";
margin-top: 2px;
} }
.card { /* Card */
.Card {
margin: 6px; margin: 6px;
padding: 8px; padding: 8px;
background: var(--accent-bg-color); background: var(--accent-bg-color);
border-radius: var(--card-border-radius); 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: 4px;
margin-bottom: 28px; margin-bottom: 24px;
padding: 18px; padding: 16px;
border: solid var(--accent-color) 1px;
} }
.card.layout-card { /* Navigation */
margin: 36px auto;
padding: 26px; .Navigation {
width: var(--cards-length); display: flex;
box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40); flex-direction: row;
} }
.grayed-out { .Navigation-branding {
color: var(--grayed-text-color);
}
.align-right {
text-align: right;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.navigation-branding-text {
text-decoration: none;
display: inline-block; display: inline-block;
padding: 8px;
font-size: 18px;
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
}
.noselect {
user-select: none; user-select: none;
padding: 8px;
white-space: nowrap;
} }
.button-default { .Navigation .Button {
display: inline-block; margin-left: 14px;
}
.Navigation .Button:first-of-type {
margin-left: auto;
}
/* Button */
.Button {
display: block;
text-decoration: none; text-decoration: none;
border: none; border: none;
background-color: var(--accent-bg-color); background-color: var(--accent-bg-color);
border-radius: var(--button-border-radius); border-radius: var(--button-border-radius);
padding: 8px; padding: 10px;
font-size: 18px;
white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
color: var(--button-accent-color); color: var(--button-accent-color);
cursor: pointer; cursor: pointer;
outline: none;
min-width: 56px;
text-align: center; text-align: center;
} }
.button-default:hover:not(.button-selected) { .Button:hover:not(.Button-selected) {
color: var(--accent-bg-color); color: var(--accent-bg-color);
background-color: var(--hover-bg-color); background-color: var(--hover-bg-color);
} }
.button-selected { .Button.Button-selected {
color: var(--accent-bg-color); color: var(--accent-bg-color);
background-color: var(--selected-bg-color); background-color: var(--selected-bg-color);
} }
.input { /* Project */
border: none;
outline: none; .Project-top {
border-radius: 4px; display: flex;
padding: 3px; flex-direction: row;
margin: 8px; align-items: center;
} }
@media screen and (max-width: 768px) { .Project-top-view {
.card.layout-card { margin-left: auto;
width: 80%;
}
} }

View file

@ -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>

Before

Width:  |  Height:  |  Size: 810 B