1
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-15 05:25:33 -04:00

use preact for common components across site (#663)

* convert GitHub cards grid from lit-html to preact

* give hit counter the preact treatment

* extract loading spinner component to a shared location

* move *some* loading spinner styles to its JSX

* Update .percy.yml

* pick up images in JS w/ webpack

* pull star/fork icons straight from @primer/octicons

* a bit of cleanup

* check `typeof window !== "undefined"` before rendering

* bump misc. deps

* silence missing license warnings for preact-hooks and preact-compat

* add source-map-loader

* Update loading.js
This commit is contained in:
2021-11-24 13:51:29 -05:00
committed by GitHub
parent 9b3ae0f62a
commit b755b66d19
20 changed files with 541 additions and 315 deletions

View File

@@ -14,17 +14,6 @@ div.layout-projects {
text-align: center;
}
div#loading-spinner {
width: 40px;
display: block;
margin: 1.2em auto 0 auto;
> div {
width: 10px;
height: 20px;
}
}
div#github-cards {
display: flex;
flex-flow: row wrap;
@@ -34,7 +23,6 @@ div.layout-projects {
div.github-card {
flex-grow: 1;
display: block;
width: 416px; // magic number
padding: 1em 1.2em;
margin: 0.6em;
@@ -55,7 +43,7 @@ div.layout-projects {
}
p.repo-description {
margin: 0.3em 0 0.6em 0;
margin: 0.2em 0 0.8em 0;
}
div.repo-meta {
@@ -63,8 +51,6 @@ div.layout-projects {
flex-wrap: wrap;
div.repo-meta-item {
display: inline-block;
align-self: baseline;
margin-right: 1.5em;
font-size: 0.925em;
@@ -74,22 +60,19 @@ div.layout-projects {
)
);
svg {
display: inline-block;
position: relative;
top: 0.25em;
margin-right: 0.2em;
fill: currentColor;
.octicon,
span.repo-language-color {
margin-right: 0.5em;
}
span.repo-language-color {
display: inline-block;
width: 1.2em;
height: 1.2em;
width: 1.15em;
height: 1.15em;
border-radius: 50%;
position: relative;
top: 0.235em;
margin-right: 0.2em;
top: 0.175em;
margin-right: 0.5em;
}
}
}

View File

@@ -81,16 +81,6 @@ div.layout-single {
}
}
}
div#meta-hits-loading {
display: inline-block;
width: 20px;
> div {
width: 5px;
height: 10px;
}
}
}
h1.title {