Skip to content

Commit

Permalink
17.0 beta1
Browse files Browse the repository at this point in the history
webutils css and js, better card css, small fixes, okt
  • Loading branch information
miermontoto committed Nov 13, 2023
1 parent d65018e commit e238472
Show file tree
Hide file tree
Showing 17 changed files with 180 additions and 964 deletions.
Binary file added assets/fonts/Dosis.ttf
Binary file not shown.
897 changes: 4 additions & 893 deletions package-lock.json

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions package.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/content/collections/experience/okticket.md
Expand Up @@ -3,6 +3,7 @@ name: okticket
role: software engineer, intership
period: 2023 (3 months)
icons: [fa-brands fa-laravel fa-solid, fa-brands fa-php, fa-brands fa-docker, devicon-ruby-plain]
class: okticket
---
extracurricular internship at *okticket*, a Fintech SaaS that digitizes and manages employee tickets.

Expand Down
7 changes: 4 additions & 3 deletions src/content/collections/projects/webutils.njk
Expand Up @@ -6,11 +6,12 @@ permalink: /webutils/
demo: /webutils/
---

<div class="carded" id="utils">
{% for util in collections.webutils %}
<div id="{{ util.fileSlug }}" class="util">
<h2><a href="/{{ util.fileSlug }}">{{ util.fileSlug }}</a></h2>
<div id="{{ util.fileSlug }}" class="util card">
<h2 class="card-title"><a href="/{{ util.fileSlug }}">{{ util.fileSlug }}</a></h2>
{% set name = './src/content/collections/webutils/' + util.fileSlug + '.njk' %}
{% renderFile name %}
</div>
<hr>
{% endfor %}
</div>
10 changes: 8 additions & 2 deletions src/content/collections/webutils/base64.njk
@@ -1,6 +1,12 @@
{% addScript 'base64' %}
{% addStyle 'webutils' %}

