diff --git a/www/style.css b/www/style.css new file mode 100644 index 0000000..70589d2 --- /dev/null +++ b/www/style.css @@ -0,0 +1,31 @@ +:root { + --text-color: solid orange; +} + +/* =========================================================== * + * Type Writer Effect * + * Ref: https://css-tricks.com/snippets/css/typewriter-effect/ * +/* =========================================================== */ + +.typewriter { + overflow: hidden; /* Crop everything that hasn't been "typed" yet */ + border-right: .15em solid orange; /* Cursor */ + white-space: nowrap; /* Keeps the content on a single line */ + margin: 0 auto; /* Scrolling effect while "typing" */ + letter-spacing: .15em; /* Adjustable */ + animation: + typewriter-typing 3.5s steps(40, end), + typewriter-cursor-blink .75s step-end infinite; +} + +/* .typewriter typing effect */ +@keyframes typerwriter-typing { + from { width: 0 } + to { width: 100% } +} + +/* .typewriter cursor blink effect */ +@keyframes typerwriter-cursor-blink { + from, to { border-color: transparent } + 50% { border-color: orange; } +}