From 7a4f6b06a4aba25a37f3e539a0eb0c48acb03ef2 Mon Sep 17 00:00:00 2001 From: somrat Date: Wed, 4 Sep 2019 17:35:48 +0600 Subject: modified main code structure --- assets/css/style.css | 412 ++++++++++++++++++++++++++++++++++++++++++--------- assets/js/script.js | 119 +++++++++++++-- 2 files changed, 446 insertions(+), 85 deletions(-) (limited to 'assets') diff --git a/assets/css/style.css b/assets/css/style.css index 109b607..4b16139 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,20 +1,15 @@ - - body { - line-height: 1.8; + line-height: 1.5; font-family: "Lato", sans-serif; -webkit-font-smoothing: antialiased; - font-size: 18px; + font-size: 17px; color: var(--text-color); background-color: var(--secondary-color); } -p, -.paragraph { +P { color: var(--text-color); - font-size: 16px; - line-height: 1.8; - font-family: "Lato", sans-serif; + font-size: 15px; } h1, @@ -103,6 +98,31 @@ h6, border-color: var(--primary-color); } +.btn-default { + color: #333 !important; + background-color: #fff !important; + border: 1px solid #ccc !important; + display: inline-block !important; + padding: 6px 12px !important; + margin-bottom: 0 !important; + font-size: 14px !important; + font-weight: 400 !important; + line-height: 1.42857143 !important; + text-align: center !important; + white-space: nowrap !important; + vertical-align: middle !important; + -ms-touch-action: manipulation !important; + touch-action: manipulation !important; + border-radius: 4px !important; +} + +.inline-button { + line-height: .8rem !important; + padding: 5px 8px !important; + pointer-events: none; + margin-top: -5px; +} + body { background-color: var(--white-color); overflow-x: hidden; @@ -132,10 +152,14 @@ body { justify-content: center; } -ol, ul { list-style-type: none; margin: 0px; + padding-left: 0; +} + +ol{ + padding-left: 20px; } img { @@ -147,6 +171,12 @@ a, a:hover, a:focus { text-decoration: none; + color: var(--primary-color); +} + +a:hover, +a:focus { + color: var(--primary-color); } a, @@ -221,7 +251,7 @@ pre { } .bg-primary { - background:var(--primary-color) !important; + background: var(--primary-color) !important; } .bg-gray { @@ -284,11 +314,15 @@ pre { margin-bottom: 100px !important; } +header.sticky-top { + z-index: 9999; +} + .zindex-1 { z-index: 1; } -.top-100{ +.top-100 { top: 100px; } @@ -300,9 +334,15 @@ pre { padding: 0; } +.navbar-brand img { + max-width: 100px; + margin-bottom: 0; +} + .navbar .nav-item .nav-link { text-transform: uppercase; padding: 18px 15px !important; + font-size: 15px; } .navbar .dropdown:hover .dropdown-menu { @@ -389,21 +429,20 @@ pre { } -.banner p{ +.banner p { font-size: 20px; opacity: .8; } -.banner .text-dark{ +.banner .nav-link.text-dark { color: var(--white-color) !important; } -.banner .text-dark:hover -{ +.banner .nav-link.text-dark:hover { color: var(--white-color) !important; } -.banner .navbar-brand{ +.banner .navbar-brand { color: var(--white-color) !important; } @@ -486,8 +525,8 @@ textarea.form-control { transition: .3s ease; } -.shadow-bottom{ - box-shadow: 0 1px 0 rgba(12,13,14,0.1), 0 1px 6px rgba(59,64,69,0.1); +.shadow-bottom { + box-shadow: 0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 6px rgba(59, 64, 69, 0.1); } .shadow:hover, @@ -496,52 +535,39 @@ textarea.form-control { } /* single page */ -h2 { - margin-bottom: 30px; -} -h3 { - margin-top: 50px; - margin-bottom: 15px; -} - -h4 { - margin-bottom: 15px; +.content * { + margin-bottom: 20px; } -img { - width: 100%; +.content img { + max-width: 100%; height: auto; - margin-bottom: 15px; + margin: 0 auto 15px; + display: block; + text-align: center; } -ul { +.content ul { padding-left: 0; margin-bottom: 20px; } -ul li a { - color: var(--text-color-dark); - display: block; - font-size: 15px; - font-weight: 600; - padding: 10px 0; +.content ul li { + padding-left: 20px; + position: relative; } -.post-meta { - color: var(--text-color); - font-style: italic; - font-size: 14px; - font-weight: bold; -} - -blockquote { - font-size: 20px !important; - color: var(--text-color-dark); - padding: 10px 40px; - border-left: 2px solid var(--primary-color); - margin: 40px 0; - font-weight: bold; +.content ul li::before { + position: absolute; + content: ''; + height: 8px; + width: 8px; + border-radius: 50%; + background: var(--primary-color); + opacity: .3; + left: 0; + top: 8px; } .list-styled li { @@ -561,6 +587,27 @@ blockquote { top: 18px; } +.post-meta { + color: var(--text-color); + font-style: italic; + font-size: 14px; + font-weight: bold; +} + +blockquote { + font-size: 20px !important; + color: var(--text-color-dark); + padding: 20px 40px; + border-left: 2px solid var(--primary-color); + margin: 40px 0; + font-weight: bold; + background: #f9f9f9; +} + +blockquote p{ + margin-bottom: 0 !important; +} + .pagination { justify-content: space-between; } @@ -569,48 +616,265 @@ blockquote { color: var(--primary-color); } -.pagination i{ - font-size: 12px; - line-height: 2.9; +.pagination i { + font-size: 15px; + line-height: 1.8; +} + +#accordion i { + font-size: 14px; + line-height: 2; +} + +table { + text-align: left; + width: 100%; + max-width: 100%; + margin-bottom: 1rem; + border: 1px solid #dee2e6; +} + +table td, +table th { + padding: .75rem; + vertical-align: top; + border: 1px solid #dee2e6; + margin-bottom: 0; +} + +thead { + background: #ececec; + margin-bottom: 0; +} + +tbody { + background: #f8f8f8; + margin-bottom: 0; +} + +.notices { + margin: 2rem 0; + position: relative; } -.sidebar-menu li { +.notices p { + padding: 10px; +} + +.notices p::before { + position: absolute; + top: 2px; + color: #fff; + font-family: "themify"; + font-weight: 900; + content: "\e717"; + left: 10px; +} + +.notices.note p { + border-top: 30px solid #6ab0de; + background: #e7f2fa; +} + +.notices.note p::after { + content: 'Note'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; +} + + +.notices.tip p { + border-top: 30px solid #78C578; + background: #E6F9E6; +} + +.notices.tip p::after { + content: 'Tip'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; +} + +.notices.info p { + border-top: 30px solid #F0B37E; + background: #FFF2DB; +} + +.notices.info p::after { + content: 'Info'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; +} + + +.notices.warning p { + border-top: 30px solid #E06F6C; + background: #FAE2E2; +} + +.notices.warning p::after { + content: 'Warning'; + position: absolute; + top: 2px; + color: #fff; + left: 2rem; +} + +/* /single page */ + +/* side list */ +.sidelist { display: none; } -.sub-menu li { +.sidelist.parent { display: block; } -.sub-menu li a { - font-size: 15px !important; - color: var(--text-color); +.sidelist.parent::before { + display: none; +} + +.sidelist.parent.active::before { + display: block; +} + +.sidelist li.sidelist { + display: block; +} + +.sidelist li.sidelist.active a { + color: var(--primary-color); +} + +.page-list li a { + display: none; +} + +.page-list li ul a { + display: block; } -.sub-menu li.active a{ +.sidelist li a { color: var(--text-color-dark); + display: block; + font-size: 15px; + font-weight: 500; + padding: 10px 0; + line-height: 1.4; +} + +p:empty, +p a:empty { + display: none !important; } -li.parent::before { +#body .nav-tabs { + position: unset; + width: unset; +} + +.tab-content>.tab-pane { display: none; } -li.parent a { - font-size: 20px; +.tab-pane { + padding: 3px 0px; +} + +.tab-pane { + padding: 3px 0px; +} + +.tab-content>.active { + display: block; +} + +.nav-tabs { + color: #0f0f0f; + list-style-type: none; + margin: 0 !important; + padding: 0; + overflow: hidden; +} + +.nav-tabs>li { + color: #0f0f0f; + float: left; + padding: 0 !important; +} + +.nav-tabs>li::before{ + display: none; } -#accordion i{ +.nav-tabs>li>a { + display: block; + padding: 5px 10px; font-size: 14px; - line-height: 2; + margin-bottom: 0 !important; } -/* /single page */ +pre { + display: block; + padding: 9.5px; + margin: 10px 0px 10px; +} + +code{ + margin-bottom: 0 !important; + font-size: 100%; +} + +.code-tabs { + margin: 10px 0px 0px 00px; +} + +.nav-tabs>li.active>a, +.nav-tabs>li>a:hover { + color: #000 !important; + background: transparent; +} + +.tab-content .nav-tabs { + display: none !important; +} + +.nav-tabs { + padding-left: 0 !important; +} + +.nav-tabs li { + list-style-type: none; + border: 1px solid rgb(212, 212, 212); + border-radius: 4px 4px 0 0; + border-bottom: 0; +} -/* elements */ -.elements .btn{ - margin: 10px; - margin-left: 0; +.tab-pane { + border: 1px solid rgb(212, 212, 212); + padding: 20px; + background: rgb(253, 253, 253); +} + +.back-btn { + position: relative; } -/* /elements */ -/*# sourceMappingURL=maps/style.css.map */ \ No newline at end of file +.back-btn::before { + position: absolute; + content: "\1f850"; + font-size: 25px; + height: 30px; + width: 20px; + background: #fff; + color: inherit; + z-index: 1; + left: -10px; + top: -3px; +} \ No newline at end of file diff --git a/assets/js/script.js b/assets/js/script.js index d2fd3b4..ca690f7 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,19 +1,116 @@ (function ($) { - 'use strict'; + 'use strict'; - // Background-images - $('[data-background]').each(function () { - $(this).css({ - 'background-image': 'url(' + $(this).data('background') + ')' - }); + // Background-images + $('[data-background]').each(function () { + $(this).css({ + 'background-image': 'url(' + $(this).data('background') + ')' }); + }); - // Accordions - $('.collapse').on('shown.bs.collapse', function () { - $(this).parent().find('.ti-plus').removeClass('ti-plus').addClass('ti-minus'); - }).on('hidden.bs.collapse', function () { - $(this).parent().find('.ti-minus').removeClass('ti-minus').addClass('ti-plus'); + // Accordions + $('.collapse').on('shown.bs.collapse', function () { + $(this).parent().find('.ti-plus').removeClass('ti-plus').addClass('ti-minus'); + }).on('hidden.bs.collapse', function () { + $(this).parent().find('.ti-minus').removeClass('ti-minus').addClass('ti-plus'); + }); + + + // match height + $(function () { + $('.match-height').matchHeight({ + byRow: true, + property: 'height', + target: null, + remove: false }); + }); + + // Get Parameters from some url + var getUrlParameter = function getUrlParameter(sPageURL) { + var url = sPageURL.split('?'); + var obj = {}; + if (url.length == 2) { + var sURLVariables = url[1].split('&'), + sParameterName, + i; + for (i = 0; i < sURLVariables.length; i++) { + sParameterName = sURLVariables[i].split('='); + obj[sParameterName[0]] = sParameterName[1]; + } + return obj; + } else { + return undefined; + } + }; + + // Execute actions on images generated from Markdown pages + var images = $(".content img").not(".inline"); + // Wrap image inside a featherlight (to get a full size view in a popup) + images.wrap(function () { + var image = $(this); + if (!image.parent("a").length) { + return ""; + } + }); + + // Change styles, depending on parameters set to the image + images.each(function (index) { + var image = $(this) + var o = getUrlParameter(image[0].src); + if (typeof o !== "undefined") { + var h = o["height"]; + var w = o["width"]; + var c = o["classes"]; + image.css("width", function () { + if (typeof w !== "undefined") { + return w; + } else { + return "auto"; + } + }); + image.css("height", function () { + if (typeof h !== "undefined") { + return h; + } else { + return "auto"; + } + }); + if (typeof c !== "undefined") { + var classes = c.split(','); + for (i = 0; i < classes.length; i++) { + image.addClass(classes[i]); + } + } + } + }); + + + // tab + $('.tab-content').find('.tab-pane').each(function (idx, item) { + var navTabs = $(this).closest('.code-tabs').find('.nav-tabs'), + title = $(this).attr('title'); + navTabs.append(''); + }); + + $('.code-tabs ul.nav-tabs').each(function () { + $(this).find("li:first").addClass('active'); + }) + + $('.code-tabs .tab-content').each(function () { + $(this).find("div:first").addClass('active'); + }); + + $('.nav-tabs a').click(function (e) { + e.preventDefault(); + var tab = $(this).parent(), + tabIndex = tab.index(), + tabPanel = $(this).closest('.code-tabs'), + tabPane = tabPanel.find('.tab-pane').eq(tabIndex); + tabPanel.find('.active').removeClass('active'); + tab.addClass('active'); + tabPane.addClass('active'); + }); })(jQuery); \ No newline at end of file -- cgit v1.2.3