hippoz/homepage
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

completely refactor css + visual improvements

Browse source
This commit is contained in:
hippoz 2022-08-27 16:33:37 +03:00
parent 609c06a819
commit 2a320d4bd9
Signed by: hippoz
GPG key ID: 7C52899193467641
3 changed files with 48 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

81
out/res/style.css
View file

@ -25,54 +25,37 @@ body {
color: #000000; color: #000000;
} }
br {
display: block;
content: "";
margin-top: 2px;
}
* { * {
box-sizing: border-box; box-sizing: border-box;
} }
.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: 4px;
margin-bottom: 28px;
padding: 18px;
border: solid var(--accent-color) 1px;
}
.card.layout-card {
margin: 36px auto; margin: 36px auto;
padding: 26px; padding: 26px;
width: clamp(200px, 100%, var(--cards-length)); width: clamp(200px, 100%, var(--cards-length));
box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40); box-shadow: 0 0 28px 3px rgba(0, 0, 0, 0.40);
} }
.grayed-out { .Card.Card-inner {
color: var(--grayed-text-color); margin: 4px;
margin-bottom: 24px;
padding: 16px;
} }
.align-right { /* Navigation */
text-align: right;
}
.float-right {
float: right;
}
.float-left {
float: left;
}
.navigation-branding-text { .Navigation-branding {
text-decoration: none;
display: inline-block; display: inline-block;
user-select: none;
padding: 8px; padding: 8px;
font-size: 18px; font-size: 18px;
white-space: nowrap; white-space: nowrap;
@ -80,42 +63,48 @@ br {
margin-right: 10px; margin-right: 10px;
} }
.noselect { .Navigation-buttons {
user-select: none; display: flex;
flex-direction: row;
float: right;
} }
.button-default { .Navigation-buttons .Button {
display: inline-block; margin-left: 12px;
}
/* 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: 8px;
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;
} }
.Project-top-view {
margin-left: auto;
}

33
src/index.js
View file

@ -41,15 +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="Card Card-layout">
<div class="float-left"> <b class="Navigation-branding">${data.navigationBrandingText}</b>
<b class="navigation-branding-text">${data.navigationBrandingText}</b> <div class="Navigation-buttons">
</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> </div>
</nav> </nav>
@ -67,7 +65,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 +92,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 +108,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 +128,4 @@ const deployPages = async () => {
} }
}; };
const deployAll = async () => { deployPages();
await deployPages();
};
deployAll();