49 lines
1.4 KiB
CSS
49 lines
1.4 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--change-topic-color: 0deg 100% 50%;
|
|
--change-topic-dark: 0deg 57% 20%;
|
|
--probing-q-color: 48deg 100% 50%;
|
|
--probing-q-dark: 48deg 100% 17%;
|
|
--expand-color: 120deg 57% 50%;
|
|
--expand-dark: 120deg 57% 20%;
|
|
--clarifying-q-color: 216deg 99% 55%;
|
|
--clarifying-q-dark: 216deg 57% 20%;
|
|
--meta-color: 312deg 100% 50%;
|
|
--meta-dark: 312deg 57% 20%;
|
|
}
|
|
|
|
/* https://stackoverflow.com/questions/12813573/position-icons-into-circle */
|
|
.circle-container {
|
|
--d: 10rem; /* the image size */
|
|
--rel: 0.5; /* how much extra space we want between images, 1 = one image size */
|
|
--r: calc(.5*(1 + var(--rel))*var(--d)/var(--tan) + 0.4*var(--d)); /* circle radius */
|
|
--s: calc(2*var(--r) + var(--d)); /* container size */
|
|
position: relative;
|
|
width: var(--s);
|
|
height: var(--s);
|
|
}
|
|
|
|
.circle-container .person-bricks {
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
/* margin: calc(-.5*var(--d)); */
|
|
--az: calc(var(--i)*1turn/var(--m));
|
|
width: var(--az); height: var(--az);
|
|
transform:
|
|
translateX(-50%)
|
|
translateY(-50%)
|
|
rotate(90deg)
|
|
rotate(var(--az))
|
|
translate(var(--r))
|
|
rotate(-90deg)
|
|
}
|
|
|
|
.custom-bg {
|
|
background-image: url('/static/images/morphing-diamonds.svg'), linear-gradient(to right, #ff7e5f, white);
|
|
background-repeat: repeat;
|
|
background-position: center, center;
|
|
}
|