Skip to content

Commit 119faac

Browse files
djanelle-mitdjanelle-mit
committed
First Draft of Homepage Template
Creates the first barebones v2 page template for the new homepage.
1 parent 534d338 commit 119faac

4 files changed

Lines changed: 278 additions & 0 deletions

File tree

‎web/app/themes/mitlib-parent/css/scss/partials/_layout.scss‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,3 +307,137 @@ html.no-js .js-hidden {
307307
clear: both;
308308
}
309309
}
310+
311+
/* ==================== */
312+
/* V2 Layout Experiment */
313+
/* ==================== */
314+
315+
// Layout variables
316+
:root {
317+
--content-side-margins: 32px;
318+
319+
@media only screen and (max-width: 720px) {
320+
--content-side-margins: 24px;
321+
}
322+
323+
@media only screen and (max-width: 480px) {
324+
--content-side-margins: 16px;
325+
}
326+
327+
--actual-max-width: 1280px; // What we want the max width to work out to, margins included
328+
--content-max-width: calc(var(--actual-max-width) - (var(--content-side-margins) * 2));
329+
330+
--content-section-vertical-padding: 48px;
331+
}
332+
333+
// Changes that should only apply to V2 pages (.v2-page body class)
334+
body.v2-page {
335+
background-color: #000;
336+
337+
#content {
338+
background-color: #fff;
339+
}
340+
341+
// Adjustments to navigation
342+
header.header-main {
343+
> nav:first-child {
344+
display: none;
345+
346+
@media only screen and (max-width: 569px) {
347+
display: block;
348+
}
349+
350+
}
351+
352+
.header-left, .header-right {
353+
display: flex;
354+
}
355+
356+
.header-right {
357+
gap: 32px;
358+
359+
@media only screen and (max-width: 569px) {
360+
gap: 16px;
361+
362+
a.hidden-non-mobile {
363+
margin-left: 0;
364+
margin-right: 0;
365+
}
366+
}
367+
}
368+
369+
h1.name-site {margin-left: 0;}
370+
}
371+
372+
}
373+
374+
// START: New layout rules for V2 page templates
375+
.wrap-page.full-width {
376+
width: 100%;
377+
max-width: 100%;
378+
}
379+
380+
// Outer block wrappers for all content blocks
381+
.header-wrapper, .content-wrapper, .footer-wrapper, main#content > section {
382+
display: flex;
383+
justify-content: center;
384+
width: 100%;
385+
}
386+
387+
.header-wrapper {
388+
background-color: #000;
389+
390+
> header {
391+
max-width: var(--content-max-width);
392+
padding-left: calc(var(--content-side-margins) - 8px);
393+
padding-right: calc(var(--content-side-margins) - 8px);
394+
}
395+
396+
.header-right {
397+
justify-content: flex-end;
398+
flex-grow: 1;
399+
}
400+
401+
}
402+
403+
.footer-wrapper {
404+
background-color: #000;
405+
406+
> footer {
407+
//max-width: var(--content-max-width);
408+
}
409+
410+
.footer-main, .footer-info-institute {
411+
padding-left: var(--content-side-margins);
412+
padding-right: var(--content-side-margins);
413+
max-width: var(--content-max-width);
414+
}
415+
416+
.links-all {
417+
gap: 32px;
418+
419+
div.flex-item {
420+
margin-right: 0;
421+
flex-grow: 1;
422+
}
423+
424+
}
425+
426+
}
427+
428+
main#content > section {
429+
padding-top: var(--content-section-vertical-padding);
430+
padding-bottom: var(--content-section-vertical-padding);
431+
432+
.content-wrapper {
433+
max-width: var(--content-max-width);
434+
text-align: left;
435+
justify-content: flex-start;
436+
437+
padding-left: var(--content-side-margins);
438+
padding-right: var(--content-side-margins);
439+
}
440+
441+
}
442+
443+
// END: New layout rules for V2 page templates

‎web/app/themes/mitlib-parent/footer-v2.php‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<?php
2+
/**
3+
* The template for displaying the footer.
4+
*
5+
* @package MITlib_Parent
6+
* @since 0.0.1
7+
*/
8+
9+
namespace Mitlib\Parent;
10+
11+
?>
12+
<section class="footer-wrapper">
13+
<footer>
14+
15+
<?php get_template_part( 'inc/footer', 'main' ); ?>
16+
17+
<div class="footer-info-institute">
18+
<a class="link-logo-mit" href="https://www.mit.edu">
19+
<img src="https://cdn.libraries.mit.edu/files/branding/local/mit_lockup_std-three-line_rgb_white.svg" alt="MIT" width="152">
20+
</a>
21+
22+
<div class="license">Content created by the MIT Libraries, <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC</a> unless otherwise noted. <a href="https://libraries.mit.edu/research-support/notices/copyright-notify/">Notify us about copyright concerns</a>.</div>
23+
</div><!-- End div.footer-info-institure -->
24+
</footer>
25+
</section><!-- End section.footer-wrapper -->
26+
</div><!-- End div.wrap-page -->
27+
28+
<?php wp_footer(); ?>
29+
</body>
30+
</html>

