Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: NixOS/nixos-homepage
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: badd5959fa2f^
Choose a base ref
...
head repository: NixOS/nixos-homepage
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: a1f44e0869f7
Choose a head ref
  • 8 commits
  • 9 files changed
  • 1 contributor

Commits on Nov 4, 2020

  1. site-styles: Add site-width rulers in debug mode

    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    badd595 View commit details

  2. site-styles: Use margins rather than paddings for columns 

    The padding would end up causing a mis-alignment of columns.

The `calc()` is needed here as the total space available is 100%, but if
we don't remove it from the width of the elements we'd end up with
100%+n*margin
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    385f18f View commit details

  3. layout: Review footer to use columns and container mixins 

    It seems the previous method didn't compose well.

It would end up creating a bit of padding where there shouldn't be since
using #container() at the same place as #columns() can't work.
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    f8b2dbc View commit details

  4. site-styles: Add debugging bounding boxes to flex-flexible mixins

    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    f1f7ad8 View commit details

  5. site-styles: Remove NixOS text from the navbar on narrow sm widths 

    There's too many items in the menu when bordering on xs.
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    85ea638 View commit details

  6. site-styles: Fix regression in community.less 

    Setting all margins like that breaks #columns()
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    0d29d66 View commit details

  7. site-styles: Fix scrolling bug at ==768px width 

    The negative margins being applied all the time caused issues when the
total width of the viewport was smaller than the site width + those
margin sizes.
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    d9200eb View commit details

  8. site-style: Fix fallout from changing columns implementation 

    The way this is fixed also better explains what the desire is. We
actually want three columns, not two. It's only that we want the second
column to span two out of the three columns.

We will need an abstraction over that.
    @samueldr
    samueldr committed Nov 4, 2020
    Copy the full SHA
    a1f44e0 View commit details
116 changes: 59 additions & 57 deletions layout.tt
View file
Original file line number Diff line number Diff line change
@@ -80,63 +80,65 @@ BLOCK navigationLink %]
</main>

<footer>
<div class="upper">
<section>
<h4>The project</h4>
<ul>
<li><a href="https://status.nixos.org/">Channel Status</a></li>
<li><a href="https://search.nixos.org/packages">Packages search</a></li>
<li><a href="https://search.nixos.org/options">Options search</a></li>
<li><a href="https://nixos.org/teams/security.html">Security</a></li>
</ul>
</section>
<section>
<h4>Get in Touch</h4>
<ul>
<li><a href="https://discourse.nixos.org/">Forum</a></li>
<li><a href="https://webchat.freenode.net/#nixos">Chat</a></li>
<li><a href="https://nixos.org/commercial-support.html">Commercial support</a></li>
</ul>
</section>
<section>
<h4>Contribute</h4>
<ul>
<li><a href="https://nixos.org/guides/contributing.html">Contributing Guide</a></li>
<li><a href="https://nixos.org/donate.html">Donate</a></li>
</ul>
</section>
<section>
<h4>Stay up to date</h4>
<ul>
<li><a href="https://nixos.org/news.html">Announcements</a></li>
<li><a href="https://weekly.nixos.org/">Newsletter</a></li>
</ul>
</section>
</div>
<hr />
<div class="lower">
<section class="footer-copyright">
<h4>NixOS</h4>
<div>
<span>
Copyright © [% date.format(date.now, '%Y') %] NixOS
</span>
<a href="https://github.com/NixOS/nixos-homepage/blob/master/LICENSES/CC-BY-SA-4.0.txt">
<abbr title="Creative Commons Attribution Share Alike 4.0 International">
CC-BY-SA-4.0
</abbr>
</a>
</div>
</section>
<section class="footer-social">
<h4>Connect with us</h4>
<ul>
<li class="social-icon -twitter"><a href="https://twitter.com/nixos_org">Twitter</a></li>
<li class="social-icon -youtube"><a
href="https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw">Youtube</a></li>
<li class="social-icon -github"><a href="https://github.com/NixOS">GitHub</a></li>
</ul>
</section>
<div>
<div class="upper">
<section>
<h4>The project</h4>
<ul>
<li><a href="https://status.nixos.org/">Channel Status</a></li>
<li><a href="https://search.nixos.org/packages">Packages search</a></li>
<li><a href="https://search.nixos.org/options">Options search</a></li>
<li><a href="https://nixos.org/teams/security.html">Security</a></li>
</ul>
</section>
<section>
<h4>Get in Touch</h4>
<ul>
<li><a href="https://discourse.nixos.org/">Forum</a></li>
<li><a href="https://webchat.freenode.net/#nixos">Chat</a></li>
<li><a href="https://nixos.org/commercial-support.html">Commercial support</a></li>
</ul>
</section>
<section>
<h4>Contribute</h4>
<ul>
<li><a href="https://nixos.org/guides/contributing.html">Contributing Guide</a></li>
<li><a href="https://nixos.org/donate.html">Donate</a></li>
</ul>
</section>
<section>
<h4>Stay up to date</h4>
<ul>
<li><a href="https://nixos.org/news.html">Announcements</a></li>
<li><a href="https://weekly.nixos.org/">Newsletter</a></li>
</ul>
</section>
</div>
<hr />
<div class="lower">
<section class="footer-copyright">
<h4>NixOS</h4>
<div>
<span>
Copyright © [% date.format(date.now, '%Y') %] NixOS
</span>
<a href="https://github.com/NixOS/nixos-homepage/blob/master/LICENSES/CC-BY-SA-4.0.txt">
<abbr title="Creative Commons Attribution Share Alike 4.0 International">
CC-BY-SA-4.0
</abbr>
</a>
</div>
</section>
<section class="footer-social">
<h4>Connect with us</h4>
<ul>
<li class="social-icon -twitter"><a href="https://twitter.com/nixos_org">Twitter</a></li>
<li class="social-icon -youtube"><a
href="https://www.youtube.com/channel/UC3vIimi9q4AT8EgxYp_dWIw">Youtube</a></li>
<li class="social-icon -github"><a href="https://github.com/NixOS">GitHub</a></li>
</ul>
</section>
</div>
</div>
</footer>
<script src="[% root %]js/nixos-site.js"></script>
18 changes: 8 additions & 10 deletions site-styles/components/footer.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
// This file defines the navigation at the bottom of the page.

