Fix navbar spacing, headings spacing, modal dialogs
authorNick Downing <nick@ndcode.org>
Wed, 12 Jan 2022 01:20:50 +0000 (12:20 +1100)
committerNick Downing <nick@ndcode.org>
Wed, 12 Jan 2022 05:53:57 +0000 (16:53 +1100)
_svg/logo_large.svg
breadcrumbs.jst
css/bootstrap/_custom.scss
css/bootstrap/_navbar.scss
css/bootstrap/_type.scss
css/bootstrap/_variables.scss
my_account/sign_up/index.html.jst
navbar.jst
page.jst

index 0d447a7..8ae064d 100644 (file)
@@ -1,19 +1,20 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="420"
+   width="391"
    height="60"
-   viewBox="0 0 420.0 60.0"
+   viewBox="0 0 391 60"
    version="1.1"
    id="svg16"
-   sodipodi:docname="a.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)">
+   sodipodi:docname="logo_large.svg"
+   inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
   <metadata
      id="metadata20">
     <rdf:RDF>
      inkscape:window-height="1015"
      id="namedview18"
      showgrid="false"
-     inkscape:zoom="3.5857143"
-     inkscape:cx="168.43435"
-     inkscape:cy="30"
+     inkscape:zoom="5.0709658"
+     inkscape:cx="108.6578"
+     inkscape:cy="38.355613"
      inkscape:window-x="0"
      inkscape:window-y="0"
      inkscape:window-maximized="1"
-     inkscape:current-layer="svg16" />
+     inkscape:current-layer="svg16"
+     inkscape:pagecheckerboard="0"
+     units="mm" />
   <defs
      id="defs10">
     <linearGradient
        id="gradient"
-       x1="45.111489"
-       x2="80.81685900000001"
-       y1="23.4612315"
-       y2="128.8181835"
+       x1="45.111488"
+       x2="80.816856"
+       y1="23.461231"
+       y2="128.81818"
        gradientTransform="scale(2.4286988,0.41174311)"
        gradientUnits="userSpaceOnUse">
       <stop
          id="stop7" />
     </linearGradient>
     <filter
-       style="color-interpolation-filters:sRGB;"
+       style="color-interpolation-filters:sRGB"
        inkscape:label="Drop Shadow"
-       x="-3.75%"
-       y="-25%"
-       width="107.5%"
-       height="150%"
+       x="-0.028138157"
+       y="-0.1659751"
+       width="1.0680005"
+       height="1.4011065"
        id="filter40">
       <feFlood
          flood-opacity="0.752941"
          result="composite2"
          id="feComposite38" />
     </filter>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient102"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient104"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient106"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient108"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient110"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient112"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#gradient"
+       id="linearGradient114"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="scale(2.4286988,0.41174311)"
+       x1="45.111488"
+       y1="23.461231"
+       x2="80.816856"
+       y2="128.81818" />
   </defs>
   <g
      aria-label="NDCODE"
-     transform="matrix(1.4 0 -0.364 1 0 0)"
-     style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black, Heavy';fill:url(#gradient);filter:url(#filter40)"
+     transform="matrix(1.4,0,-0.364,1,-8.121558,-2.6148403)"
+     style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black, Heavy';fill:url(#linearGradient114);filter:url(#filter40)"
      id="text14">
     <path
-       d="m 52.260000000000005,10.2 h 10.32 V 52.5 H 54.42 L 35.099999999999994,28.32 V 52.5 H 24.839999999999996 V 10.2 h 8.040000000000001 l 19.38,24.18 z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="M 52.26,10.2 H 62.58 V 52.5 H 54.42 L 35.1,28.32 V 52.5 H 24.84 V 10.2 h 8.04 l 19.38,24.18 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient102)"
        id="path818" />
     <path
-       d="m 70.30875,10.2 h 17.22 q 7.02,0.0 12.059999999999999,2.52 5.1,2.52 7.800000000000001,7.32 2.7,4.74 2.7,11.28 0.0,6.6000000000000005 -2.7,11.399999999999999 -2.64,4.74 -7.74,7.26 -5.04,2.52 -12.120000000000001,2.52 h -17.22 z m 16.44,33.42 q 6.24,0.0 9.3,-3.06 3.06,-3.06 3.06,-9.24 0.0,-6.18 -3.06,-9.18 -3.06,-3.06 -9.3,-3.06 h -5.4 v 24.54 z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="m 70.30875,10.2 h 17.22 q 7.02,0 12.06,2.52 5.1,2.52 7.8,7.32 2.7,4.74 2.7,11.28 0,6.6 -2.7,11.4 -2.64,4.74 -7.74,7.26 -5.04,2.52 -12.12,2.52 h -17.22 z m 16.44,33.42 q 6.24,0 9.3,-3.06 3.06,-3.06 3.06,-9.24 0,-6.18 -3.06,-9.18 -3.06,-3.06 -9.3,-3.06 h -5.4 v 24.54 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient104)"
        id="path820" />
     <path
