From: Nick Downing Date: Wed, 12 Jan 2022 01:20:50 +0000 (+1100) Subject: Fix navbar spacing, headings spacing, modal dialogs X-Git-Url: https://git.ndcode.org/public/gitweb.cgi?p=ndcode_site.git;a=commitdiff_plain;h=5d65155428829802e62bb363cf6492946ff9494f Fix navbar spacing, headings spacing, modal dialogs --- diff --git a/_svg/logo_large.svg b/_svg/logo_large.svg index 0d447a7..8ae064d 100644 --- a/_svg/logo_large.svg +++ b/_svg/logo_large.svg @@ -1,19 +1,20 @@ diff --git a/breadcrumbs.jst b/breadcrumbs.jst index 7ae21c9..a9d9ae1 100644 --- a/breadcrumbs.jst +++ b/breadcrumbs.jst @@ -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` diff --git a/css/bootstrap/_custom.scss b/css/bootstrap/_custom.scss index 73f430c..65b4ebc 100644 --- a/css/bootstrap/_custom.scss +++ b/css/bootstrap/_custom.scss @@ -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; diff --git a/css/bootstrap/_navbar.scss b/css/bootstrap/_navbar.scss index b681ce4..6e4cecf 100644 --- a/css/bootstrap/_navbar.scss +++ b/css/bootstrap/_navbar.scss @@ -182,8 +182,9 @@ } .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 } } diff --git a/css/bootstrap/_type.scss b/css/bootstrap/_type.scss index 3112a73..d1a84d3 100644 --- a/css/bootstrap/_type.scss +++ b/css/bootstrap/_type.scss @@ -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; diff --git a/css/bootstrap/_variables.scss b/css/bootstrap/_variables.scss index 745187c..1afb0e0 100644 --- a/css/bootstrap/_variables.scss +++ b/css/bootstrap/_variables.scss @@ -166,16 +166,16 @@ $sizes: map-merge( // Settings for the `` 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 diff --git a/my_account/sign_up/index.html.jst b/my_account/sign_up/index.html.jst index 5d88ae4..3d1b76a 100644 --- a/my_account/sign_up/index.html.jst +++ b/my_account/sign_up/index.html.jst @@ -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}` diff --git a/navbar.jst b/navbar.jst index 99d54bf..fea0c4a 100644 --- a/navbar.jst +++ b/navbar.jst @@ -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' } } diff --git a/page.jst b/page.jst index 66798a7..c09f5e2 100644 --- 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!'} }