<!DOCTYPE html>
<html lang="en" style="scrollbar-gutter:stable;">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="IiR9MFYdKzomDBE6BSxuKBwEBy4ZFjcvZl1i1wjTUDGP2bCN-FITCEfX">
<title data-suffix=" · Catalin Mititiuc">
WebDevCat.me
· Catalin Mititiuc</title>
<link rel="stylesheet" id="font-bitter-css" href="//fonts.googleapis.com/css?family=Bitter:400,700" type="text/css" media="screen">
<link phx-track-static rel="stylesheet" href="/assets/app-131585bb1e255488c3d2558ee5c81330.css?vsn=d">
<link phx-track-static rel="stylesheet" href="/assets/cgit-313ed4244ed6cc8d5b67d6fbb4ab18c8.css?vsn=d">
<style>
article > * { max-width: unset; }
div#cgit table.list {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit div.content {
overflow: scroll;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.blob {
table-layout: auto;
width: 100%;
display: table;
}
div#cgit table.tabs {
table-layout: auto;
width: 100%;
display: table;
}
td.linenumbers { width: 1px; }
td.lines { max-width: 1px; overflow: hidden; }
td.linenumbers pre, td.lines pre {
line-height: 1.25em;
}
pre { overflow-x: scroll; overflow-y: hidden; }
code { font-size: unset; }
</style>
<script defer phx-track-static type="text/javascript" src="/assets/app-7bb68f31e771b77e6d1026a2eca15d48.js?vsn=d">
</script>
</head>
<body class="bg-white">
<header>
<div style="display: inline-block;">
<h1><a href="/">Web Dev Solutions</a></h1>
<h3 style="text-align: left">Catalin Mititiuc</h3>
</div>
</header>
<main>
<article>
From d01e0aa92bdedce5c03245e583d096ea5ce1753d Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc <webdevcat@proton.me>
Date: Tue, 21 May 2024 12:14:30 -0700
Subject: Add dice
---
public/assets/css/style.css | 99 +++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 99 insertions(+)
(limited to 'public/assets/css/style.css')
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index c8c4e83..f3b1736 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -314,6 +314,105 @@ div#content {
margin-bottom: 0;
}
+div#dice {
+ position: absolute;
+ right: 0;
+ bottom: 30px;
+ margin: 3px;
+ padding: 2px;
+ background-color: rgba(255, 255, 255, 0.8);
+ border-radius: 4px;
+ border: 1px solid darkgray;
+}
+
+.die {
+ width: 31px;
+ height: 31px;
+ border: 1px solid black;
+ border-radius: 4px;
+ margin: 0 auto;
+ margin-top: 3px;
+ margin-bottom: 1px;
+ background-color: white;
+ display: flex;
+ justify-content: space-around;
+}
+
+.die > div {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+}
+
+.dot {
+ display: inline-block;
+ width: 7px;
+ height: 7px;
+ background-color: black;
+ border-radius: 50%;
+ padding: 0;
+ margin: 0;
+ visibility: hidden;
+}
+
+.die.one > div:nth-child(even) > .dot:nth-child(even) {
+ visibility: visible;
+}
+
+.die.two > div:first-child > .dot:first-child,
+.die.two > div:last-child > .dot:last-child {
+ visibility: visible;
+}
+
+.die.three > div:first-child > .dot:first-child,
+.die.three > div:nth-child(even) > .dot:nth-child(even),
+.die.three > div:last-child > .dot:last-child {
+ visibility: visible;
+}
+
+.die.four > div:nth-child(odd) > .dot:nth-child(odd) {
+ visibility: visible;
+}
+
+.die.five > div:nth-child(odd) > .dot:nth-child(odd),
+.die.five > div:nth-child(even) > .dot:nth-child(even) {
+ visibility: visible;
+}
+
+.die.six > div:nth-child(odd) > .dot {
+ visibility: visible;
+}
+
+.die.test > div:first-child > .dot {
+ visibility: visible;
+}
+
+.roll-in {
+ animation: roll-in 0.125s linear 1;
+}
+
+.roll-out {
+ animation: roll-out 0.125s linear 1;
+}
+
+@keyframes roll-out {
+ 0% {
+ transform: scaleX(1);
+ }
+ 100% {
+ transform: scaleX(0);
+ }
+}
+
+@keyframes roll-in {
+ 0% {
+ transform: scaleX(0);
+ }
+ 100% {
+ transform: scaleX(1);
+ }
+}
+
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;
--
cgit v1.2.3
</article>
</main>
<footer>
<p>100% Human Made, No AI Used</p>
<p>stasis 0.2.12</p>
</footer>
</body>
</html>