# HG changeset patch # User Jie Kang # Date 1477934106 14400 # Node ID a88a7af5018537ef72f7f77c98f8ae0c33f6458b # Parent fb8dc2193ccfe0d3ae2556f4c86de8a1a470167e Use less file to create css file. diff -r fb8dc2193ccf -r a88a7af50185 css/style.css --- a/css/style.css Wed Nov 02 10:51:26 2016 -0400 +++ b/css/style.css Mon Oct 31 13:15:06 2016 -0400 @@ -1,187 +1,175 @@ +/* colours */ +/* sizes */ /* logo */ /**/ div#logo-box { - margin: 1em; - margin-top: 4em; + margin: 1em; + margin-top: 4em; } - div#logo-box img { + max-width: 50%; + height: auto; +} +@media (min-width: 992px) { + div#logo-box img { max-width: 25%; - height: auto; + } } - /* navbar */ /**/ .navbar-default { background-color: #ffffff; border-color: #ffffff; - border-bottom-color: rgb(0, 34, 85); + border-bottom-color: #002255; font-size: 1.2em; } - .navbar-default .navbar-nav > li > a { - color: rgb(0, 34, 85); + color: #002255; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { - color: rgb(240,130,0); + color: #f08200; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { - color: rgb(240,130,0); + color: #f08200; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { - color: rgb(240,130,0); + color: #f08200; background-color: #ffffff; } - .navbar-default .navbar-collapse, .navbar-default .navbar-form { - border-color: rgb(240,130,0) + border-color: #f08200; } - .navbar-c1 { - margin-right: 0.1em; + margin-right: 0.1em; } - /* bs-docs-sidebar */ /**/ body { - position: relative; + position: relative; } - .fixed { - position: fixed; + position: fixed; } - /* sidebar */ .bs-docs-sidebar { - padding-left: 5px; - padding-right: 10px; - margin-top: 20px; - margin-bottom: 20px; + padding-left: 5px; + padding-right: 10px; + margin-top: 20px; + margin-bottom: 20px; } - /* all links */ -.bs-docs-sidebar .nav>li>a { - color: rgb(90,90,90); - border-left: 2px solid transparent; - padding: 4px 10px; - font-size: 1.1em; - font-weight: 400; +.bs-docs-sidebar .nav > li > a { + color: #465050; + border-left: 2px solid transparent; + padding: 4px 10px; + font-size: 1.1em; + font-weight: 400; } - /* nested links */ -.bs-docs-sidebar .nav .nav>li>a { - padding-top: 1px; - padding-bottom: 1px; - padding-left: 30px; - font-size: 12px; +.bs-docs-sidebar .nav .nav > li > a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 30px; + font-size: 12px; } - /* active & hover links */ -.bs-docs-sidebar .nav>.active>a, -.bs-docs-sidebar .nav>li>a:hover, -.bs-docs-sidebar .nav>li>a:focus { - color: rgb(0, 34, 85); - text-decoration: none; - background-color: transparent; - border-left-color: rgb(0, 34, 85); +.bs-docs-sidebar .nav > .active > a, +.bs-docs-sidebar .nav > li > a:hover, +.bs-docs-sidebar .nav > li > a:focus { + color: #002255; + text-decoration: none; + background-color: transparent; + border-left-color: #002255; } /* all active links */ -.bs-docs-sidebar .nav>.active>a, -.bs-docs-sidebar .nav>.active:hover>a, -.bs-docs-sidebar .nav>.active:focus>a { - font-weight: 700; +.bs-docs-sidebar .nav > .active > a, +.bs-docs-sidebar .nav > .active:hover > a, +.bs-docs-sidebar .nav > .active:focus > a { + font-weight: 700; } /* nested active links */ -.bs-docs-sidebar .nav .nav>.active>a, -.bs-docs-sidebar .nav .nav>.active:hover>a, -.bs-docs-sidebar .nav .nav>.active:focus>a { - font-weight: 500; +.bs-docs-sidebar .nav .nav > .active > a, +.bs-docs-sidebar .nav .nav > .active:hover > a, +.bs-docs-sidebar .nav .nav > .active:focus > a { + font-weight: 500; } - /* hide inactive nested list */ .bs-docs-sidebar .nav ul.nav { - display: none; + display: none; } /* show active nested list */ -.bs-docs-sidebar .nav>.active>ul.nav { - display: block; +.bs-docs-sidebar .nav > .active > ul.nav { + display: block; } - .back-to-top { - color: rgb(90,90,90); - border-left: 2px solid transparent; - margin-top: 10px; - padding: 4px 10px; - font-size: 1em; - font-weight: 400; - display: block; + color: #465050; + border-left: 2px solid transparent; + margin-top: 10px; + padding: 4px 10px; + font-size: 1em; + font-weight: 400; + display: block; } - /* button */ /**/ .btn-c1 { - color: rgb(0, 34, 85); -} -.btn-c1:hover, .btn-c1:focus, .btn-c1:active, .btn-c1.active, .open>.dropdown-toggle.btn-c1 { - color: rgb(240,130,0); - background: rgb(255,255,255); + color: #002255; } - +.btn-c1:hover, +.btn-c1:focus, +.btn-c1:active, +.btn-c1.active, +.open > .dropdown-toggle.btn-c1 { + color: #f08200; + background: #ffffff; +} .btn-xlarge { - padding: 0.5em 3em; - font-size: 1.4em; + padding: 0.5em 3em; + font-size: 1.4em; } - /* panel */ /**/ .panel-default { - border-color: rgb(255,255,255); + border-color: #ffffff; } - .panel-default .panel-heading { - background: rgb(255,255,255); - border-color: rgb(255,255,255); + background: #ffffff; + border-color: #ffffff; } - h1.panel-title { - color: rgb(0, 34, 85); - font-size: 2.2em; + color: #002255; + font-size: 2.2em; } h2.panel-title { - color: rgb(0, 34, 85); - font-size: 2em; + color: #002255; + font-size: 2em; } .h3-steps { - margin-top: 1.5em; + margin-top: 1.5em; } - /* text */ /**/ h1 { - color: rgb(0, 34, 85); + color: #002255; } - h2 { - color: rgb(0, 34, 85); + color: #002255; } - h3 { - color: rgb(0, 34, 85); + color: #002255; } - .h4c { - margin-top: 2em; - font-size: 1.5em; - color: rgb(0, 34, 85); + margin-top: 2em; + font-size: 1.5em; + color: #002255; } - .ac { - color: rgb(70,70,80); -} \ No newline at end of file + color: #465050; +} diff -r fb8dc2193ccf -r a88a7af50185 css/style.less --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/css/style.less Mon Oct 31 13:15:06 2016 -0400 @@ -0,0 +1,202 @@ +/* colours */ +@white: rgb(255,255,255); +@dark-blue: rgb(0,34,85); +@orange: rgb(240,130,0); +@grey: rgb(70,80,80); + +/* sizes */ +@screen-md-min: 992px; + +/* logo */ +/**/ +div#logo-box { + margin: 1em; + margin-top: 4em; +} + +div#logo-box img { + max-width: 50%; + height: auto; +} + +@media (min-width: @screen-md-min) { + div#logo-box img { + max-width: 25%; + } +} + +/* navbar */ +/**/ +.navbar-default { + background-color: @white; + border-color: @white; + border-bottom-color: @dark-blue; + font-size: 1.2em; +} + +.navbar-default .navbar-nav > li > a { + color: @dark-blue; +} +.navbar-default .navbar-nav > li > a:hover, +.navbar-default .navbar-nav > li > a:focus { + color: @orange; +} +.navbar-default .navbar-nav > .active > a, +.navbar-default .navbar-nav > .active > a:hover, +.navbar-default .navbar-nav > .active > a:focus { + color: @orange; + background-color: @white; +} +.navbar-default .navbar-nav > .open > a, +.navbar-default .navbar-nav > .open > a:hover, +.navbar-default .navbar-nav > .open > a:focus { + color: @orange; + background-color: @white; +} + +.navbar-default .navbar-collapse, +.navbar-default .navbar-form { + border-color: @orange +} + +.navbar-c1 { + margin-right: 0.1em; +} + +/* bs-docs-sidebar */ +/**/ +body { + position: relative; +} + +.fixed { + position: fixed; +} + +/* sidebar */ +.bs-docs-sidebar { + padding-left: 5px; + padding-right: 10px; + margin-top: 20px; + margin-bottom: 20px; +} + +/* all links */ +.bs-docs-sidebar .nav>li>a { + color: @grey; + border-left: 2px solid transparent; + padding: 4px 10px; + font-size: 1.1em; + font-weight: 400; +} + +/* nested links */ +.bs-docs-sidebar .nav .nav>li>a { + padding-top: 1px; + padding-bottom: 1px; + padding-left: 30px; + font-size: 12px; +} + +/* active & hover links */ +.bs-docs-sidebar .nav>.active>a, +.bs-docs-sidebar .nav>li>a:hover, +.bs-docs-sidebar .nav>li>a:focus { + color: @dark-blue; + text-decoration: none; + background-color: transparent; + border-left-color: @dark-blue; +} +/* all active links */ +.bs-docs-sidebar .nav>.active>a, +.bs-docs-sidebar .nav>.active:hover>a, +.bs-docs-sidebar .nav>.active:focus>a { + font-weight: 700; +} +/* nested active links */ +.bs-docs-sidebar .nav .nav>.active>a, +.bs-docs-sidebar .nav .nav>.active:hover>a, +.bs-docs-sidebar .nav .nav>.active:focus>a { + font-weight: 500; +} + +/* hide inactive nested list */ +.bs-docs-sidebar .nav ul.nav { + display: none; +} +/* show active nested list */ +.bs-docs-sidebar .nav>.active>ul.nav { + display: block; +} + +.back-to-top { + color: @grey; + border-left: 2px solid transparent; + margin-top: 10px; + padding: 4px 10px; + font-size: 1em; + font-weight: 400; + display: block; +} + +/* button */ +/**/ +.btn-c1 { + color: @dark-blue; +} +.btn-c1:hover, .btn-c1:focus, .btn-c1:active, .btn-c1.active, .open>.dropdown-toggle.btn-c1 { + color: @orange; + background: @white; +} + +.btn-xlarge { + padding: 0.5em 3em; + font-size: 1.4em; +} + +/* panel */ +/**/ +.panel-default { + border-color: @white; +} + +.panel-default .panel-heading { + background: @white; + border-color: @white; +} + +h1.panel-title { + color: @dark-blue; + font-size: 2.2em; +} +h2.panel-title { + color: @dark-blue; + font-size: 2em; +} +.h3-steps { + margin-top: 1.5em; +} + +/* text */ +/**/ +h1 { + color: @dark-blue; +} + +h2 { + color: @dark-blue; +} + +h3 { + color: @dark-blue; +} + +.h4c { + margin-top: 2em; + font-size: 1.5em; + color: @dark-blue; +} + +.ac { + color: @grey; +} \ No newline at end of file