Skip to content

Commit

Permalink
add button
Browse files Browse the repository at this point in the history
  • Loading branch information
matuskosut committed Feb 24, 2024
1 parent 976be2c commit be11ef5
Show file tree
Hide file tree
Showing 5 changed files with 203 additions and 39 deletions.
54 changes: 54 additions & 0 deletions pages/.vitepress/components/Button.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<script lang="ts">
export default {
// name: 'ContentHeader',
props: {
title: { type: String, required: true },
href: { type: String, default: "" },
elevation: { type: String, default: "1" },
target: { type: String, default: "" },
size: { type: String, default: "" },
block: { type: Boolean, default: false },
blue: { type: Boolean, default: false },
// height: { type: String, default: "400px" },
},
data() {
return {
// item: null,
}
},
mounted() {
},
computed: {
// TODO
},
}
</script>

<template>
<v-hover>
<template v-slot:default="{ isHovering, props }">
<v-btn
v-bind="props"
rounded="sm"
:block="block"
:color="blue ? '#253a55' : '#fff'"
:size="size"
:target="target"
:elevation="elevation"
:href="href"
:append-icon="isHovering ? 'mdi-chevron-triple-right' : 'mdi-chevron-right'"
>
{{ title }}
<template v-slot:append>
<!-- :class="{'ml-1': isHovering, 'mr-1': !isHovering}" -->
<v-icon class="mt-1" color="#ef8114"></v-icon>
</template>
</v-btn>
</template>
</v-hover>
</template>

<style scoped>
</style>
20 changes: 1 addition & 19 deletions pages/.vitepress/components/FooterBlock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,7 @@ export default {
Reach out to arrange a&nbsp;call.
</v-col>
<v-col cols="12" class="v-col-sm-6 v-col-md-4">
<v-hover>
<template v-slot:default="{ isHovering, props }">
<v-btn
v-bind="props"
rounded="sm"
size="large"
target="_blank"
elevation="2"
:href="contact"
:append-icon="isHovering ? 'mdi-chevron-triple-right' : 'mdi-chevron-right'"
>
Contact us
<template v-slot:append>
<!-- :class="{'ml-1': isHovering, 'mr-1': !isHovering}" -->
<v-icon color="#ef8114"></v-icon>
</template>
</v-btn>
</template>
</v-hover>
<hc-button title="Contact us" :href="contact" target="_blank" size="large" elevation="2" />
</v-col>
</v-row>
<!-- <v-divider class="my-4"></v-divider> -->
Expand Down
5 changes: 5 additions & 0 deletions pages/.vitepress/theme/custom.css
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@
}
}

/* Odd/white block */
.hc-block:nth-child(odd) {
box-shadow: inset 0px 3px 10px rgba(0, 0, 0, 0.2);
}

/* Grey block */
.hc-block:nth-child(even) {
/* background-color: rgb(238, 238, 238); */
Expand Down
2 changes: 2 additions & 0 deletions pages/.vitepress/theme/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { EnhanceAppContext } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import Button from '../components/Button.vue';
import FooterBlock from '../components/FooterBlock.vue';
import ContentHeader from '../components/ContentHeader.vue';
import ProductSlider from '../components/ProductSlider.vue';
Expand All @@ -26,6 +27,7 @@ export default {
enhanceApp(context: EnhanceAppContext) {
context.app.use(vuetify)

context.app.component('hc-button', Button);
context.app.component('FooterBlock', FooterBlock);
context.app.component('ContentHeader', ContentHeader);
context.app.component('ProductSlider', ProductSlider);
Expand Down
161 changes: 141 additions & 20 deletions pages/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,7 @@ contact: https://docs.hdc.ntnu.no/about/contact/
Contact us to get started, to ask how your science may prosper from our services, or just to share the joy and excitement of data-driven science!
</div>
<div class="hc-section">
<v-btn rounded="1" size="x-large" target="_blank" :href="$frontmatter.contact" append-icon="mdi-chevron-right">
Contact us
<template v-slot:append>
<v-icon color="#ef8114"></v-icon>
</template>
</v-btn>
<hc-button title="Contact us" :href="$frontmatter.contact" target="_blank" size="x-large" elevation="2" />
</div>
</div>
</div>
Expand All @@ -120,7 +115,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Scientist</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -129,7 +133,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Scientific leader</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -138,7 +151,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Scientific administrator</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -147,7 +169,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Teacher</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -156,7 +187,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Private enterprise</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -165,7 +205,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Department or clinic</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -191,7 +240,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Quality management</v-card-title>
<v-card-text>
Ut quis tincidunt lacus, vitae maximus consectetur adipiscing elit.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -200,7 +258,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Information security</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -209,7 +276,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Information privacy</v-card-title>
<v-card-text>
Ut quis tincidunt lacus, consectetur adipiscing elit.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button block size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand Down Expand Up @@ -248,7 +324,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Trust</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -257,7 +342,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Technology</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -266,7 +360,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card color="transparent" elevation="0">
<v-card-title>Collaboration</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" blue />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -285,7 +388,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card elevation="0">
<v-card-title>Agreements</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand All @@ -295,7 +407,16 @@ contact: https://docs.hdc.ntnu.no/about/contact/
<v-card elevation="0">
<v-card-title>Prices</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
<v-row dense>
<v-col cols="12">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis tincidunt lacus, vitae maximus enim.
</v-col>
</v-row>
<v-row dense>
<v-col cols="12">
<hc-button size="small" href="place-link" title="Read more" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
Expand Down

0 comments on commit be11ef5

Please sign in to comment.