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.

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

1366: added scrollbar to homepage sidebar and separated main and sidebar content #1914

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

1366: added scrollbar to homepage sidebar and separated main and sidebar content #1914

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4d60387
added scrollbar to homepage sidebar and separated main and sidebar co…
khyatig0206 Jan 29, 2025
647fb6f
added scrollbar to homepage sidebar and separated main and sidebar co…
khyatig0206 Jan 29, 2025
0da64fc
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Jan 29, 2025
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 .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ locale/*/LC_MESSAGES/django.mo
djangoproject/cache
djangoproject/static/css/*.map
djangoproject/static/css/*.css
venv
44 changes: 43 additions & 1 deletion djangoproject/scss/_style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -352,12 +352,16 @@ blockquote {
//Sidebar in column layouts, gray section in fullwidth layout
padding: 0 10px 20px;
@include font-size(14);
position: sticky;
top: 0;
max-height: calc(100vh);
overflow-y: auto;

@include respond-min(768px) {
float: right;
margin: 20px 0;
margin-right: 3%;
padding: 0 0 40px 0;
padding: 0 40px 40px 0;
width: 30%;

.sidebar-right & {
Expand Down Expand Up @@ -392,6 +396,34 @@ blockquote {
}
}
}
/* Default scrollbar styles */
[role="complementary"]::-webkit-scrollbar {
width: 8px;
}

[role="complementary"]::-webkit-scrollbar-track {
background: transparent; /* Hide track */
}

[role="complementary"]::-webkit-scrollbar-button {
background-color: transparent;
}

[role="complementary"]::-webkit-scrollbar-thumb {
background: #ccc;
border-radius: 0;
}

/* Thumb hover effect */
[role="complementary"]::-webkit-scrollbar-thumb:hover {
background: #aaa; /* Darker on hover */
}

/* For Firefox */
[role="complementary"] {
scrollbar-width: thin; /* Thin scrollbar */
scrollbar-color: #ccc transparent; /* Default thumb color and track color */
}

[role="secondary"] {
margin: 0 10px;
Expand Down Expand Up @@ -3548,3 +3580,13 @@ ul.corporate-members li {
color: var(--community-img-fg);
}
}
.homepage-container {
width: 100%;
}

/* Apply left padding only on full-screen (large screens) */
@media (min-width: 1200px) { /* Adjust breakpoint as needed */
.homepage-container {
padding-left: 40px; /* Adjust the padding as needed */
}
}
2 changes: 1 addition & 1 deletion djangoproject/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@

<div id="billboard">{% block billboard %}{% endblock %}</div>

<div class="container {% block layout_class %}{% endblock %}">
<div class="{% block layout_class %}{% endblock %}">
<div role="main">

{% block messages %}
Expand Down
90 changes: 46 additions & 44 deletions djangoproject/templates/homepage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,56 +16,57 @@ <h1 class="visuallyhidden">Django</h1>
{% endblock %}

{% block content %}
<div class="section">
<h1>{% translate "Meet Django" %}</h1>
<p>
{% blocktranslate trimmed %}
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
Built by experienced developers, it takes care of much of the hassle of web development, so you can focus
on writing your app without needing to reinvent the wheel. It’s free and open source.
{% endblocktranslate %}
</p>
<dl class="list-features">
<dt><i class="icon icon-bolt"></i> {% translate "Ridiculously fast." %}</dt>
<dd>
<p>{% translate "Django was designed to help developers take applications from concept to completion as quickly as possible." %}</p>
</dd>
<div class="homepage-container">
<div class="section">
<h1>{% translate "Meet Django" %}</h1>
<p>
{% blocktranslate trimmed %}
Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
Built by experienced developers, it takes care of much of the hassle of web development, so you can focus
on writing your app without needing to reinvent the wheel. It’s free and open source.
{% endblocktranslate %}
</p>
<dl class="list-features">
<dt><i class="icon icon-bolt"></i> {% translate "Ridiculously fast." %}</dt>
<dd>
<p>{% translate "Django was designed to help developers take applications from concept to completion as quickly as possible." %}</p>
</dd>

<dt><i class="icon icon-lock"></i> {% translate "Reassuringly secure." %}</dt>
<dd>
<p>{% translate "Django takes security seriously and helps developers avoid many common security mistakes." %}</p>
</dd>
<dt><i class="icon icon-lock"></i> {% translate "Reassuringly secure." %}</dt>
<dd>
<p>{% translate "Django takes security seriously and helps developers avoid many common security mistakes." %}</p>
</dd>

<dt><i class="icon icon-dashboard"></i> {% translate "Exceedingly scalable." %}</dt>
<dd>
<p>{% translate "Some of the busiest sites on the web leverage Django’s ability to quickly and flexibly scale." %}</p>
</dd>
</dl>
<dt><i class="icon icon-dashboard"></i> {% translate "Exceedingly scalable." %}</dt>
<dd>
<p>{% translate "Some of the busiest sites on the web leverage Django’s ability to quickly and flexibly scale." %}</p>
</dd>
</dl>

<a href="{% url 'overview' %}" class="cta outline">{% translate "Learn more about Django" %}</a>
</div>
<a href="{% url 'overview' %}" class="cta outline">{% translate "Learn more about Django" %}</a>
</div>

<div class="section">
<h2>{% translate "Join the Community" %}</h2>
<div class="community-cta-wrapper">
<a href="https://forum.djangoproject.com/" class="community-cta-a">
<div class="community-cta">
<div>
{% include "svg_logos/forum.html" %}
<div class="section">
<h2>{% translate "Join the Community" %}</h2>
<div class="community-cta-wrapper">
<a href="https://forum.djangoproject.com/" class="community-cta-a">
<div class="community-cta">
<div>
{% include "svg_logos/forum.html" %}
</div>
<h3>{% translate "Forum - Post a question" %}</h3>
</div>
<h3>{% translate "Forum - Post a question" %}</h3>
</div>
</a>
<a href="https://chat.djangoproject.com" class="community-cta-a">
<div class="community-cta">
<div>
{% include "svg_logos/discord.html" %}
</a>
<a href="https://chat.djangoproject.com" class="community-cta-a">
<div class="community-cta">
<div>
{% include "svg_logos/discord.html" %}
</div>
<h3>{% translate "Discord - Chat with us" %}</h3>
</div>
<h3>{% translate "Discord - Chat with us" %}</h3>
</div>
</a>
</a>
</div>
</div>
</div>

{% comment %}

Expand Down Expand Up @@ -99,11 +100,12 @@ <h3 class="logo" title="Knight Foundation">Knight Foundation</h3>
</div>

{% endcomment %}

</div>
<!-- END #content-secondary -->
{% endblock %}

{% block content-related %}

<div role="complementary">
<a href="{% url 'download' %}" class="cta">
{% blocktranslate trimmed %}
Expand Down