diff --git a/src/build_rocket/get.rs b/src/build_rocket/get.rs index a1e4338..4f751d2 100644 --- a/src/build_rocket/get.rs +++ b/src/build_rocket/get.rs @@ -8,11 +8,9 @@ use crate::build_rocket::{ templates }; use rocket_dyn_templates::Template; -// Configure requests -// generate routes, set attributes - // set http method - // set uri - #[get("/de")] +// To Do: Work with Accept Language Header, return matching Template +// dynamic routes (i.e /de) + #[get("/")] // if success call handler pub fn index_de() -> Template { let context = templates::TplIndexDe::new(); diff --git a/src/build_rocket/templates.rs b/src/build_rocket/templates.rs index 471d04b..c64a9b5 100644 --- a/src/build_rocket/templates.rs +++ b/src/build_rocket/templates.rs @@ -9,6 +9,7 @@ use serde_json::json; pub struct TplIndexDe { pub title: String, pub hemp: Value, + pub lang: String, } // (prototype languages) @@ -19,6 +20,7 @@ impl TplIndexDe { title: String::from("Cannabinieri CBD"), // how to include several objects ? hemp : json!({"de" : "Uns interessieren Informationen. "}), + lang: String::from("de"), } } diff --git a/templates/assets/css/base.css b/templates/assets/css/base.css index 1c4a725..40bcd70 100644 --- a/templates/assets/css/base.css +++ b/templates/assets/css/base.css @@ -1,19 +1,9 @@ * { margin: 0; padding: 0; - height: 100%; - /*overflow: hidden;*/ - } -body .navigation { - height: 5rem; +body { + overflow-x: hidden; } -body .content { - min-height: 80vh; -} - -body .footer { - max-height: 40vh; -} \ No newline at end of file diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index ff5fff8..72db804 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -5,32 +5,37 @@ font-weight: 100; } -.content { - height: 120vh !important; - width: 100vw; -} +/* small mobile */ -.content .container { - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: repeat(8, 1fr); - margin-top: .2rem; - font-family: 'Lato', sans-serif;; +.height { + height: 270vw; + position: relative; } -.container img { - height: 100%; +.container { + font-family: 'Lato', sans-serif; + background-image: url('../img/hero.png'); + background-size: contain; + background-repeat: no-repeat; + height: calc(100% - 30vh); + + } + +img { + width: 100vw; z-index: 0; - max-width: 100vw; - grid-column: 1/3; - grid-row: 1/9; - justify-self: center; + grid-row: 1/33; + grid-column: 1/25; } + .link { - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-template-rows: repeat(2, 1fr) + display: flex; + flex-direction: column; + z-index: 2; + position: absolute; + height: 60vw; + width: 40vw; } .link button { @@ -42,61 +47,155 @@ border-radius: 50%; border: .1rem solid hsl(300, 100%, 50%); background-color: hsl(300, 100%, 50%); + cursor: pointer;; + align-self: center; + justify-self: center; +} + +.link button:active { + box-shadow: 0px 0px 10px hsl(300, 100%, 30%); } + .link a { color: #fff; text-decoration: none; font-weight: 600; - font-size: 1.25rem; + font-size: 3vw; transition: all .5s ease-in-out; } -.link button:active { - box-shadow: 0px 0px 10px hsl(300, 100%, 30%); -} .link .sub_container { display: none; + grid-column: 1/5; + grid-row: 2/5; + padding: 3vh 1vw 0 1vw; } .link .sub_container p { - font-size: .65rem; + font-size: 2vw; text-align: center; color: #333; - line-height: 2.25vh; background-color: rgba(255, 255, 255, 0.7); border-radius: .03rem; + width: 100%; + height: 100%; + align-self: center; + display: flex; + flex-direction: column; + align-items: center; + padding: 1vw 2vw; + line-height: 4vw; + letter-spacing: .05vw; } -#hemp { - grid-column: 1/3; - grid-row: 1; - z-index: 2; +@media(min-width: 300px) { + #hemp { + margin-left: 50vw; + } + + #spider { + margin-left: 56vw; + } + + #cube { + margin-left: 5vw; + } + + #offgrid { + margin-left: 56vw; + } + + #machina { + margin-left: 58vw; + } + #miner { + margin-left: 30vw; + } + } -#hemp button { - grid-column: 2; - grid-row: 2; - justify-self: start; - align-self: end; - margin-left: 2.4rem; - margin-bottom: .2rem; +@media(min-width: 400px) { + #hemp { + margin-left: 50vw; + } + + #offgrid { + margin-left: 60vw; + } + + + button { + width: 2.5rem !important; + height: 2.5rem !important; + } } -#hemp .sub_container { - grid-column: 1; - grid-row: 2; +@media(min-width: 500px) { + + + button { + width: 3rem !important; + height: 3rem !important; } +} + +@media(min-width: 600px) { + + } + + @media(min-width: 800px) { + + + button { + width: 3.5rem !important; + height: 3.5rem !important; + } + } + -@media (min-width: 992px) { - .content { - height: 250vh !important; - margin-top: 5rem; + + @media(min-width: 1000px) { + button { + width: 4.5rem !important; + height: 4.5rem !important; } + } + @media (min-height: 500px) { #hemp { - z-index: 0; + margin-top: 5vw; } - -} \ No newline at end of file + + #permapp { + margin-top: 33vw; + } + + #spider { + margin-top: 60vw; + } + + #cube { + margin-top: 90vw; + } + + #offgrid { + margin-top: 130vw; + } + + #cyber { + margin-top: 145vw; + } + + #machina { + margin-top: 180vw; + } + + #miner{ + margin-top: 230vw; + } + + } + + \ No newline at end of file diff --git a/templates/assets/css/navigation.css b/templates/assets/css/navigation.css index 1c2b529..bcb6503 100644 --- a/templates/assets/css/navigation.css +++ b/templates/assets/css/navigation.css @@ -10,7 +10,7 @@ display: flex; flex-direction: row; justify-content: space-between; - height: 5rem; + height: 100%; border-bottom: .2rem solid hsl(160, 51%, 49%); } @@ -39,15 +39,17 @@ position: absolute; margin-top: 5rem; width: 100%; + height: 80%; display: none; justify-content: center; - z-index: 3; + z-index: 9; } .mobile_dropdown_container #mobile_dropdown { display: flex; flex-direction: column; align-items: center; + justify-content: space-evenly; margin-top: 2rem; } @@ -123,7 +125,7 @@ display: none; } -@media (min-width: 992px) { +@media (min-width: 1000px) { .main_bar { z-index: 1; display: flex; @@ -134,6 +136,7 @@ .main_bar #logo_container { margin-top: .5rem; + padding-bottom: 15vh; } .logo { @@ -160,7 +163,6 @@ position: relative; width: 100%; margin-left: 30%; - padding-top: 4rem; } .desktop_navigation ul { @@ -194,7 +196,7 @@ .desktop_navigation ul ul { border-top: 3px solid rgb(62, 190, 147); position: absolute; - top: 50%; + top: 80%; opacity: 0; visibility: hidden; max-height: 10vh; diff --git a/templates/assets/css/test.css b/templates/assets/css/test.css new file mode 100644 index 0000000..3d81a5e --- /dev/null +++ b/templates/assets/css/test.css @@ -0,0 +1,12 @@ +img { + width: 100vw; + z-index: 0; + grid-row: 1/25; + grid-column: 1/25; +} + +.container { + display: grid; + grid-template-columns: repeat(24, 1fr); + grid-template-rows: repeat(24, 1fr); +} \ No newline at end of file diff --git a/templates/assets/img/hero.svg b/templates/assets/img/hero.svg new file mode 100644 index 0000000..42abe4e --- /dev/null +++ b/templates/assets/img/hero.svg @@ -0,0 +1,323 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index e12de6c..72b60b1 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -48,15 +48,102 @@ document.getElementById("chevron_3").addEventListener("click", function menu() { // index -document.getElementById("click").addEventListener("click", () => { - var x = document.getElementById("show"); +// button 1 + +document.getElementById("b_1").addEventListener("click", function menu() { + var x= document.getElementById("c_1"); if (x.style.display === "none") { x.style.display = "flex";} else { x.style.display ="none"; } } -) +); + +// button 2 + +document.getElementById("b_2").addEventListener("click", function menu() { + var x= document.getElementById("c_2"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button 3 + +document.getElementById("b_3").addEventListener("click", function menu() { + var x= document.getElementById("c_3"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button 4 + +document.getElementById("b_4").addEventListener("click", function menu() { + var x= document.getElementById("c_4"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button 5 + +document.getElementById("b_5").addEventListener("click", function menu() { + var x= document.getElementById("c_5"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button 6 + +document.getElementById("b_6").addEventListener("click", function menu() { + var x= document.getElementById("c_6"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button 7 + +document.getElementById("b_7").addEventListener("click", function menu() { + var x= document.getElementById("c_7"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + +// button + +document.getElementById("b_8").addEventListener("click", function menu() { + var x= document.getElementById("c_8"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +); + diff --git a/templates/hemp.html.tera b/templates/hemp.html.tera new file mode 100644 index 0000000..baba285 --- /dev/null +++ b/templates/hemp.html.tera @@ -0,0 +1,9 @@ +{%extends "base"%} +{%block title %}Cannabinieri CBD{%endblock title %} +{%block head%} +{{super()}} + +{%endblock head%} +{%block content%} +

Hemp

+{%endblock content%} \ No newline at end of file diff --git a/templates/index_de.html.tera b/templates/index_de.html.tera index 5510e98..eba4ef2 100644 --- a/templates/index_de.html.tera +++ b/templates/index_de.html.tera @@ -7,13 +7,70 @@ {{super()}} {%block content%}
- -