Skip to content

Commit b3d33ef

Browse files
tacaswelltacaswell
committed
Merge pull request #6900 from afvincent/enh_website_mainpage
DOC: break website screenshot banner into 4 pieces and introduce a responsive layout
1 parent aeed94b commit b3d33ef

File tree

6 files changed

+72
-3
lines changed

6 files changed

+72
-3
lines changed

‎doc/_static/contour_frontpage.png

14.6 KB
Loading

‎doc/_static/histogram_frontpage.png

3.09 KB
Loading

‎doc/_static/membrane_frontpage.png

5.73 KB
Loading

‎doc/_static/mpl.css

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -682,3 +682,58 @@ figcaption {
682682
background: #003c63;
683683
outline-color: #003c63;
684684
}
685+
686+
687+
div.responsive_screenshots {
688+
/* Horizontally centered */
689+
display: block;
690+
margin: auto;
691+
692+
/* Do not go beyond 1:1 scale (and ensure a 1x4 tight layout) */
693+
max-width: 648px; /* at most 4 x 1:1 subfig width */
694+
max-height: 139px; /* at most 1 x 1:1 subfig height */
695+
}
696+
697+
/* To avoid subfigure parts outside of the responsive_screenshots */
698+
/* element (see: https://stackoverflow.com/questions/2062258/ */
699+
/* floating-stuff-within-a-div-floats-outside-of-div-why) */
700+
span.clear_screenshots { clear: left; display: block; }
701+
702+
div.responsive_subfig{
703+
float: left;
704+
width: 25%; /* we want 4 subfigs in a row */
705+
706+
/* Include content, padding and border in width. This should */
707+
/* avoid having to use tricks like "width: 24.9999%" */
708+
box-sizing: border-box;
709+
}
710+
711+
div.responsive_subfig img {
712+
/* Horizontally centered */
713+
display: block;
714+
margin: auto;
715+
716+
/* Possible downscaling */
717+
max-width: 162px; /* at most 1 x 1:1 subfig width */
718+
max-height: 139px; /* at most 1 x 1:1 subfig height */
719+
720+
width: 100%;
721+
}
722+
723+
@media only screen and (max-width: 1000px){
724+
/* The value of 1000px was handcrafted to provide a more or less */
725+
/* smooth transition between the 1x4 and the 2x2 layouts. It is */
726+
/* NB: it is slightly below 1024px: so one should still have a */
727+
/* row in a 1024x768 window */
728+
729+
div.responsive_screenshots {
730+
/* Do not go beyond 1:1 scale (and ensure a 2x2 tight layout) */
731+
max-width: 324px; /* at most 2 x 1:1 subfig width */
732+
max-height: 278px; /* at most 2 x 1:1 subfig height */
733+
}
734+
735+
div.responsive_subfig {
736+
width: 50%; /* we want 2 subfigs in a row */
737+
}
738+
739+
}

‎doc/_static/surface3d_frontpage.png

19.5 KB
Loading

‎doc/_templates/index.html

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,23 @@ <h1>Introduction</h1>
5353
web application servers, and six graphical user
5454
interface toolkits.</p>
5555

56-
<p align="center"><a href="{{ pathto('users/screenshots') }}"><img align="middle"
57-
src="{{ pathto('_static/logo_sidebar_horiz.png', 1) }}" border="0"
58-
alt="screenshots"/></a></p>
56+
<div class="responsive_screenshots">
57+
<a a href="{{ pathto('users/screenshots') }}">
58+
<div class="responsive_subfig">
59+
<img align="middle", src="{{ pathto('_static/membrane_frontpage.png', 1) }}", border="0", alt="screenshots"/>
60+
</div>
61+
<div class="responsive_subfig">
62+
<img align="middle", src="{{ pathto('_static/histogram_frontpage.png', 1) }}", border="0", alt="screenshots"/>
63+
</div>
64+
<div class="responsive_subfig">
65+
<img align="middle", src="{{ pathto('_static/contour_frontpage.png', 1) }}", border="0", alt="screenshots"/>
66+
</div>
67+
<div class="responsive_subfig">
68+
<img align="middle", src="{{ pathto('_static/surface3d_frontpage.png', 1) }}", border="0", alt="screenshots"/>
69+
</div>
70+
</a>
71+
</div>
72+
<span class="clear_screenshots"></span>
5973

6074
<p>matplotlib tries to make easy things easy and hard things possible.
6175
You can generate plots, histograms, power spectra, bar charts,

0 commit comments

Comments
 (0)