projetAcoBDDv30.03.26

projetphp/public/assets/css/style.css

@@ -0,0 +1,182 @@
+/* Sommaire :
+- body et html
+- Header et ses contenues
+- Body contenue
+    - Content
+    - Page de présentation des recettes
+    - Page d'une recette
+- Footer
+
+*/
+
+/*Tout*/
+html, body{
+    height: 100%;
+    text-align: center;
+    /*font-size: 98%;*/
+}
+
+
+/*Header et son contenu*/
+#header {
+    display: flex;
+    flex-direction: row;
+    padding: 3px;
+    padding-left: 2%;
+    padding-bottom: 10px;
+    background-color: blanchedalmond;
+}
+
+#logo {
+    background-color: aqua;
+    background-image: url("Logo.jpg");
+    /*background:no-repeat;*/
+    height: 103px;
+    width: 141px;
+}
+
+.logo{
+    height: 100%;
+    width: 100%;
+    border: 1px white solid;
+    border-radius: 4px;
+    box-shadow: 1px 1px 1px black;
+}
+
+nav {
+    flex: 9;
+    text-align: initial;
+    letter-spacing: 2px;
+    padding: 10px;
+}
+
+.nav-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    background-color: rgb(255, 217, 160);
+    display: flex;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 40px;
+}
+
+
+.nav-element {
+    line-height: 2.5;
+    padding: 10px;
+}
+
+/*Body et son contenu */
+body {
+    background-color: blanchedalmond;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+.sidebar {
+    background-color: aquamarine;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 10px;
+    width: 128px;
+}
+
+
+.main-body {
+    display: flex;
+    flex-direction: row;
+    overflow: auto;
+    flex: 1;
+    background-clip: border-box;
+    padding-right: 5%;
+    padding-left: 5%;
+}
+
+/* content : le cadre de base du centre de notre site
+*/
+.content {
+    background-color: #ffe4bb;
+    text-align: left;
+    width: 100%;
+    height: 100%;
+    border: 1px solid rgba(0,0,0,.125);
+    border-radius: 6px;
+    overflow: auto;
+}
+
+/*Recettes :
+    représente le contenue centrale de la page.
+*/
+.recettes {
+    --UneVariable: calc( 100vw / 500 );
+    display: grid;
+    grid-template-columns: repeat(var(--UneVariable), 1fr);
+    grid-gap: 10px;
+    grid-auto-rows: minmax(300px, auto);
+    grid-auto-columns: auto;
+}
+
+/* Classe recette icone :
+    C'est la classe de chaques éléments de notre liste de recette
+*/
+.recette-icone{
+    border: 3px solid rgba(0,0,0,.125);
+    border-radius: 40px;
+    text-align: left;
+    padding: 15px;
+    vertical-align: middle;
+    box-shadow: 3px 5px 5px black;
+    width: 500px;
+}
+
+.recette-preview-image{
+    max-width: calc( 10vh + 10vw );
+    max-height: calc( 10vh + 10vw );
+    border: 1px solid rgb(252, 223, 57);
+    border-radius: 25px;
+}
+
+/*Ici commence le CSS pour la page de chaques recettes */
+/*contenue*/
+.recette-content {
+    display: flex;
+    flex-direction: column;
+}
+
+/*titre*/
+.recette-title {
+    text-align: center;
+}
+
+/*image*/
+.recette-image {
+    background-color: red;
+    aspect-ratio: 1/1;
+    max-height: calc( 30vh + 30vw );
+    max-width: calc( 30vh + 30vw );
+    border: 1px solid white;
+    border-radius: 30px;
+}
+
+.recette-div-image {
+    display: flex;
+    justify-content: center;
+}
+
+/*description*/
+.recette-desc {
+    padding : 10px;
+}
+
+
+/*Footer et son contenue*/
+footer{
+    padding: 25px;
+    background: rgb(11, 189, 144);
+    color: white;
+}
+
+
+