Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add banner to community meetings and move tetragon slides #2801

Merged
merged 1 commit into from
Aug 16, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/assets/scss/_styles_project.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "button";
@import "community-banner";
@import "home";
@import "header";
@import "footer";
Expand Down
47 changes: 47 additions & 0 deletions docs/assets/scss/community-banner.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
.td-community-banner {
font-size: 14px;
text-align: center;

a {
display: flex;
align-items: center;
justify-content: center;
padding: 9px 14px;
color: #253737;
background-color: #E2F7F7;
border-bottom: 1px solid #42D7D74F;


&:hover,
&:focus-visible {
background-color: #B0EDED80;
}

@media screen and (max-width: 767px) {}
}

svg {
flex-shrink: 0;
}
}

.td-community-banner__text {
max-width: calc(100% - 18px);
text-wrap: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

.td-community-banner__main-text {
margin-left: 14px;
margin-right: 4px;
padding-left: 14px;
font-weight: 700;
letter-spacing: -0.28px;
border-left: 1px solid #253737A6;

a:hover &,
a:focus-visible & {
color: #5C6D70;
}
}
7 changes: 7 additions & 0 deletions docs/assets/scss/header.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@
.td-home header {
position: sticky;
top: 0;
z-index: 32;
}

.td-navbar {
height: 64px;
padding: 20px 0;
background-color: #fff;
border-bottom: 1px solid #E5E7E7;

.td-home & {
position: static;
font-family: "Manrope", sans-serif;
background-color: #f7fdfd;
border-bottom-color: #f7fdfd;
Expand Down
4 changes: 0 additions & 4 deletions docs/assets/scss/home.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@
@import "home/presentation";

.home {
// dirty hack that should be changed if we change the size of the navbar
margin-top: 64px;

margin-left: auto;
margin-right: auto;
max-width: 1216px;
Expand Down Expand Up @@ -63,4 +60,3 @@
list-style: none;
}
}

94 changes: 47 additions & 47 deletions docs/content/en/_index.html
Original file line number Diff line number Diff line change
Expand Up @@ -241,53 +241,6 @@ <h3 class="cards__title">Code of Conduct</h3>
</ul>
</div>

<div class="presentation">
<ul class="presentation__list">
<li class="presentation__item presentation__banner">
<div class="presentation__banner-inner">
<h2 class="presentation__title">What is a Tracing Policy?</h2>
<p class="presentation__banner-description">Tracing Policies define what situations Tetragon
should react to...</p>
<ul class="presentation__banner-list">
<li class="presentation__banner-item">
<span class="presentation__banner-number">1</span>
<span class="presentation__banner-decor"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">2</span>
<span class="presentation__banner-decor presentation__banner-decor--wide"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">3</span>
<span class="presentation__banner-decor"></span>
</li>
</ul>
<img class="presentation__banner-img" src="/images/home/jedi-bee-teacher.png" width="242" height="186"
alt="Jedi-Bee techer" />
</div>
</li>

<li class="presentation__item">
<h2 class="title">Showcase Tetragon: Slides for Speakers</h2>
<p class="presentation__description">We've created a slide deck for talks, presentations, and demos on
Tetragon. Feel free to use it as-is or customize it to fit your specific needs.</p>
<a class="button button--text"
href="https://docs.google.com/presentation/d/1jNJ0pPkHjvv4QN_K01FGbNLaWD5gqgbwxCNAehn4PBQ/edit#slide=id.p"
target="_blank">
See presentation
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M1 5.12939C0.585787 5.12939 0.25 5.46518 0.25 5.87939C0.25 6.29361 0.585787 6.62939 1 6.62939V5.12939ZM12 5.12939L1 5.12939V6.62939L12 6.62939V5.12939Z"
fill="currentColor" />
<path d="M7.11108 1L12 5.7735L7.11108 10.7444" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</li>
</ul>
</div>

<div class="tabs">
<h2 class="title tabs__title">How to Install Tetragon?</h2>
<ul class="tabs__list">
Expand Down Expand Up @@ -675,6 +628,53 @@ <h3 class="social__item-title">Twitter</h3>
</ul>
</div>

<div class="presentation">
<ul class="presentation__list">
<li class="presentation__item presentation__banner">
<div class="presentation__banner-inner">
<h2 class="presentation__title">What is a Tracing Policy?</h2>
<p class="presentation__banner-description">Tracing Policies define what situations Tetragon
should react to...</p>
<ul class="presentation__banner-list">
<li class="presentation__banner-item">
<span class="presentation__banner-number">1</span>
<span class="presentation__banner-decor"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">2</span>
<span class="presentation__banner-decor presentation__banner-decor--wide"></span>
</li>
<li class="presentation__banner-item">
<span class="presentation__banner-number">3</span>
<span class="presentation__banner-decor"></span>
</li>
</ul>
<img class="presentation__banner-img" src="/images/home/jedi-bee-teacher.png" width="242"
height="186" alt="Jedi-Bee techer" />
</div>
</li>

<li class="presentation__item">
<h2 class="title">Showcase Tetragon: Slides for Speakers</h2>
<p class="presentation__description">We've created a slide deck for talks, presentations, and demos on
Tetragon. Feel free to use it as-is or customize it to fit your specific needs.</p>
<a class="button button--text"
href="https://docs.google.com/presentation/d/1jNJ0pPkHjvv4QN_K01FGbNLaWD5gqgbwxCNAehn4PBQ/edit#slide=id.p"
target="_blank">
See presentation
<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"
aria-hidden="true">
<path
d="M1 5.12939C0.585787 5.12939 0.25 5.46518 0.25 5.87939C0.25 6.29361 0.585787 6.62939 1 6.62939V5.12939ZM12 5.12939L1 5.12939V6.62939L12 6.62939V5.12939Z"
fill="currentColor" />
<path d="M7.11108 1L12 5.7735L7.11108 10.7444" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</li>
</ul>
</div>

<div class="contact">
<div class="container">
<div class="contact__column">
Expand Down
19 changes: 19 additions & 0 deletions docs/layouts/_default/baseof.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!doctype html>
<html itemscope itemtype="http://schema.org/WebPage" lang="{{ .Site.Language.Lang }}" class="no-js">
<head>
{{ partial "head.html" . }}
</head>
<body class="td-{{ .Kind }}{{ with .Page.Params.body_class }} {{ . }}{{ end }}">
{{ partial "community-banner.html" . }}
<header>
{{ partial "navbar.html" . }}
</header>
<div class="container-fluid td-default td-outer">
<main role="main" class="td-main">
{{ block "main" . }}{{ end }}
</main>
{{ partial "footer.html" . }}
</div>
{{ partialCached "scripts.html" . }}
</body>
</html>
18 changes: 18 additions & 0 deletions docs/layouts/partials/community-banner.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<div class="td-community-banner">
<a class="td-community-banner__link" href="https://isogo.to/tetragon-meeting-notes" target="_blank"
rel="noopener noreferrer">
<span class="td-community-banner__text">
Join us at the monthly Tetragon Community Meeting!
<span class="td-community-banner__main-text">
Learn more
</span>
</span>
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 15 14" fill="none">
<path
d="M2.5 6.62891C2.08579 6.62891 1.75 6.96469 1.75 7.37891C1.75 7.79312 2.08579 8.12891 2.5 8.12891V6.62891ZM13.5 6.62891L2.5 6.62891V8.12891L13.5 8.12891V6.62891Z"
fill="currentColor" />
<path d="M8.61133 2.5L13.5002 7.2735L8.61133 12.2444" stroke="currentColor" stroke-width="1.5"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</a>
</div>