diff --git a/src/build_rocket/get.rs b/src/build_rocket/get.rs index 4a745af..434b18d 100644 --- a/src/build_rocket/get.rs +++ b/src/build_rocket/get.rs @@ -16,35 +16,37 @@ use rocket_dyn_templates::Template; // if success call handler pub fn index() -> Template { let context = templates::TplIndex::new(); - Template::render("index", &context) + Template::render("home", &context) } // serve other pages (html GET) - // create routes for pages - #[get("/experiments")] - pub async fn experiments() -> Result> { + // create routes for main pages + #[get("/hemp")] + pub async fn hemp() -> Result> { NamedFile::open("templates/experiments.html").await.map_err(|e|NotFound(e.to_string())) } - - #[get("/permaculture")] - pub async fn perma() -> Option { - NamedFile::open("templates/permaculture.html").await.ok() + + #[get("/spider")] + pub async fn spider() -> Option { + NamedFile::open("templates/spider.html").await.ok() } - #[get("/greentech")] - pub async fn greentech() -> Option { - NamedFile::open("templates/greentech.html").await.ok() + #[get("/permapp")] + pub async fn permapp() -> Option { + NamedFile::open("templates/permapp.html").await.ok() } - #[get("/spider")] - pub async fn spider() -> Option { - NamedFile::open("templates/spider.html").await.ok() + #[get("/cyberpreneur")] + pub async fn cyber() -> Option { + NamedFile::open("templates/greentech.html").await.ok() } - #[get("/learn")] - pub async fn learn() -> Option { + #[get("/offgrid")] + pub async fn offgrid() -> Option { NamedFile::open("templates/learn.html").await.ok() } + + // subpages #[get("/oil")] pub async fn oil() -> Option { @@ -55,60 +57,26 @@ use rocket_dyn_templates::Template; pub async fn flower() -> Option { NamedFile::open("templates/flower.html").await.ok() } - - #[get("/candy")] - pub async fn candy() -> Option { - NamedFile::open("templates/edibles.html").await.ok() - } - - #[get("/permApp")] - pub async fn permapp() -> Option { - NamedFile::open("templates/permapp.html").await.ok() - } - - #[get("/greenlab")] - pub async fn greenlab() -> Option { - NamedFile::open("templates/greenlab.html").await.ok() - } - - #[get("/about")] - pub async fn about_perma() -> Option { - NamedFile::open("templates/whatsthat.html").await.ok() - } - - #[get("/automation")] - pub async fn automation() -> Option { - NamedFile::open("templates/automation.html").await.ok() - } - - #[get("/DiY")] - pub async fn diy() -> Option { - NamedFile::open("templates/diy.html").await.ok() - } - - #[get("/IoT")] - pub async fn iot() -> Option { - NamedFile::open("templates/iot.html").await.ok() - } - - #[get("/spiderPi")] + + #[get("/spiderpi")] pub async fn spiderpi() -> Option { NamedFile::open("templates/spiderpi.html").await.ok() } - - #[get("/join")] + + #[get("/kaoscube")] pub async fn join() -> Option { NamedFile::open("templates/join.html").await.ok() } + #[get("/wohnmaschine")] + pub async fn wm() -> Option { + NamedFile::open("templates/greenlab.html").await.ok() + } + + // footer pages #[get("/about")] pub async fn about() -> Option { - NamedFile::open("templates/whoweare.html").await.ok() - } - - #[get("/partners")] - pub async fn partners() -> Option { - NamedFile::open("templates/partners.html").await.ok() + NamedFile::open("templates/about.html").await.ok() } #[get("/contact")] @@ -116,20 +84,7 @@ use rocket_dyn_templates::Template; NamedFile::open("templates/meet.html").await.ok() } - #[get("/blog")] - pub async fn blog() -> Option { - NamedFile::open("templates/blog.html").await.ok() - } - - #[get("/code")] - pub async fn code() -> Option { - NamedFile::open("templates/code.html").await.ok() - } - - #[get("/")] - pub async fn policies_info() -> Option { - NamedFile::open("templates/policies.html").await.ok() - } + // code link to gitea #[get("/privacy")] pub fn privacy() -> Template { diff --git a/src/main.rs b/src/main.rs index 3a3ce56..e382566 100644 --- a/src/main.rs +++ b/src/main.rs @@ -27,20 +27,14 @@ async fn main() -> Result<(), rocket::Error> { .mount("/", routes![ get::index, get_static_files::fileserver, - get::experiments, get::perma, get::greentech, get::spider, get::learn ]) - .mount("/experiments", - routes! [ get::oil, get::flower, get::candy ]) - .mount("/permaculture", - routes! [ get::permapp, get::greenlab, get::about_perma ]) - .mount("/greentech", - routes! [ get::automation, get::iot, get::diy ]) + get::hemp, get::spider, get::permapp, get::cyber, get::offgrid, get::about, get::meet, get::privacy ]) + .mount("/hemp", + routes! [ get::oil, get::flower]) .mount("/spider", - routes! [ get::spiderpi, get::join ]) - .mount("/learn", - routes! [ get::about, get::partners, get::meet, get::blog, get::code ]) + routes! [ get::spiderpi, get::join ]) - .mount("/policies", - routes! [ get::policies_info, get::privacy ]) + .mount("/offgrid", + routes! [ get::wm, ]) // Add Tera Templating support .attach(Template::fairing()) diff --git a/templates/assets/components/footer.html b/templates/assets/components/footer.html index 4784297..48a3d6d 100644 --- a/templates/assets/components/footer.html +++ b/templates/assets/components/footer.html @@ -6,7 +6,7 @@
-
Information +
About Cannabinieri diff --git a/templates/assets/components/main-nav.html b/templates/assets/components/main-nav.html index b595413..9910a36 100644 --- a/templates/assets/components/main-nav.html +++ b/templates/assets/components/main-nav.html @@ -7,6 +7,7 @@
+ + Shop diff --git a/templates/assets/css/base.css b/templates/assets/css/base.css new file mode 100644 index 0000000..1c4a725 --- /dev/null +++ b/templates/assets/css/base.css @@ -0,0 +1,19 @@ +* { + margin: 0; + padding: 0; + height: 100%; + /*overflow: hidden;*/ + +} + +body .navigation { + height: 5rem; +} + +body .content { + min-height: 80vh; +} + +body .footer { + max-height: 40vh; +} \ No newline at end of file diff --git a/templates/assets/css/footer.css b/templates/assets/css/footer.css index 4a49dce..831f581 100644 --- a/templates/assets/css/footer.css +++ b/templates/assets/css/footer.css @@ -5,509 +5,44 @@ font-weight: 100; } -*{ - margin:0; - padding:0; - box-sizing:border-box; -} -:root{ - --top_padding:5px; +footer .footer_container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000; + font-family: 'Lato', sans-serif; + padding: 1rem 0; } -html, -body { - width: 100%; - height: 100%; +.footer_container .column { font-family: 'Lato', sans-serif; - font-weight:500; - overflow-x: hidden; + letter-spacing: .15rem; } -@media screen and (min-width: 1024px){ - -footer { - grid-area:footer; +.footer_container h6 { + font-weight: 400; + font-size: .95rem; + letter-spacing: .075em; + padding: 2vh 0; + text-transform: uppercase; + color:#fff; } -#footer-wrapper { - color: white !important; - border-top: solid 3px white; - border-bottom: solid 1px white; - background-color: black; - height:100%; - display: grid; - grid-template-columns: 1fr 0.8fr 1fr 1fr; - grid-template-rows: 2fr 1fr; - padding-bottom:1%; - padding-top: 10vh; +.footer_container h6 a { + cursor: pointer; + text-decoration: none; + color: #fff; + transition: .6s ease; } - #column1 { - background-color: black; - display: none; - font-family: 'Lato', sans-serif; - } - - #column1 a h3 { - display: flex; - align-items: center; - } - - #column2 { - display: flex; - flex-direction: column; - text-align: center; - grid-column: 1; - } - - #column2 ul { - list-style: none; - text-align: center; - } - - #column2 ul li p a { - text-decoration:none; - color:white; - } - - #column2 ul li { - margin: 5vh 0; - } - - h6 { - font-family: 'Lato', sans-serif; - font-weight: 350; - font-size: 135%; - text-transform: uppercase; - } - - #column3 { - display: flex; - flex-direction: column; - text-align: center; - } - - #column2 ul li a:hover { - color: rgb(0, 255, 170); - } - - #column3 ul { - list-style: none; - text-align: center; - } - - #column3 ul li p a { - text-decoration:none; - color:white; - } - - #column3 ul li { - margin: 5vh 0; - } - - #column3 ul li a:hover { - color: rgb(0, 255, 170); - } - - #column4 { - display:flex; - flex-direction: column; - text-align: center; - } - #column4 p { - font-size: 2vh; - line-height: 4vh; - margin-top: 5vh; - } - - #column5 { - display: flex; - flex-direction: column; - text-align: center; - } - - #column5 #social-media { - margin-top: 5vh; - } - - #social-media ul { - margin-top:1%; - } - - #social-media ul li { - display:inline; - list-style-type: none; - padding-left: 9%; - } - - #social-media ul li .youtube { - padding-left: 0; - } - - #youtube { - height: auto; - width: 7%; - } - - #instagram { - height:auto; - width: 7%; - } - - #gitea { - height:auto; - width: 10%; - } - - #row2 { - border-top: .1em solid white; - color: white; - grid-column: 1/2; - display:flex; - align-self: center; - justify-self: center; - padding-top: 1vh; - } - - #row2 p { - text-align: center; - padding-top:2%; - cursor: pointer; - } - - #row3 { - grid-column: 3/5; - display:flex; - align-self: center; - justify-self: center; - } - - #row3 .languages a { - color: #fff; - padding: 0 1vh !important; - transition: all .3s; - } - - #row3 .languages a:hover { - color:hsl(160, 50%, 70%); - } - - .arrow .down { - display:none; - } - - #dropdown { - display:none; - } - - .ham-btn { - display:none; - } - - .hamburger { - display: none; - } - - .hamburger-icon{ - display: none; - } - - #mobile-dropdown-container { - display: none; - } - - #footer-languages { - display:none; - } - +.footer_container p { + color: #fff; + font-size: .85rem; + letter-spacing: .075em; } - -@media only screen and (max-width: 1023px) { - -footer { - grid-area:footer; - } - - #footer-wrapper { - grid-template-columns: 50% 50%; - grid-template-rows: .6fr 0.1fr 0.1fr 0.1fr 0.1fr; - display: grid; - background-color:black; - } - - #column1 { - grid-row: 1; - grid-column: 1; - display: flex; - justify-content: center; - min-height: 25vh; - } - - #column1 a { - color: white; - text-decoration: none; - text-transform: uppercase; - margin-left: 0; - font-size:100%; - padding-top:5%; - padding-bottom:5%; - display:flex; - padding-left: 2.5vh; - } - - #column1 a:active { - color: rgb(0, 255, 170); - } - - #column1 a h3 { - display:flex; - align-items: center; - letter-spacing: .1em; - font-weight: 100; - padding-left: .5em; - } - - #column1 a h3 span { - color: hsl(160, 51%, 80%); - letter-spacing: .095em; - margin-right: .5vh; - } - - #column2{ - grid-column:1/3; - grid-row: 2; - margin-top:0; - border-top:1px solid white; - padding-top:5%; - padding-left: 5%; - padding-right: 5%; - padding-bottom: 5%; - border-bottom:1px solid white; - font-family: 'Lato', sans-serif; - } - - #column2 ul { - display:none; - position: relative; - width:100%; - overflow:auto; - z-index: 1; - list-style : none; - justify-content: space-between; - padding: 1vh 5% 0 5%; - text-align: center; - border-top: 1px solid rgb(62, 190, 147); - flex-direction: column; - } - - #column2 ul li p a { - font-weight: 300; - text-decoration: none; - color:white; - letter-spacing: .075em - } - - #column2 ul li p a:active{ - color: rgb(0, 255, 170); - } - - #column2 ul li { - margin-bottom: 5%; - margin-top:5%; - } - - h6 { - font-size: 100%; - font-weight: 400; - letter-spacing: .075em; - padding: 2vh 0; - text-transform: uppercase; - color:white; - cursor: pointer; - transition: .6s ease; - } - - h6:active { - color: rgb(0, 255, 170); - } - - .arrow { - border: solid white; - border-width: 0 2px 2px 0; - display: inline-block; - padding: 3px; - cursor: pointer; - transition: .1s; - } - - .down { - transform: rotate(45deg); - position: relative; - margin-left:55%; - - } - - .down2 { - transform: rotate(45deg); - position: relative; - margin-left:73%; - - } - - - #column3 { - grid-column: 1/3; - grid-row: 3; - margin-top:0; - border-top:1px solid white; - padding-top:5%; - padding-bottom:4%; - padding-left: 5%; - padding-right: 1%; - border-bottom:1px solid white; - } - - #column3 ul { - display:none; - position: relative; - width:100%; - overflow:auto; - z-index: 1; - list-style : none; - justify-content: space-between; - border-top: 1px solid rgb(62, 190, 147); - padding-right: 5%; - padding-left: 5%; - text-align: center; - } - - #column3 h6 { - padding: 2vh 0; - transition: .6s ease; - } - - #column3 ul li { - margin: 5vh 0 3vh 0; - } - - #column3 ul li p a { - font-family: 'Lato', sans-serif; - font-weight: 300; - text-decoration:none; - color: #fff; - } - - #column3 ul li p a:active { - color: hsl(160, 100%, 50%); - - } - - #column4 { - grid-column: 1/3; - grid-row:4; - border-bottom: solid white 1px; - font-family: 'Lato', sans-serif; - } - - #column4 p { - display: flex; - align-items: center; - justify-content: space-evenly; - padding: 1.5vh 0; - color:white; - font-size: 1.75vh; - font-weight: 400; - text-transform: uppercase; - } - - #column4 h6 { - display:none; - } - - #column5 { - grid-column:2; - grid-row: 1; - margin-top:15%; - padding-bottom: 10%; - display:flex; - align-items: center; - } - - #social-media { - padding-left: 5vh; - } - - #social-media ul li { - display:inline; - list-style-type: none; - padding-left: 10%; - padding-bottom:5%; - } - - #column5 h6 { - display:none; - } - - #gitea { - width:18%; - height:auto; - } - - #youtube { - height: auto; - width: 4.5vw; - } - - #instagram { - height:auto; - width: 6.5vw; - } - - #row2 { - grid-column:1; - grid-row:5; - display:flex; - align-items:center; - justify-content:center; - margin: 2.5vh 0; - background-color: black; - font-family: 'Lato', sans-serif; - font-weight: 500; - letter-spacing: .095em; - } - - #row2 p { - align-items: center; - padding-top:0; - font-size: .75em; - color:white; - } - - #row3 { - grid-column:2/3; - grid-row:5; - margin: 2.5vh 0; - } - - #row3 .languages { - margin-left:0; - align-self:flex-end; - } - - #row3 .languages a { - color: hsl(160, 51%, 80%); - font-size: .75em; - text-decoration: none; - } - - #row3 .languages a:active { - color: rgb(0, 255, 170); - } - - .desktop { - display: none; - } - - } \ No newline at end of file +.footer_container h6:active { + opacity: 50%; +} \ No newline at end of file diff --git a/templates/assets/css/home.css b/templates/assets/css/home.css new file mode 100644 index 0000000..6151ec5 --- /dev/null +++ b/templates/assets/css/home.css @@ -0,0 +1,107 @@ +@font-face { + font-family: 'Lato', sans-serif; + src: url('fonts/Lato-Thin.ttf') format('truetype'); + font-style: normal; + font-weight: 100; +} + +.content { + height: 120vh !important; + width: 100vw; +} + +.content .container { + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: repeat(8, 1fr); + margin-top: .2rem; + font-family: 'Lato', sans-serif;; +} + +.container img { + height: 100%; + z-index: 0; + max-width: 100vw; + grid-column: 1/3; + grid-row: 1/9; + justify-self: center; +} + +.link button { + width: 2rem; + height: 2rem; + border-radius: 50%; + border: .1rem solid hsl(300, 100%, 50%); + background-color: hsl(300, 100%, 50%); + transition: all .5s ease-in-out; +} + +#hemp button:active { + box-shadow: 0px 0px 10px hsl(300, 100%, 30%); +} + +.link button a { + color: #fff; + text-decoration: none; + font-weight: 600; + font-size: 1.25rem; + transition: all .4s ease-in-out; +} + +.link button a:active { + color: #999; +} + +.link h6 { + text-transform: uppercase; + font-size: .85rem; + letter-spacing: .25rem; +} + +.link p { + font-size: .65rem; + text-align: center; + background-color: #333; + color: #eee; + line-height: 2.25vh; +} + +#hemp { + grid-column: 1/3; + grid-row: 1; + z-index: 2; + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr) +} + +#hemp button { + grid-column: 2; + grid-row: 2; + justify-self: start; + align-self: end; + margin-left: 2.4rem; + margin-bottom: .2rem; +} + + +#hemp h6 { + grid-column: 1; + grid-row: 1; + justify-self: center; + display: flex; + align-items: center; +} + +#hemp p { + grid-column: 1; + grid-row: 2; +} + +@media (min-width: 768px) { + .content { + height: 250vh !important; + margin-top: 5rem; + } + +} \ No newline at end of file diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index f55cfb1..28504a5 100644 --- a/templates/assets/css/index.css +++ b/templates/assets/css/index.css @@ -73,7 +73,7 @@ .top-bar { background-color:white; grid-area: top-bar; - display: flex !important; + display: flex; align-items: center; } @@ -1472,7 +1472,7 @@ /* Adjust Media Queries ! */ - +@media (max-width: 768px) { body { background-color: white; @@ -2950,6 +2950,7 @@ .desktop { display: none; } +} diff --git a/templates/assets/css/nav.css b/templates/assets/css/nav.css deleted file mode 100644 index 7dcf991..0000000 --- a/templates/assets/css/nav.css +++ /dev/null @@ -1,375 +0,0 @@ -@font-face { - font-family: 'Fira Sans Thin', sans-serif; - src: url('fonts/FiraSans-Thin.ttf') format('truetype'); - font-style: normal; - font-weight: 100; -} - -@font-face { - font-family: 'Lato', sans-serif; - src: url('fonts/Lato-Thin.ttf') format('truetype'); - font-style: normal; - font-weight: 100; -} - -*{ - margin:0; - padding:0; - box-sizing:border-box; -} - -:root{ - --top_padding:5px; -} - -html, -body { - width: 100%; - height: 100%; -} - -@media (min-width: 1024px){ - -body { - background-color:white; -} - -#main-nav { - z-index:3; -} - -.top-bar { - background-color:white; - grid-area: top-bar; - display: flex; - align-items: center; - font-family: 'Fira Sans', sans-serif; -} - -.languages { - display: flex; - align-items: center; - margin-left: 2vh; - -} - -.languages a { - text-decoration: none !important; - color: #555; - cursor: pointer; - margin: 1vh; - font-weight: 100; - font-size: 1.95vh; - transition: ease .2s; -} - -.languages a:hover { - color: hsl(160, 51%, 60%); -} - -#main-bar { - background-color: black; - grid-area: main-bar; - z-index:1; - display: flex; - align-items: center; - border-top: 1px solid rgb(62, 190, 147); - border-bottom: 3px solid rgb(62, 190, 147); - box-sizing: border-box; - min-width: 100vw; - height: 80%; - font-weight: 100; -} - -#logo-container { -margin-top:6em; -} - -.logo { - z-index:3; - width: 30vh; - margin-left: 7.5vh; - margin-top: 2.5vh; -} - -.main-navigation-bar { - z-index: 2; - display:flex; - align-items:center; - position: relative; - margin-left: 10vw; -} - -.main-navigation-bar ul { - list-style:none; - position:relative; - align-items:center; - padding-top: 2%; -} - -.main-navigation-bar a { - align-items:center; - justify-content: center; - height: 50px; - font-size: 2.55vh; - font-weight: 100; -} - -.main-navigation-bar ul li { - position:relative; - width:100%; - text-align: center; - padding-right: 4%; - transition: ease .2s; -} - -.main-navigation-bar ul li a:hover { - color: rgb(0, 255, 170); -} - -.main-navigation-bar ul #learn { - width:10em; -} - -.main-navigation-bar ul li a { - color:white; - text-decoration: none; - justify-content: space-between; - line-height: 50px; - font-family: 'Lato' , sans-serif; - font-weight: 300 !important; - padding: 2vw; -} - -.main-navigation-bar ul li #edit { - padding-right:0; -} - -.main-navigation-bar ul li .pc { - - padding-left:1.5em; -} - -.main-navigation-bar ul ul { - border-top: 3px solid rgb(62, 190, 147); - position: absolute; - top: 90%; - opacity: 0; - visibility: hidden; -} - - - -.main-navigation-bar ul li li { - position: relative; - float:left; - display: list-item; - background-color: #000; - opacity: 95%; - padding: 1.75vh 0; -} - -.main-navigation-bar ul li .lastItem { - padding-bottom: 2.25vh; -} - -.main-navigation-bar ul li li a { - font-size: 2.65vh; -} - - -.main-navigation-bar ul li:hover > ul { - opacity: 1; - visibility: visible; -} - -#name { - display: none; -} - -} - -@media (max-width: 1023px) { - - body{ - background-color: white; - } - - .top-bar { - display: none; - } - - .main-navigation-bar { - display: none; - } - - .button { - display: none !important; - } - -#main-bar { - grid-area: main-bar; - background-color: black; - display:flex; - border-bottom: 6px solid hsl(160, 51%, 49%); - padding: 0 0; -} - -.logo { - width: auto; - height: 17.5vh; - padding: 1vh 0 0 .5vh; -} - -#main-bar h3 { - display:none; - color: white; - text-transform: uppercase; - padding-top:0; - font-size: 13px; - margin-left:10%; - margin-bottom: 10%; - font-weight: 300; - } - - .hamburger-wrap { - align-self: center; - } - - .hamburger { - padding: 0 0 0 55vw; - display: flex; - cursor:pointer; - transition: all .2s ease; - } - - .hamburger .hamburger-icon { - width: 7.5vw; - height: 2.5px; - background-color:white; - display: block; - position:relative; - } - - .hamburger .hamburger-icon::before, - .hamburger .hamburger-icon::after { - content:''; - width:100%; - height:100%; - background-color: white; - display: block; - position:absolute; - } - - .hamburger .hamburger-icon::after{ - top: -7px; - } - - .hamburger .hamburger-icon::before{ - top: 7px; - } - - .ham-btn { - display:none; - } - - .ham-btn:checked .hamburger .hamburger-icon { - transform: rotate(45deg); - } - -#mobile-dropdown-container { - background-color: black; - position: absolute; - margin-top: 18.5vh; - width: 100%; - z-index: 2; - padding-bottom: 0; - display: flex; - justify-content: center; - opacity: 90%; -} - -#mobile-dropdown { - margin: 1em; - display: none; -} - -#mobile-dropdown ul { - list-style:none; -} - -#mobile-dropdown ul li { - margin: 2vh 0 5vh 0; - display:flex; - flex-direction: column; -} - -#mobile-dropdown ul li a { - color :white; - text-decoration:none; - font-size: 3vh; - font-weight: 700; - line-height: 1.8em; - justify-self: center; - align-self: center; - margin-bottom: 1vh; - font-family: 'Lato', sans-serif; - font-weight: 300; -} - - #mobile-dropdown ul li a:hover ,#mobile-dropdown ul li a:active{ - color: rgb(0, 255, 170); -} - -#mobile-dropdown ul li ul li a { - color: white; - } - -.drop { - display: flex; - justify-content: center; - align-self: center; -} - -#down, #down1, #down2, #down3, #down4 { - background-color: black; - display: none; - border: 1px solid rgb(0, 255, 170); - border-radius: 25px; - margin-top: 3vh; - padding: 1vh 5vh; -} - -#down li { - margin: 1vh 0 2vh 0 !important; -} - -#down li a { - margin-bottom: 0 !important; -} - - -.drop .arrow { - border: solid rgb(0, 255, 170); - border-width: 0 2px 2px 0; - display: inline-block; - padding: 1.25vw; - transition: .1s ease; -} - -.drop .arrow:active { - color: #906090; -} - -.arrow:active{ - color:pink; -} - - .down { - transform: rotate(45deg); - } -#trigger { - background-color:pink; -} - - } \ No newline at end of file diff --git a/templates/assets/css/navigation.css b/templates/assets/css/navigation.css new file mode 100644 index 0000000..774b9b2 --- /dev/null +++ b/templates/assets/css/navigation.css @@ -0,0 +1,234 @@ +@font-face { + font-family: 'Lato', sans-serif; + src: url('fonts/Lato-Thin.ttf') format('truetype'); + font-style: normal; + font-weight: 100; +} + +.main_bar { + background-color: #000; + display: flex; + flex-direction: row; + justify-content: space-between; + height: 5rem; + border-bottom: .2rem solid hsl(160, 51%, 49%); +} + +.logo { + width: auto; + height: 4.5rem; + margin: .25rem 0 0 .25rem; +} + +.hamburger_wrapper { + display: flex; + align-items: center; +} + +.hamburger_wrapper #icon { + color: #fff; + height: 2.5rem; + width: 2.5rem; + cursor: pointer; + margin-right: .5rem; +} + +.mobile_dropdown_container { + background-color: rgb(0, 255, 170); + opacity: 95%; + position: absolute; + margin-top: 5rem; + width: 100%; + display: none; + justify-content: center; + z-index: 3; +} + +.mobile_dropdown_container #mobile_dropdown { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 2rem; +} + +#mobile_dropdown ul { + list-style: none; + max-height: 16vh; +} + +#mobile_dropdown ul li { + display: flex; + flex-direction: column; + margin-top: .75rem; + max-height: 5vh; + +} + +#mobile_dropdown ul li a { + color:#000; + text-decoration: none; + font-family: 'Lato', sans-serif; + font-size: 1.15rem; + line-height: 1.8em; + font-weight: 300; + margin-bottom: .25rem; + letter-spacing: .2rem; + display: flex; + align-items: center; +} + +#mobile_dropdown ul li li a { + font-weight: 400; +} + +#mobile_dropdown ul li a:active { + opacity: 50%; + color: rgb(0, 255, 170); + transition: all ease-in-out; +} + +.drop { + display: flex; + justify-content: center; +} + +.chevron { + height: 1.5rem; + width: 1.5rem; + cursor: pointer; +} + +.down { + display: none; + flex-direction: column; + align-items: center; + z-index: 200; + position: fixed; + background-color: hsl(300, 100%, 50%); + max-height: 30vh; + margin-top: 5rem; + min-width: 80%; + right: 10%; + border-radius: .2rem; + box-shadow:.1rem .1rem #888; + opacity: 85%; + transition: all .7 ease; +} + +#down_5 { + bottom: 24%; + max-height: 40vh !important; +} + +.desktop_navigation { + display: none; +} + +@media (min-width:768px) { + .main_bar { + z-index: 1; + display: flex; + align-items: center; + border-bottom: .25rem solid rgb(62, 190, 147); + height: 7.5rem; + } + + .main_bar #logo_container { + margin-top: .5rem; + } + + .logo { + z-index:3; + height: 10rem; + width: auto; + margin-left: 2.5rem; + margin-top: .5rem; + position: absolute; + } + + .hamburger_wrapper { + display: none; + } + + .mobile_dropdown_container { + display: none; + } + + .desktop_navigation { + z-index: 2; + display:flex; + align-items:center; + position: relative; + width: 100%; + margin-left: 30%; + padding-top: 4rem; + } + + .desktop_navigation ul { + list-style: none; + position: relative; + align-items: center; + padding-top: 1rem; + } + + .desktop_navigation ul li { + position: relative; + text-align: center; + padding-right: 1.5rem; + transition: ease .2s; + } + + .desktop_navigation ul li:hover { + opacity: 90%; + } + + .desktop_navigation ul li a { + color: #fff; + text-decoration: none; + justify-content: space-between; + line-height: 50px; + font-family: 'Lato' , sans-serif; + font-weight: 300 !important; + padding: 2vw; + } + + .desktop_navigation ul ul { + border-top: 3px solid rgb(62, 190, 147); + position: absolute; + top: 50%; + opacity: 0; + visibility: hidden; + max-height: 10vh; + } + + #broader { + min-width: 15vw; + } + + .desktop_navigation ul li li { + position: relative; + display: list-item; + background-color: #000; + opacity: 95%; + padding-top: 1rem; + } + + .desktop_navigation #fix { + padding: 0; + } + + .desktop_navigation ul li #fix { + padding: 0 .6rem 0 .475rem; + } + + .desktop_navigation ul li li a { + font-size: 1.15rem; + } + + .desktop_navigation ul li:hover > ul { + opacity: 1; + visibility: visible; + } + + +} \ No newline at end of file diff --git a/templates/assets/img/hero.png b/templates/assets/img/hero.png new file mode 100644 index 0000000..1eed5ac Binary files /dev/null and b/templates/assets/img/hero.png differ diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index ec37295..ebefeb6 100644 --- a/templates/assets/js/main.js +++ b/templates/assets/js/main.js @@ -1,3 +1,93 @@ +// show mobile menu onclick + +document.getElementById("icon").addEventListener("click", function menu() { + var x = document.getElementById("md"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + +// show experiments submenu + +document.getElementById("chevron_1").addEventListener("click", function menu() { + var x= document.getElementById("down_1"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + +// permaculture submenu + +document.getElementById("chevron_2").addEventListener("click", function menu() { + var x= document.getElementById("down_2"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + +// greentech submenu + +document.getElementById("chevron_3").addEventListener("click", function menu() { + var x= document.getElementById("down_3"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + +// spiderpi submenu + +document.getElementById("chevron_4").addEventListener("click", function menu() { + var x= document.getElementById("down_4"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + +// about submenu + +document.getElementById("chevron_5").addEventListener("click", function menu() { + var x= document.getElementById("down_5"); + if (x.style.display === "none") { + x.style.display = "flex";} + else { + x.style.display ="none"; + } + } +) + + + + + + + + + + + + + + + + + + + // this function shows an element by id @@ -19,59 +109,4 @@ function display() { else { x.style.display ="none"; } - } - - function menu() { - var x= document.getElementById("mobile-dropdown"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } - - - function menu2() { - var x= document.getElementById("down"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } - - function menu3() { - var x= document.getElementById("down1"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } - - function menu4() { - var x= document.getElementById("down2"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } - - function menu5() { - var x= document.getElementById("down3"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } - - function menu6() { - var x= document.getElementById("down4"); - if (x.style.display === "none") { - x.style.display = "block";} - else { - x.style.display ="none"; - } - } \ No newline at end of file + } \ No newline at end of file diff --git a/templates/base.html.tera b/templates/base.html.tera index e0b81b6..d2e6f52 100644 --- a/templates/base.html.tera +++ b/templates/base.html.tera @@ -1,15 +1,27 @@ - - {% block head %} - - - - - {% block title %}Base{% endblock title %} - {% endblock head %} - - - {% block content %}{% endblock content %} - + + {% block head %} + + + + + + + + {% block title %}Base{% endblock title %} + {% endblock head %} + + +
+ {%include "nav"%} +
+
+ {% block content %} {% endblock content %} +
+
+ {%include "footer"%} +
+ + \ No newline at end of file diff --git a/templates/footer.html.tera b/templates/footer.html.tera new file mode 100644 index 0000000..35dc891 --- /dev/null +++ b/templates/footer.html.tera @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/templates/home.html.tera b/templates/home.html.tera new file mode 100644 index 0000000..e8d3d6a --- /dev/null +++ b/templates/home.html.tera @@ -0,0 +1,20 @@ +{%extends "base"%} +{%block title %}Cannabinieri CBD{%endblock title %} +{%block head%} +{{super()}} + +{%endblock head%} +{{super()}} +{%block content%} +
+ + +
+{%endblock content%} + diff --git a/templates/index.html.tera b/templates/index.html.tera deleted file mode 100644 index d47b3c8..0000000 --- a/templates/index.html.tera +++ /dev/null @@ -1,448 +0,0 @@ -{%extends "base"%} - -{%block head%} -{{super()}} - - - - -{%block title%} {{title}} {%endblock title%} -{%endblock head%} -{%block content%} -{{super()}} -
- -
-
- -
- - -
-
- - - - - - - - - - -
-
-
-
-
-
-
-

Cannabinieri

-
-
- - - -
- -
- -
- -
-
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-

Experiments

-

# experiments=products=oils etc!Our Experiments explore how plants react to changes.
- Environmental conditions and the relations between plants define a plants health, growth taste and effect.
- With our Experiments strive to understand our planet in order to create an organic, automated indoor garden for everyone, everywhere. -

-
- More -
-
-
-
-
-
-
-
- -
-
- -
-
- -
-
- -
-
-
-

Spider

-

Learn about our project Spider Pi
- Get to know our garden hexapod.
- He is aimed to be a garden helper, that collects data while doing your gardening.
 - Spider Pi enables everyone to grow their own crops everywhere.
- He is the solution for everyone who doesn't have the time for gardening but wants to grow their own local organic food and learn about plants in the meantime.
- #a dummy text -

-
- Learn -
-
-
-
-
-
-
-
- -
-
-
-
- -
-
- -
-
-
-

PermaCulture

-

We utilitze and explore the principles of Permaculture.
- - -

-
- Learn -
-
-
-
-
-
-
-
- -
-
-
-
- -
-
- -
-
-
-

GreenTech

-

- We want you to be able to grow your own crops at home wherever that is and no matter how much time you have.
- There are many projects that combine farming and tech in order to create a system that bears changing environmental conditons and a growing population.
 -
- Long distance transportation and the exploitation of ressources can be avoided if everyone grew their own crops or even better, let them be grown by affordable and accessible IoT solutions.

- Explore our projects and get inspired.
-

-
- Explore -
-
-
-
-
-
-
-
- -
-
-
-

About Us

-

We are currently a collective of five people, determined to connect farming and science.
- We aim to gather information about our ecosystem and utilize it to create 100% organic CBD products that all ship with a little bit more information for us and our customers.
- We strive to understand our ecosystem and to utilize our knowledge in order to create a database of products and affordable solutions for an automated organic garden for everyone, everywhere.
- #dummy text -

-
- Learn -
-
-
-
-
-

News

-
- -
- -
-
-
-
-
- -
- - - -{% endblock content %} diff --git a/templates/nav.html.tera b/templates/nav.html.tera new file mode 100644 index 0000000..6e809a0 --- /dev/null +++ b/templates/nav.html.tera @@ -0,0 +1,103 @@ +
+ + + +
+
+ + + + + + +
+
+ + +
+ diff --git a/templates/privacy-policy.html.tera b/templates/privacy-policy.html.tera index 0e23984..cc1b28d 100644 --- a/templates/privacy-policy.html.tera +++ b/templates/privacy-policy.html.tera @@ -1,10 +1,11 @@ {%extends "base"%} - {%block title%}{{title}}{%endblock title%} {%block head%} {{super()}} {%endblock head%} {%block content%} -

Privacy Policy

-

Add info how data is handled and licence of code

+
+

Privacy Policy

+

Add info how data is handled and licence of code

+
{%endblock content%} \ No newline at end of file