<textarea id="decoded" class="input"></textarea>
<div id="decoded">
<textarea class="input" id="decoded-text" placeholder="Plain text"></textarea>
<span class="button" id="decoded-copy">⎘</span>
</div>
<span><=></span>
<textarea id="encoded" class="output"></textarea>
<div id="encoded">
<textarea class="output" id="encoded-text" placeholder="Encoded text"></textarea>
<span class="button" id="encoded-copy">⎘</span>
</div>
3 changes: 2 additions & 1 deletion src/content/collections/webutils/md5.njk
@@ -1,6 +1,7 @@
{% addScript 'md5.min' %} {# MD5 function library #}
{% addScript 'md5' %}
{% addStyle 'webutils' %}

<input id="md5-input" class="input" type="text" placeholder="String to hash using MD5">
<br> <br>
<span id="md5-output" class="output"></span>
<span class="button" id="md5-copy">copy</span>
6 changes: 5 additions & 1 deletion src/content/collections/webutils/tiny.njk
@@ -1,6 +1,10 @@
{% addScript 'tiny' %}
{% addStyle 'webutils' %}

<div>
<input type="checkbox" id="tiny-ignore">
<label for="tiny-ignore">Ignore untinifyable content</label>
</div>
<input class="input" id="tiny-input" type="text" placeholder="String to tinify">
<br> <br>
<span class="output" id="tiny-output"></span>
<span class=button id="tiny-copy">copy</span>
18 changes: 16 additions & 2 deletions src/static/css/app/webutils.sass
Expand Up @@ -4,6 +4,20 @@ span.output
$padding: 10px

border-radius: base.$radius
border: 3px solid base.$light
border: 2px solid base.$light
padding: $padding
margin: 25em 0
overflow-wrap: anywhere

.input, .output
width: 80%
height: max(1em, auto)

.output:not(textarea)
text-align: center

.utils
width: 100%

.util.card
width: max(29%, 450px)
padding-bottom: 2em
66 changes: 65 additions & 1 deletion src/static/css/global.sass
@@ -1,7 +1,9 @@
@use 'base'

body
*
font-family: base.$fonts

body
color: base.$white
background-color: base.$primary
text-align: center
Expand Down Expand Up @@ -30,6 +32,13 @@ a, a:visited
animation: base.$animation
cursor: pointer

&.disabled
cursor: not-allowed
opacity: 0.5

&:hover
animation: none

code
color: base.$white
background-color: base.$secondary
Expand Down Expand Up @@ -73,3 +82,58 @@ hr
margin-top: 3em
margin-bottom: 3em
width: 95%

$rotation: 2.5rad
:root
--rotation: variables.$rotation

// cards
.carded
display: flex
flex-wrap: wrap
justify-content: center

.card
width: max(20%, 300px)
display: grid
gap: 1em
align-items: center
justify-items: center
border-radius: base.$radius
border: 2px solid transparent
box-shadow: 0 0 0 2px base.$dark
padding: 1.5em
margin: 1.5em
background-color: base.$primary

p
margin: 1em

.card-bottom
display: flex
align-items: center
justify-content: center
height: 100%

.card-title
display: flex
align-items: center
justify-content: center

.card-icons
user-select: none

.bordered
background-image: linear-gradient(black, black), linear-gradient(calc(var(--rotation)), base.$light 0, base.$secondary 20%, transparent 80%)
background-origin: border-box
background-clip: content-box, border-box
border: 2px solid transparent

.icon
margin: 0 2px
font-size: 1.25em

&.svg
height: auto
width: 1.25em
filter: invert(1) grayscale(1) brightness(1.5)
62 changes: 12 additions & 50 deletions src/static/css/index.sass
@@ -1,14 +1,20 @@
@use 'base'
@import url("https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css")
@font-face
@font-face // title font
font-family: 'Daft Font'
font-display: swap
src: local('Daft Font'), url('/assets/fonts/DaftFont.woff') format('woff')

@font-face
@font-face // marquee font
font-family: "Ndot-55"
font-display: swap
src: local('Ndot-55'), url('/assets/fonts/Ndot-55.otf')

@font-face // okticket font
font-family: 'Dosis'
font-display: swap
src: local('Dosis'), url('/assets/fonts/Dosis.ttf') format('truetype')

$dot: base.$white

// main
Expand Down Expand Up @@ -39,13 +45,6 @@ ul
opacity: 1
max-height: 9999em

.model
border-radius: base.$radius
border: 2px solid base.$light
background-color: base.$secondary
margin: 1em
display: inline-block
padding: 1em

#about
line-height: 1.5em
Expand Down Expand Up @@ -94,44 +93,8 @@ a:hover .dot, span:hover .dot
100%
transform: translateX(-100%)

// cards
.carded
display: flex
flex-wrap: wrap
justify-content: center

.card
width: max(20%, 300px)
display: grid
gap: 1em
align-items: center

p
margin: 1em

.card-bottom
display: flex
align-items: center
justify-content: center
height: 100%

.card-title
display: flex
align-items: center
justify-content: center

.card-icons
user-select: none

// icons
.icon
margin: 0 2px
font-size: 1.25em

&.svg
height: auto
width: 1.25em
filter: invert(1) grayscale(1) brightness(1.5)
.okticket .card-title
font-family: 'Dosis', sans-serif

.experience-logo
width: 1.5em
Expand All @@ -142,10 +105,9 @@ a:hover .dot, span:hover .dot
// projects table
table#projects
table-layout: auto
margin: 1em 0
border: 3px solid base.$light
border: 2px solid base.$light
border-radius: base.$radius
padding: 1em
padding: 0.5em

.project.star > .project-title
font-size: 1.5em
Expand Down
13 changes: 11 additions & 2 deletions src/static/js/app/base64.js
@@ -1,6 +1,8 @@
window.addEventListener("load", function(event) {
const decoded = document.querySelector('#decoded');
const encoded = document.querySelector('#encoded');
const decoded = document.querySelector('#decoded-text');
const encoded = document.querySelector('#encoded-text');
const copyDecoded = document.querySelector('#decoded-copy');
const copyEncoded = document.querySelector('#encoded-copy');

const encode = () => {
encoded.value = b2a(decoded.value);
Expand All @@ -18,8 +20,15 @@ window.addEventListener("load", function(event) {
decoded.value = text;
}

const copyToClipboard = (dom) => {
this.navigator.clipboard.writeText(dom.value);
};

decoded.addEventListener('input', encode);
encoded.addEventListener('input', decode);

copyDecoded.addEventListener('click', () => copyToClipboard(decoded));
copyEncoded.addEventListener('click', () => copyToClipboard(encoded));
});

function a2b(str) {
Expand Down
17 changes: 14 additions & 3 deletions src/static/js/app/md5.js
@@ -1,16 +1,27 @@
// import md5 function from library blueimp-md5
require('md5.min.js');

window.addEventListener("load", function(event) {
const input = document.querySelector('#md5-input');
const output = document.querySelector('#md5-output');
const copy = document.querySelector('#md5-copy');

input.value = '';
output.innerHTML = '';
copy.classList.add('disabled');

const update = () => {
if (input.value.length === 0) {
copy.classList.add('disabled');
output.innerHTML = '';
return;
}

copy.classList.remove('disabled');
output.innerHTML = md5(input.value);
}

const copyToClipboard = () => {
this.navigator.clipboard.writeText(output.inner);
}

input.addEventListener('input', update);
copy.addEventListener('click', copyToClipboard);
});
3 changes: 3 additions & 0 deletions src/static/js/app/md5.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 21 additions & 3 deletions src/static/js/app/tiny.js
@@ -1,22 +1,40 @@
window.addEventListener("load", function(event) {
const input = document.querySelector('#tiny-input');
const output = document.querySelector('#tiny-output');
const ignore = document.querySelector('#tiny-ignore');
const copy = document.querySelector('#tiny-copy');

input.value = '';
output.innerHTML = '';
copy.classList.add('disabled');

const update = () => {
output.innerHTML = tinify(input.value);
output.innerHTML = tinify(input.value, ignore.checked);
if (output.innerHTML.length === 0) {
copy.classList.add('disabled');
return;
}
copy.classList.remove('disabled');
}

const copyToClipboard = () => {
this.navigator.clipboard.writeText(output.innerHTML);
}

input.addEventListener('input', update);
ignore.addEventListener('change', update);
copy.addEventListener('click', copyToClipboard);
});

const superscript = { 'a': 'ᵃ', 'b': 'ᵇ', 'c': 'ᶜ', 'd': 'ᵈ', 'e': 'ᵉ', 'f': 'ᶠ', 'g': 'ᵍ', 'h': 'ʰ', 'i': 'ⁱ', 'j': 'ʲ', 'k': 'ᵏ', 'l': 'ˡ', 'm': 'ᵐ', 'n': 'ⁿ', 'o': 'ᵒ', 'p': 'ᵖ', 'q': '𐞥', 'r': 'ʳ', 's': 'ˢ', 't': 'ᵗ', 'u': 'ᵘ', 'v': 'ᵛ', 'w': 'ʷ', 'x': 'ˣ', 'y': 'ʸ', 'z': 'ᶻ',
'A': 'ᴬ', 'B': 'ᴮ', 'C': 'ꟲ', 'D': 'ᴰ', 'E': 'ᴱ', 'F': 'ꟳ', 'G': 'ᴳ', 'H': 'ᴴ', 'I': 'ᴵ', 'J': 'ᴶ', 'K': 'ᴷ', 'L': 'ᴸ', 'M': 'ᴹ', 'N': 'ᴺ', 'O': 'ᴼ', 'P': 'ᴾ', 'Q': 'ꟴ', 'R': 'ᴿ', 'S': 'ˢ', 'T': 'ᵀ', 'U': 'ᵁ', 'V': 'ⱽ', 'W': 'ᵂ', 'X': 'ˣ', 'Y': 'ʸ', 'Z': 'ᶻ',
'1': '¹', '2': '²', '3': '³', '4': '⁴', '5': '⁵', '6': '⁶', '7': '⁷', '8': '⁸', '9': '⁹', '0': '⁰' };


function tinify(str) {
return str.split('').map(c => superscript[c] || c).join('');
function tinify(str, ignore) {
return str.split('').map(
ignore ?
(c => superscript[c] || '') :
(c => superscript[c] || c)
).join('');
}

0 comments on commit e238472

Please sign in to comment.