-       d="m 137.23499999999999,53.04 q -6.6000000000000005,0.0 -11.52,-2.7 -4.86,-2.7 -7.5,-7.62 -2.58,-4.92 -2.58,-11.399999999999999 0.0,-6.48 2.58,-11.34 2.64,-4.92 7.5,-7.62 4.92,-2.7 11.52,-2.7 4.14,0.0 7.98,1.26 3.9000000000000004,1.26 6.36,3.3600000000000003 l -3.42,7.800000000000001 q -5.22,-3.66 -10.68,-3.66 -5.16,0.0 -7.92,3.24 -2.7,3.24 -2.7,9.66 0.0,6.42 2.7,9.72 2.7600000000000002,3.24 7.92,3.24 5.46,0.0 10.68,-3.66 l 3.42,7.800000000000001 q -2.46,2.0999999999999996 -6.36,3.3600000000000003 -3.84,1.26 -7.98,1.26 z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="m 137.235,53.04 q -6.6,0 -11.52,-2.7 -4.86,-2.7 -7.5,-7.62 -2.58,-4.92 -2.58,-11.4 0,-6.48 2.58,-11.34 2.64,-4.92 7.5,-7.62 4.92,-2.7 11.52,-2.7 4.14,0 7.98,1.26 3.9,1.26 6.36,3.36 l -3.42,7.8 q -5.22,-3.66 -10.68,-3.66 -5.16,0 -7.92,3.24 -2.7,3.24 -2.7,9.66 0,6.42 2.7,9.72 2.76,3.24 7.92,3.24 5.46,0 10.68,-3.66 l 3.42,7.8 q -2.46,2.1 -6.36,3.36 -3.84,1.26 -7.98,1.26 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient106)"
        id="path822" />
     <path
-       d="m 176.54156999999998,53.04 q -6.48,0.0 -11.280015,-2.64 -4.739985,-2.7 -7.319985000000001,-7.5600000000000005 -2.58,-4.92 -2.58,-11.52 0.0,-6.6000000000000005 2.58,-11.459999999999999 2.58,-4.92 7.319985000000001,-7.5600000000000005 4.800015,-2.64 11.280015,-2.64 6.48,0.0 11.219985,2.64 4.800000000000001,2.64 7.32,7.5600000000000005 2.58,4.86 2.58,11.459999999999999 0.0,6.6000000000000005 -2.58,11.52 -2.58,4.86 -7.3799850000000005,7.5600000000000005 -4.74,2.64 -11.16,2.64 z m 0.0,-8.459999999999999 q 4.799985,0.0 7.5,-3.3600000000000003 2.7,-3.42 2.7,-9.899999999999999 0.0,-6.48 -2.7600000000000002,-9.84 -2.7,-3.3600000000000003 -7.4399999999999995,-3.3600000000000003 -4.800000000000001,0.0 -7.5,3.3600000000000003 -2.700015,3.3000000000000003 -2.700015,9.84 0.0,6.540000000000001 2.700015,9.899999999999999 2.7,3.3600000000000003 7.5,3.3600000000000003 z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="m 176.54157,53.04 q -6.48,0 -11.28002,-2.64 -4.73998,-2.7 -7.31998,-7.56 -2.58,-4.92 -2.58,-11.52 0,-6.6 2.58,-11.46 2.58,-4.92 7.31998,-7.56 4.80002,-2.64 11.28002,-2.64 6.48,0 11.21998,2.64 4.8,2.64 7.32,7.56 2.58,4.86 2.58,11.46 0,6.6 -2.58,11.52 -2.58,4.86 -7.37998,7.56 -4.74,2.64 -11.16,2.64 z m 0,-8.46 q 4.79998,0 7.5,-3.36 2.7,-3.42 2.7,-9.9 0,-6.48 -2.76,-9.84 -2.7,-3.36 -7.44,-3.36 -4.8,0 -7.5,3.36 -2.70002,3.3 -2.70002,9.84 0,6.54 2.70002,9.9 2.7,3.36 7.5,3.36 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient108)"
        id="path824" />
     <path
