Skip to content

Commit

Permalink
#311: Added project section
Browse files Browse the repository at this point in the history
  • Loading branch information
petermasking committed Jun 6, 2023
1 parent 5dbe61e commit f62c322
Show file tree
Hide file tree
Showing 7 changed files with 183 additions and 41 deletions.
50 changes: 50 additions & 0 deletions website/src/css/components/buttons.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@

.button
{
border-radius: 2em;
display: inline-block;
font-size: 0.9em;
font-weight: var(--font-weight-light);
padding: 0.5em 1.5em;
text-align: center;
}

.button.primary
{
background-color: var(--swatch-color-red-3);
border: 1px solid var(--swatch-color-red-3);
color: var(--swatch-color-white);
}

.button.primary:hover
{
background-color: var(--swatch-color-red-2);
border: 1px solid var(--swatch-color-red-2);
}

.button.secondary
{
background-color: var(--swatch-color-blue-5);
border: 1px solid var(--swatch-color-blue-5);
color: var(--swatch-color-white);
}

.button.secondary:hover
{
background-color: var(--swatch-color-blue-4);
border: 1px solid var(--swatch-color-blue-4);
}

.button.inactive
{
background-color: transparent;
border: 1px solid var(--swatch-color-gray-3);
color: var(--swatch-color-red-3);
}

.button.inactive:hover
{
background-color: var(--swatch-color-gray-1);
border: 1px solid var(--swatch-color-gray-3);
color: var(--swatch-color-red-3);
}
33 changes: 2 additions & 31 deletions website/src/css/components/cards.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,8 +30,8 @@
border: 1px solid var(--swatch-color-white);
border-top: 0.5em solid var(--swatch-color-red-3);
display: flex;
gap: 2em;
flex-direction: column;
gap: 2em;
padding: 2.0em 1.0em;
text-align: center;
}
Expand Down Expand Up @@ -67,29 +67,14 @@
margin: 0;
}

.card a
.card .button
{
background-color: transparent;
border: 1px solid var(--swatch-color-gray-3);
border-radius: 2em;
color: var(--swatch-color-red-3);
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0.9em;
font-weight: var(--font-weight-light);
padding: 0.5em 0;
text-align: center;
width: 12em;
}

.card a:hover
{
background-color: var(--swatch-color-gray-1);
border: 1px solid var(--swatch-color-gray-3);
color: var(--swatch-color-red-3);
}

.card.inactive
{
background-color: transparent;
Expand All @@ -106,20 +91,6 @@
border-top: 0.5em solid var(--swatch-color-gray-3);
}

.card.inactive a
{
background-color: var(--swatch-color-red-3);
border: 1px solid var(--swatch-color-red-3);
color: var(--swatch-color-white);
}

.card.inactive a:hover
{
background-color: var(--swatch-color-red-2);
border: 1px solid var(--swatch-color-red-2);
color: var(--swatch-color-white);
}

