Skip to content

[Site] Add BlueSky #2436

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Dec 10, 2024
Merged

[Site] Add BlueSky #2436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
3 changes: 3 additions & 0 deletions ux.symfony.com/assets/icons/bluesky.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 6 additions & 1 deletion ux.symfony.com/assets/styles/sections/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,14 @@ body.locked {

@media (min-width: 860px) {
.AppHeader_logo {
--height: 2.5rem;
--height: 2rem;
}
.AppHeader_toggler {
display: none !important;
}
}
@media (min-width: 1020px) {
.AppHeader_logo {
--height: 2.5rem;
}
}
39 changes: 29 additions & 10 deletions ux.symfony.com/assets/styles/sections/_nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,6 @@
flex-direction: row;
gap: 1.5rem;
justify-content: space-between;

@media (max-width: 859px) {
flex-wrap: wrap;
}
position: relative;
display: flex;
flex-direction: row;
gap: 1.5rem;
justify-content: space-between;
@media (max-width: 859px) {
flex-wrap: wrap;
}
Expand All @@ -32,6 +23,29 @@
}
}

.AppNav_socials {
display: flex;
gap: 1rem;
align-items: center;
justify-content: center;

@media (max-width: 576px) {
position: absolute;
top: 80vh;
width: 100%;
display: none;
}
}
.AppHeader.open .AppNav_socials {
@media (max-width: 576px) {
display: flex;
gap: 2rem;
.AppNav_item--icon .Icon {
font-size: 2rem;
}
}
}

.AppNav_menu {
justify-content: flex-end;
display: flex;
Expand Down Expand Up @@ -90,13 +104,18 @@
border: none;
background: none;
text-align: center;
line-height: 2rem;
line-height: 1.45;
position: relative;
transition: all 250ms;
&:hover {
opacity: 1;
}
}
.AppNav_item--cs {
@media (min-width: 860px) and (max-width: 1023px) {
display: none;
}
}
.AppNav_item--desktop {
@media (min-width: 860px) {
display: none;
Expand Down
1 change: 1 addition & 0 deletions ux.symfony.com/public/.well-known/atproto-did
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
did:plc:qvqugq4wjihbrwtua5du6d4l
51 changes: 31 additions & 20 deletions ux.symfony.com/templates/_header.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,35 +16,46 @@
<twig:ux:icon name="menu"/>
</button>
<twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
<a
class="AppNav_item AppNav_item--icon d-none d-sm-grid"
href="https://x.com/symfonyux"
rel="external me"
title="Symfony UX on X (Twitter)"
>
<twig:ux:icon name="x-twitter"/>
</a>
<a
class="AppNav_item AppNav_item--icon d-none d-sm-grid"
href="https://github.com/symfony/ux"
rel="external me"
title="Symfony UX on GitHub"
>
<twig:ux:icon name="github" />
</a>
<div class="AppNav_socials">
<a
class="AppNav_item AppNav_item--icon d-grid"
href="https://x.com/symfonyux"
rel="external me"
title="Symfony UX on X (Twitter)"
>
<twig:ux:icon name="x-twitter"/>
</a>
<a
class="AppNav_item AppNav_item--icon d-grid"
href="https://bsky.app/profile/ux.symfony.com"
rel="external me"
title="Symfony UX on BlueSky"
>
<span class="AppNav_badge" data-content="New"></span>
<twig:ux:icon name="bluesky"/>
</a>
<a
class="AppNav_item AppNav_item--icon d-grid"
href="https://github.com/symfony/ux"
rel="external me"
title="Symfony UX on GitHub"
>
<twig:ux:icon name="github" />
</a>
</div>
</div>

<div class="AppNav_menu">
<a href="{{ path('app_turbo') }}" class="AppNav_item">Turbo</a>
<a href="{{ path('app_live_component') }}" class="AppNav_item">Live <span>Components</span></a>
<a href="{{ path('app_icons') }}" class="AppNav_item">Icons</a>
<a href="{{ path('app_packages') }}" class="AppNav_item">Packages</a>
<a href="{{ path('app_cookbook') }}" class="AppNav_item">
<a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
<a href="{{ path('app_cookbook') }}" class="AppNav_item AppNav_item--cs">Cookbook</a>
<a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--cs" rel="help">
<span class="AppNav_badge" data-content="New"></span>
Cookbook
Support
</a>
<a href="{{ path('app_demos') }}" class="AppNav_item">Demos</a>
<a href="{{ path('app_support') }}" class="AppNav_item AppNav_item--desktop" rel="help">Support</a>
</div>

</nav>
Expand Down
46 changes: 30 additions & 16 deletions ux.symfony.com/templates/support.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,25 +16,19 @@
</div>

<section style="--padding:0;">
<div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1000px;">
<div class="container-fluid container px-4 pt-4 px-md-5" style="max-width: 1200px;">
<div style="display: grid; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))">

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="github" />
</div>
<div class="SupportBox_badge">
<span class="Badge Badge--new">
<twig:ux:icon name="bi:stars" style="width: 1.25em; display: block;" />
New!
</span>
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://github.com/symfony/ux/discussions" class="SupportBox_link" rel="external me">Github Discussions</a>
</h2>
<p class="SupportBox_description">
Engage in our GitHub Discussions to find answers and ask the community for help.
Engage in our GitHub Discussions to find answers, ideas or ask the <code>community</code> for help.
</p>
</div>
</div>
Expand All @@ -55,14 +49,34 @@

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="x-twitter" />
<twig:ux:icon name="bluesky" style="color:#0A7AFFFF;"/>
</div>
<div class="SupportBox_badge">
<span class="Badge Badge--new">
<twig:ux:icon name="bi:stars" style="width: 1.25em; display: block;" />
New!
</span>
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
<a href="https://bsky.app/profile/ux.symfony.com" class="SupportBox_link" rel="external me">BlueSky</a>
</h2>
<p class="SupportBox_description">
Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
Join and follow <code>@ux.symfony.com</code> to get updates and interact with the <code>#SymfonyUX</code> team!
</p>
</div>
</div>

<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="github" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://github.com/symfony/ux/issues" class="SupportBox_link" rel="external me">Github Issues</a>
</h2>
<p class="SupportBox_description">
Submit <code>bug reports</code> or contribute to the documentation on our GitHub Issues tracker.
</p>
</div>
</div>
Expand All @@ -81,19 +95,19 @@
</div>
</div>

{% if false %}
<div class="SupportBox">
<div class="SupportBox_logo">
<twig:ux:icon name="logos:stackoverflow-icon" />
<twig:ux:icon name="x-twitter" />
</div>
<div class="SupportBox_content">
<h2 class="SupportBox_title">
<a href="https://stackoverflow.com/questions/tagged/symfonyux" class="SupportBox_link">Stack Overflow</a>
<a href="https://x.com/SymfonyUX" class="SupportBox_link" rel="external me"><s>Twitter</s> X</a>
</h2>
<p class="SupportBox_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.<code>#ux</code> Nullam auctor, nunc nec</p>
<p class="SupportBox_description">
Follow the conversation on X for the latest tips and updates about <code>#SymfonyUX</code>.
</p>
</div>
</div>
{% endif %}

</div>
</div>
Expand Down
Loading