Skip to content

Commit e238472

Browse files
miermontotomiermontoto
committed
17.0 beta1
webutils css and js, better card css, small fixes, okt
1 parent d65018e commit e238472

17 files changed

Lines changed: 180 additions & 964 deletions

File tree

‎assets/fonts/Dosis.ttf‎

113 KB
Binary file not shown.

‎package-lock.json‎

Lines changed: 4 additions & 893 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/content/collections/experience/okticket.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ name: okticket
33
role: software engineer, intership
44
period: 2023 (3 months)
55
icons: [fa-brands fa-laravel fa-solid, fa-brands fa-php, fa-brands fa-docker, devicon-ruby-plain]
6+
class: okticket
67
---
78
extracurricular internship at *okticket*, a Fintech SaaS that digitizes and manages employee tickets.
89

‎src/content/collections/projects/webutils.njk‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ permalink: /webutils/
66
demo: /webutils/
77
---
88

9+
<div class="carded" id="utils">
910
{% for util in collections.webutils %}
10-
<div id="{{ util.fileSlug }}" class="util">
11-
<h2><a href="/{{ util.fileSlug }}">{{ util.fileSlug }}</a></h2>
11+
<div id="{{ util.fileSlug }}" class="util card">
12+
<h2 class="card-title"><a href="/{{ util.fileSlug }}">{{ util.fileSlug }}</a></h2>
1213
{% set name = './src/content/collections/webutils/' + util.fileSlug + '.njk' %}
1314
{% renderFile name %}
1415
</div>
15-
<hr>
1616
{% endfor %}
17+
</div>

‎src/content/collections/webutils/base64.njk‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,12 @@
11
{% addScript 'base64' %}
22
{% addStyle 'webutils' %}
33

4-
<textarea id="decoded" class="input"></textarea>
4+
<div id="decoded">
5+
<textarea class="input" id="decoded-text" placeholder="Plain text"></textarea>
6+
<span class="button" id="decoded-copy">⎘</span>
7+
</div>
58
<span><=></span>
6-
<textarea id="encoded" class="output"></textarea>
9+
<div id="encoded">
10+
<textarea class="output" id="encoded-text" placeholder="Encoded text"></textarea>
11+
<span class="button" id="encoded-copy">⎘</span>
12+
</div>

‎src/content/collections/webutils/md5.njk‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
{% addScript 'md5.min' %} {# MD5 function library #}
12
{% addScript 'md5' %}
23
{% addStyle 'webutils' %}
34

45
<input id="md5-input" class="input" type="text" placeholder="String to hash using MD5">
5-
<br> <br>
66
<span id="md5-output" class="output"></span>
7+
<span class="button" id="md5-copy">copy</span>

‎src/content/collections/webutils/tiny.njk‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
{% addScript 'tiny' %}
22
{% addStyle 'webutils' %}
33

4+
<div>
5+
<input type="checkbox" id="tiny-ignore">
6+
<label for="tiny-ignore">Ignore untinifyable content</label>
7+
</div>
48
<input class="input" id="tiny-input" type="text" placeholder="String to tinify">
5-
<br> <br>
69
<span class="output" id="tiny-output"></span>
10+
<span class=button id="tiny-copy">copy</span>

‎src/static/css/app/webutils.sass‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,20 @@ span.output
44
$padding: 10px
55

66
border-radius: base.$radius
7-
border: 3px solid base.$light
7+
border: 2px solid base.$light
88
padding: $padding
9-
margin: 25em 0
9+
overflow-wrap: anywhere
10+
11+
.input, .output
12+
width: 80%
13+
height: max(1em, auto)
14+
15+
.output:not(textarea)
16+
text-align: center
17+
18+
.utils
19+
width: 100%
20+
21+
.util.card
22+
width: max(29%, 450px)
23+
padding-bottom: 2em

‎src/static/css/global.sass‎

Lines changed: 65 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
@use 'base'
22

3-
body
3+
*
44
font-family: base.$fonts
5+
6+
body
57
color: base.$white
68
background-color: base.$primary
79
text-align: center
@@ -30,6 +32,13 @@ a, a:visited
3032
animation: base.$animation
3133
cursor: pointer
3234

35+
&.disabled
36+
cursor: not-allowed
37+
opacity: 0.5
38+
39+
&:hover
40+
animation: none
41+
3342
code
3443
color: base.$white
3544
background-color: base.$secondary
@@ -73,3 +82,58 @@ hr
7382
margin-top: 3em
7483
margin-bottom: 3em
7584
width: 95%
85+
86+
$rotation: 2.5rad
87+
:root
88+
--rotation: variables.$rotation
89+
90+
// cards
91+
.carded
92+
display: flex
93+
flex-wrap: wrap
94+
justify-content: center
95+
96+
.card
97+
width: max(20%, 300px)
98+
display: grid
99+
gap: 1em
100+
align-items: center
101+
justify-items: center
102+
border-radius: base.$radius
103+
border: 2px solid transparent
104+
box-shadow: 0 0 0 2px base.$dark
105+
padding: 1.5em
106+
margin: 1.5em
107+
background-color: base.$primary
108+
109+
p
110+
margin: 1em
111+
112+
.card-bottom
113+
display: flex
114+
align-items: center
115+
justify-content: center
116+
height: 100%
117+
118+
.card-title
119+
display: flex
120+
align-items: center
121+
justify-content: center
122+
123+
.card-icons
124+
user-select: none
125+
126+
.bordered
127+
background-image: linear-gradient(black, black), linear-gradient(calc(var(--rotation)), base.$light 0, base.$secondary 20%, transparent 80%)
128+
background-origin: border-box
129+
background-clip: content-box, border-box
130+
border: 2px solid transparent
131+
132+
.icon
133+
margin: 0 2px
134+
font-size: 1.25em
135+
136+
&.svg
137+
height: auto
138+
width: 1.25em
139+
filter: invert(1) grayscale(1) brightness(1.5)

0 commit comments

Comments
 (0)