@media (min-width: 1200px)
{
.cards
Expand Down
101 changes: 101 additions & 0 deletions website/src/css/components/grow.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@

.grow
{
align-content: stretch;
align-items: stretch;
background-color: var(--swatch-color-white);
display: flex;
justify-content: space-evenly;
width: 100%;
}

.grow .option
{
align-items: center;
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 1;
gap: 0.7em;
}

.grow .divider
{
flex-grow: 0;
flex-shrink: 0;
}

.grow .option h3
{
flex-grow: 0;
flex-shrink: 0;
font-size: 1.5em;
font-weight: var(--font-weight-medium);
margin: 0;
}

.grow .option .button
{
flex-grow: 0;
flex-shrink: 0;
width: 8em;
}

.grow .contribute
{
border-left: 0.5em solid var(--swatch-color-blue-5);
padding: 2em 4vw 2em 6vw;
}

.grow .sponsor
{
border-right: 0.5em solid var(--swatch-color-red-3);
padding: 2em 6vw 2em 4vw;
}

@media (min-width: 795px)
{
.grow
{
flex-direction: row;
}

.grow .option
{
width: 50%;
}

.grow .divider
{
background-image: url('../../images/project/breaker-grow-vertical.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
width: 120px;
}
}

@media (max-width: 795px)
{
.grow
{
flex-direction: column;
}

.grow .option
{
width: auto;
}

.grow .divider
{
background-image: url('../../images/project/breaker-grow-horizontal.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-left: 0.5em solid var(--swatch-color-blue-5);
border-right: 0.5em solid var(--swatch-color-red-3);
height: 11vw;
width: auto;
}
}
1 change: 1 addition & 0 deletions website/src/images/project/breaker-grow-horizontal.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions website/src/images/project/breaker-grow-vertical.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 26 additions & 10 deletions website/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -255,55 +255,71 @@ <h2>
<img src="images/features/segmentation.svg" alt="Segmentation">
<h3>Segmentation</h3>
<p>Breaks down applications into deployable packages.</p>
<a href="https://docs.jitar.dev/fundamentals/building-blocks.html#segments" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/fundamentals/building-blocks.html#segments" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/orchestration.svg" alt="Orchestration">
<h3>Orchestration</h3>
<p>Coordinates running segmented procedures.</p>
<a href="https://docs.jitar.dev/fundamentals/building-blocks.html#automated-orchestration" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/fundamentals/building-blocks.html#automated-orchestration" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/load-balancing.svg" alt="Load balancing">
<h3>Load balancing</h3>
<p>Balances the execution of procedures automatically.</p>
<a href="https://docs.jitar.dev/deploy/load-balancing.html" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/deploy/load-balancing.html" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/access-protection.svg" alt="Access protection">
<h3>Access protection</h3>
<p>Protects the access to private procedures.</p>
<a href="https://docs.jitar.dev/deploy/segmentation.html#access-protection" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/deploy/segmentation.html#access-protection" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/transportation.svg" alt="Transportation">
<h3>Transportation</h3>
<p>(de)serializes data automatically.</p>
<a href="https://docs.jitar.dev/develop/data-sharing.html#automatic-de-serialization" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/develop/data-sharing.html#automatic-de-serialization" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/multi-version.svg" alt="Multi-version">
<h3>Multi-version</h3>
<p>Supports multiple versions of the same procedure.</p>
<a href="https://docs.jitar.dev/deploy/segmentation.html#versioning" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/deploy/segmentation.html#versioning" target="_blank">Learn more</a>
</div>
<div class="card">
<img src="images/features/integration.svg" alt="Integration">
<h3>Integration</h3>
<p>Integrates in any existing landscape.</p>
<a href="https://docs.jitar.dev/integrate/rpc-api.html" target="_blank">Learn more</a>
<a class="button inactive" href="https://docs.jitar.dev/integrate/rpc-api.html" target="_blank">Learn more</a>
</div>
<div class="card inactive">
<img src="images/features/and-more.svg" alt="And more ...">
<h3>And more ...</h3>
<p>Validation, health checks, middleware, hooks, …</p>
<a href="https://docs.jitar.dev" target="_blank">Read the docs</a>
<a class="button primary" href="https://docs.jitar.dev" target="_blank">Read the docs</a>
</div>
</div>
</section>

<section id="help">

<section id="project">
<h2>
<span class="line"><span class="bold">Open source and free</span> to use for (non) commercial applications.</span>
<span class="line">Jitar is developed by a small team and <span class="bold">grows with help from others.</span>.</span>
</h2>
<div class="grow">
<div class="option contribute">
<h3>Contribute</h3>
<p>Help us develop Jitar. Feel free to create or work on issues, improve the docs or <a href="#">give us a star</a>!</p>
<a class="button secondary" href="#" target="_blank">Learn more</a>
</div>
<div class="divider">&nbsp;</div>
<div class="option sponsor">
<h3>Sponsor</h3>
<p>Buy us time to work on Jitar. More time means more new features, faster bug fixes and more!</p>
<a class="button primary" href="#" target="_blank">Learn more</a>
</div>
</div>
</section>

</main>
Expand Down
2 changes: 2 additions & 0 deletions website/src/site.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
@import url('css/vars.css');
@import url('css/layout.css');

@import url('css/components/buttons.css');
@import url('css/components/cards.css');
@import url('css/components/code.css');
@import url('css/components/explainer.css');
@import url('css/components/grow.css');
@import url('css/components/hero.css');
@import url('css/components/nav.css');
@import url('css/components/roadmap.css');
Expand Down

0 comments on commit f62c322

Please sign in to comment.