body > footer {
& > div {
#container();
}
#no-select();
margin-top: @gutter * 2;
padding-top: @gutter;
@@ -11,14 +14,8 @@ body > footer {
align-items: center;
background: #theme.footer[background];

// The "centered" container is that unsemantic div.
& > div {
#container();
display: flex;
}

// The separator line is actually an `hr`.
& > hr {
hr {
#container();
width: 100%;
border: 0;
@@ -56,8 +53,8 @@ body > footer {
padding: 0;
}

& > .upper {
#columns(4, @xs: 2);
.upper {
#columns(4, @xs: 2, @sm: 2);

margin-top: 2*@gutter;

@@ -74,7 +71,8 @@ body > footer {
}
}

& > .lower {
.lower {
display: flex;
flex-wrap: wrap;
flex-direction: column;
align-items: stretch;
8 changes: 8 additions & 0 deletions site-styles/components/navbar.less
View file
Original file line number Diff line number Diff line change
@@ -115,6 +115,14 @@ body > header {
// So we simply add them up here :)
width: @_lambdaflake_width + @_nixos_text_width;

// Strip the NixOS text as in narrow -sm widths it might not fit.
#screen-sm-only({
width: @_lambdaflake_width;
&::after {
display: none;
}
});

padding: 0;
margin-right: @gutter;
}
16 changes: 16 additions & 0 deletions site-styles/debug.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
// Adds site-width rulers when in debug mode.
body.-debug {
&::before {
pointer-events: none;
content: "";
display: block;
z-index: 999999;
outline: 1px dashed yellow;
#container();
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0
}
}
1 change: 1 addition & 0 deletions site-styles/index.less
View file
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@

@import "setup";
@import "responsive";
@import "debug";
@import "layout";

@import "components/index";
21 changes: 14 additions & 7 deletions site-styles/mixins/layout.less
View file
Original file line number Diff line number Diff line change
@@ -28,28 +28,35 @@
// "under" xs cannot be forced to anything else than 1.
// sm and md can be configured if needed, but will default to @amount.
#columns(@amount, @xxs: 1, @xs: @xxs, @sm: @amount, @md: @amount, @spacing: @gutter) {
#flex-flexible-margin-between(@spacing);
justify-content: flex-start;

// This is a sane default, and helps with using <ul>
margin: 0;
// Same, as <ul> can often be made a columnar layout, it is a sane default.
list-style-type: none;

#flex-flexible-spacing(@spacing);
justify-content: flex-start;
// Needed to undo incidental margins
margin-right: -@spacing;

body.-debug & > * {
outline: 1px solid pink;
}

& > * {
flex-grow: 0;
width: 100%/@xxs;
width: calc(100%/@xxs - @spacing);
#screen-xs-min({
width: 100%/@xs;
width: calc(100%/@xs - @spacing);
});
#screen-sm-min({
width: 100%/@sm;
width: calc(100%/@sm - @spacing);
});
#screen-md-min({
width: 100%/@md;
width: calc(100%/@md - @spacing);
});
#screen-lg-min({
width: 100%/@amount;
width: calc(100%/@amount - @spacing);
});
}
}
8 changes: 8 additions & 0 deletions site-styles/mixins/utilities.less
View file
Original file line number Diff line number Diff line change
@@ -17,6 +17,10 @@
position: relative;
left: -@size;

body.-debug & > * {
outline: 1px solid orange;
}

& > * {
// Sane default here
flex-grow: 1;
@@ -42,6 +46,10 @@
margin-left: @size;
left: -@size;

body.-debug & > * {
outline: 1px solid green;
}

& > * {
margin-right: @size;
// Since everything is shifted left, don't forget to shift it back
12 changes: 5 additions & 7 deletions site-styles/pages/community.less
View file
Original file line number Diff line number Diff line change
@@ -96,15 +96,12 @@
}

& > div {
#columns(2);
#columns(3, @sm: 2, @spacing: @gutter);

#screen-md-min({
& > div:first-child {
width: 34%;
}

& > div:last-child {
width: 66%;
// These value is a leaky implementation details from #columns.
width: (100%/3*2 - 2*@gutter);
}
});

@@ -260,7 +257,8 @@
& > ul {
#columns(3);
text-align: center;
margin: 2*@gutter 0;
margin-top: 2*@gutter;
margin-bottom: 2*@gutter;
font-size: 120%;

& > li {
7 changes: 4 additions & 3 deletions site-styles/pages/learn.less
View file
Original file line number Diff line number Diff line change
@@ -91,9 +91,6 @@
);
#flair.wedge-shaped.blue-dark();

margin-left: -1*@gutter;
margin-right: -1*@gutter;

& > div {
#container();

@@ -130,6 +127,10 @@
}
}
}
#screen-xs-max({
margin-left: -1*@gutter;
margin-right: -1*@gutter;
});
}

.learn-guides {