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

Compare commits

base: hippoz:134e1a98c4f20a89d6e3f37bb26882b734b3b736
Branches Tags
hippoz:master
..
compare: hippoz:5e667d67382b26d5ddc2ce19aa3318e11c5a9c4c
Branches Tags
hippoz:master

5 commits
134e1a98c4 ... 5e667d6738

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
Show stats 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

33
src/index.js → index.js
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();

112
out/res/style.css
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%;
}
} }

4
out/res/wave.svg
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>
Side by side

Before

Width:  |  Height:  |  Size: 810 B