Skip to content

Commit

Permalink
Merge pull request #5 from a-luna/base64-2012_12_14
Browse files Browse the repository at this point in the history 
Base64 2012 12 14
  • Loading branch information
@a-luna
a-luna authored Dec 14, 2023
2 parents 551f90b + dc10197 commit 484dac3
Show file tree
Hide file tree
Showing 10 changed files with 197 additions and 83 deletions.
114 changes: 108 additions & 6 deletions apps/svelte-base64/src/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,9 @@ body {
color: var(--white1);
margin: 0;
box-sizing: border-box;
overflow-wrap: break-word;
overflow-y: auto;
scrollbar-gutter: stable;
}

:focus {
Expand Down Expand Up @@ -275,6 +278,26 @@ main {
var(--sec-l) /
max((calc(var(--sec-a) - 0.15)), 0)
);
--nav-button-autoplay-hover-text-color: var(--black4);
--nav-button-autoplay-hover-bg-color: hsl(
var(--sec-h)
min(calc(var(--sec-s) + 7%), 100%)
min(calc(var(--sec-l) + 10%), 100%) /
max((calc(var(--pri-a) - 0.3)), 0)
);
--nav-button-autoplay-active-text-color: var(--black4);
--nav-button-autoplay-active-bg-color: hsl(
var(--sec-h)
min(calc(var(--sec-s) + 7%), 100%)
min(calc(var(--sec-l) + 10%), 100%) /
max((calc(var(--sec-a) - 0.15)), 0)
);
--nav-button-autoplay-active-border-color: hsl(
var(--sec-h)
min(calc(var(--sec-s) + 7%), 100%)
min(calc(var(--sec-l) + 10%), 100%) /
max((calc(var(--sec-a) - 0.15)), 0)
);
--nav-button-autoplay-disabled-text-color: var(--dark-gray4);
--nav-button-autoplay-disabled-bg-color: hsl(
var(--sec-h)
Expand Down Expand Up @@ -454,6 +477,10 @@ button {
color: var(--white2);
}

#demo-text .legend strong {
color: inherit
}

#demo-text code {
color: var(--pri-color);
background-color: var(--dark-gray3);
Expand Down Expand Up @@ -1047,18 +1074,35 @@ div[id*="modal"] .help-docs button:active:focus {
cursor: pointer;
}

.algo-nav-buttons.autoplay button {
color: var(--nav-button-autoplay-text-color);
background-color: var(--nav-button-autoplay-bg-color);
}

.base64-algo-demo button:hover {
color: var(--nav-button-hover-text-color);
background-color: var(--nav-button-hover-bg-color);
}

.algo-nav-buttons.autoplay button:hover {
color: var(--nav-button-autoplay-hover-text-color);
background-color: var(--nav-button-autoplay-hover-bg-color);
}

.base64-algo-demo button:focus,
.base64-algo-demo button:active,
.base64-algo-demo button:active:focus {
color: var(--nav-button-active-text-color);
background-color: var(--nav-button-active-bg-color);
}

.algo-nav-buttons.autoplay button:focus,
.algo-nav-buttons.autoplay button:active,
.algo-nav-buttons.autoplay button:active:focus {
color: var(--nav-button-autoplay-active-text-color);
background-color: var(--nav-button-autoplay-active-bg-color);
}

.algo-nav-buttons button {
border-top: 1px solid var(--nav-button-border-color);
border-bottom: 1px solid var(--nav-button-border-color);
Expand All @@ -1067,6 +1111,12 @@ div[id*="modal"] .help-docs button:active:focus {
border-radius: 0;
}

.algo-nav-buttons.autoplay button {
border-top: 1px solid var(--nav-button-autoplay-border-color);
border-bottom: 1px solid var(--nav-button-autoplay-border-color);
border-left: 0.5px solid var(--nav-button-autoplay-border-color);
}

.algo-nav-buttons button:focus,
.algo-nav-buttons button:active,
.algo-nav-buttons button:active:focus {
Expand All @@ -1075,30 +1125,58 @@ div[id*="modal"] .help-docs button:active:focus {
border-bottom: 1px solid var(--nav-button-active-border-color);
}

.algo-nav-buttons.autoplay button:focus,
.algo-nav-buttons.autoplay button:active,
.algo-nav-buttons.autoplay button:active:focus {
border-left: 0.5px solid var(--nav-button-autoplay-active-border-color);
border-top: 1px solid var(--nav-button-autoplay-active-border-color);
border-bottom: 1px solid var(--nav-button-autoplay-active-border-color);
}

.algo-nav-buttons button:first-of-type {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
border-left: 1px solid var(--nav-button-border-color);
}

.algo-nav-buttons.autoplay button:first-of-type {
border-left: 1px solid var(--nav-button-autoplay-border-color);
}

.algo-nav-buttons button:first-of-type:focus,
.algo-nav-buttons button:first-of-type:active,
.algo-nav-buttons button:first-of-type:active:focus {
border-left: 1px solid var(--nav-button-active-border-color);
}

.algo-nav-buttons.autoplay button:first-of-type:focus,
.algo-nav-buttons.autoplay button:first-of-type:active,
.algo-nav-buttons.autoplay button:first-of-type:active:focus {
border-left: 1px solid var(--nav-button-autoplay-active-border-color);
}

.algo-nav-buttons button:last-child {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
border-right: 1px solid var(--nav-button-border-color);
}

.algo-nav-buttons.autoplay button:last-child {
border-right: 1px solid var(--nav-button-autoplay-border-color);
}

.algo-nav-buttons button:last-child:focus,
.algo-nav-buttons button:last-child:active,
.algo-nav-buttons button:last-child:active:focus {
border-right: 1px solid var(--nav-button-active-border-color);
}

.algo-nav-buttons.autoplay button:last-child:focus,
.algo-nav-buttons.autoplay button:last-child:active,
.algo-nav-buttons.autoplay button:last-child:active:focus {
border-right: 1px solid var(--nav-button-autoplay-active-border-color);
}

.base64-algo-demo button:disabled,
.base64-algo-demo button:disabled:hover,
.base64-algo-demo button:disabled:focus,
Expand All @@ -1119,6 +1197,16 @@ div[id*="modal"] .help-docs button:active:focus {
border-bottom: 1px solid var(--button-disabled-border-color);
}

.algo-nav-buttons.autoplay button:disabled,
.algo-nav-buttons.autoplay button:disabled:hover,
.algo-nav-buttons.autoplay button:disabled:focus,
.algo-nav-buttons.autoplay button:disabled:active,
.algo-nav-buttons.autoplay button:disabled:active:focus {
border-left: 0.5px solid var(--nav-button-autoplay-disabled-border-color);
border-top: 1px solid var(--nav-button-autoplay-disabled-border-color);
border-bottom: 1px solid var(--nav-button-autoplay-disabled-border-color);
}

.nav-buttons-help button:disabled,
.nav-buttons-help button:disabled:hover,
.nav-buttons-help button:disabled:focus,
Expand All @@ -1139,21 +1227,35 @@ div[id*="modal"] .help-docs button:active:focus {
border-left: 1px solid var(--button-disabled-border-color);
}

.algo-nav-buttons.autoplay button:disabled:first-of-type,
.algo-nav-buttons.autoplay button:disabled:first-of-type:focus,
.algo-nav-buttons.autoplay button:disabled:first-of-type:active,
.algo-nav-buttons.autoplay button:disabled:first-of-type:active:focus {
border-left: 1px solid var(--nav-button-autoplay-disabled-border-color);
}

.algo-nav-buttons button:disabled:last-child,
.algo-nav-buttons button:disabled:last-child:focus,
.algo-nav-buttons button:disabled:last-child:active,
.algo-nav-buttons button:disabled:last-child:active:focus {
border-right: 1px solid var(--button-disabled-border-color);
}

.autoplay button,
.algo-nav-buttons.autoplay button:disabled:last-child,
.algo-nav-buttons.autoplay button:disabled:last-child:focus,
.algo-nav-buttons.autoplay button:disabled:last-child:active,
.algo-nav-buttons.autoplay button:disabled:last-child:active:focus {
border-right: 1px solid var(--nav-button-autoplay-disabled-border-color);
}

/* .autoplay button,
.autoplay button:hover,
.autoplay button:focus,
.autoplay button:active,
.autoplay button:active:focus {
color: var(--nav-button-autoplay-text-color);
background-color: var(--nav-button-autoplay-bg-color);
}
} */

.nav-buttons-help .autoplay button,
.nav-buttons-help .autoplay button:hover,
Expand All @@ -1163,7 +1265,7 @@ div[id*="modal"] .help-docs button:active:focus {
border: 1px solid var(--nav-button-autoplay-border-color);
}

.algo-nav-buttons.autoplay button,
/* .algo-nav-buttons.autoplay button,
.algo-nav-buttons.autoplay button:hover,
.algo-nav-buttons.autoplay button:focus,
.algo-nav-buttons.autoplay button:active,
Expand All @@ -1181,7 +1283,7 @@ div[id*="modal"] .help-docs button:active:focus {
cursor: default;
color: var(--nav-button-autoplay-disabled-text-color);
background-color: var(--nav-button-autoplay-disabled-bg-color);
}
} */

.nav-buttons-help .autoplay button:disabled,
.nav-buttons-help .autoplay button:disabled:hover,
Expand All @@ -1191,7 +1293,7 @@ div[id*="modal"] .help-docs button:active:focus {
border: 1px solid var(--nav-button-autoplay-disabled-border-color);
}

.algo-nav-buttons.autoplay button:disabled,
/* .algo-nav-buttons.autoplay button:disabled,
.algo-nav-buttons.autoplay button:disabled:hover,
.algo-nav-buttons.autoplay button:disabled:focus,
.algo-nav-buttons.autoplay button:disabled:active,
Expand All @@ -1215,7 +1317,7 @@ div[id*="modal"] .help-docs button:active:focus {
.algo-nav-buttons.autoplay button:disabled:first-of-type:active,
.algo-nav-buttons.autoplay button:disabled:first-of-type:active:focus {
border-left: 1px solid var(--nav-button-autoplay-disabled-border-color);
}
} */

.nav-buttons-help button,
.modal button {
Expand Down
49 changes: 18 additions & 31 deletions apps/svelte-base64/src/lib/components/AlgorithmDemo/AlgorithmDemo.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,24 +188,23 @@
<style lang="postcss">
.top-row {
display: grid;
grid-template-columns: auto auto;
grid-template-columns: auto;
grid-template-rows: auto auto;
grid-template-areas:
'demo-title'
'author-name';
align-items: baseline;
gap: 1rem;
margin: 0 0 1.5rem 0;
margin: 0;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
grid-area: top-row;
}
.form-title-wrappper {
justify-self: center;
grid-column: 1 / span 2;
grid-row: 1 / span 1;
grid-area: demo-title;
}
.author-name {
grid-column: 2 / span 1;
grid-row: 2 / span 1;
justify-self: flex-end;
grid-area: author-name;
}
#demo-steps-wrapper {
display: block;
Expand All @@ -214,11 +213,10 @@
overflow: auto;
padding: 0.75rem 1rem;
transition: transform 0.75s ease-in-out;
margin: 1rem 0;
margin: 0;
font-family: 'Roboto Mono', menlo, monospace;
grid-column: 1 / span 1;
grid-row: 3 / span 1;
grid-area: demo-steps;
}
.demo-steps {
position: relative;
Expand All @@ -244,9 +242,7 @@
}
.bottom-row {
overflow: auto;
grid-column: 1 / span 1;
grid-row: 4 / span 1;
grid-area: bottom-row;
}
:global(.highlight-hex-byte),
:global(.highlight-base64) {
Expand All @@ -256,28 +252,22 @@
}
@media screen and (min-width: 764px) {
.top-row {
grid-template-columns: auto auto 1fr auto;
grid-template-columns: 1fr auto;
grid-template-rows: auto;
align-items: center;
margin: 0 0 2rem 0;
grid-template-areas: 'demo-title author-name';
width: 701px;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
}
.form-title-wrappper {
grid-column: 1 / span 1;
justify-self: flex-start;
}
.author-name {
grid-column: 4 / span 1;
grid-row: 1 / span 1;
justify-self: flex-end;
}
#demo-steps-wrapper {
padding: 1.5rem;
width: 653px;
grid-column: 1 / span 1;
grid-row: 3 / span 1;
grid-area: demo-steps;
}
.demo-steps {
grid-template-columns: 148px 5px 353px 5px 122px;
Expand All @@ -290,10 +280,7 @@
grid-row: 2 / span 1;
}
.bottom-row {
margin: 1rem 0 0 0;
grid-column: 1 / span 1;
grid-row: 4 / span 1;
margin: 0;
}
}
</style>
6 changes: 3 additions & 3 deletions apps/svelte-base64/src/lib/components/AlgorithmDemo/DemoResults/DemoResults.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<div class="binary-chunks">
{#each $state.context.updatedByteMaps as byte, byteIndex}
<div
transition:fade={{ duration: 200 }}
in:fade={{ duration: 200 }}
class="encoded-byte"
data-chunk-id={getChunkIndexFromByteIndex(byteIndex) + 1}
data-byte-number={byteIndex + 1}
Expand Down Expand Up @@ -65,7 +65,7 @@
<div class="binary-chunks">
{#each $state.context.base64Maps as _, charIndex}
<div
transition:fade={{ duration: 200 }}
in:fade={{ duration: 200 }}
class="encoded-base64"
data-chunk-id={getChunkIndexFromBase64CharIndex(charIndex) + 1}
data-b64char-number={charIndex + 1}
Expand All @@ -82,7 +82,7 @@
<div class="binary-chunks">
{#each $state.context.updatedBase64Maps as b64, charIndex}
<div
transition:fade={{ duration: 200 }}
in:fade={{ duration: 200 }}
class="encoded-base64"
data-chunk-id={getChunkIndexFromBase64CharIndex(charIndex) + 1}
data-bit-group={b64.groupId}
Expand Down
Loading

0 comments on commit 484dac3

Please sign in to comment.