-       d="m 204.254055,10.2 h 17.22 q 7.02,0.0 12.059999999999999,2.52 5.1,2.52 7.800000000000001,7.32 2.7,4.74 2.7,11.28 0.0,6.6000000000000005 -2.7,11.399999999999999 -2.64,4.74 -7.74,7.26 -5.04,2.52 -12.120000000000001,2.52 h -17.22 z m 16.44,33.42 q 6.24,0.0 9.3,-3.06 3.06,-3.06 3.06,-9.24 0.0,-6.18 -3.06,-9.18 -3.06,-3.06 -9.3,-3.06 h -5.4 v 24.54 z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="m 204.25405,10.2 h 17.22 q 7.02,0 12.06,2.52 5.1,2.52 7.8,7.32 2.7,4.74 2.7,11.28 0,6.6 -2.7,11.4 -2.63999,4.74 -7.74,7.26 -5.04,2.52 -12.12,2.52 h -17.22 z m 16.44,33.42 q 6.24,0 9.3,-3.06 3.06,-3.06 3.06,-9.24 0,-6.18 -3.06,-9.18 -3.06,-3.06 -9.3,-3.06 h -5.4 v 24.54 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient110)"
        id="path826" />
     <path
-       d="M 250.660305,52.5 V 10.2 h 30.06 v 8.52 h -19.32 v 8.040000000000001 h 18.12 v 8.459999999999999 h -18.12 v 8.76 h 19.32 V 52.5 Z"
-       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#gradient)"
+       d="M 250.6603,52.5 V 10.2 h 30.06 v 8.52 h -19.32 v 8.04 h 18.12 v 8.46 h -18.12 v 8.76 h 19.32 v 8.52 z"
+       style="font-style:normal;font-variant:normal;font-weight:900;font-stretch:normal;font-size:40px;font-family:'Nunito Sans';-inkscape-font-specification:'Nunito Sans Black,  Heavy';fill:url(#linearGradient112)"
        id="path828" />
   </g>
 </svg>
index 7ae21c9..a9d9ae1 100644 (file)
@@ -13,7 +13,7 @@ return async (env, _out) => {
   }
 
   // present components as breadcrumbs, except last one as text
