tecitheme 0.2.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -6,26 +6,28 @@
6
6
 
7
7
  <!-- This example requires Tailwind CSS v2.0+ -->
8
8
  <section class="w-full text-center">
9
- {#if data.toptext}
10
- <p class="text-base font-semibold text-teci-blue-dark uppercase">
11
- {data.toptext}
12
- </p>
13
- {/if}
14
- {#if (data.title || data.logo)}
15
- {#if data.logo}
16
- <div class="grid place-items-center">
17
- <h1 class="sr-only">{data.title}</h1>
18
- <Icon classes={data.classes} icon={data.logo} />
19
- </div>
20
- {:else}
21
- <h1 class="mt-1 text-4xl font-bold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl">
22
- {data.title}
23
- </h1>
9
+ {#if data.toptext}
10
+ <p class="text-base font-semibold uppercase text-teci-blue-dark">
11
+ {data.toptext}
12
+ </p>
13
+ {/if}
14
+ {#if data.title || data.logo}
15
+ {#if data.logo}
16
+ <div class="grid place-items-center">
17
+ <h1 class="sr-only">{data.title}</h1>
18
+ <Icon classes={data.classes} icon={data.logo} />
19
+ </div>
20
+ {:else}
21
+ <h1
22
+ class="mt-1 text-4xl font-bold text-gray-900 sm:text-5xl sm:tracking-tight lg:text-6xl"
23
+ >
24
+ {data.title}
25
+ </h1>
26
+ {/if}
27
+ {/if}
28
+ {#if data.subtitle}
29
+ <p class="mx-auto mt-5 max-w-4xl text-xl text-gray-500">
30
+ {data.subtitle}
31
+ </p>
24
32
  {/if}
25
- {/if}
26
- {#if data.subtitle}
27
- <p class="max-w-4xl mt-5 mx-auto text-xl text-gray-500">
28
- {data.subtitle}
29
- </p>
30
- {/if}
31
33
  </section>
@@ -1,130 +1,138 @@
1
1
  <script>
2
2
  // Allows icons from https://fonts.google.com/icons?selected=Material+Icons by name in the format 'icon-XXXX'.
3
- export let icon;
4
- export let classes;
3
+ export let icon;
4
+ export let classes;
5
5
  </script>
6
6
 
7
- {#if icon == 'pyrosim'}
8
- <span class="not-prose">
9
- <img
10
- class={classes}
11
- src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
12
- alt="PyroSim"
13
- title="PyroSim Icon"
14
- />
15
- </span>
16
- {:else if icon == 'pyrosim-results'}
17
- <span class="not-prose">
18
- <img
19
- class={classes}
20
- src="https://files.thunderheadeng.com/www/images/pyrosim-results_icon.svg"
21
- alt="PyroSim Results"
22
- title="PyroSim Results Icon"
23
- />
24
- </span>
25
- {:else if icon == 'pyrosim-logo'}
26
- <span class="not-prose">
27
- <img
28
- class={classes}
29
- src="https://files.thunderheadeng.com/www/images/pyrosim_logo.svg"
30
- alt="PyroSim Logo"
31
- title="PyroSim Logo"
32
- />
33
- </span>
34
- {:else if icon == 'pathfinder'}
35
- <span class="not-prose">
36
- <img
37
- class={classes}
38
- src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
39
- alt="Pathfinder"
40
- title="Pathfinder Icon"
41
- />
42
- </span>
43
- {:else if icon == 'pathfinder-results'}
44
- <span class="not-prose">
45
- <img
46
- class={classes}
47
- src="https://files.thunderheadeng.com/www/images/pathfinder-results_icon.svg"
48
- alt="Pathfinder Results"
49
- title="Pathfinder Results Icon"
50
- />
51
- </span>
52
- {:else if icon == 'pathfinder-logo'}
53
- <span class="not-prose">
54
- <img
55
- class={classes}
56
- src="https://files.thunderheadeng.com/www/images/pathfinder_logo.svg"
57
- alt="Pathfinder Logo"
58
- title="Pathfinder Logo"
59
- />
60
- </span>
61
- {:else if icon == 'petrasim'}
62
- <span class="not-prose">
63
- <img
64
- class={classes}
65
- src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
66
- alt="PetraSim"
67
- title="PetraSim Icon"
68
- />
69
- </span>
70
- {:else if icon == 'petrasim-logo'}
71
- <span class="not-prose">
72
- <img
73
- class={classes}
74
- src="https://files.thunderheadeng.com/www/images/petrasim_logo.svg"
75
- alt="PetraSim Logo"
76
- title="PetraSim Logo"
77
- />
78
- </span>
79
- {:else if icon == 'teci-logo'}
80
- <span class="not-prose">
81
- <img
82
- class={classes}
83
- src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
84
- alt="Thunderhead Logo"
85
- title="Thunderhead Logo"
86
- />
87
- </span>
88
- {:else if icon == 'teci-icon'}
89
- <span class="not-prose">
90
- <svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
91
- <path
92
- style="fill:#0c3879;fill-rule:evenodd;stroke:none"
93
- d="M88.113 220.536h97.672v97.672H88.113z"
94
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
95
- />
96
- <path
97
- style="fill:#fff;fill-rule:evenodd;stroke:none"
98
- d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
99
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
100
- />
101
- <path
102
- style="fill:#fff;fill-rule:evenodd;stroke:none"
103
- d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
104
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
105
- />
106
- </svg>
107
- </span>
7
+ {#if icon == "pyrosim"}
8
+ <span class="not-prose">
9
+ <img
10
+ class={classes}
11
+ src="https://files.thunderheadeng.com/www/images/pyrosim_icon.svg"
12
+ alt="PyroSim"
13
+ title="PyroSim Icon"
14
+ />
15
+ </span>
16
+ {:else if icon == "pyrosim-results"}
17
+ <span class="not-prose">
18
+ <img
19
+ class={classes}
20
+ src="https://files.thunderheadeng.com/www/images/pyrosim-results_icon.svg"
21
+ alt="PyroSim Results"
22
+ title="PyroSim Results Icon"
23
+ />
24
+ </span>
25
+ {:else if icon == "pyrosim-logo"}
26
+ <span class="not-prose">
27
+ <img
28
+ class={classes}
29
+ src="https://files.thunderheadeng.com/www/images/pyrosim_logo.svg"
30
+ alt="PyroSim Logo"
31
+ title="PyroSim Logo"
32
+ />
33
+ </span>
34
+ {:else if icon == "pathfinder"}
35
+ <span class="not-prose">
36
+ <img
37
+ class={classes}
38
+ src="https://files.thunderheadeng.com/www/images/pathfinder_icon.svg"
39
+ alt="Pathfinder"
40
+ title="Pathfinder Icon"
41
+ />
42
+ </span>
43
+ {:else if icon == "pathfinder-results"}
44
+ <span class="not-prose">
45
+ <img
46
+ class={classes}
47
+ src="https://files.thunderheadeng.com/www/images/pathfinder-results_icon.svg"
48
+ alt="Pathfinder Results"
49
+ title="Pathfinder Results Icon"
50
+ />
51
+ </span>
52
+ {:else if icon == "pathfinder-logo"}
53
+ <span class="not-prose">
54
+ <img
55
+ class={classes}
56
+ src="https://files.thunderheadeng.com/www/images/pathfinder_logo.svg"
57
+ alt="Pathfinder Logo"
58
+ title="Pathfinder Logo"
59
+ />
60
+ </span>
61
+ {:else if icon == "petrasim"}
62
+ <span class="not-prose">
63
+ <img
64
+ class={classes}
65
+ src="https://files.thunderheadeng.com/www/images/petrasim_icon.svg"
66
+ alt="PetraSim"
67
+ title="PetraSim Icon"
68
+ />
69
+ </span>
70
+ {:else if icon == "petrasim-logo"}
71
+ <span class="not-prose">
72
+ <img
73
+ class={classes}
74
+ src="https://files.thunderheadeng.com/www/images/petrasim_logo.svg"
75
+ alt="PetraSim Logo"
76
+ title="PetraSim Logo"
77
+ />
78
+ </span>
79
+ {:else if icon == "teci-logo"}
80
+ <span class="not-prose">
81
+ <img
82
+ class={classes}
83
+ src="https://files.thunderheadeng.com/www/images/teci_logo.svg"
84
+ alt="Thunderhead Logo"
85
+ title="Thunderhead Logo"
86
+ />
87
+ </span>
88
+ {:else if icon == "teci-icon"}
89
+ <span class="not-prose">
90
+ <svg
91
+ class={classes}
92
+ xmlns="http://www.w3.org/2000/svg"
93
+ viewBox="0 0 250 250"
94
+ >
95
+ <path
96
+ style="fill:#0c3879;fill-rule:evenodd;stroke:none"
97
+ d="M88.113 220.536h97.672v97.672H88.113z"
98
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
99
+ />
100
+ <path
101
+ style="fill:#fff;fill-rule:evenodd;stroke:none"
102
+ d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
103
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
104
+ />
105
+ <path
106
+ style="fill:#fff;fill-rule:evenodd;stroke:none"
107
+ d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
108
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
109
+ />
110
+ </svg>
111
+ </span>
108
112
  {:else if icon?.startsWith("icon-")}
109
- <span class="material-icons-outlined {classes}">{icon?.slice(5)}</span>
113
+ <span class="material-icons-outlined {classes}">{icon?.slice(5)}</span>
110
114
  {:else}
111
- <span class="not-prose">
112
- <svg class={classes} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250">
113
- <path
114
- style="fill:#0c3879;fill-rule:evenodd;stroke:none"
115
- d="M88.113 220.536h97.672v97.672H88.113z"
116
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
117
- />
118
- <path
119
- style="fill:#fff;fill-rule:evenodd;stroke:none"
120
- d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
121
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
122
- />
123
- <path
124
- style="fill:#fff;fill-rule:evenodd;stroke:none"
125
- d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
126
- transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
127
- />
128
- </svg>
129
- </span>
130
- {/if}
115
+ <span class="not-prose">
116
+ <svg
117
+ class={classes}
118
+ xmlns="http://www.w3.org/2000/svg"
119
+ viewBox="0 0 250 250"
120
+ >
121
+ <path
122
+ style="fill:#0c3879;fill-rule:evenodd;stroke:none"
123
+ d="M88.113 220.536h97.672v97.672H88.113z"
124
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
125
+ />
126
+ <path
127
+ style="fill:#fff;fill-rule:evenodd;stroke:none"
128
+ d="M145.864 260.176h22.042c2.792 0 4.883.835 6.559 2.651 1.532 1.673 2.232 3.764 2.232 6.278 0 2.37-.7 4.464-2.232 6.277-1.676 1.675-3.767 2.651-6.559 2.651h-22.042v-17.857m0 23.159h22.042c2.792 0 4.883.838 6.559 2.65 1.532 1.674 2.232 3.768 2.232 6.278 0 2.373-.7 4.464-2.232 6.278-1.676 1.675-3.767 2.65-6.559 2.65h-22.042v-17.856"
129
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
130
+ />
131
+ <path
132
+ style="fill:#fff;fill-rule:evenodd;stroke:none"
133
+ d="M132.471 301.192c-5.861 0-8.79-3.07-8.79-8.929l-.138-37.389-20.648-.14c-7.116-1.254-10.185-9.626-5.165-15.206 1.535-1.535 3.63-2.373 6.14-2.651h26.926l1.675.14h35.435c2.792 0 4.883.836 6.559 2.649 1.532 1.675 2.232 3.767 2.232 6.28 0 2.37-.7 4.464-2.232 6.277-1.676 1.673-3.767 2.651-6.559 2.651H141.26V301.192h-8.788"
134
+ transform="matrix(2.5596 0 0 2.5596 -225.533 -564.483)"
135
+ />
136
+ </svg>
137
+ </span>
138
+ {/if}
@@ -1,19 +1,24 @@
1
1
  <script>
2
2
  // Based on: https://svelte.dev/repl/49ff6c089825418888cf804d9dde77bc?version=3.46.4
3
- import katex from "katex";
4
- export let math;
5
- export let displayMode = false;
3
+ import katex from "katex";
4
+ export let math;
5
+ export let displayMode = false;
6
6
 
7
- const options = {
8
- displayMode: displayMode,
9
- throwOnError: false
10
- }
7
+ const options = {
8
+ displayMode: displayMode,
9
+ throwOnError: false,
10
+ };
11
11
 
12
- $: katexString = katex.renderToString(math, options);
12
+ $: katexString = katex.renderToString(math, options);
13
13
  </script>
14
14
 
15
15
  <svelte:head>
16
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
16
+ <link
17
+ rel="stylesheet"
18
+ href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
19
+ integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
20
+ crossorigin="anonymous"
21
+ />
17
22
  </svelte:head>
18
23
 
19
- {@html katexString}
24
+ {@html katexString}
@@ -1,62 +1,86 @@
1
1
  <script>
2
2
  import Video from './Video.svelte'
3
3
 
4
- import { dev } from '$app/environment';
4
+ import { dev } from "$app/environment";
5
5
  export let data;
6
6
 
7
7
  let figureImage;
8
8
  let figureLink;
9
9
 
10
10
  if (dev && data.image) {
11
- figureImage = data.image
12
- figureLink = data.image
11
+ figureImage = data.image;
12
+ figureLink = data.image;
13
13
  } else if (data.image) {
14
- figureImage = data.image.startsWith('http') ? data.image : 'https://thunderheadeng-www.imgix.net'+data.image+'?w=576&ar=16:9&fit=crop&auto=compress&auto=format'
15
- figureLink = data.image.startsWith('http') ? data.image : 'https://thunderheadeng-www.imgix.net'+data.image
14
+ figureImage = data.image.startsWith("http")
15
+ ? data.image
16
+ : "https://thunderheadeng-www.imgix.net" +
17
+ data.image +
18
+ "?w=576&ar=16:9&fit=crop&auto=compress&auto=format";
19
+ figureLink = data.image.startsWith("http")
20
+ ? data.image
21
+ : "https://thunderheadeng-www.imgix.net" + data.image;
16
22
  }
17
23
 
18
24
  if (dev && data.image) {
19
- figureImage = data.image
20
- figureLink = data.link ? data.link : data.image
25
+ figureImage = data.image;
26
+ figureLink = data.link ? data.link : data.image;
21
27
  } else if (data.image) {
22
- if (data.image.startsWith('http')) {
28
+ if (data.image.startsWith("http")) {
23
29
  figureImage = data.image;
24
- figureLink = data.link ? data.link : data.image
30
+ figureLink = data.link ? data.link : data.image;
25
31
  } else if (data.image.includes("gif")) {
26
- figureImage = 'https://thunderheadeng-www.imgix.net'+data.image;
27
- figureLink = data.link ? data.link : 'https://thunderheadeng-www.imgix.net'+data.image
32
+ figureImage = "https://thunderheadeng-www.imgix.net" + data.image;
33
+ figureLink = data.link
34
+ ? data.link
35
+ : "https://thunderheadeng-www.imgix.net" + data.image;
28
36
  } else {
29
- figureImage = 'https://thunderheadeng-www.imgix.net'+data.image+'?w=576&ar=16:9&fit=crop&auto=compress&auto=format';
30
- figureLink = data.link ? data.link : 'https://thunderheadeng-www.imgix.net'+data.image
37
+ figureImage =
38
+ "https://thunderheadeng-www.imgix.net" +
39
+ data.image +
40
+ "?w=576&ar=16:9&fit=crop&auto=compress&auto=format";
41
+ figureLink = data.link
42
+ ? data.link
43
+ : "https://thunderheadeng-www.imgix.net" + data.image;
31
44
  }
32
45
  }
33
46
  </script>
34
47
 
35
- <section class="w-full mx-auto flex flex-col items-center md:flex-row md:items-start justify-center">
48
+ <section
49
+ class="mx-auto flex w-full flex-col items-center justify-center md:flex-row md:items-start"
50
+ >
36
51
  {#if data.v}
37
- <div class="block w-full max-w-xl mb-4 md:mb-0">
38
- <Video bind:data />
39
- </div>
52
+ <div class="mb-4 block w-full max-w-xl md:mb-0">
53
+ <Video bind:data />
54
+ </div>
40
55
  {:else if data.image}
41
- <div class="block w-full max-w-xl mb-4 md:mb-0">
42
- <figure>
43
- <a href={figureLink}>
44
- <img class="w-full aspect-video object-cover border bg-black border-gray-200 shadow-md {data.imageClass ? data.imageClass : ''}"
45
- src={figureImage} alt={data.name}
46
- />
47
- </a>
48
- </figure>
49
- </div>
56
+ <div class="mb-4 block w-full max-w-xl md:mb-0">
57
+ <figure>
58
+ <a href={figureLink}>
59
+ <img
60
+ class="aspect-video w-full border border-gray-200 bg-black object-cover shadow-md {data.imageClass
61
+ ? data.imageClass
62
+ : ''}"
63
+ src={figureImage}
64
+ alt={data.name}
65
+ />
66
+ </a>
67
+ </figure>
68
+ </div>
50
69
  {/if}
51
- <div class="w-full max-w-xl flex flex-col justify-center {data.position === 'right' ? 'md:order-last md:ml-8' : 'md:order-first md:mr-8'}">
70
+ <div
71
+ class="flex w-full max-w-xl flex-col justify-center {data.position ===
72
+ 'right'
73
+ ? 'md:order-last md:ml-8'
74
+ : 'md:order-first md:mr-8'}"
75
+ >
52
76
  <div class="w-full max-w-3xl">
53
- <h2 class="text-lg font-bold pb-4">{data.name}</h2>
77
+ <h2 class="pb-4 text-lg font-bold">{data.name}</h2>
54
78
  <span class="prose">{@html data.text}</span>
55
79
  </div>
56
80
  {#if data.ctaText}
57
- <div class="text-right md:text-left mt-4">
58
- <a class="inline-block btn" href={data.ctaURL}>{data.ctaText}</a>
59
- </div>
81
+ <div class="mt-4 text-right md:text-left">
82
+ <a class="btn inline-block" href={data.ctaURL}>{data.ctaText}</a>
83
+ </div>
60
84
  {/if}
61
85
  </div>
62
- </section>
86
+ </section>
@@ -1,15 +1,15 @@
1
1
  <script>
2
- export let title
3
- export let description
4
- export let image
5
- export let url
2
+ export let title;
3
+ export let description;
4
+ export let image;
5
+ export let url;
6
6
  </script>
7
7
 
8
- <meta property="og:type" content="website">
9
- <meta property="og:url" content={url}>
10
- <meta name="og:title" content={title} >
11
- <meta name="og:description" content={description} >
12
- <meta name="og:image" content={image} >
13
- <meta name="twitter:card" content="summary_large_image">
14
- <meta name="twitter:site" content="@thunderheadeng">
15
- <meta name="twitter:creator" content="@thunderheadeng">
8
+ <meta property="og:type" content="website" />
9
+ <meta property="og:url" content={url} />
10
+ <meta name="og:title" content={title} />
11
+ <meta name="og:description" content={description} />
12
+ <meta name="og:image" content={image} />
13
+ <meta name="twitter:card" content="summary_large_image" />
14
+ <meta name="twitter:site" content="@thunderheadeng" />
15
+ <meta name="twitter:creator" content="@thunderheadeng" />
@@ -9,37 +9,56 @@
9
9
  shown = false;
10
10
  }
11
11
  </script>
12
-
12
+
13
13
  <svelte:window
14
- on:keydown={e => {
14
+ on:keydown={(e) => {
15
15
  if (e.keyCode == 27) {
16
16
  hide();
17
17
  }
18
- }} />
18
+ }}
19
+ />
19
20
 
20
21
  <div class="prose max-w-none">
21
22
  {#if data.title}
22
- <h2>{data.title}</h2>
23
+ <h2>{data.title}</h2>
23
24
  {/if}
24
25
  {#if data.text}
25
- <p>{data.text}</p>
26
+ <p>{data.text}</p>
26
27
  {/if}
27
28
  <button on:click={show} class="btn">{data.buttonText}</button>
28
29
  </div>
29
30
 
30
31
  {#if shown}
31
- <div class="z-50 fixed inset-0 bg-gray-900 bg-opacity-50 overflow-y-auto h-full w-full !mt-0">
32
- <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg bg-white">
33
- <button type="button" on:click={hide} class="absolute top-0 right-0 bg-white p-1 mr-2 mt-2 inline-flex items-center justify-center text-teci-blue-light hover:text-white hover:bg-teci-blue-dark focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark">
34
- <span class="sr-only">Close menu</span>
35
- <!-- Heroicon name: outline/x -->
36
- <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
37
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
38
- </svg>
32
+ <div
33
+ class="fixed inset-0 z-50 !mt-0 h-full w-full overflow-y-auto bg-gray-900 bg-opacity-50"
34
+ >
35
+ <div class="relative top-20 mx-auto w-96 border bg-white p-5 shadow-lg">
36
+ <button
37
+ type="button"
38
+ on:click={hide}
39
+ class="absolute top-0 right-0 mr-2 mt-2 inline-flex items-center justify-center bg-white p-1 text-teci-blue-light hover:bg-teci-blue-dark hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teci-blue-dark"
40
+ >
41
+ <span class="sr-only">Close menu</span>
42
+ <!-- Heroicon name: outline/x -->
43
+ <svg
44
+ class="h-6 w-6"
45
+ xmlns="http://www.w3.org/2000/svg"
46
+ fill="none"
47
+ viewBox="0 0 24 24"
48
+ stroke="currentColor"
49
+ aria-hidden="true"
50
+ >
51
+ <path
52
+ stroke-linecap="round"
53
+ stroke-linejoin="round"
54
+ stroke-width="2"
55
+ d="M6 18L18 6M6 6l12 12"
56
+ />
57
+ </svg>
39
58
  </button>
40
59
  <div class="mt-3 text-center">
41
60
  {@html data.modalContent}
42
61
  </div>
43
62
  </div>
44
63
  </div>
45
- {/if}
64
+ {/if}