From 14180dad946d6381d7d8b5cebfc278e36ae2a76e Mon Sep 17 00:00:00 2001 From: Matus Kosut Date: Sun, 4 Feb 2024 12:08:43 +0100 Subject: [PATCH] draft template --- pages/.vitepress/components/GreyBlock.vue | 108 ++++++++ pages/.vitepress/config.ts | 70 ++--- pages/.vitepress/theme/common.css | 295 +++++++++++++++++++++ pages/.vitepress/theme/custom.css | 188 ++++++++++++++ pages/.vitepress/theme/index.ts | 19 ++ pages/index.md | 301 ++++++++++++++-------- pages/public/css/custom.css | 13 - 7 files changed, 827 insertions(+), 167 deletions(-) create mode 100644 pages/.vitepress/components/GreyBlock.vue create mode 100644 pages/.vitepress/theme/common.css create mode 100644 pages/.vitepress/theme/custom.css create mode 100644 pages/.vitepress/theme/index.ts delete mode 100644 pages/public/css/custom.css diff --git a/pages/.vitepress/components/GreyBlock.vue b/pages/.vitepress/components/GreyBlock.vue new file mode 100644 index 00000000..53451bc7 --- /dev/null +++ b/pages/.vitepress/components/GreyBlock.vue @@ -0,0 +1,108 @@ + + + + + + + diff --git a/pages/.vitepress/config.ts b/pages/.vitepress/config.ts index fda7826e..84f22e0e 100644 --- a/pages/.vitepress/config.ts +++ b/pages/.vitepress/config.ts @@ -1,4 +1,26 @@ // refer https://vitepress.vuejs.org/config/introduction for details +import { defineConfig, type HeadConfig } from 'vitepress'; + +// https://vitepress.vuejs.org/config/app-configs#head +const customHead: HeadConfig[] = [ + ["link", { rel: "shortcut icon", href: "https://www.ntnu.no/assets/images/favicon.ico", sizes: "any" }], + + ['meta', { name: "viewport", content: "width=device-width,initial-scale=1,user-scalable=no" }], + + ["meta", { name: "author", content: "HUNT Cloud" }], + ["meta", { name: "keywords", content: "HUNT Cloud,services,prices,about" }], + + ["meta", { name: "theme-color", content: "#00509e" }], + ["meta", { name: "apple-mobile-web-app-capable", content: "yes" }], + ["meta", { name: "apple-mobile-web-app-status-bar-style", content: "black" }], + ["meta", { name: "msapplication-TileColor", content: "#00509e" }], + + // ["meta", { rel: "stylesheet", type: "text/css", href: "/css/custom.css", sizes: "any" }], + ["meta", { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons", sizes: "any" }], + + ["link", { rel: "icon", type: "image/svg+xml", href: "/img/hunt-cloud-logo.svg", sizes: "any" }], + ["link", { rel: "mask-icon", type: "image/svg+xml", href: "/img/hunt-cloud-logo.svg", color: "#00509e" }], +]; export default { title: "HUNT Cloud", @@ -8,54 +30,10 @@ export default { base: "", outDir: "../build", appearance: false, + // appearance: 'light', cleanUrls: true, - // https://vitepress.vuejs.org/config/app-configs#head - head: [ - [ - "link", - { - rel: "shortcut icon", - href: "https://www.ntnu.no/assets/images/favicon.ico" - } - ], - [ - "link", - { - rel: "stylesheet", - type: "text/css", - href: "/css/custom.css", - }, - ], - [ - "link", - { - rel: "stylesheet", - href: "https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons", - }, - ], - [ - "meta", - { - name: "theme-color", - content: "#00509e" - } - ], - [ - "meta", - { - name: "apple-mobile-web-app-capable", - content: "yes" - } - ], - [ - "meta", - { - name: "apple-mobile-web-app-status-bar-style", - content: "black" - } - ] - ], + head: customHead, // https://vitepress.vuejs.org/config/app-configs#markdown markdown: { diff --git a/pages/.vitepress/theme/common.css b/pages/.vitepress/theme/common.css new file mode 100644 index 00000000..aa352006 --- /dev/null +++ b/pages/.vitepress/theme/common.css @@ -0,0 +1,295 @@ +/* Common CSS - reusable shorthands */ + +/* + +Paddings + +- pa: padding around +- px: padding-left + padding-right +- py: padding-top + padding-bottom +- pt: padding-top +- pb: padding-bottom + +*/ + +.pa-0 { + padding: 0px !important; +} + +.pa-1 { + padding: 4px !important; +} + +.pa-2 { + padding: 8px !important; +} + +.pa-3 { + padding: 16px !important; +} + +.pa-4 { + padding: 32px !important; +} + +.pa-5 { + padding: 64px !important; +} + + +.px-0 { + padding-right: 0px !important; + padding-left: 0px !important; +} + +.px-1 { + padding-right: 4px !important; + padding-left: 4px !important; +} + +.px-2 { + padding-right: 8px !important; + padding-left: 8px !important; +} + +.px-3 { + padding-right: 16px !important; + padding-left: 16px !important; +} + +.px-4 { + padding-right: 32px !important; + padding-left: 32px !important; +} + +.px-5 { + padding-right: 64px !important; + padding-left: 64px !important; +} + + +.py-0 { + padding-top: 0px !important; + padding-bottom: 0px !important; +} + +.py-1 { + padding-top: 4px !important; + padding-bottom: 4px !important; +} + +.py-2 { + padding-top: 8px !important; + padding-bottom: 8px !important; +} + +.py-3 { + padding-top: 16px !important; + padding-bottom: 16px !important; +} + +.py-4 { + padding-top: 32px !important; + padding-bottom: 32px !important; +} + +.py-5 { + padding-top: 64px !important; + padding-bottom: 64px !important; +} + + +.pt-0 { + padding-top: 0px !important; +} + +.pt-1 { + padding-top: 4px !important; +} + +.pt-2 { + padding-top: 8px !important; +} + +.pt-3 { + padding-top: 16px !important; +} + +.pt-4 { + padding-top: 32px !important; +} + +.pt-5 { + padding-top: 64px !important; +} + +.pb-0 { + padding-bottom: 0px !important; +} + +.pb-1 { + padding-bottom: 4px !important; +} + +.pb-2 { + padding-bottom: 8px !important; +} + +.pb-3 { + padding-bottom: 16px !important; +} + +.pb-4 { + padding-bottom: 32px !important; +} + +.pb-5 { + padding-bottom: 64px !important; +} + + +/* + +Margins + +- ma: margin around +- mx: margin-left + margin-right +- my: margin-top + margin-bottom +- mt: margin-top +- mb: margin-bottom + +*/ + +.ma-0 { + margin: 0px !important; +} + +.ma-1 { + margin: 4px !important; +} + +.ma-2 { + margin: 8px !important; +} + +.ma-3 { + margin: 16px !important; +} + +.ma-4 { + margin: 32px !important; +} + +.ma-5 { + margin: 64px !important; +} + + +.mx-0 { + margin-right: 0px !important; + margin-left: 0px !important; +} + +.mx-1 { + margin-right: 4px !important; + margin-left: 4px !important; +} + +.mx-2 { + margin-right: 8px !important; + margin-left: 8px !important; +} + +.mx-3 { + margin-right: 16px !important; + margin-left: 16px !important; +} + +.mx-4 { + margin-right: 32px !important; + margin-left: 32px !important; +} + +.mx-5 { + margin-right: 64px !important; + margin-left: 64px !important; +} + + +.my-0 { + margin-top: 0px !important; + margin-bottom: 0px !important; +} + +.my-1 { + margin-top: 4px !important; + margin-bottom: 4px !important; +} + +.my-2 { + margin-top: 8px !important; + margin-bottom: 8px !important; +} + +.my-3 { + margin-top: 16px !important; + margin-bottom: 16px !important; +} + +.my-4 { + margin-top: 32px !important; + margin-bottom: 32px !important; +} + +.my-5 { + margin-top: 64px !important; + margin-bottom: 64px !important; +} + +.mt-0 { + margin-top: 0px !important; +} + +.mt-1 { + margin-top: 4px !important; +} + +.mt-2 { + margin-top: 8px !important; +} + +.mt-3 { + margin-top: 16px !important; +} + +.mt-4 { + margin-top: 32px !important; +} + +.mt-5 { + margin-top: 64px !important; +} + +.mb-0 { + margin-bottom: 0px !important; +} + +.mb-1 { + margin-bottom: 4px !important; +} + +.mb-2 { + margin-bottom: 8px !important; +} + +.mb-3 { + margin-bottom: 16px !important; +} + +.mb-4 { + margin-bottom: 32px !important; +} + +.mb-5 { + margin-bottom: 64px !important; +} diff --git a/pages/.vitepress/theme/custom.css b/pages/.vitepress/theme/custom.css new file mode 100644 index 00000000..9b1a4cc7 --- /dev/null +++ b/pages/.vitepress/theme/custom.css @@ -0,0 +1,188 @@ +/* Custom CSS */ + +.hc-home-page { + display: block; +} + +.hc-header { + width: 100vw; + max-width: 100%; + /* margin-bottom: 64px; */ +} + +.hc-white-block { + display: block; + width: 100vw; + max-width: 100%; + min-height: 100px; + /* background-color: rgb(255, 255, 255); */ + /* margin-bottom: 64px; */ +} + +.hc-grey-block { + display: block; + width: 100vw; + max-width: 100%; + min-height: 100px; + background-color: rgb(238, 238, 238); + /* margin-bottom: 64px; */ +} + +.hc-title-main { + color: rgb(0, 0, 0); + line-height: 30px; + font-weight: bold; + font-size: 96px; + text-align: center; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 96px; + margin-bottom: 32px; + padding-bottom: 32px; +} + +.hc-subtitle-main { + color: rgb(0, 0, 0); + line-height: 30px; + font-size: 24px; + text-align: center; + align-items: center; + justify-content: center; + flex-direction: column; + margin-top: 32px; + margin-bottom: 48px; + padding-top: 32px; +} + +.hc-block-container { + max-width: 960px; + margin: 0 auto !important; + padding: 32px 0px 48px 0px; +} + +.hc-container-title { + color: rgb(0, 0, 0); + line-height: 30px; + font-weight: bold; + font-size: 48px; + text-align: center; + align-items: center; + justify-content: center; + flex-direction: column; + padding-top: 64px; + padding-bottom: 64px; +} + +.hc-container-subtitle { + color: rgb(0, 0, 0); + line-height: 30px; + font-size: 32px; + text-align: center; + align-items: center; + justify-content: center; + flex-direction: column; + /* padding-top: 4px; */ + padding-bottom: 32px; +} + +.hc-row { + display: grid; + column-gap: 10px; + row-gap: 10px; + grid-template-columns: repeat(3, 1fr); + grid-auto-columns: 33.3%; + /* grid-auto-rows: 200px; */ + /* width: 100%; */ + /* max-width: 960px; */ + /* margin: 0 auto !important; */ +} + +.hc-col { + display: inline-grid; + /* background-color: rgb(0, 0, 0); */ +} + +.hc-section { + display: flex; + justify-content: center; + align-items: center; + /* margin-left: 40px; + margin-right: 40px; */ +} + +.hc-header-img { + background-image: url("/img/HAD_banner_960_3.jpg"); + background-position: 50% 50%; + background-repeat: no-repeat; + background-size: cover; + background-color: #004c7b; + width: 100vw; + max-width: 100%; + height: 200px; + object-fit: fill; + margin: 0 auto !important; + box-shadow: inset 0px -3px 5px rgba(0, 0, 0, 0.1); +} + +@media (min-width: 720px) { + + .hc-column { + width: 33%; + margin-left: 0; + margin-right: 0; + } +} + +@media (min-width: 960px) { + + .hc-header-img { + background-image: url("/img/HAD_banner_1280_5.jpg"); + height: 350px; + } +} + +@media (min-width: 1280px) { + + .hc-header-img { + background-image: url("/img/HAD_banner_1920_1.jpg"); + height: 450px; + } +} + +@media (min-width: 1920px) { + + .hc-header-img { + background-image: url("/img/HAD_banner_1920_1.jpg"); + height: 700px; + } +} + +/* horizonal padding copied from .VPFeatures's padding */ +/* .custom-layout { + padding: 0 24px; +} + +@media (min-width: 640px) { + .custom-layout { + padding: 0 48px; + } +} + +@media (min-width: 960px) { + .custom-layout { + padding: 0 64px; + } +} */ + +.custom-container { + max-width: 1152px; + margin: 2rem auto 0; + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + text-align: center; + gap: 1rem; +} diff --git a/pages/.vitepress/theme/index.ts b/pages/.vitepress/theme/index.ts new file mode 100644 index 00000000..189d25ef --- /dev/null +++ b/pages/.vitepress/theme/index.ts @@ -0,0 +1,19 @@ +import type { EnhanceAppContext } from 'vitepress'; +import DefaultTheme from 'vitepress/theme'; + +// import GreyBlock from '../components/GreyBlock.vue'; +// import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue'; +import { VPButton } from 'vitepress/theme'; +// import { VPImage } from 'vitepress/theme'; + +import './custom.css'; +import './common.css'; + +export default { + extends: DefaultTheme, + enhanceApp(context: EnhanceAppContext) { + // context.app.component('GreyBlock', GreyBlock); + context.app.component('VPButton', VPButton); + // context.app.component('VPImage', VPImage); + } +} diff --git a/pages/index.md b/pages/index.md index b2fb2953..2dd7b869 100644 --- a/pages/index.md +++ b/pages/index.md @@ -2,129 +2,214 @@ title: Welcome layout: page sidebar: false +buttons: + - text: Explore + # href: /explore/ + href: https://docs.hdc.ntnu.no/administer-science/services/overview/ + theme: brand + - text: Evolve + # href: /evolve/ + href: https://docs.hdc.ntnu.no/administer-science/services/overview/ + theme: alt + - text: Scientific Suite + # href: /scientific-suite/ + href: https://docs.hdc.ntnu.no/administer-science/services/overview/ + theme: sponsor +contact: https://docs.hdc.ntnu.no/about/contact/ --- - - -
+
-
-
- +
+
+
+ Freedom to Explore +
+
+ HUNT Cloud provides scientists with the tools and guidance to explore the world of science and research. +
+
+
+ +
+
+
+ Core products +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ Contact us +
+
+ HUNT Cloud provides scientists with the tools and guidance to explore the world of science and research. +
+
+ +
-
- +
+ +
+
+
+ Roles +
+
+
+ Abc +
+
+ Def +
+
+ Ghi +
+
-
- +
+ +
+
+
+ About ISO +
+
+
+ Abc +
+
+ Def +
+
+ Ghi +
+
+
+
+ +
+
+
+ Scientific Tools +
+
+
+ Abc +
+
+ Def +
+
+ Ghi +
+
+
+
+ +
+
+
+ Pillars +
+
+
+ Abc +
+
+ Def +
+
+ Ghi +
+
+
+
+ +
+
+
+ Agreements +
+
+ Prices +
+
+
+ +
+
+
+ About HUNT Cloud +
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim. +
+

+ Ut luctus dui sit amet tellus hendrerit, ac tincidunt nulla porta. Praesent tempus lacus vel nunc dictum vestibulum. Praesent fermentum quam a dolor maximus euismod et eu nulla. Donec consequat ultricies est, at congue ante blandit vitae. Praesent semper et ligula sit amet aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in sem id massa pretium faucibus. +

+
+ +
+ + + diff --git a/pages/public/css/custom.css b/pages/public/css/custom.css deleted file mode 100644 index 4510e85c..00000000 --- a/pages/public/css/custom.css +++ /dev/null @@ -1,13 +0,0 @@ - -/* .VPNavBar { - border-bottom: 1px solid transparent !important; - border-bottom-color: var(--vp-c-divider) !important; -} */ - -/* .VPNavBarTitle .title { - border-bottom: unset !important; -} */ - -/* .VPContent { - top: var(--vp-layout-top-height, 0px) !important; -} */