-  h2 {
+  h2.mt-3 {
     for (let i = 0; i < components.length - 1; ++i) {
       a.h4(
         href=`${pathname.slice(0, components[i].index)}/index.html`
index 73f430c..65b4ebc 100644 (file)
@@ -32,19 +32,7 @@ $footer-link-hover-color: darken($footer-link-color, 10%);
   margin-bottom: .5em;
 }
 
-// see https://stackoverflow.com/questions/20547819/vertical-align-with-bootstrap-3
-.vcenter {
-  display: inline-block;
-  vertical-align: center;
-  float: none;
-}
-.vbottom {
-  display: inline-block;
-  vertical-align: bottom;
-  float: none;
-}
-
-.footer {
+footer, .footer {
   padding-top: 35px;
   padding-bottom: 25px;
   background-color: $gray-400;
index b681ce4..6e4cecf 100644 (file)
           }
 
           .nav-link {
-            padding-right: $navbar-nav-link-padding-x;
-            padding-left: $navbar-nav-link-padding-x;
+            //padding-right: $navbar-nav-link-padding-x;
+            //padding-left: $navbar-nav-link-padding-x;
+            padding: $navbar-nav-link-padding-y $navbar-nav-link-padding-x; // Nick
           }
         }
 
index 3112a73..d1a84d3 100644 (file)
@@ -4,9 +4,14 @@
 // Headings
 //
 
+// Nick
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: $headings-margin-bottom;
+}
+
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
-  margin-bottom: $headings-margin-bottom;
+  //margin-bottom: $headings-margin-bottom;
   font-family: $headings-font-family;
   font-weight: $headings-font-weight;
   line-height: $headings-line-height;
index 745187c..1afb0e0 100644 (file)
@@ -166,16 +166,16 @@ $sizes: map-merge(
 // Settings for the `<body>` element.
 
 $body-bg:                   $white !default;
-$body-color:                $gray-900 !default;
+$body-color:                $black !default; //$gray-900 !default;
 
 
 // Links
 //
 // Style anchor elements.
 
-$link-color:                              theme-color("primary") !default;
+$link-color:                              darken(theme-color("primary"), 5%) !default; //theme-color("primary") !default
 $link-decoration:                         none !default;
-$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-color:                        darken($link-color, 10%) !default; //15%) !default;
 $link-hover-decoration:                   underline !default;
 // Darken percentage for links with `.text-*` class (e.g. `.text-success`)
 $emphasized-link-hover-darken-percentage: 15% !default;
@@ -274,13 +274,13 @@ $embed-responsive-aspect-ratios: join(
 // Font, line-height, and color for body text, headings, and more.
 
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-family-serif:           Georgia, "Times New Roman", Times, serif !default; // Nick
+$font-family-sans-serif:      "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default; // Nick added Nunito Sans
+$font-family-serif:           "Frank Ruhl Libre", Georgia, "Times New Roman", Times, serif !default; // Nick
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 $font-family-base:            $font-family-sans-serif !default;
 // stylelint-enable value-keyword-case
 
-$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-base:              1.25rem !default; //1rem !default; // Assumes the browser default, typically `16px`
 $font-size-lg:                $font-size-base * 1.25 !default;
 $font-size-sm:                $font-size-base * .875 !default;
 
@@ -293,16 +293,16 @@ $font-weight-bolder:          bolder !default;
 $font-weight-base:            $font-weight-normal !default;
 $line-height-base:            1.5 !default;
 
-$h1-font-size:                $font-size-base * 2.5 !default;
-$h2-font-size:                $font-size-base * 2 !default;
-$h3-font-size:                $font-size-base * 1.75 !default;
-$h4-font-size:                $font-size-base * 1.5 !default;
-$h5-font-size:                $font-size-base * 1.25 !default;
 $h6-font-size:                $font-size-base !default;
+$h5-font-size:                $h6-font-size * 1.1 !default; //$font-size-base * 1.25 !default;
+$h4-font-size:                $h5-font-size * 1.1 !default; //$font-size-base * 1.5 !default;
+$h3-font-size:                $h4-font-size * 1.1 !default; //$font-size-base * 1.75 !default;
+$h2-font-size:                $h3-font-size * 1.1 !default; //$font-size-base * 2 !default;
+$h1-font-size:                $h2-font-size * 1.1 !default; //$font-size-base * 2.5 !default;
 
-$headings-margin-bottom:      $spacer * .5 !default;
+$headings-margin-bottom:      $spacer !default; //$spacer * .5 !default;
 $headings-font-family:        null !default;
-$headings-font-weight:        500 !default;
+$headings-font-weight:        600 !default; //500 !default;
 $headings-line-height:        1.2 !default;
 $headings-color:              null !default;
 
@@ -720,7 +720,8 @@ $nav-divider-margin-y:              $spacer * .5 !default;
 $navbar-padding-y:                  0 !default; //$spacer * .5 !default;
 $navbar-padding-x:                  $spacer !default;
 
-$navbar-nav-link-padding-x:         .5rem !default;
+$navbar-nav-link-padding-y:         0.75rem !default; // Nick
+$navbar-nav-link-padding-x:         1rem !default; //.5rem !default;
 
 $navbar-brand-font-size:            $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
index 5d88ae4..3d1b76a 100644 (file)
@@ -44,27 +44,27 @@ return async env => {
       }
       div.row {
         div.col-md-12 {
-          div.form-group {
+          div.form-check {
             input.form-check-input#contact-me(type="checkbox" checked="checked") {}
             ' '
-            label(for="contact-me") {
+            label.form-check-label(for="contact-me") {
               'Contact me by email with updates and special offers'
             }
           }
         }
       }
-      div.row {
-        div.'col-md-6'.vcenter {
+      div.row.align-items-center {
+        div.'col-md-6' {
           div.form-group {
-            label(for="verification") {'Verification *'}
-            input.form-control#verification(type="text" placeholder="Type the verification code shown to the right" required="required" minlength=6 maxlength=6) {}
+            label(for="verification-code") {'Verification code *'}
+            input.form-control#verification-code(type="text" placeholder="Type the code shown to the right" required="required" minlength=6 maxlength=6) {}
           }
         }
-        div.'col-md-3'.vcenter {
-          img#verification-image(src="/api/verification_image.png" width=300 height=150) {}
+        div.'col-md-3' {
+          img#verification-image(src="/api/verification_image.png?seq=0" width=300 height=150) {}
         }
-        div.'col-md-3'.vcenter.text-center {
-          input.btn.btn-default#'generate-new-code'(type="button" value="Generate new code") {}
+        div.'col-md-3'.my-auto.text-center {
+          input.btn.btn-outline-secondary#'generate-new-code'(type="button" value="Generate new code") {}
         }
       }
       div.row {
@@ -72,26 +72,19 @@ return async env => {
           input.btn.btn-success#submit(type="button" value="Create account") {}
         }
       }
-      p {} // fix this later
-      p.text-muted {
-        strong {'*'}
-        'These fields are required.'
-      }
+      p.mt-2 {'* These fields are required.'}
 
       // hidden part
       div#message-modal.modal.fade(role="dialog") {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
-              //button.close(type="button" data-dismiss="modal") {
-              //  '×'
-              //}
-              h5.modal-title {'Message'}
+              span.h5.modal-title {'Message'}
             }
             div#message-modal-message.modal-body {
             }
             div.modal-footer {
-              button.btn.btn-default(type="button" data-dismiss="modal") {
+              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Close'
               }
             }
@@ -135,7 +128,7 @@ return async env => {
               }
             )
 
-            let image_seq = 0
+            let image_seq = 1
             $('#generate-new-code').click(
               () => {
                 document.getElementById('verification-image').src = `/api/verification_image.png?seq=${image_seq}`
index 99d54bf..fea0c4a 100644 (file)
@@ -45,76 +45,65 @@ return async (env, head, body, scripts) => {
       let index = env.parsed_url.pathname.indexOf('/', 1)
       let dir = index === -1 ? '' : env.parsed_url.pathname.slice(1, index)
 
-      div(style="padding-left: calc(100vw - 100%);") {
-        div.container(style="margin-top: 5px; margin-bottom: 5px;") {
-          div.row {
-            div.'col-sm-8'.vbottom {
-              _out.push(logo_large)
-            }
-            div.'col-sm-4'.vbottom(style="padding-bottom: 15px;") {
-              //div {
-              //  let signed_in =
-              //    Object.prototype.hasOwnProperty.call(env.session, 'account')
-              //  span#signed-in-status {
-              //    if (signed_in)
-              //      `Signed in as ${env.session.account}.`
-              //    else
-              //      'Browsing as guest.'
-              //  }
-              //  ' '
-              //  if (signed_in)
-              //    a#sign-in(href="" hidden="") {'Sign in'}
-              //  else
-              //    a#sign-in(href="") {'Sign in'}
-              //  ' '
-              //  if (signed_in)
-              //    a#sign-out(href="") {'Sign out'}
-              //  else
-              //    a#sign-out(href="" hidden="") {'Sign out'}
-              //}
-              //p {}
+      div.container {
+        div.row.align-items-center.py-3 {
+          div.col-sm-8 {
+            _out.push(logo_large)
+          }
+          div.'col-sm-4' {
+            //div {
+            //  let signed_in =
+            //    Object.prototype.hasOwnProperty.call(env.session, 'account')
+            //  span#signed-in-status {
+            //    if (signed_in)
+            //      `Signed in as ${env.session.account}.`
+            //    else
+            //      'Browsing as guest.'
+            //  }
+            //  ' '
+            //  if (signed_in)
+            //    a#sign-in(href="" hidden="") {'Sign in'}
+            //  else
+            //    a#sign-in(href="") {'Sign in'}
+            //  ' '
+            //  if (signed_in)
+            //    a#sign-out(href="") {'Sign out'}
+            //  else
+            //    a#sign-out(href="" hidden="") {'Sign out'}
+            //}
+            //p {}
 
-              //form(action="/search/index.html") {
-              //  div.input-group {
-              //    input.form-control(name="query" type="text" placeholder="Search") {}
-              //    span.input-group-btn {
-              //      button.btn.btn-default(type="submit") {
-              //        _out.push(icon_search_mono)
-              //      }
-              //    }
-              //  }
-              //}
-              form.form-inline.'my-2'.my-lg-0(action="/search/index.html") {
-                div.input-group.mb-3 {
-                  input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
-                  div.input-group-append {
-                    button.btn.btn-outline-secondary#search-button(type="submit") {
-                      _out.push(icon_search_mono)
-                    }
+            form/*.form-inline*/(action="/search/index.html") {
+              div.input-group {
+                input.form-control(name="query" type="text" placeholder="Search" aria-describedby="search-button") {}
+                div.input-group-append {
+                  button.btn.btn-outline-secondary#search-button(type="submit") {
+                    _out.push(icon_search_mono)
                   }
                 }
               }
             }
-            //div.'col-sm-1'.vbottom {
-            //  // a nested div is used to avoid hover colour on the padding
-            //  div.nav-li-a(style="text-align: center;") {
-            //    a(href="/online_store/view_cart/index.html") {
-            //      div.cart-icon {
-            //        _out.push(icon_cart_small)
-            //      }
-            //      div.cart-number {
-            //        div.cart-circle {
-            //          `${(env.cart.items || []).length}`
-            //        }
-            //      }
-            //    }
-            //  }
-            //}
           }
+
+          //div.'col-sm-1'.vbottom {
+          //  // a nested div is used to avoid hover colour on the padding
+          //  div.nav-li-a(style="text-align: center;") {
+          //    a(href="/online_store/view_cart/index.html") {
+          //      div.cart-icon {
+          //        _out.push(icon_cart_small)
+          //      }
+          //      div.cart-number {
+          //        div.cart-circle {
+          //          `${(env.cart.items || []).length}`
+          //        }
+          //      }
+          //    }
+          //  }
+          //}
         }
       }
       nav.navbar.navbar-expand-lg.navbar-dark.bg-primary {
-        div.container { //div(style="padding-left: calc(100vw - 100%);") {
+        div.container {
           //a.navbar-brand(href="#") {'Navbar'}
           //' '
           button.navbar-toggler(type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation") {
@@ -181,15 +170,13 @@ return async (env, head, body, scripts) => {
           }
         }
       }
-      div(style="padding-left: calc(100vw - 100%); margin-top: 20px; margin-bottom: 40px;") {
-        div.container {
-          await body(_out)
-        }
+      div.container {
+        await body(_out)
       }
-      div.footer(style="padding-left: calc(100vw - 100%);") {
+      footer {
         div.container {
           a(rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/") {
-            img(alt="Creative Commons License" style="border-width:0" src="/images/by-sa_3.0_88x31.png") {}
+            img(alt="Creative Commons License" style="border-width:0;" src="/images/by-sa_3.0_88x31.png") {}
           }
           p {
             'This website is '
@@ -214,12 +201,7 @@ return async (env, head, body, scripts) => {
       //  div.modal-dialog {
       //    div.modal-content {
       //      div.modal-header {
-      //        button.close(type="button" data-dismiss="modal") {
-      //          '×'
-      //        }
-      //        h4.modal-title {
-      //          'Sign in'
-      //        }
+      //        span.h4.modal-title {'Sign in'}
       //      }
       //      div.modal-body {
       //        form#sign-in-form(method="post" action="/sign_in.json" role="form") {
@@ -258,7 +240,7 @@ return async (env, head, body, scripts) => {
       //        button.btn.btn-primary(type="submit" form="sign-in-form") {
       //          'Sign in'
       //        }
-      //        button.btn.btn-default(type="button" data-dismiss="modal") {
+      //        button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
       //          'Cancel'
       //        }
       //      }
@@ -270,12 +252,7 @@ return async (env, head, body, scripts) => {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
-              button.close(type="button" data-dismiss="modal") {
-                '×'
-              }
-              h4.modal-title {
-                'Give feedback'
-              }
+              span.h4.modal-title {'Give feedback'}
             }
             div.modal-body {
               p {
@@ -310,7 +287,7 @@ return async (env, head, body, scripts) => {
               button.btn.btn-primary(type="submit" form="feedback-form") {
                 'Submit'
               }
-              button.btn.btn-default(type="button" data-dismiss="modal") {
+              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Cancel'
               }
             }
@@ -322,18 +299,13 @@ return async (env, head, body, scripts) => {
         div.modal-dialog {
           div.modal-content {
             div.modal-header {
-              button.close(type="button" data-dismiss="modal") {
-                '×'
-              }
-              h4.modal-title {
-                'Message'
-              }
+              span.h4.modal-title {'Message'}
             }
             div.modal-body {
               p#message-modal-message {}
             }
             div.modal-footer {
-              button.btn.btn-default(type="button" data-dismiss="modal") {
+              button.btn.btn-outline-secondary(type="button" data-dismiss="modal") {
                 'Close'
               }
             }
index 66798a7..c09f5e2 100644 (file)
--- a/page.jst
+++ b/page.jst
@@ -42,6 +42,8 @@ return async (env, head, body, scripts) => {
       // Bootstrap CSS
       //link(rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous") {}
       link(rel="stylesheet" href="/css/bootstrap/bootstrap.css") {}
+      link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Frank+Ruhl+Libre:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {}
+      link(rel="stylesheet" href="//fonts.googleapis.com/css?family=Nunito+Sans:regular,regularitalic,semibold,semibolditalic,bold,bolditalic,black,blackitalic") {}
 
       await head(_out) //title {'Hello, world!'}
     }