editable-website/src/app.css at main · michael/editable-website · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
@import 'tailwindcss';
@plugin '@tailwindcss/forms';

@font-face {
	font-family: 'Inter';
	src: url('/fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Inter';
	src: url('/fonts/InterVariable-Italic.woff2') format('woff2');
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Libertinos Serif Display';
	src: url('/fonts/Libertinos-Serif-Display.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Website colors */
	--background: oklch(0.98 0 0);
	--foreground: oklch(0 0 0);
	--accent: oklch(0.21 0.034 264);
	--accent-foreground: oklch(0.98 0 0);

	/* Editor colors */
	--svedit-brand: oklch(60% 0.22 283);
  --svedit-editing-stroke: var(--svedit-brand);
  --svedit-editing-fill: oklch(from var(--svedit-brand) l c h / 0.1);
  --svedit-canvas-stroke: color-mix(in oklch, currentColor 25%, transparent);

  /* Rounded corners */
  --button-border-radius: 3rem; /* rounded corners for buttons, nav items */
	--image-border-radius: 0.5rem; /* rounded corners for images */
}

/* Website fonts */
@theme {
	--font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
	--font-serif: 'Libertinos Serif Display', ui-serif, Georgia, serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

@layer utilities {
	.ew-bg-checkerboard {
		background:
			linear-gradient(45deg, color-mix(in oklch, var(--foreground) 10%, transparent) 25%, transparent 25%),
			linear-gradient(-45deg, color-mix(in oklch, var(--foreground) 10%, transparent) 25%, transparent 25%),
			linear-gradient(45deg, transparent 75%, color-mix(in oklch, var(--foreground) 10%, transparent) 75%),
			linear-gradient(-45deg, transparent 75%, color-mix(in oklch, var(--foreground) 10%, transparent) 75%);
		background-size: 20px 20px;
		background-position:
			0 0,
			0 10px,
			10px -10px,
			-10px 0px;
		background-color: var(--background);
	}
}

/* Scroll-triggered reveal animations
   Comment out the block below to disable */
.svedit-canvas[contenteditable="false"] .reveal-hidden {
  opacity: 0;
	transform: translateY(30px);
}

.svedit-canvas[contenteditable="false"] .revealed {
  opacity: 1;
	transform: translateY(0);
	transition: opacity 0.8s cubic-bezier(0, 0, 0.2, 1), transform 0.8s cubic-bezier(0, 0, 0.2, 1);
}