‎web/app/themes/mitlib-parent/header-v2.php‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<?php
2+
/**
3+
* The Header for our theme.
4+
*
5+
* Displays all of the <head> section and everything up till div#breadcrumb
6+
*
7+
* @package MITlib_Parent
8+
* @since 0.0.1
9+
*/
10+
11+
namespace Mitlib\Parent;
12+
13+
$menu = 'full';
14+
if ( 'slim' === get_option( 'menu_style_setting' ) ) {
15+
$menu = 'slim';
16+
}
17+
?><!DOCTYPE html>
18+
<!--[if lte IE 9]><html class="no-js lte-ie9" lang="en"><![endif]-->
19+
<!--[if !(IE 8) | !(IE 9) ]><!-->
20+
<html <?php language_attributes(); ?> class="no-js">
21+
<!--<![endif]-->
22+
<head>
23+
<meta charset="<?php bloginfo( 'charset' ); ?>" />
24+
<!-- <meta name="format-detection" content="telephone=no"> -->
25+
<!--<meta name="viewport" content="width=device-width" />-->
26+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
27+
<meta name="description" content="The libraries of the Massachusetts Institute of Technology - Search, Visit, Research, Explore" />
28+
<title><?php wp_title( '|', true, 'right' ); ?></title>
29+
<?php get_template_part( 'inc/header', 'opengraph' ); ?>
30+
<link rel="profile" href="https://gmpg.org/xfn/11" />
31+
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
32+
<link rel="icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/favicon.ico" sizes="32x32">
33+
<link rel="icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/favicon.svg" type="image/svg+xml">
34+
<link rel="apple-touch-icon" href="https://cdn.libraries.mit.edu/files/branding/favicons/apple-touch-icon.png"><!-- 180×180 -->
35+
<link rel="manifest" href="https://cdn.libraries.mit.edu/files/branding/favicons/manifest.json">
36+
<?php wp_head(); ?>
37+
<script>
38+
todayDate="";
39+
</script>
40+
</head>
41+
42+
<body <?php body_class('v2-page'); ?>>
43+
<div id="skip"><a href="#content">Skip to Main Content</a></div>
44+
45+
<div class="wrap-page full-width">
46+
<section class="header-wrapper">
47+
<header class="header-main flex-container flex-end">
48+
<div class="header-left">
49+
<?php if ( 'full' === $menu ) { ?>
50+
<?php get_template_part( 'inc/nav', 'hamburger' ); ?>
51+
<?php } ?>
52+
<?php get_template_part( 'inc/liblogo' ); ?>
53+
</div>
54+
<div class="header-right">
55+
<?php get_template_part( 'inc/search', 'main' ); ?>
56+
<?php if ( 'full' === $menu ) { ?>
57+
<?php get_template_part( 'inc/nav', 'main' ); ?>
58+
<?php } ?>
59+
<a class="link-logo-mit" href="http://www.mit.edu"><img src="https://cdn.libraries.mit.edu/files/branding/local/mit_logo_std_rgb_white.svg" height="32" alt="MIT logo" >
60+
</a><!-- End MIT Logo -->
61+
<?php if ( 'full' === $menu ) { ?>
62+
<?php get_template_part( 'inc/nav', 'smalldisplays' ); ?>
63+
<?php } ?>
64+
</div>
65+
</header>
66+
</section>

‎web/app/themes/mitlib-parent/templates/page-home-v2.php‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<?php
2+
/**
3+
* Template Name: Home Page v2
4+
*
5+
* This template builds the site homepage. It it applied to a Page record, but
6+
* no fields from that Page are ever displayed.
7+
*
8+
* @package MITlib_Parent
9+
* @since 0.0.1
10+
*/
11+
12+
namespace Mitlib\Parent;
13+
14+
get_header( 'v2' ); ?>
15+
16+
<main id="content">
17+
18+
<section>
19+
<div class="content-wrapper">
20+
Search box
21+
</div>
22+
</section>
23+
<section>
24+
<div class="content-wrapper">
25+
Hours
26+
</div>
27+
</section>
28+
<section>
29+
<div class="content-wrapper">
30+
Getting started
31+
</div>
32+
</section>
33+
<section>
34+
<div class="content-wrapper">
35+
Featured
36+
</div>
37+
</section>
38+
<section>
39+
<div class="content-wrapper">
40+
Collection
41+
</div>
42+
</section>
43+
44+
</main>
45+
46+
<?php
47+
get_footer( 'v2' );
48+
?>

0 commit comments

Comments
 (0)