completely refactor css + visual improvements
This commit is contained in:
hippoz
parent
609c06a819
commit
2a320d4bd9
3 changed files with 48 additions and 67 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,4 +1,5 @@
|
|||
node_modules/
|
||||
testing/
|
||||
|
||||
# the only files that need to be generated are .html, so just exclude them
|
||||
out/*.html
|
||||
|
|
|
|||
|
|
@ -25,54 +25,37 @@ body {
|
|||
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 {
|
||||
margin: 4px;
|
||||
margin-bottom: 28px;
|
||||
padding: 18px;
|
||||
border: solid var(--accent-color) 1px;
|
||||
}
|
||||
|
||||
.card.layout-card {
|
||||
.Card.Card-layout {
|
||||
margin: 36px auto;
|
||||
padding: 26px;
|
||||
width: clamp(200px, 100%, var(--cards-length));
|
||||
box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
|
||||
.grayed-out {
|
||||
color: var(--grayed-text-color);
|
||||
.Card.Card-inner {
|
||||
margin: 4px;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.align-right {
|
||||
text-align: right;
|
||||
}
|
||||
.float-right {
|
||||
float: right;
|
||||
}
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
/* Navigation */
|
||||
|
||||
.navigation-branding-text {
|
||||
text-decoration: none;
|
||||
.Navigation-branding {
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
padding: 8px;
|
||||
font-size: 18px;
|
||||
white-space: nowrap;
|
||||
|
|
@ -80,42 +63,48 @@ br {
|
|||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.noselect {
|
||||
user-select: none;
|
||||
.Navigation-buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.button-default {
|
||||
display: inline-block;
|
||||
.Navigation-buttons .Button {
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
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;
|
||||
}
|
||||
|
||||
.Project-top-view {
|
||||
margin-left: auto;
|
||||
}
|
||||
33
src/index.js
33
src/index.js
|
|
@ -41,15 +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">
|
||||
<nav class="Card Card-layout">
|
||||
<b class="Navigation-branding">${data.navigationBrandingText}</b>
|
||||
<div class="Navigation-buttons">
|
||||
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
|
||||
</div>
|
||||
</nav>
|
||||
|
|
@ -67,7 +65,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 +92,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 +108,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 +128,4 @@ const deployPages = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const deployAll = async () => {
|
||||
await deployPages();
|
||||
};
|
||||
|
||||
deployAll();
|
||||
deployPages();
|
||||
|
|
|
|||
Loading…
Reference in a new issue