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

further visual improvements

Browse source
This commit is contained in:
hippoz 2022-08-27 16:50:42 +03:00
parent 2a320d4bd9
commit 7fca6da2ff
No known key found for this signature in database
GPG key ID: 7C52899193467641
2 changed files with 16 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
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,12 +16,8 @@
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;
} }
@ -39,10 +35,9 @@ body {
} }
.Card.Card-layout { .Card.Card-layout {
margin: 36px auto; margin: 28px auto;
padding: 26px; padding: 24px;
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);
} }
.Card.Card-inner { .Card.Card-inner {
@ -53,24 +48,24 @@ body {
/* Navigation */ /* Navigation */
.Navigation {
display: flex;
flex-direction: row;
}
.Navigation-branding { .Navigation-branding {
display: inline-block; display: inline-block;
user-select: none; user-select: none;
padding: 8px; padding: 8px;
font-size: 18px;
white-space: nowrap; white-space: nowrap;
margin-left: 10px;
margin-right: 10px;
} }
.Navigation-buttons { .Navigation .Button {
display: flex; margin-left: 14px;
flex-direction: row;
float: right;
} }
.Navigation-buttons .Button { .Navigation .Button:first-of-type {
margin-left: 12px; margin-left: auto;
} }
/* Button */ /* Button */
@ -81,7 +76,7 @@ body {
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;
color: var(--button-accent-color); color: var(--button-accent-color);
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;

6
src/index.js
View file

@ -45,11 +45,9 @@ const linkButton = ({ link, text, selected=false }) => `
`; `;
const navigation = ({currentName}) => ` const navigation = ({currentName}) => `
<nav class="Card Card-layout"> <nav class="Navigation Card Card-layout">
<b class="Navigation-branding">${data.navigationBrandingText}</b> <b class="Navigation-branding">${data.navigationBrandingText}</b>
<div class="Navigation-buttons"> ${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>
`; `;