Created a basic set of tools for making my sites.
This commit is contained in:
Zed A. Shaw
parent
3ab3103e84
commit
01fcb964be
6 changed files with 356 additions and 52 deletions
2
Makefile
2
Makefile
|
|
@ -4,6 +4,8 @@ ifeq '$(OS)' 'Windows_NT'
|
|||
GO_IS_STUPID_EXE=.exe
|
||||
endif
|
||||
|
||||
all: tailwind site
|
||||
echo "yay!"
|
||||
|
||||
build: build_bot
|
||||
go build .
|
||||
|
|
|
|||
154
pages/copy/sample.html
Normal file
154
pages/copy/sample.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<main class="!p-4">
|
||||
<h1>Sample Components</h1>
|
||||
<p>This is a list of components I've made for making websites quicker. They're just pre-styled things you commonly need to do HTML first layouts and designs.</p>
|
||||
|
||||
<h2>Shapes</h2>
|
||||
|
||||
<shape class="xs">
|
||||
I'm a placeholder.
|
||||
</shape>
|
||||
|
||||
<h2>Grids</h2>
|
||||
|
||||
<grid class="grid-cols-2">
|
||||
<shape class="xxs">0,0</shape>
|
||||
<shape class="xxs">1,0</shape>
|
||||
<shape class="xxs">0,1</shape>
|
||||
<shape class="xxs">1,1</shape>
|
||||
</grid>
|
||||
|
||||
<h2>Blocks & Bars</h2>
|
||||
|
||||
<block>
|
||||
<p>Use a block to automatically flex content vertically.</p>
|
||||
<p>Like these two lines are done.</p>
|
||||
<bar class="rounded-lg border-1 border-gray-300">
|
||||
<shape class="xxs">Image</shape>
|
||||
<p>Use a bar to flex things horizontally.</p>
|
||||
</bar>
|
||||
|
||||
<bar class="flex-end rounded-lg border-1 border-gray-300">
|
||||
<shape class="xxs">Image</shape>
|
||||
<block>
|
||||
<span>You can also combine them in arbitrary ways to layout your content.</span>
|
||||
</block>
|
||||
<grid class="grid-cols-2">
|
||||
<shape class="tiny">1</shape>
|
||||
<shape class="tiny">2</shape>
|
||||
<shape class="tiny">3</shape>
|
||||
</grid>
|
||||
</bar>
|
||||
</block>
|
||||
|
||||
<h2>Stack</h2>
|
||||
|
||||
<p>A stack lets you place multiple elements on top of eachother, like with layers in nearly every single layout composition system in existence for the last 500 years.</p>
|
||||
|
||||
<stack>
|
||||
<shape class="xs">I'm on bottom</shape>
|
||||
<h1 class="text-red-500">Hello</h1>
|
||||
<h2 class="text-orange-500">There</h2>
|
||||
</stack>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre><code>if(var != 'string') {
|
||||
console.log("test");
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>You should type <code>ls -l</code> to list the directory.</p>
|
||||
|
||||
<code>if(var != 'string')</code>
|
||||
|
||||
<h2>Highlight/Marking</h2>
|
||||
|
||||
<aside>
|
||||
<mark>Default</mark>
|
||||
<span>This is an aside. You use it to call out something specific.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="info">Info</mark>
|
||||
<span>This is an aside. You use it to call out something specific.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="warning">Warning</mark>
|
||||
<span>A warning aside.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="alert">Alert</mark>
|
||||
<span>An alert aside.</span>
|
||||
</aside>
|
||||
|
||||
<p>This is some <mark>marked</mark> text.</p>
|
||||
|
||||
<h2>Details</h2>
|
||||
|
||||
<details aria-label="Sample">
|
||||
<summary>Details Test</summary>
|
||||
A test of the details thing.
|
||||
</details>
|
||||
|
||||
<h2>Forms</h2>
|
||||
|
||||
<form>
|
||||
<card>
|
||||
<top>Test Form</top>
|
||||
|
||||
<middle>
|
||||
<label for="fruit">What Fruit?</label>
|
||||
<select id="fruit">
|
||||
<option>Apples</option>
|
||||
<option>Oranges</option>
|
||||
</select>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Your Name?" />
|
||||
</middle>
|
||||
|
||||
<bottom>
|
||||
<button>Submit</button>
|
||||
</bottom>
|
||||
</card>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Cards</h2>
|
||||
|
||||
<p>Cards organize information vertically.</p>
|
||||
|
||||
<card>
|
||||
<top><shape class="video">Image</shape></top>
|
||||
<middle>This shows a top large image with
|
||||
some text in the middle.</middle>
|
||||
<bottom><button type="button">An Action</button></bottom>
|
||||
</card>
|
||||
|
||||
<h2>Header/Nav</h2>
|
||||
|
||||
<p>If you put nav inside header it "just works".</p>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="#">Live</a>
|
||||
<a id="stream" href="#">Streams</a>
|
||||
<a id="game" href="#">Games</a>
|
||||
<a id="register" href="#">Register</a>
|
||||
<a id="login" href="#">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<p>That's an example of a header with a nav bar in it.</p>
|
||||
|
||||
</main>
|
||||
|
|
@ -6,13 +6,10 @@
|
|||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<meta name="author" content="Zed A. Shaw" />
|
||||
<meta name="description" content="My Go learning project, which is a Twitch support thing." />
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script defer src="/js/alpine.js"></script>
|
||||
<script src="/js/code.js"></script>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<title>ZedShaw.games</title>
|
||||
</head>
|
||||
<body data-testid="{{.PageId}}">
|
||||
<body>
|
||||
{{embed}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,21 @@
|
|||
</head>
|
||||
<body data-testid="{{.PageId}}">
|
||||
<header>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="/live/">Live</a>
|
||||
<a id="stream" href="/stream/">Streams</a>
|
||||
<a id="game" href="/game/">Games</a>
|
||||
<a id="register" href="/register/">Register</a>
|
||||
<a id="login" href="/login/">Login</a>
|
||||
<nav>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="/live/">Live</a>
|
||||
<a id="stream" href="/stream/">Streams</a>
|
||||
<a id="game" href="/game/">Games</a>
|
||||
<a id="register" href="/register/">Register</a>
|
||||
<a id="login" href="/login/">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
|
|
@ -6,43 +6,92 @@ body {
|
|||
}
|
||||
|
||||
main {
|
||||
@apply p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
|
||||
@apply flex flex-col gap-4 p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
|
||||
}
|
||||
|
||||
header {
|
||||
@apply flex flex-col justify-stretch;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
|
||||
}
|
||||
|
||||
code {
|
||||
speak-as: literal-punctuation;
|
||||
@apply inline-block bg-gray-800 text-gray-50;
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@apply !bg-gray-950 p-1;
|
||||
}
|
||||
|
||||
footer {
|
||||
@apply bg-gray-950 text-gray-50 text-lg flex p-6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-6xl pb-4;
|
||||
@apply text-6xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-5xl pb-4;
|
||||
@apply text-5xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-4xl pb-4;
|
||||
@apply text-4xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-3xl pb-4;
|
||||
@apply text-3xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-2xl pb-4;
|
||||
@apply text-2xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
details {
|
||||
@apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
|
||||
}
|
||||
|
||||
aside {
|
||||
@apply p-2 rounded-lg bg-gray-100 text-gray-950;
|
||||
}
|
||||
|
||||
aside > mark {
|
||||
@apply p-1 rounded-sm bg-gray-300;
|
||||
}
|
||||
|
||||
aside > mark.info {
|
||||
@apply bg-purple-300;
|
||||
}
|
||||
|
||||
aside > mark.warning {
|
||||
@apply bg-yellow-300;
|
||||
}
|
||||
|
||||
aside > mark.alert {
|
||||
@apply bg-red-300;
|
||||
}
|
||||
|
||||
card {
|
||||
@apply flex flex-col bg-gray-800 max-w-md rounded-xl shadow-lg outline;
|
||||
@apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
|
||||
}
|
||||
|
||||
card > top {
|
||||
@apply text-3xl font-bold text-center text-gray-50;
|
||||
@apply text-3xl font-bold text-center dark:text-gray-50;
|
||||
}
|
||||
|
||||
card > top > img {
|
||||
@apply rounded-t-lg;
|
||||
}
|
||||
|
||||
card > top > shape {
|
||||
@apply rounded-t-lg;
|
||||
}
|
||||
|
||||
card > bottom {
|
||||
|
|
@ -50,11 +99,11 @@ card > bottom {
|
|||
}
|
||||
|
||||
card > middle {
|
||||
@apply flex flex-col text-xl bg-gray-800 p-6 gap-4;
|
||||
@apply flex flex-col text-xl p-4 gap-4;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply font-bold text-gray-100;
|
||||
@apply font-bold text-gray-950 dark:text-gray-100;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -70,19 +119,19 @@ button {
|
|||
}
|
||||
|
||||
@utility btn-hover {
|
||||
@apply bg-gray-900! text-gray-50!;
|
||||
@apply !bg-gray-900 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-alert {
|
||||
@apply bg-red-800! text-gray-50!;
|
||||
@apply !bg-red-800 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-warning {
|
||||
@apply bg-yellow-800! text-gray-50!;
|
||||
@apply !bg-yellow-800 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-primary {
|
||||
@apply bg-teal-300! text-gray-950!;
|
||||
@apply !bg-teal-300 !text-gray-950;
|
||||
}
|
||||
|
||||
shape {
|
||||
|
|
@ -122,7 +171,7 @@ shape.video {
|
|||
}
|
||||
|
||||
block {
|
||||
@apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
|
||||
@apply flex flex-col p-4 mb-10 gap-4;
|
||||
}
|
||||
|
||||
bar {
|
||||
|
|
@ -130,7 +179,6 @@ bar {
|
|||
}
|
||||
|
||||
stack {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -138,7 +186,6 @@ stack {
|
|||
}
|
||||
|
||||
stack > * {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -157,6 +204,10 @@ hr {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
select {
|
||||
@apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm;
|
||||
}
|
||||
|
|
|
|||
132
static/style.css
132
static/style.css
|
|
@ -7,10 +7,16 @@
|
|||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||
--color-red-300: oklch(80.8% 0.114 19.571);
|
||||
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||
--color-red-800: oklch(44.4% 0.177 26.899);
|
||||
--color-orange-500: oklch(70.5% 0.213 47.604);
|
||||
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
||||
--color-green-400: oklch(79.2% 0.209 151.711);
|
||||
--color-teal-300: oklch(85.5% 0.138 181.071);
|
||||
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||
--color-purple-300: oklch(82.7% 0.119 306.383);
|
||||
--color-gray-50: oklch(98.5% 0.0 247.839);
|
||||
--color-gray-100: oklch(96.7% 0.0 264.542);
|
||||
--color-gray-200: oklch(92.8% 0.0 264.531);
|
||||
|
|
@ -468,6 +474,9 @@
|
|||
.bg-green-400\! {
|
||||
background-color: var(--color-green-400) !important;
|
||||
}
|
||||
.\!p-4 {
|
||||
padding: calc(var(--spacing) * 4) !important;
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
|
|
@ -559,6 +568,12 @@
|
|||
.text-gray-950 {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
.text-orange-500 {
|
||||
color: var(--color-orange-500);
|
||||
}
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
|
|
@ -631,7 +646,10 @@ body {
|
|||
}
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
background-color: var(--color-gray-100);
|
||||
padding: calc(var(--spacing) * 0);
|
||||
color: var(--color-gray-950);
|
||||
|
|
@ -643,6 +661,11 @@ main {
|
|||
}
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 6);
|
||||
|
|
@ -657,6 +680,25 @@ header {
|
|||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
code {
|
||||
speak-as: literal-punctuation;
|
||||
display: inline-block;
|
||||
background-color: var(--color-gray-800);
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
pre {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
border-radius: var(--radius-lg);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
border-color: var(--color-gray-300);
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
pre > code {
|
||||
background-color: var(--color-gray-950) !important;
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
background-color: var(--color-gray-950);
|
||||
|
|
@ -666,40 +708,79 @@ footer {
|
|||
color: var(--color-gray-50);
|
||||
}
|
||||
h1 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
h2 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
h3 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
h4 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
h5 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
details {
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-200);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
aside {
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-100);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
aside > mark {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-300);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
aside > mark.info {
|
||||
background-color: var(--color-purple-300);
|
||||
}
|
||||
aside > mark.warning {
|
||||
background-color: var(--color-yellow-300);
|
||||
}
|
||||
aside > mark.alert {
|
||||
background-color: var(--color-red-300);
|
||||
}
|
||||
card {
|
||||
display: flex;
|
||||
max-width: var(--container-md);
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius-xl);
|
||||
background-color: var(--color-gray-800);
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-200);
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
card > top {
|
||||
text-align: center;
|
||||
|
|
@ -707,7 +788,17 @@ card > top {
|
|||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-50);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
card > top > img {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
}
|
||||
card > top > shape {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
}
|
||||
card > bottom {
|
||||
display: flex;
|
||||
|
|
@ -723,15 +814,17 @@ card > middle {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
background-color: var(--color-gray-800);
|
||||
padding: calc(var(--spacing) * 6);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
label {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-100);
|
||||
color: var(--color-gray-950);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
input {
|
||||
border-radius: var(--radius-sm);
|
||||
|
|
@ -818,13 +911,11 @@ shape.video {
|
|||
width: 100%;
|
||||
}
|
||||
block {
|
||||
margin-bottom: calc(var(--spacing) * 10);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
padding-right: calc(var(--spacing) * 4);
|
||||
padding-bottom: calc(var(--spacing) * 10);
|
||||
padding-left: calc(var(--spacing) * 4);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
bar {
|
||||
display: flex;
|
||||
|
|
@ -833,14 +924,12 @@ bar {
|
|||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
stack {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "cover";
|
||||
}
|
||||
stack > * {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -857,6 +946,15 @@ grid {
|
|||
hr {
|
||||
visibility: hidden;
|
||||
}
|
||||
select {
|
||||
border-radius: var(--radius-lg);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
border-color: var(--color-gray-600);
|
||||
background-color: var(--color-gray-800);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
color: var(--color-red-50);
|
||||
}
|
||||
table {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-200);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue