Skip to content

Commit

Permalink
Add tailwindcss to html, add sudoku grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@rxx
rxx committed Apr 2, 2024
1 parent 86be71e commit bfff263
Show file tree
Hide file tree
Showing 6 changed files with 167 additions and 52 deletions.
120 changes: 101 additions & 19 deletions src/node/html/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,116 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1">
<title>Replit</title>
<link rel="stylesheet" href="modern-normalize.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<main>
<h1>HTML Sandbox</h1>

<h2>Grid Layout</h2>
<div class="grid">
<div class="item item-1"><span class="item__text">1</span></div>
<div class="item item-2"><span class="item__text">2</span></div>
<div class="item item-3"><span class="item__text">3</span></div>
<div class="item item-4"><span class="item__text">4</span></div>
<div class="item item-5"><span class="item__text">5</span></div>
<div class="item item-6"><span class="item__text">6</span></div>
<div class="item item-7"><span class="item__text">7</span></div>
<div class="item item-8"><span class="item__text">8</span></div>
<div class="item item-9"><span class="item__text">9</span></div>
</div>
<h2>Sudoku Grid Tailwind Layout</h2>
<div class="grid grid-cols-3 grid-rows-3 gap-2">
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
<div class="item">
<div class="item__text">1</div>
<div class="item__text">2</div>
<div class="item__text">3</div>
<div class="item__text">4</div>
<div class="item__text">5</div>
<div class="item__text">6</div>
<div class="item__text">7</div>
<div class="item__text">8</div>
<div class="item__text">9</div>
</div>
</main>

<script type="module" src="script.js"></script>

</body>

</html>
9 changes: 0 additions & 9 deletions src/node/html/modern-normalize.min.css
View file

This file was deleted.

8 changes: 6 additions & 2 deletions src/node/html/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,12 @@
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vite": "^5.2.6"
"devDependencies": {
"vite": "^5.2.6",
"autoprefixer": "^10.4.19",
"daisyui": "^4.9.0",
"postcss": "^8.4.38",
"tailwindcss": "^3.4.3"
},
"engines": {
"node": "=20.x"
Expand Down
6 changes: 6 additions & 0 deletions src/node/html/postcss.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
36 changes: 14 additions & 22 deletions src/node/html/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,23 @@
main {
font-size: 1.25rem;
line-height: 1.25em;
padding: 5%;
}

.grid {
display: grid;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 1fr);
gap: 5px;
}
@tailwind base;
@tailwind components;
@tailwind utilities;

.item {
display: flex;
align-items: center;
justify-content: center;
@apply gap-1 border justify-center items-center grid grid-cols-3 grid-rows-3 bg-cyan-600 border-sky-800;

}

.item__text {
@apply border flex justify-center items-center bg-blue-300 text-sky-950;
}


.item_old {
background: #219EBC;
border: 1px solid #054A91;
}

.item__text {
.item__text_ild {
background: #8ECAE6;
color: #023047;
font-size: 2em;
width: 2em;
height: 2em;
display: flex;
align-items: center;
justify-content: center;
}
40 changes: 40 additions & 0 deletions src/node/html/tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{ts,tsx}",
],
plugins: [require("daisyui")],
daisyui: {
themes: [
{
mine: {
"primary": "#155e75",
"secondary": "#0891b2",
"accent": "#0069a6",
"neutral": "#164e63",
"base-100": "#e7e5e4",
"info": "#0d9488",
"success": "#155e75",
"warning": "#fde047",
"error": "#b91c1c",
},
mine_dark: {
"primary": "#155e75",
"secondary": "#0891b2",
"accent": "#0069a6",
"neutral": "#164e63",
"base-100": "#20161f",
"info": "#0d9488",
"success": "#155e75",
"warning": "#fde047",
"error": "#b91c1c",
},

},
"coffee",
"dark"
],
},
}

0 comments on commit bfff263

Please sign in to comment.