From e3822563309410e728260080eefa92d1f62f409f Mon Sep 17 00:00:00 2001 From: odweta Date: Sat, 12 Sep 2026 14:22:10 +0200 Subject: [PATCH] add: css styling --- css/blink-cursor.css | 8 ++++ css/corrections.css | 12 ++++++ css/glitch.css | 90 ++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 31 +++++++++++++++ index.html | 50 ++++++++++++++++-------- 5 files changed, 175 insertions(+), 16 deletions(-) create mode 100644 css/blink-cursor.css create mode 100644 css/corrections.css create mode 100644 css/glitch.css create mode 100644 css/style.css diff --git a/css/blink-cursor.css b/css/blink-cursor.css new file mode 100644 index 0000000..6326dde --- /dev/null +++ b/css/blink-cursor.css @@ -0,0 +1,8 @@ +.blink-cursor { + animation: blink-cursor 1s steps(1) infinite; +} + +@keyframes blink-cursor{ + 0%, 50% { opacity: 0.0; } /* invisible 0%..50% */ + 50%, 100% { opacity: 1.0; } /* visible 50%..100% */ +} \ No newline at end of file diff --git a/css/corrections.css b/css/corrections.css new file mode 100644 index 0000000..39e0872 --- /dev/null +++ b/css/corrections.css @@ -0,0 +1,12 @@ +#title { + margin-top: 0; +} + +footer ul, +#bottom-line { + margin: 0; +} + +li { + margin-bottom: 0.5rem; +} diff --git a/css/glitch.css b/css/glitch.css new file mode 100644 index 0000000..f85b7e3 --- /dev/null +++ b/css/glitch.css @@ -0,0 +1,90 @@ +.glitch { + position: relative; + display: inline-block; + isolation: isolate; + z-index: 0; +} + +/* Duplicated text layers inherit the element's color */ +.glitch::before, +.glitch::after { + content: attr(data-glitch); + position: absolute; + inset: 0; + width: 100%; + height: 100%; + color: inherit; + pointer-events: none; +} + +/* Horizontal glitch slices */ +.glitch::before { + z-index: 1; + animation: glitch-cyan 1.5s infinite steps(1); +} + +.glitch::after { + z-index: 2; + animation: glitch-red 1.2s infinite steps(1); +} + +/* Horizontal slices move left and right */ +@keyframes glitch-cyan { + 0%, + 100% { + clip-path: inset(0 0 80% 0); + transform: translateX(-8px); + } + + 15% { + clip-path: inset(20% 0 55% 0); + transform: translateX(10px); + } + + 30% { + clip-path: inset(55% 0 25% 0); + transform: translateX(-12px); + } + + 45%, + 70% { + clip-path: inset(0 0 100% 0); + transform: translateX(0); + } + + 80% { + clip-path: inset(35% 0 45% 0); + transform: translateX(7px); + } +} + +@keyframes glitch-red { + 0%, + 100% { + clip-path: inset(75% 0 5% 0); + transform: translateX(8px); + } + + 20% { + clip-path: inset(10% 0 70% 0); + transform: translateX(-11px); + } + + 35%, + 60% { + clip-path: inset(0 0 100% 0); + transform: translateX(0); + } + + 75% { + clip-path: inset(50% 0 30% 0); + transform: translateX(-7px); + } +} + +@media (prefers-reduced-motion: reduce) { + .glitch::before, + .glitch::after { + animation: none; + } +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..3595ac6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,31 @@ +* { + color: #ebdbb2; + font-family: 'Courier New', Courier, monospace; + box-sizing: border-box; +} + +body { + display: flex; + background-color: #282828; +} + +.heading, +.link { + color: #d79921; +} + +.quote { + border-left: solid 2px #a89984; + padding-left: 1rem; + font-style: italic; + margin-left: 0.5rem; +} + +.card { + width: 70%; + margin-inline: auto; + margin-top: 5rem; + background-color: #3c3836; + border-radius: 2rem; + padding: 2rem; +} \ No newline at end of file diff --git a/index.html b/index.html index d8d001e..0a9355c 100644 --- a/index.html +++ b/index.html @@ -3,27 +3,45 @@ + + + + + sourceworks.dev -

Odweta – Personal Home Page

-

an Android programmer, sysadmin and hacker

- -

Programming projects:

- +
+

Odweta – Personal Home Page

+ +

an Android developer, sysadmin and hacker

-
-

Contact me at:

+

>_ Programming projects:

    -
  • Email: contact@sourceworks.dev
    • -
  • Matrix: @odweta:matrix.org
    • +
  • Solon – a custom frontend for a school administration system Škola Online as an Android app.
    • +
  • odwetalibc – an extention library of stock C functionalities, providing dynamic arrays, Python-like lists, some string manipulation enhancements and other utility functions.
    • +
  • vendetta – a tool for managing projects which use the odwetalibc library.
    • +
  • Fakturovač – software for creating and managing invoices.
    • +
  • Searcher – a simple app which fetches the first page of google results for a specified query and saves it as a JSON file.
-
+ + +
\ No newline at end of file