Skip to content

Commit

Permalink
Add SupportBox
Browse files Browse the repository at this point in the history
  • Loading branch information
@smnandre
smnandre committed Aug 22, 2024
1 parent 161c7cb commit fbe8cc2
Show file tree
Hide file tree
Showing 3 changed files with 132 additions and 41 deletions.
1 change: 1 addition & 0 deletions ux.symfony.com/assets/styles/app.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@
@import "components/PackageHeader";
@import "components/PackageBox";
@import "components/Cookbook";
@import "components/SupportBox";
@import "components/Tabs";
@import "components/Tag";
@import "components/Terminal";
Expand Down
78 changes: 78 additions & 0 deletions ux.symfony.com/assets/styles/components/_SupportBox.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
.SupportBox {
--space-large: 1.5rem;
--bg-color: var(--bs-body-bg);

border: 1px solid var(--bs-secondary-bg);
border-radius: var(--border-radius);
display: flex;
flex-direction: column;
gap: var(--space-large);
padding: var(--space-large);
position: relative;
place-self: stretch;
background: var(--bg-color);
transition: transform 750ms ease-in-out;

&:hover {
transition: transform 200ms ease-in-out;
transform: translateY(-.25rem);
}
}

@media screen and (max-width: 800px) {
.SupportBox {
--space-large: 1rem;
}
}

.SupportBox_logo {
--logo-size: 3rem;
width: var(--logo-size);
height: var(--logo-size);
border-radius: 14%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;

svg {
width: 100%;
height: auto;
}

@media screen and (max-width: 740px) {
--logo-size: 4rem;
}
}

.SupportBox_content {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 auto;
gap: 1rem;
}

.SupportBox_title {
font-weight: 500;
font-size: 2rem;
color: var(--bs-body-color);
text-decoration: none;
margin: 0;
}

.SupportBox_link {
&:after {
content: '';
position: absolute;
inset: 0 0;
z-index: 40;
}
}

.SupportBox_description {
line-height: 1.5;
margin-bottom: 0;
}


94 changes: 53 additions & 41 deletions ux.symfony.com/templates/support.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,64 +18,76 @@

<section style="--padding:0;">
<div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1000px;">
<div style="display: grid; gap: 3rem; grid-template-columns: repeat(2, minmax(300px, 1fr))">
<div class="PackageBox" style="--gradient: #22e4e4;--color:transparent;flex-direction: column;">
<div class="PackageBox_logo" style="--logo-size: 4rem;">
<twig:Icon name="github" style="width: var(--logo-size);height:auto;" />
<div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:Icon name="github" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://github.com/symfony/ux" class="SupportBox_link">Github Discussions</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
</div>
<h2><a href="#" class="PackageBox_link">Github Discussions</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc nec</p>
</div>
<div class="PackageBox" style="--gradient: #22e4e4;--color:transparent;flex-direction: column;">
<div class="PackageBox_logo" style="--logo-size: 4rem;">
<twig:ux:icon name="logos:slack-icon" style="width: var(--logo-size);height:auto;" />

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="logos:slack-icon" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://symfony.com/slack" class="SupportBox_link">Symfony Slack</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
</div>
<h2><a href="https://symfony.com/slack">Symfony Slack #UX</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
</div>
</div>
</div>

<div class="container-fluid container-xxl px-4 px-md-5 mt-6">
<div style="display: grid; gap: 3rem; grid-template-columns: repeat(3, minmax(300px, 1fr))">
<div class="PackageBox" style="--gradient: #22e4e4;--color:transparent;flex-direction: column;">
<div class="PackageBox_logo" style="--logo-size: 3rem;">
<twig:ux:icon
name="logos:symfony"
style="height: var(--logo-size);width:auto;"
/>
<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="x-twitter" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://x.com/search?q=%23symfonyux&src=typed_query" class="SupportBox_link"><s>Twitter</s> X</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#SymfonyUX</code> Nullam auctor, nunc nec</p>
</div>
<h2><a href="#" class="PackageBox_link">Symfony Docs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nunc nec</p>
</div>
<div class="PackageBox" style="--gradient: #22e4e4;--color:transparent;flex-direction: column;">
<div class="PackageBox_logo" style="--logo-size: 3rem;">
<twig:ux:icon
name="logos:stackoverflow-icon"
style="height: var(--logo-size);width:auto;"
/>

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="symfony" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://symfony.com/slack" class="SupportBox_link">Symfony Docs</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
</div>
<h2><a href="https://stackoverflow.com/questions/tagged/symfonyux" class="PackageBox_link">Stack Overflow</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <code>#symfonyux</code>. Nullam auctor, nunc nec</p>
</div>
<div class="PackageBox" style="--gradient: #22e4e4;--color:transparent;flex-direction: column;">
<div class="PackageBox_logo" style="--logo-size: 3rem;">
<twig:ux:icon
name="simple-icons:x"
style="height: var(--logo-size);width:auto;"
/>

{% if false %}
<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="logos:stackoverflow-icon" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://stackoverflow.com/questions/tagged/symfonyux" class="SupportBox_link">Stack Overflow</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
</div>
<h2><a href="https://x.com/search?q=%23symfonyux&src=typed_query"><s>Twitter</s> X</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <code>#SymfonyUX</code> Nullam auctor, nunc nec</p>
</div>
{% endif %}

</div>
</div>

</section>

{% endblock %}


{% block aside %}
{{ include('_aside.html.twig') }}
{% endblock %}

0 comments on commit fbe8cc2

Please sign in to comment.