extract css

This commit is contained in:
Christophe Robillard 2025-03-05 17:54:57 +01:00
parent af1bd3b374
commit 475eb05957
2 changed files with 86 additions and 85 deletions

83
public/main.css Normal file
View file

@ -0,0 +1,83 @@
body {
margin: 0px;
font: 1.8rem "Fira Sans", sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.mode {
height: 100vh;
}
img {
height: 100%;
width:100%;
// min-width: 527px;
object-fit: contain;
}
table {
empty-cells: hide;
border-collapse: collapse;
}
tbody tr td {
border: 1px solid black;
border-spacing: 3px;
min-width: 20px;
min-height: 20px;
border-radius: 50%;
margin: 5px;
}
.tracker {
display: flex;
flex: 1 527px;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: lightgoldenrodyellow;
height: 100vh;
width: 100%;
}
.info h1 {
margin-bottom: 40px;
font-weight: 350;
}
.tracks {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin: 30px;
}
.week {
display: flex;
flex-direction: column;
justify-items: start;
flex-wrap: wrap;
margin-bottom: 20px;
}
.day {
border: 1px;
margin: 4px;
min-width: 20px;
min-height: 20px;
}
.creatif {
background-color: red;
}
.en-charge {
background-color: orange;
}
.frigo-vide {
background-color: grey;
}
.croisiere {
background-color: green;
}

View file

@ -1,5 +1,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<script type="module"> <script type="module">
import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js" import { Application, Controller } from "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
window.Stimulus = Application.start() window.Stimulus = Application.start()
@ -19,91 +22,6 @@
}) })
</script> </script>
<style>
body {
margin: 0px;
font: 1.8rem "Fira Sans", sans-serif;
}
main {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.mode {
height: 100vh;
}
img {
height: 100%;
width:100%;
// min-width: 527px;
object-fit: contain;
}
table {
empty-cells: hide;
border-collapse: collapse;
}
tbody tr td {
border: 1px solid black;
border-spacing: 3px;
min-width: 20px;
min-height: 20px;
border-radius: 50%;
margin: 5px;
}
.tracker {
display: flex;
flex: 1 527px;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: lightgoldenrodyellow;
height: 100vh;
width: 100%;
}
.info h1 {
margin-bottom: 40px;
font-weight: 350;
}
.tracks {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin: 30px;
}
.week {
display: flex;
flex-direction: column;
justify-items: start;
flex-wrap: wrap;
margin-bottom: 20px;
}
.day {
border: 1px;
margin: 4px;
min-width: 20px;
min-height: 20px;
}
.creatif {
background-color: red;
}
.en-charge {
background-color: orange;
}
.frigo-vide {
background-color: grey;
}
.croisiere {
background-color: green;
}
</style>
</head> </head>
<main data-controller="mood"> <main data-controller="mood">
<div class="mode"> <div class="mode">