jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-09-18 13:05:32 -04:00
Code Issues Activity

major refactoring of preact components 🧩 (#689)

Browse Source
This commit is contained in:
Jake Jarvis
2021-12-15 08:35:18 -05:00
committed by GitHub
parent cda7d538a6
commit d119a98a0d
30 changed files with 1005 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/sass/abstracts/_themes.scss
View File

@@ -60,7 +60,3 @@ $themes: (
error: #ff5151,
),
);
// Icons (modified twemojis)
$icon-bulb-on: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#FFD983"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#B9C9D9"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#FFCC4D"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';
$icon-bulb-off: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 35"><g fill-rule="nonzero" fill="none"><path d="M22 11.06c0 6.44-5 7.44-5 13.44 0 3.1-3.12 3.36-5.5 3.36-2.05 0-6.59-.78-6.59-3.36 0-6-4.91-7-4.91-13.44C0 5.03 5.29.14 11.08.14 16.88.14 22 5.03 22 11.06z" fill="#CCCBCB"/><path d="M15.17 32.5c0 .83-2.24 2.5-4.17 2.5-1.93 0-4.17-1.67-4.17-2.5 0-.83 2.24-.5 4.17-.5 1.93 0 4.17-.33 4.17.5z" fill="#CCD6DD"/><path d="M15.7 10.3a1 1 0 00-1.4 0L11 13.58l-3.3-3.3a1 1 0 10-1.4 1.42l3.7 3.7V26a1 1 0 102 0V15.41l3.7-3.7a1 1 0 000-1.42z" fill="#7D7A72"/><path d="M17 31a2 2 0 01-2 2H7a2 2 0 01-2-2v-6h12v6z" fill="#99AAB5"/><path d="M5 32a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 32zm0-4a1 1 0 01-.16-1.99l12-2a1 1 0 11.33 1.97l-12 2A.93.93 0 015 28z" fill="#CCD6DD"/></g></svg>';

11
assets/sass/components/_content.scss
View File

@@ -32,7 +32,7 @@ div#content {
letter-spacing: 0.001em;
line-height: 1.5;
&:hover > a.anchorjs-link {
&:hover > .anchorjs-link {
opacity: 1; // '#' link appears on hover over entire sub-heading line
}
}
@@ -50,13 +50,14 @@ div#content {
}
// AnchorJS styles
a.anchorjs-link {
margin-left: 0.25em;
padding: 0 0.5em 0 0.25em;
.anchorjs-link {
margin: 0 0.25em;
padding: 0 0.25em;
background: none;
opacity: 0;
font-weight: 300;
line-height: 1;
opacity: 0; // overridden by JS on mobile devices
user-select: none;
&::before {
content: "\0023"; // pound sign

28
assets/sass/components/_global.scss
View File

@@ -24,15 +24,6 @@ body {
background-color: "background-outer",
)
);
// set themed lightbulb icons manually
&.light button.dark-mode-toggle {
background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-on}");
}
&.dark button.dark-mode-toggle {
background-image: url("data:image/svg+xml;charset=utf-8,#{themes.$icon-bulb-off}");
}
}
code,
@@ -141,8 +132,7 @@ main {
// make SVG twemojis relative to surrounding text
// https://github.com/twitter/twemoji#inline-styles
img.emoji,
svg.emoji {
.emoji {
height: 1.2em;
width: 1.2em;
margin: 0 0.05em;
@@ -160,16 +150,12 @@ a .emoji {
}
// pulsating loading spinner
.loading {
display: inline-block;
> div {
@include themes.themed(
(
background-color: "medium-light",
)
);
}
div.loading > div {
@include themes.themed(
(
background-color: "medium-light",
)
);
}
// Responsive

35
assets/sass/components/_header.scss
View File

@@ -69,7 +69,7 @@ header {
ul {
list-style: none;
display: flex;
align-items: baseline;
align-items: center;
margin: 0;
padding: 0;
@@ -78,6 +78,7 @@ header {
a {
display: inline-flex;
align-items: center;
@include themes.themed(
(
@@ -94,11 +95,8 @@ header {
}
span {
align-self: center;
&.header-menu-icon {
font-size: 1.3em;
vertical-align: -0.085em;
user-select: none;
}
@@ -112,22 +110,16 @@ header {
}
// Dark mode toggle
&#header-lightbulb {
align-self: center;
&.theme-toggle button {
border: 0;
padding: 0;
background: none;
margin: 0.3em -0.3em 0 1.4em;
cursor: pointer;
button {
// native button reset
border: 0;
padding: 0;
svg {
width: 1.56em; // 24.33px, don't ask
height: 1.56em;
margin: -0.075em -0.3em 0 1.4em; // weirdness w/ svg ratio
cursor: pointer;
// prepare for lightbulb symbol depending on active theme (set in components/_global)
background-color: transparent;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
@@ -183,11 +175,14 @@ header {
}
// Dark mode toggle
&#header-lightbulb button.dark-mode-toggle {
width: 1.08em; // ~27px, don't ask
height: 1.08em;
&.theme-toggle button {
margin-left: 1em;
margin-right: -0.2em; // weirdness w/ svg ratio
svg {
width: 1.08em; // ~27px, don't ask
height: 1.08em;
}
}
}
}