Copy over website from tag-security

Signed-off-by: Chris Abraham <cjyabraham@gmail.com>

.gitmodules

@@ -0,0 +1,6 @@
+[submodule "website/themes/docsy/assets/vendor/Font-Awesome"]
+	path = website/themes/docsy/assets/vendor/Font-Awesome
+	url = https://github.com/FortAwesome/Font-Awesome.git
+[submodule "website/themes/docsy/assets/vendor/bootstrap"]
+	path = website/themes/docsy/assets/vendor/bootstrap
+	url = https://github.com/twbs/bootstrap.git

website/.gitignore

@@ -0,0 +1,6 @@
+node_modules
+resources
+public/
+go.local.mod
+go.sum
+.DS_Store

website/Dockerfile

@@ -0,0 +1,4 @@
+FROM klakegg/hugo:ext-alpine
+
+RUN apk add git && \
+  git config --global --add safe.directory /src

website/README.md

@@ -0,0 +1,26 @@
+# TAG Security Website
+
+This directory contains a [Hugo](https://gohugo.io) web site published via [Netlify](https://www.netlify.com/) to <https://tag-security.cncf.io/>.
+
+When the `main` branch of this repo is updated a fresh build and deploy of the website is executed. Recent Netlify builds and deployments are listed at <https://app.netlify.com/sites/tag-security>.
+
+Add content by adding Markdown files to directories in [./content](./content).
+
+Update layouts for each content type in [./layouts](./layouts/).
+
+Configuration is set in [config.toml](./config.toml).
+
+## Setting up a local dev instance
+
+To set up a local dev environment make sure you have [Hugo Extended](https://gohugo.io/installation/linux/#editions) and [npm](https://www.npmjs.com/) installed, then run the following:
+
+```
+git clone git@github.com:cncf/tag-security.git
+cd tag-security
+git submodule update --init --recursive
+cd website
+npm install
+```
+
+You can then run the site using `hugo server`.
+

website/assets/scss/_about.scss

@@ -0,0 +1,58 @@
+.td-box--primary .td-arrow-down::before {
+	border: none;
+}
+
+.section-group {
+	@media (max-width: 767px) {
+	}
+	@media (min-width: 768px) {
+		margin-right: 25px;
+		section {
+			padding-left: 25px;
+			padding-right: 25px;
+		}
+	}
+}
+
+.td-box--primary p > a,
+.td-box--secondary p > a,
+.td-box--light p > a {
+	color: $link-color;
+}
+
+.td-box--secondary {
+	background-color: #ffb24c;
+	color: #464646;
+}
+
+.td-box--primary,
+.td-box--white {
+	background-color: #fdfdfd;
+	color: $body-color;
+
+	span.lead p {
+		font-weight: 300;
+	}
+}
+
+@media (min-width: 768px) {
+	.td-box--primary h2[id]:before {
+		margin-top: 0;
+		height: 0;
+	}
+}
+
+.td-content > table {
+	margin-bottom: 2rem;
+	th {
+		text-transform: uppercase;
+		border-top: none;
+	}
+	tbody tr:nth-of-type(odd) {
+		background-color: unset;
+	}
+	td {
+		padding: 1rem;
+		border-bottom: 1px solid #dee2e6;
+	}
+}

website/assets/scss/_archive.scss

@@ -0,0 +1,16 @@
+.article-teaser {
+	h3 {
+		margin-top: 34px;
+		a {
+			color: $black;
+		}
+	}
+}
+
+.articles-of-tag hr {
+	background: linear-gradient(180deg, #c4c4c4, hsla(0, 0%, 77%, 0));
+	border-bottom: 0;
+	height: 10px;
+	opacity: 0.15;
+	width: 100%;
+}

website/assets/scss/_buttons.scss

@@ -0,0 +1,37 @@
+// buttons.
+.button-reset {
+	background: none;
+	border: none;
+	box-sizing: border-box;
+	cursor: pointer;
+	display: block;
+	margin-left: 0;
+	margin-right: 0;
+	padding: 0;
+	width: unset;
+}
+
+.cncf-button {
+	color: $white;
+	background-color: $black;
+	border: 0;
+	border-radius: 3px;
+	box-shadow: none;
+	box-sizing: border-box;
+	cursor: pointer;
+	font-size: 16px;
+	font-weight: 700;
+	letter-spacing: 0.02em;
+	line-height: 105%;
+	margin: 0;
+	max-width: 100%;
+	padding: 12px 40px;
+	text-align: center;
+	text-decoration: none;
+	text-transform: uppercase;
+	transition: all 0.25s ease-out;
+	word-break: break-word;
+	&:hover {
+		background-color: $gray-700;
+	}
+}

website/assets/scss/_cookie-banner.scss

@@ -0,0 +1,203 @@
+$font-primary: $font-family-base;
+$cookie-banner-text: $body-color;
+$cookie-banner-bg: #bff3ff;
+
+.osano-cm-info {
+	font-family: $font-primary;
+	box-shadow: none;
+}
+
+.osano-cm-window__dialog {
+	border-radius: 5px;
+	color: $cookie-banner-text;
+	background: $cookie-banner-bg;
+	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));
+	font-weight: 700;
+	line-height: 1.5;
+	letter-spacing: 0.02em;
+	font-size: 13px;
+	font-family: $font-primary;
+	padding-top: 35px;
+	padding-left: 25px;
+	padding-right: 25px;
+	padding-bottom: 25px;
+	@media (min-width: 600px) {
+		font-size: 16px;
+	}
+}
+
+.osano-cm-dialog--type_box {
+	max-width: 27.5em;
+	@media (min-width: 1400px) {
+		max-width: 480px;
+	}
+}
+
+.osano-cm-buttons {
+	gap: 8px;
+}
+
+.osano-cm-button {
+	border: none;
+	border-radius: 5px;
+	text-transform: uppercase;
+	font-size: 14px;
+	line-height: 1;
+	padding: 9px 17px;
+	&:focus-visible {
+		outline: -webkit-focus-ring-color auto 1px;
+	}
+}
+
+.osano-cm-header {
+	font-weight: 700;
+	font-size: 20px;
+	letter-spacing: 0.02em;
+	padding-top: 1.5em;
+}
+
+.osano-cm-description {
+	font-weight: 400;
+	font-size: 11px;
+	line-height: 170%;
+	letter-spacing: 0.02em;
+	@media (min-width: 600px) {
+		font-size: 10px;
+	}
+	p {
+		margin-bottom: 0;
+	}
+}
+
+.osano-cm-dialog__list {
+	margin: 0.6em 0px 0.8em;
+}
+
+.osano-cm-label {
+	font-weight: 700;
+	font-size: 15px;
+	line-height: 150%;
+	letter-spacing: 0.02em;
+}
+
+div.osano-cm-disclosure__toggle {
+	font-weight: 700;
+	font-size: 10px;
+	line-height: 150%;
+	letter-spacing: 0.02em;
+	text-decoration: underline;
+	margin-top: 0;
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.osano-cm-list-item__disclosure {
+	padding-bottom: 2em;
+}
+
+.osano-cm-toggle {
+	margin-top: 1em;
+}
+
+.osano-cm-link {
+	text-decoration: underline;
+	font-size: 13px;
+	&:focus-visible {
+		outline-offset: 1px;
+		outline: -webkit-focus-ring-color auto 1px;
+	}
+	&:hover {
+		text-decoration: none;
+	}
+}
+
+.osano-cm-powered-by__link {
+	display: none;
+}
+
+.osano-cm-content__message {
+	margin-bottom: 0.2em;
+	padding-bottom: 1em;
+	margin-top: 10px;
+	@media (min-width: 1400px) {
+		max-width: 90%;
+	}
+}
+
+.osano-cm-view__button {
+	font-size: 1em;
+}
+
+.osano-cm-dialog__close,
+.osano-cm-info-dialog-header__close {
+	background-color: #000000;
+	border-color: #000000;
+	stroke: #fff;
+	&:hover,
+	&:focus,
+	&:focus:hover {
+		background-color: #000000;
+		border-color: #000000;
+		stroke: #fff;
+		transform: rotate(90deg);
+	}
+}
+
+.osano-cm-close,
+.osano-cm-close:focus,
+.osano-cm-close:hover {
+	stroke-width: 3px;
+	border-width: 4px;
+}
+
+// FYI 14px is the smallest it can go for the maths of the circle to work.
+.osano-cm-close {
+	min-height: unset;
+	min-width: unset;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-content: center;
+	align-items: center;
+	justify-content: center;
+	margin: 15px 25px;
+	@media (min-width: 600px) {
+		margin: 25px;
+	}
+	svg {
+		height: 14px;
+		width: 14px;
+		vertical-align: baseline;
+	}
+}
+
+.osano-cm-widget {
+	&__outline {
+		fill: #fff;
+		stroke: #000;
+	}
+	&__dot {
+		fill: #d222d6;
+	}
+}
+
+.osano-cm-accept-all {
+	&:before {
+		content: '';
+		display: inline-block;
+		vertical-align: middle;
+		height: 20px;
+		width: 20px;
+		margin-right: 8px;
+		background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23fff'/%3E%3Cpath d='m5.709 10.443 2.565 2.565 6.016-6.016' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+	}
+}
+
+[dir='ltr'] .osano-cm-dialog__list .osano-cm-label {
+	margin-left: 0.8em;
+}
+
+.osano-cm-toggle__switch {
+	border-width: 3px;
+}