From: Gerardo Pias Date: Mon, 27 May 2019 18:02:33 +0000 (-0300) Subject: Add styles and design following the guidelines for the FORT project. X-Git-Tag: v0.0.2~20 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=b8a1583768b4b12012d35addc09e87840e32fb67;p=thirdparty%2FFORT-validator.git Add styles and design following the guidelines for the FORT project. --- diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 8dbc985c..b42c00b6 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -1,21 +1,97 @@ - + {{ page.title }} + + + + + + + + + + + + +

+ Warning: This documentation is still under construction. It's too succint for comfort still. +

+ + {{ content }} +

+ + + +

+ + + + + -

- Warning: This documentation is still under construction. It's too succint for comfort still. -

+ + -{{ content }} diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html new file mode 100644 index 00000000..95035092 --- /dev/null +++ b/docs/_layouts/home.html @@ -0,0 +1,97 @@ + + + + + {{ page.title }} + + + + + + + + + + + + + + + + + + + +

+ Warning: This documentation is still under construction. It's too succint for comfort still. +

+ + {{ content }} +

+ + + +

+ + + + + + + + + + + + diff --git a/docs/css/fort_project.css b/docs/css/fort_project.css new file mode 100644 index 00000000..7d268427 --- /dev/null +++ b/docs/css/fort_project.css @@ -0,0 +1,401 @@ +@import url("https://fonts.googleapis.com/css?family=Roboto:400,700,900"); +.bg-grey { + background: #f5f5f5; } + +.bg-blue-dark { + background: #10242d; } + +ul, +ul li { + margin: 0; + padding: 0; + list-style-type: none; } +ul.list-bullet li, +ul li.list-bullet li { + margin-bottom: 5px; } +ul.list-bullet li:before, +ul li.list-bullet li:before { + content: "â¢"; + color: #3389ff; + margin-right: 5px; + margin-left: 10px; + font-size: 16px; } + +.text-white, +.text-white * { + color: white; } + +.text-blue-light, +.text-blue-light * { + color: #3389ff !important; } + +.text-blue-dark, +.text-blue-dark * { + color: #10242d !important; } + +figure img { + max-width: 100%; } + +* { + color: white; + font-family: "Roboto", sans-serif; +} + +h1, h2, h3, h4, +h1 *, h2 *, h3 *, h4 * { + color: white; + font-weight: 300; + margin-bottom: .5rem;} + +h2.text-blue-light, h2.text-blue-light * { + font-size: 4.4rem; } + +strong { + font-weight: 700; } + +.text-high, +.text-high * { + font-size: 1.38rem; + font-weight: 300; + line-height: normal; } +@media (max-width: 768px) { + .text-high, + .text-high * { + font-size: 1rem; } } + +.text-high { + margin: 40px 0; } +@media (max-width: 768px) { + .text-high { + margin: 20px 0; } } + +@media (max-width: 1024px) { + .text-right { + text-align: left !important; } } + +a , a*{ + color: #3389ff; + transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; } +a:hover, a:focus { + text-decoration: none; } + +body { + background: #152c38; + padding-top: 120px; + margin: 0; + margin-bottom: 120px;} +@media (max-width: 768px) { + body { + padding-top: 60px; } } + +.site-header { + position: fixed; + top: 0; + right: 0; + height: 120px; + width: 100%; + background-color: #152c38; + transition: all 0.5s ease; + -moz-transition: all 0.5s ease; + -ms-transition: all 0.5s ease; + -webkit-transition: all 0.5s ease; + z-index: 2; + padding: 40px 0; } +.site-header .logo a { + align-items: flex-end; } +.site-header .logo a img { + margin-right: 20px; + /*width: 150px; }*/ + height: 70px;} +.site-header .logo a h1 { + margin: 0; } +.site-header.small-header { + background: #10242d; + height: 80px; + padding: 10px 0; } +.site-header.small-header .logo a img { + /*width: 100px;*/ + height: 60px;} +.site-header.small-header .small-nav { + margin-bottom: 0; } +@media (max-width: 768px) { + .site-header { + background: #10242d; + height: 80px; + padding: 20px 0; } + .site-header .logo a img { + /*width: 100px; }*/ + height: 60px;} + .site-header .small-nav { + margin-bottom: 0; } + .site-header.small-header { + padding: 20px 0; } } + +.site-footer { + position: absolute; + bottom: 0; + width: 100%; + height: 120px; + background: #09181e; + padding: 30px 0; } +.site-footer p { + margin: 0; } + +.site-section { + padding: 80px 0; } +@media (max-width: 768px) { + .site-section { + padding: 40px 0; } } + +.site-aside { + background: #10242d; + padding: 40px; +} +.site-aside a { + color: white; } +@media (min-width: 1024px) { + .site-aside{position: fixed;} +} +.box { + border: 3px solid #3389ff; + border-radius: 15px; + -moz-border-radius: 15px; + -ms-border-radius: 15px; + -webkit-border-radius: 15px; + height: 320px; + padding: 40px; } +.box h3, .box h3 * { + font-size: 14px; + font-weight: 700; + text-transform: uppercase; } +.box h4, .box h4 * { + color: #3389ff; } +@media (max-width: 1024px) { + .box { + border: none; + border-bottom: 3px solid #3389ff; + border-radius: 0; + padding: 0 0 20px 0; + height: auto; + margin: 20px 0; } + .box.last { + border: none; + padding: 0; } } + +.site-nav ul { + display: flex; } +.site-nav ul li a { + color: white; + font-size: 16px; + font-weight: 400; + letter-spacing: 1px; + padding: 0 15px; + text-transform: uppercase; } +.site-nav ul li a:hover, .site-nav ul li a:focus { + color: #3389ff; } +.site-nav ul li a.active-item { + position: relative; } +.site-nav ul li a.active-item:after { + background: #3389ff; + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + height: 2px; + width: 30px; + transform: translateX(-50%); } + +.small-nav { + margin-right: 10px; + margin-bottom: 30px; } +.small-nav ul li a, .small-nav ul li a * { + color: rgba(245, 245, 245, 0.5); + font-size: 12px; + font-weight: 300; + padding: 0 3px; } +.small-nav ul li a.active-item, .small-nav ul li a *.active-item { + color: #3389ff; } +.small-nav ul li a.active-item:after, .small-nav ul li a *.active-item:after { + display: none; } + +@media (max-width: 1024px) { + .navigation { + display: none; + background: #10242d; + padding: 40px; + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 2; } + .navigation ul { + flex-direction: column; } + .navigation ul li { + border-bottom: 1px solid rgba(51, 137, 255, 0.2); } + .navigation ul li a { + display: block; + font-size: 18px; + text-align: center; + padding: 20px 0; } + .navigation ul li a.active-item { + color: #3389ff; } + .navigation ul li a.active-item:after { + display: none; } + .navigation ul li:last-child { + border: none; } + .navigation .small-nav ul { + flex-direction: row; } + .navigation .small-nav ul li { + border: none; } + .navigation .small-nav ul li a { + font-size: 12px; + padding: 0 3px; } } + +.menu-open { + display: none; } +@media (max-width: 1024px) { + .menu-open { + display: block; + cursor: pointer; + position: fixed; + top: 35px; + right: 20px; + height: 25px; + width: 25px; + transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); + transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -ms-transition: 0.5s ease-in-out; + -webkit-transition: 0.5s ease-in-out; + z-index: 20; } + .menu-open span { + background: white; + display: block; + opacity: 1; + position: absolute; + top: 0; + left: 0; + height: 3px; + width: 100%; + transition: 0.25s ease-in-out; + -moz-transition: 0.25s ease-in-out; + -ms-transition: 0.25s ease-in-out; + -webkit-transition: 0.25s ease-in-out; + transform: rotate(0deg); + -moz-transform: rotate(0deg); + -ms-transform: rotate(0deg); + -webkit-transform: rotate(0deg); } + .menu-open span:nth-child(1), .menu-open span:nth-child(2), .menu-open span:nth-child(3) { + transform-origin: left center; + -moz-transform-origin: left center; + -ms-transform-origin: left center; + -webkit-transform-origin: left center; } + .menu-open span:nth-child(1) { + top: 0px; } + .menu-open span:nth-child(2) { + top: 6px; } + .menu-open span:nth-child(3) { + top: 12px; } + .menu-open span:hover, .menu-open span:focus { + background: #006cff; } + .menu-open.clic span:nth-child(1) { + transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + position: absolute; + top: 0; + left: 0; } + .menu-open.clic span:nth-child(2) { + width: 0%; + opacity: 0; } + .menu-open.clic span:nth-child(3) { + transform: rotate(-45deg); + -moz-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + position: absolute; + top: 17px; + left: 0; } } + +.container { + max-width: 1250px; + padding-left: 30px; + padding-right: 30px; } + +.btn { + background: #66d394; + border-radius: 30px; + -moz-border-radius: 30px; + -ms-border-radius: 30px; + -webkit-border-radius: 30px; + color: white; + padding: 10px 30px; + text-transform: uppercase; + font-size: 13px; + font-weight: 700; + letter-spacing: 1px; } +.btn:hover, .btn:focus { + background: #3ec878; + color: white; } +.btn * { + font-size: 13px; + font-weight: 700; + text-transform: uppercase; } + +.i-black { + background: #5b5b5b; } + +.i-white { + background: white; } + +.sponsor{ + display: flex; + align-items: center;} + +.sponsor a img{ + max-height: 100px; + max-width: 224px; +} + +html { + min-height: 100%; + position: relative; +} + +footer figure img { + max-width: 22rem; } + +.alert-fort { + color: #383d41; + background-color: #b1b3b7; + border-color: #d6d8db; +} + +.card-team { + background-color: unset; +} + +ul.list-bullet-top > li, +ul li.list-bullet-top >li { + margin-bottom: 10px; } +ul.list-bullet-top > li:before, +ul li.list-bullet-top > li:before { + content: "o"; + color: #3389ff; + margin-right: 5px; + font-size: 16px; } + +.about-section{ + margin-top: -120px; + padding-top: 120px; +} + +/*# sourceMappingURL=app.css.map */ diff --git a/docs/css/fort_validator.css b/docs/css/fort_validator.css new file mode 100644 index 00000000..7af2484f --- /dev/null +++ b/docs/css/fort_validator.css @@ -0,0 +1,46 @@ +/** { + font-size: 1rem; +}*/ + +body { + margin-bottom: 80px; +} + +.site-footer { + height: 80px; + padding: 20px 0; } + + +blockquote { + background-color: #b1b3b7; + margin: 0 3em 3em 3em; +} + +code, code span { + color: white; + font-family: monospace; + font-size: inherit; + background-color: unset; +} + +pre code{ + color: white; + background-color: black; + font-size: 1rem; +} +pre code.terminal { + color: white; +} + +.language-bash > .nb { + color: white; +} + +p img { + background-color: #b1b3b7; +} + +.site-footer a img { + margin: auto; + max-height: 40px; +} \ No newline at end of file diff --git a/docs/img/GitHub-Mark-Light-120px-plus.png b/docs/img/GitHub-Mark-Light-120px-plus.png new file mode 100644 index 00000000..192846a1 Binary files /dev/null and b/docs/img/GitHub-Mark-Light-120px-plus.png differ diff --git a/docs/img/logo_validador_fort.svg b/docs/img/logo_validador_fort.svg new file mode 100644 index 00000000..1883fb35 --- /dev/null +++ b/docs/img/logo_validador_fort.svg @@ -0,0 +1,56 @@ + + + diff --git a/docs/index.md b/docs/index.md index 35ac7974..0037a55e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,5 +1,6 @@ --- title: Home +layout: home --- # {{ page.title }} diff --git a/docs/js/metodos.js b/docs/js/metodos.js new file mode 100644 index 00000000..026bc157 --- /dev/null +++ b/docs/js/metodos.js @@ -0,0 +1,59 @@ +$(document).ready(function () { + + // Show nav + overlay-content + $('.menu-open').click(function () { + if ($(this).hasClass('clic')) { + closeNavigation(); + } else { + openNavigation(); + } + $(this).toggleClass('clic'); + }); + + // $('.overlay-content').click(function() { + // closeNavigation(); + // }); + + // $('.menu-close').click(function() { + // closeNav(); + // }); + + function openNavigation() { + // $('body').addClass('nav-fixed'); + $('.navigation').fadeIn(); + // $('.js-overlay').fadeIn(); + } + + function closeNavigation() { + // $('body').removeClass('nav-fixed'); + $('.navigation').fadeOut(); + // $('.js-overlay').fadeOut(); + } + + // Header fixed + $(function () { + var shrinkHeader = 80; + $(window).scroll(function () { + var scroll = getCurrentScroll(); + if (scroll >= shrinkHeader) { + $('.site-header').addClass('small-header'); + } else { + $('.site-header').removeClass('small-header'); + } + }); + }); + + function getCurrentScroll() { + return window.pageYOffset || document.documentElement.scrollTop; + } + + $(document).ready(function() { var pathname = window.location.pathname; + pathname = pathname.replace('/FORT-validator/doc', '.'); + pathname = pathname.replace('/FORT-validator', '.'); + + //get the path of current page + $('.site-nav > ul > li > a[href="'+pathname+'"]').addClass('active-item'); + }) + + +});