very barebones first steps, just a rough template still lots of work
This commit is contained in:
parent
4972944cc0
commit
9ec685c755
GPG key ID:
249300664F2AF2C7
5 changed files with 773 additions and 4 deletions
|
|
@ -10,6 +10,7 @@ let
|
|||
in
|
||||
{
|
||||
# https://devenv.sh/basics/
|
||||
packages = with pkgs; [ tailwindcss_4 ];
|
||||
|
||||
# https://devenv.sh/languages/
|
||||
languages.zig = {
|
||||
|
|
|
|||
56
src/main.zig
56
src/main.zig
|
|
@ -3,12 +3,60 @@ const webui = @import("webui");
|
|||
const std = @import("std");
|
||||
|
||||
pub fn main() !void {
|
||||
// create a new window
|
||||
var nwin = webui.newWindow();
|
||||
const window = webui.newWindow();
|
||||
|
||||
// show the content
|
||||
try nwin.show("<html><head><script src=\"/webui.js\"></script></head> Hello World ! </html>");
|
||||
// Bind all events
|
||||
_ = try window.bind("", events);
|
||||
|
||||
const port = 8080;
|
||||
const pathToRootPage = "/home/cholli/projects/website/src/server/";
|
||||
|
||||
webui.setPort(window, port) catch |err| {
|
||||
std.debug.print("Could not reserve port {d} due to {any}", .{ port, err });
|
||||
webui.exit();
|
||||
return;
|
||||
};
|
||||
|
||||
_ = webui.startServer(window, pathToRootPage) catch |err| {
|
||||
std.debug.print("Could not start server due to: {any}", .{err});
|
||||
webui.exit();
|
||||
return;
|
||||
};
|
||||
|
||||
// wait the window exit
|
||||
webui.wait();
|
||||
}
|
||||
|
||||
fn events(e: *webui.Event) void {
|
||||
// This function gets called every time
|
||||
// there is an event
|
||||
|
||||
switch (e.event_type) {
|
||||
.EVENT_CONNECTED => {
|
||||
std.debug.print("Connected. \n", .{});
|
||||
},
|
||||
.EVENT_DISCONNECTED => {
|
||||
std.debug.print("Disconnected. \n", .{});
|
||||
},
|
||||
.EVENT_MOUSE_CLICK => {
|
||||
std.debug.print("Click. \n", .{});
|
||||
},
|
||||
.EVENT_NAVIGATION => {
|
||||
|
||||
// get the url string
|
||||
const url = e.getString();
|
||||
|
||||
// we use this to get widnow
|
||||
var win = e.getWindow();
|
||||
|
||||
std.debug.print("Starting navigation to: {s}\n", .{url});
|
||||
|
||||
// Because we used `bind(MyWindow, "", events);`
|
||||
// WebUI will block all `href` link clicks and sent here instead.
|
||||
// We can then control the behaviour of links as needed.
|
||||
|
||||
win.navigate(url);
|
||||
},
|
||||
else => {},
|
||||
}
|
||||
}
|
||||
|
|
|
|||
112
src/server/index.html
Normal file
112
src/server/index.html
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/webui.js"></script>
|
||||
<link href="../styles/output.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<!-- <div class="bg-white dark:bg-gray-800 rounded-lg px-6 py-8 ring shadow-x1 ring-gray-900/5"> -->
|
||||
<!-- <h1 class="text-gray-900 dark:text-white mt-5 text-base font-medium tracking-tight"> Hello world! </h1> -->
|
||||
<!-- <p class="text-gray-500 dark:text-gray-400 mt-2 text-sm "> The Zero Gravity Pen can be used to write in any -->
|
||||
<!-- orientation, including upside-down. It even works in outer space. </p> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<body>
|
||||
<header class="bg-gray-800 text-white">
|
||||
<div class="container mx-auto flex justify-between items-center py-4 px-6">
|
||||
<!-- Logo or Brand Name -->
|
||||
<div class="text-2xl font-bold">
|
||||
<a href="#" class="hover:text-gray-400">Home</a>
|
||||
</div>
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<nav>
|
||||
<ul class="flex space-x-6">
|
||||
<li><a href="https://git.christophhollizeck.dev" class="hover:text-gray-400">Git</a></li>
|
||||
<li><a href="https://hydra.christophhollizeck.dev" class="hover:text-gray-400">Hydra</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="bg-gradient-to-b from-purple-800 to-gray-900 text-center py-20">
|
||||
<h1 class="text-4xl font-bold mb-4">Hi, I'm Chris</h1>
|
||||
<p class="text-lg text-gray-300 mb-6">A passionate developer trying to automate and codify as much as I can.</p>
|
||||
<a href="#projects" class="bg-purple-700 hover:bg-purple-600 text-white py-3 px-6 rounded-lg shadow-lg">
|
||||
See My Work
|
||||
</a>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="py-16 px-6">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center mb-8">About Me</h2>
|
||||
<p class="text-center text-gray-300">
|
||||
I'm a developer with a passion for making my life easier by trying to only do things once. Professionally I
|
||||
mostly worked with Java and C# and yaml, privately I work a lot with the nix-language, and try to dabble in zig
|
||||
and rust. When I am not coding I try to sail and do wintersports whenever possible, or maybe you can find me on
|
||||
a small bike trip in the mountains.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Projects Section -->
|
||||
<section id="projects" class="py-16 bg-gray-800 px-6">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center mb-8">Projects</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Project 1 -->
|
||||
<div class="bg-gray-700 p-6 rounded-lg shadow-lg">
|
||||
<h3 class="text-xl font-bold mb-4">Nix config flake</h3>
|
||||
<p class="text-gray-300 mb-4">This is the main configuration flake for all my devices running nixos, the main
|
||||
language used is nix</p>
|
||||
<a href="https://git.christophhollizeck.dev/Daholli/nixos-config"
|
||||
class="text-purple-400 hover:text-purple-300">View Project</a>
|
||||
</div>
|
||||
<!-- Project 2 -->
|
||||
<div class="bg-gray-700 p-6 rounded-lg shadow-lg">
|
||||
<h3 class="text-xl font-bold mb-4">Project Name</h3>
|
||||
<p class="text-gray-300 mb-4">A brief description of the project. Built with Next.js and TypeScript.</p>
|
||||
<a href="#" class="text-purple-400 hover:text-purple-300">View Project</a>
|
||||
</div>
|
||||
<!-- Project 3 -->
|
||||
<div class="bg-gray-700 p-6 rounded-lg shadow-lg">
|
||||
<h3 class="text-xl font-bold mb-4">Project Name</h3>
|
||||
<p class="text-gray-300 mb-4">A brief description of the project. Built with Vue.js and TailwindCSS.</p>
|
||||
<a href="#" class="text-purple-400 hover:text-purple-300">View Project</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="py-16 px-6">
|
||||
<div class="container mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold mb-8">Contact Me</h2>
|
||||
<p class="text-gray-300 mb-6">
|
||||
Have a question or want to work together? Feel free to reach out!
|
||||
</p>
|
||||
<a href="mailto:youremail@example.com"
|
||||
class="bg-purple-700 hover:bg-purple-600 text-white py-3 px-6 rounded-lg shadow-lg">
|
||||
Send Me an Email
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 py-6">
|
||||
<div class="container mx-auto text-center text-gray-400">
|
||||
<p>© 2025 Christoph Hollizeck. All rights reserved.</p>
|
||||
<div class="mt-4">
|
||||
<a href="https://github.com/Daholli" class="hover:text-purple-400 mx-2">GitHub</a>
|
||||
<a href="https://linkedin.com/in/yourusername" class="hover:text-purple-400 mx-2">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
1
src/server/styles/input.css
Normal file
1
src/server/styles/input.css
Normal file
|
|
@ -0,0 +1 @@
|
|||
@import "tailwindcss";
|
||||
607
src/server/styles/output.css
Normal file
607
src/server/styles/output.css
Normal file
|
|
@ -0,0 +1,607 @@
|
|||
/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
|
||||
@layer properties;
|
||||
@layer theme, base, components, utilities;
|
||||
@layer theme {
|
||||
:root, :host {
|
||||
--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
||||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-purple-300: oklch(82.7% 0.119 306.383);
|
||||
--color-purple-400: oklch(71.4% 0.203 305.504);
|
||||
--color-purple-600: oklch(55.8% 0.288 302.321);
|
||||
--color-purple-700: oklch(49.6% 0.265 301.924);
|
||||
--color-purple-800: oklch(43.8% 0.218 303.724);
|
||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||
--color-gray-900: oklch(21% 0.034 264.665);
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: calc(1.5 / 1);
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: calc(2.5 / 2.25);
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--tracking-tight: -0.025em;
|
||||
--radius-lg: 0.5rem;
|
||||
--default-font-family: var(--font-sans);
|
||||
--default-mono-font-family: var(--font-mono);
|
||||
}
|
||||
}
|
||||
@layer base {
|
||||
*, ::after, ::before, ::backdrop, ::file-selector-button {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0 solid;
|
||||
}
|
||||
html, :host {
|
||||
line-height: 1.5;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
tab-size: 4;
|
||||
font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji');
|
||||
font-feature-settings: var(--default-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-font-variation-settings, normal);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
hr {
|
||||
height: 0;
|
||||
color: inherit;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
abbr:where([title]) {
|
||||
-webkit-text-decoration: underline dotted;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
-webkit-text-decoration: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
b, strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
code, kbd, samp, pre {
|
||||
font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace);
|
||||
font-feature-settings: var(--default-mono-font-feature-settings, normal);
|
||||
font-variation-settings: var(--default-mono-font-variation-settings, normal);
|
||||
font-size: 1em;
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
sub, sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
table {
|
||||
text-indent: 0;
|
||||
border-color: inherit;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
button, input, select, optgroup, textarea, ::file-selector-button {
|
||||
font: inherit;
|
||||
font-feature-settings: inherit;
|
||||
font-variation-settings: inherit;
|
||||
letter-spacing: inherit;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
background-color: transparent;
|
||||
opacity: 1;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup {
|
||||
font-weight: bolder;
|
||||
}
|
||||
:where(select:is([multiple], [size])) optgroup option {
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
::file-selector-button {
|
||||
margin-inline-end: 4px;
|
||||
}
|
||||
::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
|
||||
::placeholder {
|
||||
color: currentcolor;
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
color: color-mix(in oklab, currentcolor 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
::-webkit-date-and-time-value {
|
||||
min-height: 1lh;
|
||||
text-align: inherit;
|
||||
}
|
||||
::-webkit-datetime-edit {
|
||||
display: inline-flex;
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
|
||||
padding-block: 0;
|
||||
}
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
button, input:where([type='button'], [type='reset'], [type='submit']), ::file-selector-button {
|
||||
appearance: button;
|
||||
}
|
||||
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
[hidden]:where(:not([hidden='until-found'])) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@layer utilities {
|
||||
.visible {
|
||||
visibility: visible;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
.static {
|
||||
position: static;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (width >= 40rem) {
|
||||
max-width: 40rem;
|
||||
}
|
||||
@media (width >= 48rem) {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@media (width >= 64rem) {
|
||||
max-width: 64rem;
|
||||
}
|
||||
@media (width >= 80rem) {
|
||||
max-width: 80rem;
|
||||
}
|
||||
@media (width >= 96rem) {
|
||||
max-width: 96rem;
|
||||
}
|
||||
}
|
||||
.mx-2 {
|
||||
margin-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
.mt-2 {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.mt-4 {
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mt-5 {
|
||||
margin-top: calc(var(--spacing) * 5);
|
||||
}
|
||||
.mb-4 {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.mb-8 {
|
||||
margin-bottom: calc(var(--spacing) * 8);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
.contents {
|
||||
display: contents;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
}
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.space-x-6 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
|
||||
margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
}
|
||||
.rounded-lg {
|
||||
border-radius: var(--radius-lg);
|
||||
}
|
||||
.bg-gray-700 {
|
||||
background-color: var(--color-gray-700);
|
||||
}
|
||||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
.bg-purple-700 {
|
||||
background-color: var(--color-purple-700);
|
||||
}
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
.bg-gradient-to-b {
|
||||
--tw-gradient-position: to bottom in oklab;
|
||||
background-image: linear-gradient(var(--tw-gradient-stops));
|
||||
}
|
||||
.from-purple-800 {
|
||||
--tw-gradient-from: var(--color-purple-800);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-gray-900 {
|
||||
--tw-gradient-to: var(--color-gray-900);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.p-6 {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
.px-6 {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-3 {
|
||||
padding-block: calc(var(--spacing) * 3);
|
||||
}
|
||||
.py-4 {
|
||||
padding-block: calc(var(--spacing) * 4);
|
||||
}
|
||||
.py-6 {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
.py-8 {
|
||||
padding-block: calc(var(--spacing) * 8);
|
||||
}
|
||||
.py-16 {
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
.py-20 {
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
.text-4xl {
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
.text-base {
|
||||
font-size: var(--text-base);
|
||||
line-height: var(--tw-leading, var(--text-base--line-height));
|
||||
}
|
||||
.text-lg {
|
||||
font-size: var(--text-lg);
|
||||
line-height: var(--tw-leading, var(--text-lg--line-height));
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.text-xl {
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-medium {
|
||||
--tw-font-weight: var(--font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
.tracking-tight {
|
||||
--tw-tracking: var(--tracking-tight);
|
||||
letter-spacing: var(--tracking-tight);
|
||||
}
|
||||
.text-gray-300 {
|
||||
color: var(--color-gray-300);
|
||||
}
|
||||
.text-gray-400 {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
.text-gray-500 {
|
||||
color: var(--color-gray-500);
|
||||
}
|
||||
.text-gray-900 {
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
.text-purple-400 {
|
||||
color: var(--color-purple-400);
|
||||
}
|
||||
.text-white {
|
||||
color: var(--color-white);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
.ring {
|
||||
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.ring-gray-900\/5 {
|
||||
--tw-ring-color: color-mix(in srgb, oklch(21% 0.034 264.665) 5%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
--tw-ring-color: color-mix(in oklab, var(--color-gray-900) 5%, transparent);
|
||||
}
|
||||
}
|
||||
.hover\:bg-purple-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-purple-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-gray-400 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-purple-300 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-purple-300);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-purple-400 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-purple-400);
|
||||
}
|
||||
}
|
||||
}
|
||||
.md\:grid-cols-2 {
|
||||
@media (width >= 48rem) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.lg\:grid-cols-3 {
|
||||
@media (width >= 64rem) {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
.dark\:bg-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
}
|
||||
.dark\:text-gray-400 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-400);
|
||||
}
|
||||
}
|
||||
.dark\:text-white {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
@property --tw-space-x-reverse {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0;
|
||||
}
|
||||
@property --tw-gradient-position {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-via {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-to {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: #0000;
|
||||
}
|
||||
@property --tw-gradient-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-via-stops {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-gradient-from-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 0%;
|
||||
}
|
||||
@property --tw-gradient-via-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 50%;
|
||||
}
|
||||
@property --tw-gradient-to-position {
|
||||
syntax: "<length-percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-tracking {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-inset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-shadow-alpha {
|
||||
syntax: "<percentage>";
|
||||
inherits: false;
|
||||
initial-value: 100%;
|
||||
}
|
||||
@property --tw-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-inset-ring-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-inset-ring-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-ring-inset {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-ring-offset-width {
|
||||
syntax: "<length>";
|
||||
inherits: false;
|
||||
initial-value: 0px;
|
||||
}
|
||||
@property --tw-ring-offset-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: #fff;
|
||||
}
|
||||
@property --tw-ring-offset-shadow {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@layer properties {
|
||||
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
|
||||
*, ::before, ::after, ::backdrop {
|
||||
--tw-space-x-reverse: 0;
|
||||
--tw-gradient-position: initial;
|
||||
--tw-gradient-from: #0000;
|
||||
--tw-gradient-via: #0000;
|
||||
--tw-gradient-to: #0000;
|
||||
--tw-gradient-stops: initial;
|
||||
--tw-gradient-via-stops: initial;
|
||||
--tw-gradient-from-position: 0%;
|
||||
--tw-gradient-via-position: 50%;
|
||||
--tw-gradient-to-position: 100%;
|
||||
--tw-font-weight: initial;
|
||||
--tw-tracking: initial;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-shadow-alpha: 100%;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-inset-shadow-alpha: 100%;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
--tw-inset-ring-shadow: 0 0 #0000;
|
||||
--tw-ring-inset: initial;
|
||||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue