Skip to content

Commit c5d9436

Browse files
bamnetbamnet
committed
A marginally more mobile-friendly layout.
1 parent 2a5d87b commit c5d9436

File tree

2 files changed

+139
-11
lines changed

2 files changed

+139
-11
lines changed

‎_layouts/base.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33

44
<head>
55
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
67
<link href="/assets/css/main.css" media="screen" rel="stylesheet" type="text/css" />
78
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
89
<script src="/assets/scripts/main.js" type="text/javascript"></script>

‎assets/css/main.scss‎

Lines changed: 138 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,6 @@ p img, .wp-caption {
229229
font-family: "Lucida Grande",Geneva,Arial,Verdana,sans-serif;
230230
background: #131313;
231231
color: #333;
232-
min-width: 1010px;
233232
}
234233

235234
table {
@@ -239,6 +238,8 @@ p img, .wp-caption {
239238

240239
fieldset, img {
241240
border: 0;
241+
max-width: 100%;
242+
height: auto;
242243
}
243244

244245
address, caption, cite, code, dfn, em, strong, b, th, var, optgroup {
@@ -337,8 +338,11 @@ p img, .wp-caption {
337338
div {
338339
&.wrap {
339340
position: relative;
340-
width: 980px;
341+
width: 100%;
342+
max-width: 980px;
341343
margin: 0 auto;
344+
/* box-sizing: border-box; <-- Removed to preserve 980px content width on desktop */
345+
/* padding: 0 10px; <-- Removed to preserve 980px content width on desktop */
342346
}
343347

344348
&.indent {
@@ -358,7 +362,8 @@ p img, .wp-caption {
358362
#floatspace {
359363
position: relative;
360364
z-index: 2000;
361-
width: 980px;
365+
width: 100%;
366+
max-width: 980px;
362367
margin: 0 auto;
363368
}
364369

@@ -428,7 +433,8 @@ p img, .wp-caption {
428433
}
429434

430435
div.innerdiv {
431-
width: 982px;
436+
width: 100%;
437+
max-width: 982px;
432438
margin-left: auto;
433439
margin-right: auto;
434440
}
@@ -471,12 +477,13 @@ p img, .wp-caption {
471477

472478
&.inset3col {
473479
float: left;
474-
width: 250px;
475-
margin-left: 55px;
480+
width: 30%;
481+
margin-left: 5%;
482+
box-sizing: border-box;
476483
}
477484

478485
&.inset3col_first {
479-
margin-left: 20px;
486+
margin-left: 0;
480487
}
481488

482489
&.inset3col_quote {
@@ -485,7 +492,7 @@ p img, .wp-caption {
485492
}
486493

487494
&.inset3col_2span {
488-
width: 520px !important;
495+
width: 65% !important;
489496
}
490497

491498
&.inset3col {
@@ -540,15 +547,18 @@ p img, .wp-caption {
540547
width: 383px;
541548
height: 357px;
542549
right: -15px;
550+
max-width: 100%;
543551
}
544552

545553
#fpth {
546554
background: url(/assets/images/fpth_bg.png) top center no-repeat;
547-
width: 660px;
555+
width: 725px;
556+
max-width: 100%;
548557
height: 111px;
549558
margin-top: 130px;
550559
margin-left: 25px;
551560
padding: 8px 10px 15px 55px;
561+
box-sizing: border-box;
552562

553563
a {
554564
img {
@@ -706,6 +716,8 @@ p img, .wp-caption {
706716
img {
707717
float: left;
708718
margin-right: 20px;
719+
max-width: 100%;
720+
height: auto;
709721
}
710722
}
711723

@@ -741,10 +753,13 @@ p img, .wp-caption {
741753
font-size: 0.7em;
742754
list-style: none;
743755
padding-top: 46px;
756+
display: flex;
757+
flex-wrap: wrap;
758+
justify-content: flex-end;
744759

745760
li {
746-
float: left;
747-
width: 126px;
761+
float: none; /* Removed float */
762+
width: auto;
748763
margin: 0 2px;
749764
padding: 12px 0 0;
750765

@@ -803,3 +818,115 @@ blockquote {
803818
blockquote p:last-child {
804819
margin-bottom: 0;
805820
}
821+
822+
@media screen and (max-width: 980px) {
823+
div.wrap {
824+
padding: 0 10px;
825+
box-sizing: border-box;
826+
}
827+
828+
#stripe1 {
829+
position: relative !important;
830+
}
831+
832+
#stripe1 .wrap > div {
833+
float: none !important;
834+
text-align: center;
835+
padding-top: 10px !important;
836+
}
837+
838+
#mc {
839+
width: 100%;
840+
float: none;
841+
}
842+
843+
div.sb {
844+
width: 100%;
845+
float: none;
846+
margin-left: 0;
847+
margin-right: 0;
848+
}
849+
850+
section.single {
851+
width: 100%;
852+
box-sizing: border-box;
853+
}
854+
855+
/* Responsive Main Menu */
856+
ul#mainmenu {
857+
padding-top: 10px !important;
858+
justify-content: center;
859+
margin-bottom: 20px;
860+
}
861+
ul#mainmenu li {
862+
margin-bottom: 5px;
863+
width: auto;
864+
margin: 5px;
865+
}
866+
867+
/* Simplify menu tabs on mobile */
868+
ul#mainmenu li a,
869+
ul#mainmenu li.selected a,
870+
ul#mainmenu li.sm a,
871+
ul#mainmenu li.sm.selected a,
872+
ul#mainmenu li a:hover,
873+
ul#mainmenu li.sm a:hover {
874+
background: #f0f0f0 !important;
875+
border-radius: 4px;
876+
border: 1px solid #ddd;
877+
width: auto !important;
878+
height: auto !important;
879+
padding: 8px 15px !important;
880+
font-size: 1.2em;
881+
text-shadow: none;
882+
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
883+
}
884+
885+
/* Highlight selected state clearly */
886+
ul#mainmenu li.selected a {
887+
background: #fff !important;
888+
border-color: #999;
889+
font-weight: bold;
890+
}
891+
892+
#stripe2-padding {
893+
padding-top: 10px !important;
894+
}
895+
896+
#hp-title img {
897+
float: none;
898+
display: block;
899+
margin: 0 auto 20px;
900+
}
901+
902+
#hp-title {
903+
text-align: center;
904+
}
905+
906+
/* Adjust section headers and forced-width sections */
907+
section {
908+
width: 100% !important;
909+
float: none !important;
910+
}
911+
912+
/* Footer adjustments */
913+
footer div {
914+
width: 100% !important;
915+
text-align: center !important;
916+
}
917+
918+
/* Fix oversized background images/containers */
919+
#rc_univ, #rc_iphone, #rc_ems {
920+
background-size: cover;
921+
padding-right: 0 !important;
922+
height: auto;
923+
min-height: 200px;
924+
}
925+
926+
/* Two column layouts stack */
927+
div.twocol-left, div.twocol-right {
928+
float: none;
929+
width: 100%;
930+
text-align: left;
931+
}
932+
}

0 commit comments

Comments
 (0)