Compare commits
No commits in common. "5e667d67382b26d5ddc2ce19aa3318e11c5a9c4c" and "134e1a98c4f20a89d6e3f37bb26882b734b3b736" have entirely different histories.
5e667d6738
...
134e1a98c4
4 changed files with 90 additions and 58 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,5 +1,4 @@
|
|||
node_modules/
|
||||
testing/
|
||||
|
||||
# the only files that need to be generated are .html, so just exclude them
|
||||
out/*.html
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
--button-accent-color: #3d3d3d;
|
||||
--selected-bg-color: #2e2e2e;
|
||||
--hover-bg-color: #4d4d4d;
|
||||
--card-border-radius: 14px;
|
||||
--button-border-radius: 12px;
|
||||
--card-border-radius: 0.5rem;
|
||||
--button-border-radius: 0.5rem;
|
||||
--main-font-weight: 500;
|
||||
--cards-length: 675px;
|
||||
|
||||
|
|
@ -16,90 +16,108 @@
|
|||
|
||||
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;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
br {
|
||||
display: block;
|
||||
content: "";
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Card */
|
||||
|
||||
.Card {
|
||||
.card {
|
||||
margin: 6px;
|
||||
padding: 8px;
|
||||
background: var(--accent-bg-color);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
.Card.Card-layout {
|
||||
margin: 28px auto;
|
||||
padding: 24px;
|
||||
width: clamp(200px, 100%, var(--cards-length));
|
||||
}
|
||||
|
||||
.Card.Card-inner {
|
||||
.card.inner-card {
|
||||
margin: 4px;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
margin-bottom: 28px;
|
||||
padding: 18px;
|
||||
border: solid var(--accent-color) 1px;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
|
||||
.Navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.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-branding {
|
||||
.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;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.Navigation .Button {
|
||||
margin-left: 14px;
|
||||
.noselect {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.Navigation .Button:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Button */
|
||||
|
||||
.Button {
|
||||
display: block;
|
||||
.button-default {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
background-color: var(--accent-bg-color);
|
||||
border-radius: var(--button-border-radius);
|
||||
padding: 10px;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
color: var(--button-accent-color);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 56px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.Button:hover:not(.Button-selected) {
|
||||
.button-default:hover:not(.button-selected) {
|
||||
color: var(--accent-bg-color);
|
||||
background-color: var(--hover-bg-color);
|
||||
}
|
||||
|
||||
.Button.Button-selected {
|
||||
.button-selected {
|
||||
color: var(--accent-bg-color);
|
||||
background-color: var(--selected-bg-color);
|
||||
}
|
||||
|
||||
/* Project */
|
||||
|
||||
.Project-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.input {
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 4px;
|
||||
padding: 3px;
|
||||
margin: 8px;
|
||||
}
|
||||
|
||||
.Project-top-view {
|
||||
margin-left: auto;
|
||||
@media screen and (max-width: 768px) {
|
||||
.card.layout-card {
|
||||
width: 80%;
|
||||
}
|
||||
}
|
||||
4
out/res/wave.svg
Normal file
4
out/res/wave.svg
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 810 B |
|
|
@ -41,13 +41,17 @@ const data = {
|
|||
};
|
||||
|
||||
const linkButton = ({ link, text, selected=false }) => `
|
||||
<a href="${link}" class="${selected ? "Button Button-selected" : "Button"}">${text}</a>
|
||||
<a href="${link}" class="button-default${selected ? " button-selected" : ""}">${text}</a>
|
||||
`;
|
||||
|
||||
const navigation = ({currentName}) => `
|
||||
<nav class="Navigation Card Card-layout">
|
||||
<b class="Navigation-branding">${data.navigationBrandingText}</b>
|
||||
<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>
|
||||
`;
|
||||
|
||||
|
|
@ -63,7 +67,7 @@ const makePage = ({ name, description, title }) => content => [`
|
|||
</head>
|
||||
<body>
|
||||
${navigation({currentName: name})}
|
||||
<main class="Card Card-layout">
|
||||
<main class="card layout-card" id="content">
|
||||
${content}
|
||||
</main>
|
||||
</body>
|
||||
|
|
@ -90,10 +94,10 @@ const projectsPage = async () => makePage({
|
|||
.filter(a => !a.archived)
|
||||
.map(
|
||||
repo =>`
|
||||
<div class="Card Card-inner">
|
||||
<div class="Project-top">
|
||||
<div class="card inner-card">
|
||||
<div>
|
||||
<b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
|
||||
<a class="Button Project-top-view" href=${repo.html_url}>view >></a>
|
||||
<a class="button-default float-right" href=${repo.html_url}>view >></a>
|
||||
</div>
|
||||
${repo.description ? `<p>${repo.description}</p>` : ""}
|
||||
</div>`
|
||||
|
|
@ -106,13 +110,16 @@ const pages = {
|
|||
"projects.html": projectsPage,
|
||||
"index.html": indexPage
|
||||
};
|
||||
let renderedPageCache = null;
|
||||
|
||||
const renderPages = async () => {
|
||||
let renderedPages = {};
|
||||
if (renderedPageCache) return renderedPageCache;
|
||||
|
||||
renderedPageCache = {};
|
||||
for (const [pageName, builder] of Object.entries(pages)) {
|
||||
renderedPages[pageName] = await builder();
|
||||
renderedPageCache[pageName] = await builder();
|
||||
}
|
||||
return renderedPages;
|
||||
return renderedPageCache;
|
||||
};
|
||||
|
||||
const deployPages = async () => {
|
||||
|
|
@ -126,4 +133,8 @@ const deployPages = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
deployPages();
|
||||
const deployAll = async () => {
|
||||
await deployPages();
|
||||
};
|
||||
|
||||
deployAll();
|
||||
Loading…
Reference in a new issue