├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── 404.php ├── LICENSE ├── README.md ├── README.txt ├── archive-product.php ├── archive.php ├── assets ├── css │ ├── bootstrap.min.css │ ├── fontawesome-all.min.css │ └── index.html ├── images │ ├── bg_circuit.png │ ├── bg_circuit_full.png │ ├── bg_circuit_lg.png │ ├── bg_circuit_md.png │ ├── bg_circuit_mx.png │ ├── bg_circuit_sm.png │ ├── bg_circuit_xl.png │ ├── index.html │ └── logo_githuber_3d.png ├── index.html ├── js │ ├── bootstrap-toc.min.js │ ├── bootstrap.bundle.min.js │ └── index.html └── webfonts │ ├── fa-brands-400.eot │ ├── fa-brands-400.svg │ ├── fa-brands-400.ttf │ ├── fa-brands-400.woff │ ├── fa-brands-400.woff2 │ ├── fa-regular-400.eot │ ├── fa-regular-400.svg │ ├── fa-regular-400.ttf │ ├── fa-regular-400.woff │ ├── fa-regular-400.woff2 │ ├── fa-solid-900.eot │ ├── fa-solid-900.svg │ ├── fa-solid-900.ttf │ ├── fa-solid-900.woff │ └── fa-solid-900.woff2 ├── author.php ├── category.php ├── comments.php ├── composer.json ├── custom-landing-page-full.php ├── custom-landing-page-simple.php ├── editor-style.css ├── footer.php ├── functions.php ├── header.php ├── inc ├── assets │ ├── css │ │ ├── index.html │ │ ├── mynote-alpha-color-picker.css │ │ ├── mynote-image-radio.css │ │ └── mynote-toggle.css │ ├── images │ │ ├── index.html │ │ ├── layout_1cols.png │ │ ├── layout_2cols.png │ │ ├── layout_3cols.png │ │ ├── layout_footer_1.png │ │ ├── layout_footer_2.png │ │ ├── layout_footer_3.png │ │ ├── layout_footer_4.png │ │ ├── layout_footer_5.png │ │ ├── layout_footer_6.png │ │ ├── layout_footer_7.png │ │ ├── layout_sidebar_left.png │ │ ├── layout_sidebar_right.png │ │ └── mynote-transparency-grid.png │ ├── index.html │ ├── js │ │ ├── index.html │ │ ├── mynote-alpha-color-picker.js │ │ └── mynote-image-radio.js │ └── scss │ │ ├── config.rb │ │ ├── index.html │ │ ├── mynote-alpha-color-picker.scss │ │ ├── mynote-image-radio.scss │ │ └── mynote-toggle.scss ├── classes │ ├── customizer │ │ ├── class-customize-alpha-color-control.php │ │ ├── class-customize-content-control.php │ │ ├── class-customize-image-radio-control.php │ │ ├── class-customize-toggle-control.php │ │ └── index.html │ ├── index.html │ ├── navbar │ │ ├── class-mynote-walker.php │ │ └── index.html │ └── widgets │ │ └── class-mynote-widget-toc.php ├── customer │ ├── about.php │ ├── homepage.php │ ├── index.html │ ├── layout.php │ ├── navbar.php │ ├── post-card.php │ ├── post-page.php │ └── progress-bar.php ├── customize-css.php ├── customizer.php ├── icon-functions.php ├── index.html ├── template-functions.php ├── template-hook-functions.php ├── template-hooks.php └── template-tags.php ├── index.php ├── languages ├── de_DE.mo ├── de_DE.po ├── fr_FR.mo ├── fr_FR.po ├── ja.mo ├── ja.po ├── mynote.pot ├── pt_BR.mo └── pt_BR.po ├── mynote-child ├── functions.php ├── screenshot.png └── style.css ├── page.php ├── phpcs.xml ├── screenshot.png ├── scss ├── _bootstrap.scss ├── _breadcrumb.scss ├── _buttons.scss ├── _comment.scss ├── _footer.scss ├── _functions.scss ├── _header.scss ├── _home.scss ├── _labels.scss ├── _main.scss ├── _markdown-theme-github.scss ├── _misc.scss ├── _page-progress.scss ├── _responsive.scss ├── _shortcode.scss ├── _sticky-top.scss ├── _table-of-content.scss ├── _the-author-card.scss ├── _typography.scss ├── _variables.scss ├── _video.scss ├── _widget.scss ├── _wordpress.scss ├── config.rb ├── editor-style.scss ├── index.html └── style.scss ├── search.php ├── searchform.php ├── sidebar-archive.php ├── sidebar-home.php ├── single-product.php ├── single.php ├── style.css ├── tag.php └── template-parts ├── archive.php ├── content-none.php ├── index.html ├── loop.php ├── page-landing.php └── pagination.php /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | 5 | --- 6 | 7 | **Describe the bug** 8 | A clear and concise description of what the bug is. 9 | 10 | **To Reproduce** 11 | Steps to reproduce the behavior: 12 | 1. Go to '...' 13 | 2. Click on '....' 14 | 3. Scroll down to '....' 15 | 4. See error 16 | 17 | **Expected behavior** 18 | A clear and concise description of what you expected to happen. 19 | 20 | **Screenshots** 21 | If applicable, add screenshots to help explain your problem. 22 | 23 | **Desktop (please complete the following information):** 24 | - OS: [e.g. iOS] 25 | - Browser [e.g. chrome, safari] 26 | - Version [e.g. 22] 27 | 28 | **Smartphone (please complete the following information):** 29 | - Device: [e.g. iPhone6] 30 | - OS: [e.g. iOS8.1] 31 | - Browser [e.g. stock browser, safari] 32 | - Version [e.g. 22] 33 | 34 | **Additional context** 35 | Add any other context about the problem here. 36 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | 5 | --- 6 | 7 | **Is your feature request related to a problem? Please describe.** 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 9 | 10 | **Describe the solution you'd like** 11 | A clear and concise description of what you want to happen. 12 | 13 | **Describe alternatives you've considered** 14 | A clear and concise description of any alternative solutions or features you've considered. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.rej 3 | 4 | # IDE Files 5 | #------------------------- 6 | 7 | /nbproject/ 8 | .idea/* 9 | 10 | ## Sublime Text cache files 11 | 12 | *.tmlanguage.cache 13 | *.tmPreferences.cache 14 | *.stTheme.cache 15 | *.sublime-workspace 16 | *.sublime-project 17 | /tests/tests/ 18 | /tests/results/ 19 | 20 | # Visual Studio Code 21 | 22 | .vscode/ 23 | .vscode/* 24 | 25 | !.gitignore -------------------------------------------------------------------------------- /404.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
19 |
20 |

21 | 22 |

23 |
24 |
25 |
26 |
27 |
28 |

29 | 30 | 31 |

38 |

39 |
40 |
41 |
42 | 43 | Themes and click the 'Add New' button. 19 | 2. Type in Mynote in the search form and press the 'Enter' key on your keyboard. 20 | 3. Click on the 'Activate' button to use your new theme right away. 21 | 4. Navigate to Appearance > Customize in your admin panel and customize to taste. 22 | 23 | == Copyright == 24 | 25 | Mynote WordPress Theme, Copyright 2018 TerryL.in 26 | Mynote is distributed under the terms of the GNU GPL 27 | 28 | This program is free software: you can redistribute it and/or modify 29 | it under the terms of the GNU General Public License as published by 30 | the Free Software Foundation, either version 3 of the License, or 31 | (at your option) any later version. 32 | 33 | This program is distributed in the hope that it will be useful, 34 | but WITHOUT ANY WARRANTY; without even the implied warranty of 35 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 36 | GNU General Public License for more details. 37 | 38 | Mynote bundles the following third-party resources: 39 | 40 | Font Awesome icons, Copyright Dave Gandy 41 | License: SIL Open Font License, version 1.1. 42 | Source: http://fontawesome.io/ 43 | 44 | Bootstrap, Copyright 2011-2018 Twitter, Inc. 45 | License: The MIT License (MIT) 46 | Source: https://github.com/twbs/bootstrap 47 | 48 | 49 | Customize_Alpha_Color_Control, copyright BraadMartin 50 | License: GPL 51 | Source: https://github.com/BraadMartin/components/tree/master/customizer/alpha-color-picker 52 | 53 | CSS Button Effect, Copyright Simurai 54 | License: The MIT License (MIT) 55 | Source: https://codepen.io/simurai/pen/DwJdq 56 | 57 | Default header background, Copyright kuba 58 | License: Creative Commons CC0 license. 59 | Source: https://openclipart.org/detail/99217/electronic-circuit 60 | 61 | Image: Screenshot 62 | License: Creative Commons CC0 license. 63 | Source: http://pickupimage.com/free-photos/Aurora-Borealis-Northern-Lights-above-coastal-sea/ 64 | Source: https://stocksnap.io/photo/PX6JTHBNDW 65 | Source: https://stocksnap.io/photo/NT1Q3GZVFI 66 | Source: https://stocksnap.io/photo/9XRMMD2VPW 67 | 68 | == Changelog == 69 | 70 | = 1.0.9 = 71 | 72 | - Change its name from Githuber to Mynote because of possible trademark issue. 73 | - Reorganize theme files - refer to the official theme file structure. 74 | - Strengthen theme customizer. 75 | 76 | = 1.0.12 = 77 | 78 | - Fix issues to pass the theme review. 79 | 80 | = 1.1.0 = 81 | 82 | - Add a `Go to Top` floated button. It will be displayed when user scrolling down. 83 | - Add a `Go to next screen` floated button. It will be displayed while browsing in RWD mode. (Homepage) 84 | - The layout of post page will become one column when user doesn't use widgets in sidebar area. 85 | - Fix navbar transparent background issue while browsing in RWD mode. 86 | 87 | = 1.2.0 = 88 | 89 | - User is now able to choose preferred layout in Customizer. 90 | - Add customizer settings: post card. 91 | - Add 2 widget areas: homepage sidebar and archive sidebar. 92 | - Add theme suport: site logo (180x60). It will be displayed on navbar. 93 | 94 | = 1.2.1 = 95 | 96 | - Fix wrong setting name in customizer. 97 | 98 | = 1.2.2 = 99 | 100 | - Add new customizer setting section: Post page. 101 | 102 | = 1.3.0 = 103 | 104 | - Improve customizer: change radio to toggle. 105 | - Fix an overflow issue in homepage intro section (RWD). 106 | - Reorganize cusomizer files structure. 107 | - Reorganize static asset files structure. 108 | - Add new settings in cusomizer: RWD switcher. 109 | - Fix other little CSS issues. 110 | 111 | = 1.3.1 = 112 | 113 | - Fix issue #5 - pagination not working in static front page. 114 | - Adjust CSS for homepage in RWD. 115 | - Add support for WooCommerce. 116 | 117 | = 1.3.2 = 118 | 119 | - Add a new customizer setting: Post card - border. 120 | - Fix issue #6: Firefox: progress bar almost invisible. 121 | - Fix issue #7 - Compatible issue in the child theme. 122 | - Fix issue #8: Post tags don't adjust to container div. 123 | 124 | = 1.3.3 = 125 | 126 | - Fix issue #11 127 | - Improve footer layout. 128 | 129 | = 1.3.4 = 130 | 131 | - Add a customizer setting - elements adjustment in footer section. 132 | 133 | = 1.3.5 = 134 | 135 | - Improve footer menu in RWD. 136 | - Add new customizer setting for social icon sizes. 137 | 138 | = 1.3.6 = 139 | 140 | - Feedback #14: Add Portuguese translation - thanks for @mauromascarenhas 141 | 142 | = 1.3.7 = 143 | 144 | - Feedback #17: Add German translation - thanks for @Pandiora 145 | 146 | = 1.4.0 = 147 | 148 | - Feature request #18: Wrap template functions for child theme. 149 | 150 | = 1.4.1 = 151 | 152 | - Issue #20 - Fix background image position when resolution > 1920. 153 | 154 | = 1.4.2 = 155 | 156 | - Feedback #23: Add French translation - thanks for @quentin7b 157 | 158 | = 1.4.3 = 159 | 160 | - Feedback #24: Make thumbnail in homepage clickable. 161 | - Feedback #25: Update French translation - thanks for @quentin7b 162 | 163 | = 1.5.0 = 164 | 165 | - Add support for the new theme hook `wp_body_open` since WordPress 5.2 166 | 167 | = 1.5.1 = 168 | 169 | - Fix CSS conflics with highlight.js JavaScript library. 170 | 171 | = 1.6.0 = 172 | 173 | - Add some settings about adjusting the color of menu toggler in responsive view. 174 | - Add some settings about search bar on navigation bar, including input text color, background color and size. 175 | - Add a setting about gradient mask on post card. 176 | 177 | = 1.6.1 = 178 | 179 | - Fix CSS font setting. 180 | 181 | = 1.6.2 = 182 | 183 | - Fix HTML unclosed tag in homepage. 184 | 185 | = 1.6.3 = 186 | 187 | - Fix missing of WooCommerce support. 188 | 189 | = 2.0.0 = 190 | 191 | - Add 35 built-in hooks. 192 | - Add Sticky TOC widget. 193 | 194 | = 2.0.1 = 195 | 196 | - Fix a bug in homepage. 197 | 198 | = 2.0.4 = 199 | 200 | - Test with PHP 8.2.5 and WordPress 6.2.2 201 | - Fix widget style for WordPress 6. 202 | - Fix coding style. 203 | - Add Japanese translation. -------------------------------------------------------------------------------- /archive-product.php: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 |
20 |
21 |

22 | 23 |

24 |
25 |
26 | 27 |
28 |
29 |
30 |
31 | 32 | 58 | 59 |
60 |
61 |
62 |
63 | 64 | 17 | 18 |
19 |
20 |

21 | 22 |

23 |
24 |
25 | 26 | 34 | 35 |
36 | 37 |
38 | 39 | 0&&(r+="-"+n),!document.getElementById(r))return r}},generateAnchor:function(e){if(e.id)return e.id;var t=this.generateUniqueId(e);return e.id=t,t},createNavList:function(){return e('')},createChildNavList:function(e){var t=this.createNavList();return e.append(t),t},generateNavEl:function(t,n){var r=e('');r.attr("href","#"+t),r.text(n);var a=e("
  • ");return a.append(r),a},generateNavItem:function(t){var n=this.generateAnchor(t),r=e(t),a=r.data("toc-text")||r.text();return this.generateNavEl(n,a)},getTopLevel:function(e){for(var t=1;t<=6;t++){var n=this.findOrFilter(e,"h"+t);if(n.length>1)return t}return 1},getHeadings:function(e,t){var n="h"+t,r=t+1,a="h"+r;return this.findOrFilter(e,n+","+a)},getNavLevel:function(e){return parseInt(e.tagName.charAt(1),10)},populateNav:function(e,t,n){var r,a=e,i=this;n.each(function(n,o){var s=i.generateNavItem(o),u=i.getNavLevel(o);u===t?a=e:r&&a===e&&(a=i.createChildNavList(r)),a.append(s),r=s})},parseOps:function(t){var n;return n=t.jquery?{$nav:t}:t,n.$scope=n.$scope||e(document.body),n}},init:function(e){e=this.helpers.parseOps(e),e.$nav.attr("data-toggle","toc");var t=this.helpers.createChildNavList(e.$nav),n=this.helpers.getTopLevel(e.$scope),r=this.helpers.getHeadings(e.$scope,n);this.helpers.populateNav(t,n,r)}},e(function(){e('nav[data-toggle="toc"]').each(function(t,n){var r=e(n);Toc.init(r)})})}(jQuery); -------------------------------------------------------------------------------- /assets/js/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/js/index.html -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-brands-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-brands-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-brands-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-brands-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-brands-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-regular-400.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-regular-400.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-regular-400.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-regular-400.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-regular-400.woff2 -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-solid-900.eot -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-solid-900.ttf -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-solid-900.woff -------------------------------------------------------------------------------- /assets/webfonts/fa-solid-900.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/assets/webfonts/fa-solid-900.woff2 -------------------------------------------------------------------------------- /author.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 |
    20 | 21 |
    22 | 23 |
    24 | 25 | 19 | 20 |
    21 |
    22 |

    23 | 24 |

    25 | 26 |
    27 | 28 |
    29 | 30 |
    31 |
    32 | 33 | 41 | 42 |
    43 | 44 |
    45 | 46 | 47 | 48 |
    49 |

    50 | 51 |

    52 |
    53 | 54 | 55 | 56 | 57 | 58 | ' ' . __( 'Previous', 'mynote' ) . '', 63 | 'next_text' => '' . __( 'Next', 'mynote' ) . ' ', 64 | ) 65 | ); 66 | 67 | ?> 68 | 69 | 70 |

    71 | 72 | 73 | 74 | 75 |
    76 |
    77 | 78 | =5.3" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /custom-landing-page-full.php: -------------------------------------------------------------------------------- 1 | 20 | 21 | 34 | 35 | 41 | 42 | 43 | 44 | 52 | 53 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /header.php: -------------------------------------------------------------------------------- 1 | 15 | class="no-js"> 16 | 17 | 18 | 19 | 20 | 28 | 29 | 30 | > 31 | 32 | 33 | 34 | 40 | 41 |
    42 | 43 | 49 | 50 | 64 | 65 | 71 | -------------------------------------------------------------------------------- /inc/assets/css/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/css/index.html -------------------------------------------------------------------------------- /inc/assets/css/mynote-alpha-color-picker.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Alpha Color Picker CSS 3 | */ 4 | .customize-control-alpha-color .wp-picker-container { 5 | max-width: 257px; 6 | } 7 | .customize-control-alpha-color .wp-picker-container .iris-picker { 8 | border-bottom: none; 9 | } 10 | .customize-control-alpha-color .wp-picker-open + .wp-picker-input-wrap { 11 | width: 100%; 12 | } 13 | .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { 14 | float: left; 15 | width: 195px; 16 | } 17 | .customize-control-alpha-color .wp-picker-input-wrap .button { 18 | margin-left: 0; 19 | float: right; 20 | } 21 | 22 | .wp-picker-container .wp-picker-open ~ .wp-picker-holder .alpha-color-picker-container { 23 | display: block; 24 | } 25 | 26 | .alpha-color-picker-container { 27 | border: 1px solid #dfdfdf; 28 | border-top: none; 29 | display: none; 30 | background: #FFF; 31 | padding: 0 11px 10px; 32 | position: relative; 33 | } 34 | .alpha-color-picker-container .ui-widget-content, .alpha-color-picker-container .ui-widget-header { 35 | background: transparent; 36 | border: none; 37 | } 38 | 39 | .alpha-color-picker-wrap .ui-state-focus { 40 | background: transparent; 41 | border: none; 42 | } 43 | .alpha-color-picker-wrap a.iris-square-value:focus { 44 | -webkit-box-shadow: none; 45 | box-shadow: none; 46 | } 47 | 48 | .alpha-color-picker-container .ui-slider { 49 | position: relative; 50 | z-index: 1; 51 | height: 24px; 52 | text-align: center; 53 | margin: 0 auto; 54 | width: 88%; 55 | width: calc( 100% - 28px ); 56 | } 57 | .alpha-color-picker-container .ui-slider-handle, .alpha-color-picker-container .ui-widget-content .ui-state-default { 58 | color: #777; 59 | background-color: #FFF; 60 | text-shadow: 0 1px 0 #FFF; 61 | text-decoration: none; 62 | position: absolute; 63 | z-index: 2; 64 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 65 | border: 1px solid #aaa; 66 | -webkit-border-radius: 4px; 67 | -moz-border-radius: 4px; 68 | border-radius: 4px; 69 | margin-top: -2px; 70 | top: 0; 71 | height: 26px; 72 | width: 26px; 73 | cursor: ew-resize; 74 | font-size: 0; 75 | padding: 0; 76 | line-height: 27px; 77 | margin-left: -14px; 78 | } 79 | .alpha-color-picker-container .ui-slider-handle.show-opacity { 80 | font-size: 12px; 81 | } 82 | .alpha-color-picker-container .click-zone { 83 | width: 14px; 84 | height: 24px; 85 | display: block; 86 | position: absolute; 87 | left: 10px; 88 | } 89 | .alpha-color-picker-container .max-click-zone { 90 | right: 10px; 91 | left: auto; 92 | } 93 | .alpha-color-picker-container .transparency { 94 | height: 24px; 95 | width: 100%; 96 | background-color: #FFF; 97 | background-image: url(../images/mynote-transparency-grid.png); 98 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset; 99 | -webkit-border-radius: 3px; 100 | -moz-border-radius: 3px; 101 | border-radius: 3px; 102 | padding: 0; 103 | margin-top: -24px; 104 | } 105 | 106 | @media only screen and (max-width: 782px) { 107 | .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { 108 | width: 184px; 109 | } 110 | } 111 | @media only screen and (max-width: 640px) { 112 | .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { 113 | width: 172px; 114 | height: 33px; 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /inc/assets/css/mynote-image-radio.css: -------------------------------------------------------------------------------- 1 | .radio-controls { 2 | margin-top: 15px; 3 | } 4 | .radio-controls .radio-img { 5 | border: 3px solid #cccccc; 6 | margin: 0; 7 | cursor: pointer; 8 | border-radius: 4px; 9 | -moz-border-radius: 4px; 10 | -webkit-border-radius: 4px; 11 | } 12 | .radio-controls .radio-img-selected { 13 | border: 4px solid #00aeff; 14 | border-radius: 4px; 15 | -moz-border-radius: 4px; 16 | -webkit-border-radius: 4px; 17 | } 18 | .radio-controls li { 19 | text-align: center; 20 | padding: 5px; 21 | } 22 | -------------------------------------------------------------------------------- /inc/assets/css/mynote-toggle.css: -------------------------------------------------------------------------------- 1 | .toggle-controls { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: flex-start; 5 | } 6 | 7 | .disabled-control-title { 8 | color: #a0a5aa; 9 | } 10 | 11 | input[type=checkbox].mn-toggle { 12 | display: none; 13 | box-sizing: border-box; 14 | } 15 | input[type=checkbox].mn-toggle:after, input[type=checkbox].mn-toggle:before { 16 | box-sizing: border-box; 17 | } 18 | input[type=checkbox].mn-toggle * { 19 | box-sizing: border-box; 20 | } 21 | input[type=checkbox].mn-toggle *:after, input[type=checkbox].mn-toggle *:before { 22 | box-sizing: border-box; 23 | } 24 | input[type=checkbox].mn-toggle + .mn-toggle-btn { 25 | box-sizing: border-box; 26 | } 27 | input[type=checkbox].mn-toggle::-moz-selection, input[type=checkbox].mn-toggle:after::-moz-selection, input[type=checkbox].mn-toggle:before::-moz-selection { 28 | background: none; 29 | } 30 | input[type=checkbox].mn-toggle *::-moz-selection, input[type=checkbox].mn-toggle *:after::-moz-selection, input[type=checkbox].mn-toggle *:before::-moz-selection { 31 | background: none; 32 | } 33 | input[type=checkbox].mn-toggle + .mn-toggle-btn::-moz-selection, input[type=checkbox].mn-toggle::selection, input[type=checkbox].mn-toggle:after::selection, input[type=checkbox].mn-toggle:before::selection { 34 | background: none; 35 | } 36 | input[type=checkbox].mn-toggle *::selection, input[type=checkbox].mn-toggle *:after::selection, input[type=checkbox].mn-toggle *:before::selection { 37 | background: none; 38 | } 39 | input[type=checkbox].mn-toggle + .mn-toggle-btn { 40 | width: 4em; 41 | height: 2em; 42 | position: relative; 43 | display: block; 44 | -webkit-user-select: none; 45 | -moz-user-select: none; 46 | -ms-user-select: none; 47 | user-select: none; 48 | cursor: pointer; 49 | outline: 0; 50 | } 51 | input[type=checkbox].mn-toggle + .mn-toggle-btn::selection { 52 | background: none; 53 | } 54 | input[type=checkbox].mn-toggle + .mn-toggle-btn:after, input[type=checkbox].mn-toggle + .mn-toggle-btn:before { 55 | position: relative; 56 | display: block; 57 | content: ""; 58 | width: 50%; 59 | height: 100%; 60 | } 61 | input[type=checkbox].mn-toggle + .mn-toggle-btn:after { 62 | left: 0; 63 | } 64 | input[type=checkbox].mn-toggle + .mn-toggle-btn:before { 65 | display: none; 66 | } 67 | input[type=checkbox].mn-toggle:checked + .mn-toggle-btn:after { 68 | left: 50%; 69 | } 70 | input[type=checkbox].mn-toggle-blue + .mn-toggle-btn { 71 | background: #f0f0f0; 72 | border-radius: 2em; 73 | padding: 2px; 74 | -webkit-transition: all .5s ease; 75 | transition: all .5s ease; 76 | } 77 | input[type=checkbox].mn-toggle-blue + .mn-toggle-btn:after { 78 | border-radius: 50%; 79 | background: #fff; 80 | -webkit-transition: all .2s ease; 81 | transition: all .2s ease; 82 | } 83 | input[type=checkbox].mn-toggle-blue:checked + .mn-toggle-btn { 84 | background: #9fd5af; 85 | } 86 | input[type=checkbox].mn-toggle-blue:checked + .mn-toggle-btn { 87 | background: #0085ba; 88 | } 89 | input[type=checkbox].mn-toggle-blue + .mn-toggle-btn { 90 | background: #a0aaaa; 91 | } 92 | input[type=checkbox].mn-toggle-blue + .mn-toggle-btn:after { 93 | background: #f7f7f7; 94 | } 95 | -------------------------------------------------------------------------------- /inc/assets/images/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/index.html -------------------------------------------------------------------------------- /inc/assets/images/layout_1cols.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_1cols.png -------------------------------------------------------------------------------- /inc/assets/images/layout_2cols.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_2cols.png -------------------------------------------------------------------------------- /inc/assets/images/layout_3cols.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_3cols.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_1.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_2.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_3.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_4.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_5.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_6.png -------------------------------------------------------------------------------- /inc/assets/images/layout_footer_7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_footer_7.png -------------------------------------------------------------------------------- /inc/assets/images/layout_sidebar_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_sidebar_left.png -------------------------------------------------------------------------------- /inc/assets/images/layout_sidebar_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/layout_sidebar_right.png -------------------------------------------------------------------------------- /inc/assets/images/mynote-transparency-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/images/mynote-transparency-grid.png -------------------------------------------------------------------------------- /inc/assets/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/index.html -------------------------------------------------------------------------------- /inc/assets/js/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/js/index.html -------------------------------------------------------------------------------- /inc/assets/js/mynote-alpha-color-picker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Alpha Color Picker JS 3 | * 4 | * This file includes several helper functions and the core control JS. 5 | */ 6 | 7 | /** 8 | * Override the stock color.js toString() method to add support for 9 | * outputting RGBa or Hex. 10 | */ 11 | Color.prototype.toString = function( flag ) { 12 | 13 | // If our no-alpha flag has been passed in, output RGBa value with 100% opacity. 14 | // This is used to set the background color on the opacity slider during color changes. 15 | if ( 'no-alpha' == flag ) { 16 | return this.toCSS( 'rgba', '1' ).replace( /\s+/g, '' ); 17 | } 18 | 19 | // If we have a proper opacity value, output RGBa. 20 | if ( 1 >= this._alpha ) { 21 | return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' ); 22 | } 23 | 24 | // Proceed with stock color.js hex output. 25 | var hex = parseInt( this._color, 10 ).toString( 16 ); 26 | if ( this.error ) { return ''; } 27 | if ( hex.length < 6 ) { 28 | for ( var i = 6 - hex.length - 1; i >= 0; i-- ) { 29 | hex = '0' + hex; 30 | } 31 | } 32 | 33 | return '#' + hex; 34 | }; 35 | 36 | /** 37 | * Given an RGBa, RGB, or hex color value, return the alpha channel value. 38 | */ 39 | function acp_get_alpha_value_from_color( value ) { 40 | var alphaVal; 41 | 42 | // Remove all spaces from the passed in value to help our RGBa regex. 43 | value = value.replace( / /g, '' ); 44 | 45 | if ( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ ) ) { 46 | alphaVal = parseFloat( value.match( /rgba\(\d+\,\d+\,\d+\,([^\)]+)\)/ )[1] ).toFixed(2) * 100; 47 | alphaVal = parseInt( alphaVal ); 48 | } else { 49 | alphaVal = 100; 50 | } 51 | 52 | return alphaVal; 53 | } 54 | 55 | /** 56 | * Force update the alpha value of the color picker object and maybe the alpha slider. 57 | */ 58 | function acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, update_slider ) { 59 | var iris, colorPicker, color; 60 | 61 | iris = $control.data( 'a8cIris' ); 62 | colorPicker = $control.data( 'wpWpColorPicker' ); 63 | 64 | // Set the alpha value on the Iris object. 65 | iris._color._alpha = alpha; 66 | 67 | // Store the new color value. 68 | color = iris._color.toString(); 69 | 70 | // Set the value of the input. 71 | $control.val( color ); 72 | 73 | // Update the background color of the color picker. 74 | colorPicker.toggler.css({ 75 | 'background-color': color 76 | }); 77 | 78 | // Maybe update the alpha slider itself. 79 | if ( update_slider ) { 80 | acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); 81 | } 82 | 83 | // Update the color value of the color picker object. 84 | $control.wpColorPicker( 'color', color ); 85 | } 86 | 87 | /** 88 | * Update the slider handle position and label. 89 | */ 90 | function acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ) { 91 | $alphaSlider.slider( 'value', alpha ); 92 | $alphaSlider.find( '.ui-slider-handle' ).text( alpha.toString() ); 93 | } 94 | 95 | /** 96 | * Initialization trigger. 97 | */ 98 | jQuery( document ).ready( function( $ ) { 99 | 100 | // Loop over each control and transform it into our color picker. 101 | $( '.alpha-color-control' ).each( function() { 102 | 103 | var $parent = $( this ).closest( 'li.customize-control-alpha-color' ); 104 | 105 | $parent.find( 'div.customize-control-notifications-container' ).prependTo( $parent ); 106 | $parent.find( 'span.customize-control-description' ).prependTo( $parent ); 107 | $parent.find( 'span.customize-control-title' ).prependTo( $parent ); 108 | 109 | // Scope the vars. 110 | var $control, startingColor, paletteInput, showOpacity, defaultColor, palette, 111 | colorPickerOptions, $container, $alphaSlider, alphaVal, sliderOptions; 112 | 113 | // Store the control instance. 114 | $control = $( this ); 115 | 116 | // Get a clean starting value for the option. 117 | startingColor = $control.val().replace( /\s+/g, '' ); 118 | 119 | // Get some data off the control. 120 | paletteInput = $control.attr( 'data-palette' ); 121 | showOpacity = $control.attr( 'data-show-opacity' ); 122 | defaultColor = $control.attr( 'data-default-color' ); 123 | 124 | // Process the palette. 125 | if ( paletteInput.indexOf( '|' ) !== -1 ) { 126 | palette = paletteInput.split( '|' ); 127 | } else if ( 'false' == paletteInput ) { 128 | palette = false; 129 | } else { 130 | palette = true; 131 | } 132 | 133 | // Set up the options that we'll pass to wpColorPicker(). 134 | colorPickerOptions = { 135 | change: function( event, ui ) { 136 | var key, value, alpha, $transparency; 137 | 138 | key = $control.attr( 'data-customize-setting-link' ); 139 | value = $control.wpColorPicker( 'color' ); 140 | 141 | // Set the opacity value on the slider handle when the default color button is clicked. 142 | if ( defaultColor == value ) { 143 | alpha = acp_get_alpha_value_from_color( value ); 144 | $alphaSlider.find( '.ui-slider-handle' ).text( alpha ); 145 | } 146 | 147 | // Send ajax request to wp.customize to trigger the Save action. 148 | wp.customize( key, function( obj ) { 149 | obj.set( value ); 150 | }); 151 | 152 | $transparency = $container.find( '.transparency' ); 153 | 154 | // Always show the background color of the opacity slider at 100% opacity. 155 | $transparency.css( 'background-color', ui.color.toString( 'no-alpha' ) ); 156 | }, 157 | palettes: palette // Use the passed in palette. 158 | }; 159 | 160 | // Create the colorpicker. 161 | $control.wpColorPicker( colorPickerOptions ); 162 | 163 | $container = $control.parents( '.wp-picker-container:first' ); 164 | 165 | // Insert our opacity slider. 166 | $( '
    ' + 167 | '
    ' + 168 | '
    ' + 169 | '
    ' + 170 | '
    ' + 171 | '
    ' ).appendTo( $container.find( '.wp-picker-holder' ) ); 172 | 173 | $alphaSlider = $container.find( '.alpha-slider' ); 174 | 175 | // If starting value is in format RGBa, grab the alpha channel. 176 | alphaVal = acp_get_alpha_value_from_color( startingColor ); 177 | 178 | // Set up jQuery UI slider() options. 179 | sliderOptions = { 180 | create: function( event, ui ) { 181 | var value = $( this ).slider( 'value' ); 182 | 183 | // Set up initial values. 184 | $( this ).find( '.ui-slider-handle' ).text( value ); 185 | $( this ).siblings( '.transparency ').css( 'background-color', startingColor ); 186 | }, 187 | value: alphaVal, 188 | range: 'max', 189 | step: 1, 190 | min: 0, 191 | max: 100, 192 | animate: 300 193 | }; 194 | 195 | // Initialize jQuery UI slider with our options. 196 | $alphaSlider.slider( sliderOptions ); 197 | 198 | // Maybe show the opacity on the handle. 199 | if ( 'true' == showOpacity ) { 200 | $alphaSlider.find( '.ui-slider-handle' ).addClass( 'show-opacity' ); 201 | } 202 | 203 | // Bind event handlers for the click zones. 204 | $container.find( '.min-click-zone' ).on( 'click', function() { 205 | acp_update_alpha_value_on_color_control( 0, $control, $alphaSlider, true ); 206 | }); 207 | $container.find( '.max-click-zone' ).on( 'click', function() { 208 | acp_update_alpha_value_on_color_control( 100, $control, $alphaSlider, true ); 209 | }); 210 | 211 | // Bind event handler for clicking on a palette color. 212 | $container.find( '.iris-palette' ).on( 'click', function() { 213 | var color, alpha; 214 | 215 | color = $( this ).css( 'background-color' ); 216 | alpha = acp_get_alpha_value_from_color( color ); 217 | 218 | acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); 219 | 220 | // Sometimes Iris doesn't set a perfect background-color on the palette, 221 | // for example rgba(20, 80, 100, 0.3) becomes rgba(20, 80, 100, 0.298039). 222 | // To compensante for this we round the opacity value on RGBa colors here 223 | // and save it a second time to the color picker object. 224 | if ( alpha != 100 ) { 225 | color = color.replace( /[^,]+(?=\))/, ( alpha / 100 ).toFixed( 2 ) ); 226 | } 227 | 228 | $control.wpColorPicker( 'color', color ); 229 | }); 230 | 231 | // Bind event handler for clicking on the 'Clear' button. 232 | $container.find( '.button.wp-picker-clear' ).on( 'click', function() { 233 | var key = $control.attr( 'data-customize-setting-link' ); 234 | 235 | // The #fff color is delibrate here. This sets the color picker to white instead of the 236 | // defult black, which puts the color picker in a better place to visually represent empty. 237 | $control.wpColorPicker( 'color', '#ffffff' ); 238 | 239 | // Set the actual option value to empty string. 240 | wp.customize( key, function( obj ) { 241 | obj.set( '' ); 242 | }); 243 | 244 | acp_update_alpha_value_on_alpha_slider( 100, $alphaSlider ); 245 | }); 246 | 247 | // Bind event handler for clicking on the 'Default' button. 248 | $container.find( '.button.wp-picker-default' ).on( 'click', function() { 249 | var alpha = acp_get_alpha_value_from_color( defaultColor ); 250 | 251 | acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); 252 | }); 253 | 254 | // Bind event handler for typing or pasting into the input. 255 | $control.on( 'input', function() { 256 | var value = $( this ).val(); 257 | var alpha = acp_get_alpha_value_from_color( value ); 258 | 259 | acp_update_alpha_value_on_alpha_slider( alpha, $alphaSlider ); 260 | }); 261 | 262 | // Update all the things when the slider is interacted with. 263 | $alphaSlider.slider().on( 'slide', function( event, ui ) { 264 | var alpha = parseFloat( ui.value ) / 100.0; 265 | 266 | acp_update_alpha_value_on_color_control( alpha, $control, $alphaSlider, false ); 267 | 268 | // Change value shown on slider handle. 269 | $( this ).find( '.ui-slider-handle' ).text( ui.value ); 270 | }); 271 | }); 272 | }); 273 | -------------------------------------------------------------------------------- /inc/assets/js/mynote-image-radio.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Customize_Image_Radio_Control 3 | * 4 | * Use the image instead of origin radio button. 5 | * 6 | * @package WordPress 7 | * @author Terry Lin 8 | * @license GPLv3 (or later) 9 | * @link https://terryl.in 10 | * @copyright 2018 Terry Lin 11 | */ 12 | jQuery( document ).ready( function( $ ) { 13 | $( '.radio-controls li img' ).click (function () { 14 | $( '.radio-controls li' ).each( function () { 15 | $( this ).find( 'img' ).removeClass( 'radio-img-selected' ); 16 | }); 17 | $( this ).addClass( 'radio-img-selected' ); 18 | }); 19 | }); -------------------------------------------------------------------------------- /inc/assets/scss/config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | relative_assets = true 4 | 5 | # Set this to the root of your project when deployed: 6 | http_path = "/" 7 | css_dir = "../css" 8 | sass_dir = "" 9 | images_dir = "../images" 10 | javascripts_dir = "../js" 11 | 12 | # You can select your preferred output style here (can be overridden via the command line): 13 | # output_style = :expanded or :nested or :compact or :compressed 14 | 15 | # To enable relative paths to assets via compass helper functions. Uncomment: 16 | # relative_assets = true 17 | 18 | # To disable debugging comments that display the original location of your selectors. Uncomment: 19 | line_comments = false 20 | environment = :production 21 | output_style = :expanded 22 | 23 | # If you prefer the indented syntax, you might want to regenerate this 24 | # project again passing --syntax sass, or you can uncomment this: 25 | # preferred_syntax = :sass 26 | # and then run: 27 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 28 | # 29 | Encoding.default_external = Encoding.find('utf-8') 30 | #require 'compass-normalize' 31 | 32 | cache = false -------------------------------------------------------------------------------- /inc/assets/scss/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/assets/scss/index.html -------------------------------------------------------------------------------- /inc/assets/scss/mynote-alpha-color-picker.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Alpha Color Picker CSS 3 | */ 4 | 5 | .customize-control-alpha-color { 6 | .wp-picker-container { 7 | .iris-picker { 8 | border-bottom: none; 9 | } 10 | max-width: 257px; 11 | } 12 | .wp-picker-open + .wp-picker-input-wrap { 13 | width: 100%; 14 | } 15 | .wp-picker-input-wrap { 16 | input[type="text"].wp-color-picker.alpha-color-control { 17 | float: left; 18 | width: 195px; 19 | } 20 | .button { 21 | margin-left: 0; 22 | float: right; 23 | } 24 | } 25 | } 26 | 27 | .wp-picker-container .wp-picker-open ~ .wp-picker-holder .alpha-color-picker-container { 28 | display: block; 29 | } 30 | 31 | .alpha-color-picker-container { 32 | border: 1px solid #dfdfdf; 33 | border-top: none; 34 | display: none; 35 | background: #FFF; 36 | padding: 0 11px 10px; 37 | position: relative; 38 | .ui-widget-content, .ui-widget-header { 39 | background: transparent; 40 | border: none; 41 | } 42 | } 43 | 44 | .alpha-color-picker-wrap { 45 | .ui-state-focus { 46 | background: transparent; 47 | border: none; 48 | } 49 | a.iris-square-value:focus { 50 | -webkit-box-shadow: none; 51 | box-shadow: none; 52 | } 53 | } 54 | 55 | .alpha-color-picker-container { 56 | .ui-slider { 57 | position: relative; 58 | z-index: 1; 59 | height: 24px; 60 | text-align: center; 61 | margin: 0 auto; 62 | width: 88%; 63 | width: calc( 100% - 28px ); 64 | } 65 | .ui-slider-handle, .ui-widget-content .ui-state-default { 66 | color: #777; 67 | background-color: #FFF; 68 | text-shadow: 0 1px 0 #FFF; 69 | text-decoration: none; 70 | position: absolute; 71 | z-index: 2; 72 | box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 73 | border: 1px solid #aaa; 74 | -webkit-border-radius: 4px; 75 | -moz-border-radius: 4px; 76 | border-radius: 4px; 77 | margin-top: -2px; 78 | top: 0; 79 | height: 26px; 80 | width: 26px; 81 | cursor: ew-resize; 82 | font-size: 0; 83 | padding: 0; 84 | line-height: 27px; 85 | margin-left: -14px; 86 | } 87 | .ui-slider-handle.show-opacity { 88 | font-size: 12px; 89 | } 90 | .click-zone { 91 | width: 14px; 92 | height: 24px; 93 | display: block; 94 | position: absolute; 95 | left: 10px; 96 | } 97 | .max-click-zone { 98 | right: 10px; 99 | left: auto; 100 | } 101 | .transparency { 102 | height: 24px; 103 | width: 100%; 104 | background-color: #FFF; 105 | background-image: url(../images/mynote-transparency-grid.png); 106 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.4) inset; 107 | -webkit-border-radius: 3px; 108 | -moz-border-radius: 3px; 109 | border-radius: 3px; 110 | padding: 0; 111 | margin-top: -24px; 112 | } 113 | } 114 | 115 | @media only screen and (max-width: 782px) { 116 | .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { 117 | width: 184px; 118 | } 119 | } 120 | 121 | @media only screen and (max-width: 640px) { 122 | .customize-control-alpha-color .wp-picker-input-wrap input[type="text"].wp-color-picker.alpha-color-control { 123 | width: 172px; 124 | height: 33px; 125 | } 126 | } -------------------------------------------------------------------------------- /inc/assets/scss/mynote-image-radio.scss: -------------------------------------------------------------------------------- 1 | .radio-controls { 2 | margin-top: 15px; 3 | .radio-img { 4 | border: 3px solid #cccccc; 5 | margin: 0; 6 | cursor: pointer; 7 | border-radius: 4px; 8 | -moz-border-radius: 4px; 9 | -webkit-border-radius: 4px; 10 | } 11 | .radio-img-selected { 12 | border: 4px solid #00aeff; 13 | border-radius: 4px; 14 | -moz-border-radius: 4px; 15 | -webkit-border-radius: 4px; 16 | } 17 | li { 18 | text-align: center; 19 | padding: 5px; 20 | } 21 | } -------------------------------------------------------------------------------- /inc/assets/scss/mynote-toggle.scss: -------------------------------------------------------------------------------- 1 | .toggle-controls { 2 | display:flex; 3 | flex-direction: row; 4 | justify-content: flex-start; 5 | } 6 | 7 | .disabled-control-title { 8 | color: #a0a5aa; 9 | } 10 | 11 | input[type=checkbox] { 12 | &.mn-toggle { 13 | display: none; 14 | box-sizing: border-box; 15 | &:after, &:before { 16 | box-sizing: border-box; 17 | } 18 | * { 19 | box-sizing: border-box; 20 | &:after, &:before { 21 | box-sizing: border-box; 22 | } 23 | } 24 | + .mn-toggle-btn { 25 | box-sizing: border-box; 26 | } 27 | &::-moz-selection, &:after::-moz-selection, &:before::-moz-selection { 28 | background: none; 29 | } 30 | * { 31 | &::-moz-selection, &:after::-moz-selection, &:before::-moz-selection { 32 | background: none; 33 | } 34 | } 35 | + .mn-toggle-btn::-moz-selection, &::selection, &:after::selection, &:before::selection { 36 | background: none; 37 | } 38 | * { 39 | &::selection, &:after::selection, &:before::selection { 40 | background: none; 41 | } 42 | } 43 | + .mn-toggle-btn { 44 | &::selection { 45 | background: none; 46 | } 47 | 48 | width: 4em; 49 | height: 2em; 50 | position: relative; 51 | display: block; 52 | -webkit-user-select: none; 53 | -moz-user-select: none; 54 | -ms-user-select: none; 55 | user-select: none; 56 | cursor: pointer; 57 | outline: 0; 58 | 59 | &:after, &:before { 60 | position: relative; 61 | display: block; 62 | content: ""; 63 | width: 50%; 64 | height: 100%; 65 | } 66 | &:after { 67 | left: 0; 68 | } 69 | &:before { 70 | display: none; 71 | } 72 | } 73 | &:checked + .mn-toggle-btn:after { 74 | left: 50%; 75 | } 76 | } 77 | &.mn-toggle-blue { 78 | + .mn-toggle-btn { 79 | background: #f0f0f0; 80 | border-radius: 2em; 81 | padding: 2px; 82 | -webkit-transition: all .5s ease; 83 | transition: all .5s ease; 84 | &:after { 85 | border-radius: 50%; 86 | background: #fff; 87 | -webkit-transition: all .2s ease; 88 | transition: all .2s ease; 89 | } 90 | } 91 | &:checked + .mn-toggle-btn { 92 | background: #9fd5af; 93 | } 94 | } 95 | 96 | &.mn-toggle-blue { 97 | &:checked + .mn-toggle-btn { 98 | background: #0085ba; 99 | } 100 | + .mn-toggle-btn { 101 | background: #a0aaaa; 102 | &:after { 103 | background: #f7f7f7; 104 | } 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /inc/classes/customizer/class-customize-alpha-color-control.php: -------------------------------------------------------------------------------- 1 | . 21 | */ 22 | class Customize_Alpha_Color_Control extends WP_Customize_Control { 23 | 24 | /** 25 | * Official control name. 26 | */ 27 | public $type = 'alpha-color'; 28 | 29 | /** 30 | * Add support for palettes to be passed in. 31 | * 32 | * Supported palette values are true, false, or an array of RGBa and Hex colors. 33 | */ 34 | public $palette; 35 | 36 | /** 37 | * Add support for showing the opacity value on the slider handle. 38 | */ 39 | public $show_opacity; 40 | 41 | /** 42 | * Enqueue scripts and styles. 43 | * 44 | * Ideally these would get registered and given proper paths before this control object 45 | * gets initialized, then we could simply enqueue them here, but for completeness as a 46 | * stand alone class we'll register and enqueue them here. 47 | */ 48 | public function enqueue() { 49 | wp_enqueue_script( $this->type, get_template_directory_uri() . '/inc/assets/js/mynote-alpha-color-picker.js', array( 'jquery' ), '1.0.0', true ); 50 | wp_enqueue_style( $this->type, get_template_directory_uri() . '/inc/assets/css/mynote-alpha-color-picker.css', array(), '1.0.0' ); 51 | } 52 | 53 | /** 54 | * Render the control. 55 | */ 56 | public function render_content() { 57 | 58 | // Process the palette 59 | if ( is_array( $this->palette ) ) { 60 | $palette = implode( '|', $this->palette ); 61 | } else { 62 | // Default to true. 63 | $palette = ( false === $this->palette || 'false' === $this->palette ) ? 'false' : 'true'; 64 | } 65 | 66 | // Support passing show_opacity as string or boolean. Default to true. 67 | $show_opacity = ( false === $this->show_opacity || 'false' === $this->show_opacity ) ? 'false' : 'true'; 68 | 69 | // Begin the output. ?> 70 | 82 | 9 | * @license GPLv3 (or later) 10 | * @link https://terryl.in 11 | * @copyright 2018 Terry Lin 12 | */ 13 | 14 | class Customize_Content_Control extends WP_Customize_Control { 15 | 16 | /** 17 | * Define control type. 18 | */ 19 | public $type = 'content'; 20 | 21 | /** 22 | * Render the control. 23 | */ 24 | public function render_content() { 25 | 26 | if ( isset( $this->label ) && '' !== $this->label ) { 27 | echo '' . $this->label . ''; 28 | } 29 | 30 | if ( isset( $this->input_attrs['content'] ) ) { 31 | echo $this->input_attrs['content']; 32 | } 33 | 34 | if ( isset( $this->description ) ) { 35 | echo '' . $this->description . ''; 36 | } 37 | } 38 | } 39 | 40 | -------------------------------------------------------------------------------- /inc/classes/customizer/class-customize-image-radio-control.php: -------------------------------------------------------------------------------- 1 | 9 | * @license GPLv3 (or later) 10 | * @link https://terryl.in 11 | * @copyright 2018 Terry Lin 12 | */ 13 | 14 | class Customize_Image_Radio_Control extends WP_Customize_Control { 15 | 16 | /** 17 | * Define control type. 18 | */ 19 | public $type = 'image-radio'; 20 | 21 | /** 22 | * Enqueue scripts and styles. 23 | */ 24 | public function enqueue() { 25 | wp_enqueue_script( $this->type, get_template_directory_uri() . '/inc/assets/js/mynote-image-radio.js', array( 'jquery' ), '1.0.0', true ); 26 | wp_enqueue_style( $this->type, get_template_directory_uri() . '/inc/assets/css/mynote-image-radio.css', array(), '1.0.0' ); 27 | } 28 | 29 | /** 30 | * Render the control. 31 | */ 32 | public function render_content() { 33 | 34 | if ( empty( $this->choices ) ) { 35 | return; 36 | } 37 | 38 | $name = 'customize-radio-' . $this->id; 39 | 40 | if ( isset( $this->label ) && '' !== $this->label ) { 41 | echo '' . sanitize_text_field( $this->label ) . ''; 42 | } 43 | 44 | if ( isset( $this->description ) && '' !== $this->description ) { 45 | echo '' . sanitize_text_field( $this->description ) . ''; 46 | } 47 | 48 | ?> 49 | 50 |
      51 | choices as $value => $label ) { 53 | $class = ( $this->value() === $value ) ? 'radio-img-selected radio-img' : 'radio-img'; 54 | ?> 55 |
    • 56 | 62 |
      • 63 | 66 |
    67 | 9 | * @license GPLv3 (or later) 10 | * @link https://terryl.in 11 | * @copyright 2018 Terry Lin 12 | */ 13 | 14 | class Customize_Toggle_Control extends WP_Customize_Control { 15 | 16 | /** 17 | * Define control type. 18 | */ 19 | public $type = 'checkbox-toggle'; 20 | 21 | /** 22 | * Enqueue scripts and styles. 23 | */ 24 | public function enqueue() { 25 | wp_enqueue_style( $this->type, get_template_directory_uri() . '/inc/assets/css/mynote-toggle.css', array(), '1.0.0' ); 26 | } 27 | 28 | /** 29 | * Render the control's content. 30 | */ 31 | public function render_content() { 32 | ?> 33 | 34 |
    35 | 36 | label ); ?> 37 | 38 | value() ); ?> 40 | link(); ?> /> 41 | 42 |
    43 | 44 | description ) ) { 47 | echo '' . $this->description . ''; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /inc/classes/customizer/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/classes/customizer/index.html -------------------------------------------------------------------------------- /inc/classes/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/classes/index.html -------------------------------------------------------------------------------- /inc/classes/navbar/class-mynote-walker.php: -------------------------------------------------------------------------------- 1 | 12 | * @license GPLv3 (or later) 13 | * @link https://terryl.in 14 | * @copyright 2018 Terry Lin 15 | */ 16 | 17 | /** 18 | * Mynote_Walker 19 | */ 20 | class Mynote_Walker extends Walker_Nav_Menu { 21 | /** 22 | * Constructer. 23 | */ 24 | public function __construct() { 25 | add_filter( 26 | 'nav_menu_css_class', 27 | function( $classes, $item, $args, $depth ) { 28 | unset( $classes ); 29 | return array(); 30 | }, 31 | 10, 32 | 4 33 | ); 34 | } 35 | 36 | /** 37 | * Starts the list before the elements are added. 38 | * 39 | * @param string $output Used to append additional content (passed by reference). 40 | * @param integer $depth Depth of menu item. Used for padding. 41 | * @param object $args An object of wp_nav_menu() arguments. 42 | * @return void 43 | */ 44 | public function start_lvl( &$output, $depth = 0, $args = null ) { 45 | $output .= '
    '; 46 | } 47 | 48 | /** 49 | * Ends the list of after the elements are added. 50 | * 51 | * @param string $output Used to append additional content (passed by reference). 52 | * @param integer $depth Depth of menu item. Used for padding. 53 | * @param object $args An object of wp_nav_menu() arguments. 54 | * @return void 55 | */ 56 | public function end_lvl( &$output, $depth = 0, $args = null ) { 57 | $output .= '
    '; 58 | } 59 | 60 | /** 61 | * Starts the element output. 62 | * 63 | * @param string $output Used to append additional content (passed by reference). 64 | * @param object $item Menu item data object. 65 | * @param integer $depth Depth of menu item. Used for padding. 66 | * @param object $args An object of wp_nav_menu() arguments. 67 | * @param integer $id Current item ID. 68 | * @return void 69 | */ 70 | public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) { 71 | $classes = empty( $item->classes ) ? array() : (array) $item->classes; 72 | $classes[] = 'menu-item-' . $item->ID; 73 | $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) ); 74 | $class_names .= ' nav-item'; 75 | 76 | if ( in_array( 'menu-item-has-children', $classes, true ) ) { 77 | $class_names .= ' dropdown'; 78 | } 79 | 80 | if ( in_array( 'current-menu-item', $classes, true ) ) { 81 | $class_names .= ' active'; 82 | } 83 | 84 | $class_names = $class_names ? ' class="' . esc_attr( trim( $class_names ) ) . '"' : ''; 85 | $class_names = trim( $class_names ); 86 | $id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth ); 87 | $id = $id ? ' id="' . esc_attr( $id ) . '"' : ''; 88 | 89 | if ( 0 === $depth ) { 90 | $output .= '
  • '; 91 | } 92 | 93 | $atts = array(); 94 | 95 | $atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : ''; 96 | $atts['target'] = ! empty( $item->target ) ? $item->target : ''; 97 | $atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : ''; 98 | $atts['href'] = ! empty( $item->url ) ? $item->url : ''; 99 | 100 | if ( 0 === $depth ) { 101 | $atts['class'] = 'nav-link'; 102 | } 103 | 104 | if ( 0 === $depth && in_array( 'menu-item-has-children', $classes, true ) ) { 105 | $atts['class'] .= ' dropdown-toggle'; 106 | $atts['data-toggle'] = 'dropdown'; 107 | } 108 | 109 | if ( $depth > 0 ) { 110 | $manual_class = array_values( $classes )[0] . ' dropdown-item'; 111 | $atts['class'] = trim( $manual_class ); 112 | } 113 | 114 | if ( in_array( 'current-menu-item', $item->classes, true ) ) { 115 | $atts['class'] .= ' active'; 116 | } 117 | 118 | $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth ); 119 | $attributes = ''; 120 | 121 | foreach ( $atts as $attr => $value ) { 122 | if ( ! empty( $value ) ) { 123 | $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value ); 124 | $attributes .= ' ' . $attr . '="' . $value . '"'; 125 | } 126 | } 127 | 128 | $item_output = $args->before; 129 | $item_output .= ''; 130 | $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after; 131 | $item_output .= ''; 132 | $item_output .= $args->after; 133 | $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args ); 134 | } 135 | 136 | /** 137 | * Ends the element output, if needed. 138 | * 139 | * @param string $output Used to append additional content (passed by reference). 140 | * @param object $item Page data object. Not used. 141 | * @param integer $depth Depth of page. Not Used. 142 | * @param array $args An object of wp_nav_menu() arguments. 143 | * @return void 144 | */ 145 | public function end_el( &$output, $item, $depth = 0, $args = array() ) { 146 | if ( 0 === $depth ) { 147 | $output .= '
    • '; 148 | } 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /inc/classes/navbar/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/classes/navbar/index.html -------------------------------------------------------------------------------- /inc/classes/widgets/class-mynote-widget-toc.php: -------------------------------------------------------------------------------- 1 | 9 | * @license GPLv3 (or later) 10 | * @link https://terryl.in 11 | * @copyright 2018 Terry Lin 12 | */ 13 | 14 | /** 15 | * Mynote_Widget_Toc 16 | */ 17 | class Mynote_Widget_Toc extends WP_Widget { 18 | 19 | /** 20 | * Sets up a new Mynote TOC widget instance. 21 | */ 22 | public function __construct() { 23 | 24 | $widget_ops = array( 25 | 'classname' => 'widget_mynote_toc', 26 | 'description' => __( 'Add a Table of Content for your article. This widget is for single-post pages only.', 'mynote' ), 27 | 'customize_selective_refresh' => true, 28 | ); 29 | parent::__construct( 'mynote-toc', __( 'Mynote: Table of Content', 'mynote' ), $widget_ops ); 30 | $this->alt_option_name = 'widget_mynote_toc'; 31 | 32 | if ( is_active_widget( false, false, $this->id_base ) || is_customize_preview() ) { 33 | add_action( 'wp_head', array( $this, 'mynote_toc_js' ) ); 34 | } 35 | } 36 | 37 | /** 38 | * Register javascript for the Mynote TOC widget. 39 | */ 40 | public function mynote_toc_js() { 41 | wp_register_script( 'bootstrap-toc', get_template_directory_uri() . '/assets/js/bootstrap-toc.min.js', array( 'jquery' ), '1.0.0' ); 42 | wp_enqueue_script( 'bootstrap-toc' ); 43 | } 44 | 45 | /** 46 | * Initial TOC . 47 | */ 48 | public function mynote_toc_inline_js() { 49 | 50 | $inline_js = ' 51 | jQuery( document ).ready(function( $ ) { 52 | Toc.init({ 53 | $nav: $( "#toc" ), 54 | $scope: $( ".markdown-body" ) 55 | }); 56 | 57 | if ( "undefined" !== typeof $.fn.scrollspy ) { 58 | $( "body" ).scrollspy({ 59 | target: "#toc" 60 | }); 61 | } 62 | }); 63 | '; 64 | 65 | wp_add_inline_script( 'bootstrap-toc', $inline_js ); 66 | } 67 | 68 | /** 69 | * Outputs the content for the Mynote TOC instance. 70 | */ 71 | public function widget( $args, $instance ) { 72 | $this->mynote_toc_inline_js(); 73 | 74 | $output = ''; 75 | echo $output; 76 | } 77 | 78 | /** 79 | * Flushes the Mynote TOC widget cache. 80 | */ 81 | public function flush_widget_cache() { 82 | _deprecated_function( __METHOD__, '4.4.0' ); 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /inc/customer/about.php: -------------------------------------------------------------------------------- 1 | add_section( 23 | 'section_about_mynote_theme', 24 | array( 25 | 'title' => __( 'About Mynote Theme', 'mynote' ), 26 | 'priority' => 1, 27 | 'capability' => 'edit_theme_options', 28 | ) 29 | ); 30 | 31 | $about = __( 'Mynote is an open source project on GitHub, any suggestions to improve this theme are welcome. Please visit:', 'mynote' ); 32 | $about .= '

    https://github.com/terrylinooo/mynote'; 33 | 34 | /** 35 | * Setting 36 | */ 37 | $wp_customize->add_setting( 38 | 'setting_about_mynote_theme', 39 | array( 40 | 'default' => 'no', 41 | 'sanitize_callback' => 'sanitize_text_field', 42 | ) 43 | ); 44 | 45 | $wp_customize->add_setting( 46 | 'is_responsive_website', 47 | array( 48 | 'default' => true, 49 | 'sanitize_callback' => 'sanitize_text_field', 50 | ) 51 | ); 52 | 53 | /** 54 | * Control 55 | */ 56 | $wp_customize->add_control( 57 | new Customize_Content_Control( 58 | $wp_customize, 59 | 'control_about_mynote_theme', 60 | array( 61 | 'label' => __( 'About', 'mynote' ), 62 | 'section' => 'section_about_mynote_theme', 63 | 'settings' => 'setting_about_mynote_theme', 64 | 'description' => $about, 65 | ) 66 | ) 67 | ); 68 | 69 | $wp_customize->add_control( 70 | new Customize_Toggle_Control( 71 | $wp_customize, 72 | 'is_responsive_control', 73 | array( 74 | 'label' => __( 'RWD', 'mynote' ), 75 | 'section' => 'section_about_mynote_theme', 76 | 'settings' => 'is_responsive_website', 77 | 'description' => __( 'Mynote is a responsive theme (RWD, responsive web design). However, if you would like to disable RWD, here it is.', 'mynote' ), 78 | ) 79 | ) 80 | ); 81 | } 82 | -------------------------------------------------------------------------------- /inc/customer/homepage.php: -------------------------------------------------------------------------------- 1 | add_setting( 27 | 'is_scroll_down_button', 28 | array( 29 | 'default' => true, 30 | 'sanitize_callback' => 'sanitize_text_field', 31 | ) 32 | ); 33 | 34 | /** 35 | * Control 36 | */ 37 | $wp_customize->add_control( 38 | new Customize_Toggle_Control( 39 | $wp_customize, 40 | 'scroll_down_button_control', 41 | array( 42 | 'label' => __( 'Scrolling down button', 'mynote' ), 43 | 'section' => 'static_front_page', 44 | 'settings' => 'is_scroll_down_button', 45 | 'description' => __( 'Would you like to display the scrolling down button? (desktop version)', 'mynote' ), 46 | ) 47 | ) 48 | ); 49 | } 50 | -------------------------------------------------------------------------------- /inc/customer/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/customer/index.html -------------------------------------------------------------------------------- /inc/customer/layout.php: -------------------------------------------------------------------------------- 1 | add_panel( 26 | 'panel_mynote_layout', 27 | array( 28 | 'title' => __( 'Layout', 'mynote' ), 29 | 'priority' => 10, 30 | ) 31 | ); 32 | 33 | /** 34 | * Section 35 | */ 36 | $wp_customize->add_section( 37 | 'section_mynote_layout_home', 38 | array( 39 | 'title' => __( 'Homepage', 'mynote' ), 40 | 'priority' => 10, 41 | 'panel' => 'panel_mynote_layout', 42 | ) 43 | ); 44 | 45 | $wp_customize->add_section( 46 | 'section_mynote_layout_archive', 47 | array( 48 | 'title' => __( 'Archive', 'mynote' ), 49 | 'priority' => 10, 50 | 'panel' => 'panel_mynote_layout', 51 | ) 52 | ); 53 | 54 | $wp_customize->add_section( 55 | 'section_mynote_layout_post', 56 | array( 57 | 'title' => __( 'Post', 'mynote' ), 58 | 'priority' => 10, 59 | 'panel' => 'panel_mynote_layout', 60 | ) 61 | ); 62 | 63 | $wp_customize->add_section( 64 | 'section_mynote_layout_footer', 65 | array( 66 | 'title' => __( 'Footer', 'mynote' ), 67 | 'priority' => 10, 68 | 'panel' => 'panel_mynote_layout', 69 | ) 70 | ); 71 | 72 | /** 73 | * Setting 74 | */ 75 | $wp_customize->add_setting( 76 | 'layout_post_sidebar_location_home', 77 | array( 78 | 'default' => 'right', 79 | 'sanitize_callback' => 'sanitize_text_field', 80 | ) 81 | ); 82 | 83 | $wp_customize->add_setting( 84 | 'layout_post_sidebar_location_archive', 85 | array( 86 | 'default' => 'right', 87 | 'sanitize_callback' => 'sanitize_text_field', 88 | ) 89 | ); 90 | 91 | $wp_customize->add_setting( 92 | 'layout_post_sidebar_location_post', 93 | array( 94 | 'default' => 'right', 95 | 'sanitize_callback' => 'sanitize_text_field', 96 | ) 97 | ); 98 | 99 | $wp_customize->add_setting( 100 | 'layout_cols_per_row_home', 101 | array( 102 | 'default' => '3', 103 | 'sanitize_callback' => 'sanitize_text_field', 104 | ) 105 | ); 106 | 107 | $wp_customize->add_setting( 108 | 'layout_cols_per_row_archive', 109 | array( 110 | 'default' => '3', 111 | 'sanitize_callback' => 'sanitize_text_field', 112 | ) 113 | ); 114 | 115 | $wp_customize->add_setting( 116 | 'layout_cols_footer_icon_size', 117 | array( 118 | 'default' => 'sm', 119 | 'sanitize_callback' => 'sanitize_text_field', 120 | ) 121 | ); 122 | 123 | $wp_customize->add_setting( 124 | 'layout_cols_footer_location', 125 | array( 126 | 'default' => '1', 127 | 'sanitize_callback' => 'sanitize_text_field', 128 | ) 129 | ); 130 | 131 | /** 132 | * Control 133 | */ 134 | $wp_customize->add_control( 135 | new Customize_Image_Radio_Control( 136 | $wp_customize, 137 | 'layout_sidebar_location_home_control', 138 | array( 139 | 'label' => __( 'Sidebar Location', 'mynote' ), 140 | 'section' => 'section_mynote_layout_home', 141 | 'settings' => 'layout_post_sidebar_location_home', 142 | 'type' => 'radio', 143 | 'description' => __( 'Choose a preferred layout for desktop version.', 'mynote' ), 144 | 'choices' => array( 145 | 'right' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_right.png', 146 | 'left' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_left.png', 147 | ), 148 | ) 149 | ) 150 | ); 151 | 152 | $wp_customize->add_control( 153 | new Customize_Image_Radio_Control( 154 | $wp_customize, 155 | 'layout_sidebar_location_archive_control', 156 | array( 157 | 'label' => __( 'Sidebar Location', 'mynote' ), 158 | 'section' => 'section_mynote_layout_archive', 159 | 'settings' => 'layout_post_sidebar_location_archive', 160 | 'type' => 'radio', 161 | 'description' => __( 'Choose a preferred layout for desktop version.', 'mynote' ), 162 | 'choices' => array( 163 | 'right' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_right.png', 164 | 'left' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_left.png', 165 | ), 166 | ) 167 | ) 168 | ); 169 | 170 | $wp_customize->add_control( 171 | new Customize_Image_Radio_Control( 172 | $wp_customize, 173 | 'layout_cols_per_row_home_control', 174 | array( 175 | 'label' => __( 'Columns', 'mynote' ), 176 | 'section' => 'section_mynote_layout_home', 177 | 'settings' => 'layout_cols_per_row_home', 178 | 'type' => 'radio', 179 | 'description' => __( 'Adjust the number of columns per row.', 'mynote' ), 180 | 'choices' => array( 181 | '3' => get_template_directory_uri() . '/inc/assets/images/layout_3cols.png', 182 | '2' => get_template_directory_uri() . '/inc/assets/images/layout_2cols.png', 183 | '1' => get_template_directory_uri() . '/inc/assets/images/layout_1cols.png', 184 | ), 185 | ) 186 | ) 187 | ); 188 | 189 | $wp_customize->add_control( 190 | new Customize_Image_Radio_Control( 191 | $wp_customize, 192 | 'layout_cols_per_row_archive_control', 193 | array( 194 | 'label' => __( 'Columns', 'mynote' ), 195 | 'section' => 'section_mynote_layout_archive', 196 | 'settings' => 'layout_cols_per_row_archive', 197 | 'type' => 'radio', 198 | 'description' => __( 'Adjust the number of columns per row.', 'mynote' ), 199 | 'choices' => array( 200 | '3' => get_template_directory_uri() . '/inc/assets/images/layout_3cols.png', 201 | '2' => get_template_directory_uri() . '/inc/assets/images/layout_2cols.png', 202 | '1' => get_template_directory_uri() . '/inc/assets/images/layout_1cols.png', 203 | ), 204 | ) 205 | ) 206 | ); 207 | 208 | $wp_customize->add_control( 209 | new Customize_Image_Radio_Control( 210 | $wp_customize, 211 | 'layout_sidebar_location_post_control', 212 | array( 213 | 'label' => __( 'Sidebar Location', 'mynote' ), 214 | 'section' => 'section_mynote_layout_post', 215 | 'settings' => 'layout_post_sidebar_location_post', 216 | 'type' => 'radio', 217 | 'description' => __( 'Choose a preferred layout for desktop version.', 'mynote' ), 218 | 'choices' => array( 219 | 'right' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_right.png', 220 | 'left' => get_template_directory_uri() . '/inc/assets/images/layout_sidebar_left.png', 221 | ), 222 | ) 223 | ) 224 | ); 225 | 226 | $wp_customize->add_control( 227 | new WP_Customize_Control( 228 | $wp_customize, 229 | 'layout_cols_footer_icon_size_control', 230 | array( 231 | 'label' => __( 'Social Icon Size', 'mynote' ), 232 | 'section' => 'section_mynote_layout_footer', 233 | 'settings' => 'layout_cols_footer_icon_size', 234 | 'type' => 'radio', 235 | 'description' => __( 'Choose a preferred icon size.', 'mynote' ), 236 | 'choices' => array( 237 | 'sm' => __( 'Small - 32 x 32', 'mynote' ), 238 | 'md' => __( 'Medium - 40 x 40', 'mynote' ), 239 | 'lg' => __( 'Large - 48 x 48', 'mynote' ), 240 | 'xl' => __( 'Extra large - 64 x 64', 'mynote' ), 241 | ), 242 | ) 243 | ) 244 | ); 245 | 246 | $wp_customize->add_control( 247 | new Customize_Image_Radio_Control( 248 | $wp_customize, 249 | 'layout_footer_location_post_control', 250 | array( 251 | 'label' => __( 'Footer Location', 'mynote' ), 252 | 'section' => 'section_mynote_layout_footer', 253 | 'settings' => 'layout_cols_footer_location', 254 | 'type' => 'radio', 255 | 'description' => __( 'Choose a preferred layout for footer section.', 'mynote' ), 256 | 'choices' => array( 257 | '1' => get_template_directory_uri() . '/inc/assets/images/layout_footer_1.png', 258 | '2' => get_template_directory_uri() . '/inc/assets/images/layout_footer_2.png', 259 | '3' => get_template_directory_uri() . '/inc/assets/images/layout_footer_3.png', 260 | '4' => get_template_directory_uri() . '/inc/assets/images/layout_footer_4.png', 261 | '5' => get_template_directory_uri() . '/inc/assets/images/layout_footer_5.png', 262 | '6' => get_template_directory_uri() . '/inc/assets/images/layout_footer_6.png', 263 | '7' => get_template_directory_uri() . '/inc/assets/images/layout_footer_7.png', 264 | ), 265 | ) 266 | ) 267 | ); 268 | } 269 | -------------------------------------------------------------------------------- /inc/customer/post-card.php: -------------------------------------------------------------------------------- 1 | add_section( 30 | 'section_post_card', 31 | array( 32 | 'title' => __( 'Post Card', 'mynote' ), 33 | 'priority' => 10, 34 | ) 35 | ); 36 | 37 | /** 38 | * Setting 39 | */ 40 | $wp_customize->add_setting( 41 | 'post_card_show_footer', 42 | array( 43 | 'default' => true, 44 | 'sanitize_callback' => 'sanitize_text_field', 45 | ) 46 | ); 47 | 48 | $wp_customize->add_setting( 49 | 'post_card_show_header', 50 | array( 51 | 'default' => true, 52 | 'sanitize_callback' => 'sanitize_text_field', 53 | ) 54 | ); 55 | 56 | $wp_customize->add_setting( 57 | 'post_card_show_border', 58 | array( 59 | 'default' => true, 60 | 'sanitize_callback' => 'sanitize_text_field', 61 | ) 62 | ); 63 | 64 | $wp_customize->add_setting( 65 | 'post_card_show_gradient_mask', 66 | array( 67 | 'default' => true, 68 | 'sanitize_callback' => 'sanitize_text_field', 69 | ) 70 | ); 71 | 72 | $wp_customize->add_setting( 73 | 'post_card_show_body_footer', 74 | array( 75 | 'default' => true, 76 | 'sanitize_callback' => 'sanitize_text_field', 77 | ) 78 | ); 79 | 80 | /** 81 | * Control 82 | */ 83 | $wp_customize->add_control( 84 | new Customize_Toggle_Control( 85 | $wp_customize, 86 | 'post_card_header_control', 87 | array( 88 | 'label' => __( 'Header', 'mynote' ), 89 | 'section' => 'section_post_card', 90 | 'settings' => 'post_card_show_header', 91 | 'description' => __( 'Would you like to display the header of the post card? (Post thumbnail is located on this section. Choosing `No` will hide it.)', 'mynote' ), 92 | ) 93 | ) 94 | ); 95 | 96 | $wp_customize->add_control( 97 | new Customize_Toggle_Control( 98 | $wp_customize, 99 | 'post_card_footer_control', 100 | array( 101 | 'label' => __( 'Footer', 'mynote' ), 102 | 'section' => 'section_post_card', 103 | 'settings' => 'post_card_show_footer', 104 | 'description' => __( 'Would you like to display the footer of the post card?', 'mynote' ), 105 | ) 106 | ) 107 | ); 108 | 109 | $wp_customize->add_control( 110 | new Customize_Toggle_Control( 111 | $wp_customize, 112 | 'post_card_border_control', 113 | array( 114 | 'label' => __( 'Border', 'mynote' ), 115 | 'section' => 'section_post_card', 116 | 'settings' => 'post_card_show_border', 117 | 'description' => __( 'Would you like to display the border of the post card?', 'mynote' ), 118 | ) 119 | ) 120 | ); 121 | 122 | $wp_customize->add_control( 123 | new Customize_Toggle_Control( 124 | $wp_customize, 125 | 'post_card_gradient_mask_control', 126 | array( 127 | 'label' => __( 'Gradient Mask', 'mynote' ), 128 | 'section' => 'section_post_card', 129 | 'settings' => 'post_card_show_gradient_mask', 130 | 'description' => __( 'Would you like to display the gradient mask on the text?', 'mynote' ), 131 | ) 132 | ) 133 | ); 134 | 135 | $wp_customize->add_control( 136 | new Customize_Toggle_Control( 137 | $wp_customize, 138 | 'post_card_body_footer_control', 139 | array( 140 | 'label' => __( 'Buttons', 'mynote' ), 141 | 'section' => 'section_post_card', 142 | 'settings' => 'post_card_show_body_footer', 143 | 'description' => __( 'Would you like to display the buttons in the post body?', 'mynote' ), 144 | ) 145 | ) 146 | ); 147 | } 148 | -------------------------------------------------------------------------------- /inc/customer/post-page.php: -------------------------------------------------------------------------------- 1 | add_section( 30 | 'section_post_page', 31 | array( 32 | 'title' => __( 'Post Page', 'mynote' ), 33 | 'priority' => 10, 34 | ) 35 | ); 36 | 37 | /** 38 | * Setting 39 | */ 40 | $wp_customize->add_setting( 41 | 'post_page_show_breadcrumb', 42 | array( 43 | 'default' => true, 44 | 'sanitize_callback' => 'sanitize_text_field', 45 | ) 46 | ); 47 | 48 | $wp_customize->add_setting( 49 | 'post_page_show_author_date', 50 | array( 51 | 'default' => true, 52 | 'sanitize_callback' => 'sanitize_text_field', 53 | ) 54 | ); 55 | 56 | $wp_customize->add_setting( 57 | 'post_page_show_feature_image', 58 | array( 59 | 'default' => true, 60 | 'sanitize_callback' => 'sanitize_text_field', 61 | ) 62 | ); 63 | 64 | $wp_customize->add_setting( 65 | 'post_page_show_author_card', 66 | array( 67 | 'default' => true, 68 | 'sanitize_callback' => 'sanitize_text_field', 69 | ) 70 | ); 71 | 72 | $wp_customize->add_setting( 73 | 'post_page_show_comments', 74 | array( 75 | 'default' => true, 76 | 'sanitize_callback' => 'sanitize_text_field', 77 | ) 78 | ); 79 | 80 | /** 81 | * Control 82 | */ 83 | $wp_customize->add_control( 84 | new Customize_Toggle_Control( 85 | $wp_customize, 86 | 'post_page_show_breadcrumb_control', 87 | array( 88 | 'label' => __( 'Breadcrumb', 'mynote' ), 89 | 'section' => 'section_post_page', 90 | 'settings' => 'post_page_show_breadcrumb', 91 | ) 92 | ) 93 | ); 94 | 95 | $wp_customize->add_control( 96 | new Customize_Toggle_Control( 97 | $wp_customize, 98 | 'post_page_show_author_date_control', 99 | array( 100 | 'label' => __( 'Post Author and Date', 'mynote' ), 101 | 'section' => 'section_post_page', 102 | 'settings' => 'post_page_show_author_date', 103 | ) 104 | ) 105 | ); 106 | 107 | $wp_customize->add_control( 108 | new Customize_Toggle_Control( 109 | $wp_customize, 110 | 'post_page_show_feature_image_control', 111 | array( 112 | 'label' => __( 'Featured Image', 'mynote' ), 113 | 'section' => 'section_post_page', 114 | 'settings' => 'post_page_show_feature_image', 115 | ) 116 | ) 117 | ); 118 | 119 | $wp_customize->add_control( 120 | new Customize_Toggle_Control( 121 | $wp_customize, 122 | 'post_page_show_author_card_control', 123 | array( 124 | 'label' => __( 'Author Card', 'mynote' ), 125 | 'section' => 'section_post_page', 126 | 'settings' => 'post_page_show_author_card', 127 | ) 128 | ) 129 | ); 130 | 131 | $wp_customize->add_control( 132 | new Customize_Toggle_Control( 133 | $wp_customize, 134 | 'post_page_show_comments_control', 135 | array( 136 | 'label' => __( 'Comment Section', 'mynote' ), 137 | 'section' => 'section_post_page', 138 | 'settings' => 'post_page_show_comments', 139 | ) 140 | ) 141 | ); 142 | } 143 | -------------------------------------------------------------------------------- /inc/customer/progress-bar.php: -------------------------------------------------------------------------------- 1 | add_panel( 37 | 'panel_mynote_progress_bar', 38 | array( 39 | 'title' => __( 'Progress Bar', 'mynote' ), 40 | 'priority' => 10, 41 | ) 42 | ); 43 | 44 | /** 45 | * Section 46 | */ 47 | $wp_customize->add_section( 48 | 'section_progress_bar_basic', 49 | array( 50 | 'title' => __( 'Basic Settings', 'mynote' ), 51 | 'description' => __( 'The basic settings of the page progress bar.', 'mynote' ), 52 | 'priority' => 10, 53 | 'panel' => 'panel_mynote_progress_bar', 54 | ) 55 | ); 56 | 57 | $wp_customize->add_section( 58 | 'section_progress_bar_color', 59 | array( 60 | 'title' => __( 'Color', 'mynote' ), 61 | 'description' => __( 'Customize the color pattern of the page progress bar.', 'mynote' ), 62 | 'priority' => 10, 63 | 'panel' => 'panel_mynote_progress_bar', 64 | ) 65 | ); 66 | 67 | /** 68 | * Setting 69 | */ 70 | $wp_customize->add_setting( 71 | 'progressbar_is_display_bar', 72 | array( 73 | 'default' => true, 74 | 'sanitize_callback' => 'sanitize_text_field', 75 | ) 76 | ); 77 | 78 | $wp_customize->add_setting( 79 | 'progressbar_bg_color', 80 | array( 81 | 'default' => $default_navbar_color, 82 | 'sanitize_callback' => 'sanitize_text_field', 83 | ) 84 | ); 85 | 86 | $wp_customize->add_setting( 87 | 'progressbar_text_color', 88 | array( 89 | 'default' => $default_navbar_link_color, 90 | 'sanitize_callback' => 'sanitize_text_field', 91 | ) 92 | ); 93 | $wp_customize->add_setting( 94 | 'progressbar_percentage_bg_color', 95 | array( 96 | 'default' => $default_navbar_link_color, 97 | 'sanitize_callback' => 'sanitize_text_field', 98 | ) 99 | ); 100 | 101 | $wp_customize->add_setting( 102 | 'progressbar_is_display_percentage', 103 | array( 104 | 'default' => true, 105 | 'sanitize_callback' => 'sanitize_text_field', 106 | ) 107 | ); 108 | 109 | $wp_customize->add_setting( 110 | 'progressbar_preferred_color', 111 | array( 112 | 'default' => 'default', 113 | 'sanitize_callback' => 'esc_attr', 114 | ) 115 | ); 116 | 117 | $wp_customize->add_setting( 118 | 'progressbar_custom_bg_color', 119 | array( 120 | 'default' => $default_navbar_color, 121 | 'sanitize_callback' => 'sanitize_text_field', 122 | ) 123 | ); 124 | 125 | $wp_customize->add_setting( 126 | 'progressbar_custom_text_color', 127 | array( 128 | 'default' => $default_navbar_link_color, 129 | 'sanitize_callback' => 'sanitize_text_field', 130 | ) 131 | ); 132 | 133 | $wp_customize->add_setting( 134 | 'progressbar_custom_border_color', 135 | array( 136 | 'default' => $default_progress_bar_border_color, 137 | 'sanitize_callback' => 'esc_attr', 138 | ) 139 | ); 140 | 141 | /** 142 | * Control 143 | */ 144 | $wp_customize->add_control( 145 | new Customize_Toggle_Control( 146 | $wp_customize, 147 | 'progressbar_is_display_bar_control', 148 | array( 149 | 'label' => __( 'Display Progress Bar', 'mynote' ), 150 | 'section' => 'section_progress_bar_basic', 151 | 'settings' => 'progressbar_is_display_bar', 152 | 'description' => __( 'Would you like to display a progress bar while reading?', 'mynote' ), 153 | ) 154 | ) 155 | ); 156 | 157 | $wp_customize->add_control( 158 | new Customize_Toggle_Control( 159 | $wp_customize, 160 | 'progressbar_is_display_percentage_control', 161 | array( 162 | 'label' => __( 'Display Percentage Number', 'mynote' ), 163 | 'section' => 'section_progress_bar_basic', 164 | 'settings' => 'progressbar_is_display_percentage', 165 | 'description' => __( 'Would you like to display a percentage number on the progress bar?', 'mynote' ), 166 | ) 167 | ) 168 | ); 169 | 170 | $wp_customize->add_control( 171 | new WP_Customize_Control( 172 | $wp_customize, 173 | 'progressbar_preferred_color_control', 174 | array( 175 | 'label' => __( 'Color Pattern', 'mynote' ), 176 | 'section' => 'section_progress_bar_basic', 177 | 'settings' => 'progressbar_preferred_color', 178 | 'type' => 'radio', 179 | 'description' => __( 'Choose a preferred color pattern and apply it to the progress bar.', 'mynote' ), 180 | 'choices' => array( 181 | 'default' => __( 'Default', 'mynote' ), 182 | 'menu' => __( 'As same as website menu', 'mynote' ), 183 | 'custom' => __( 'Custom', 'mynote' ), 184 | ), 185 | ) 186 | ) 187 | ); 188 | 189 | $wp_customize->add_control( 190 | new Customize_Alpha_Color_Control( 191 | $wp_customize, 192 | 'progressbar_custom_bg_color_control', 193 | array( 194 | 'label' => __( 'Background Color', 'mynote' ), 195 | 'section' => 'section_progress_bar_color', 196 | 'settings' => 'progressbar_custom_bg_color', 197 | 'show_opacity' => true, 198 | 'palette' => $default_color_palette, 199 | ) 200 | ) 201 | ); 202 | 203 | $wp_customize->add_control( 204 | new WP_Customize_Color_Control( 205 | $wp_customize, 206 | 'progressbar_custom_text_color_control', 207 | array( 208 | 'label' => __( 'Text Color', 'mynote' ), 209 | 'section' => 'section_progress_bar_color', 210 | 'settings' => 'progressbar_custom_text_color', 211 | ) 212 | ) 213 | ); 214 | 215 | $wp_customize->add_control( 216 | new Customize_Alpha_Color_Control( 217 | $wp_customize, 218 | 'progressbar_custom_border_color_control', 219 | array( 220 | 'label' => __( 'Border Color', 'mynote' ), 221 | 'section' => 'section_progress_bar_color', 222 | 'settings' => 'progressbar_custom_border_color', 223 | 'show_opacity' => true, 224 | 'palette' => $default_color_palette, 225 | ) 226 | ) 227 | ); 228 | } 229 | -------------------------------------------------------------------------------- /inc/customizer.php: -------------------------------------------------------------------------------- 1 | 'fab fa-behance behance', 22 | 'codepen.io' => 'fab fa-codepen codepen', 23 | 'deviantart.com' => 'fab fa-deviantart deviantart', 24 | 'digg.com' => 'fab fa-digg digg', 25 | 'docker.com' => 'fab fa-docker docker', 26 | 'dribbble.com' => 'fab fa-dribbble dribbble', 27 | 'dropbox.com' => 'fab fa-dropbox dropbox', 28 | 'facebook.com' => 'fab fa-facebook-f facebook', 29 | 'flickr.com' => 'fab fa-flickr flickr', 30 | 'foursquare.com' => 'fab fa-foursquare foursquare', 31 | 'plus.google.com' => 'fab fa-google-plus-g google', 32 | 'github.com' => 'fab fa-github-alt github', 33 | 'instagram.com' => 'fab fa-instagram instagram', 34 | 'linkedin.com' => 'fab fa-linkedin-in linkedin', 35 | 'mailto:' => 'far fa-envelope envelope', 36 | 'medium.com' => 'fab fa-medium-m medium', 37 | 'pinterest.com' => 'fab fa-pinterest-p pinterest', 38 | 'pscp.tv' => 'fab fa-periscope periscope', 39 | 'getpocket.com' => 'fab fa-get-pocket getpocket', 40 | 'reddit.com' => 'fab fa-reddit-alien reddit', 41 | 'skype.com' => 'fab fa-skype skype', 42 | 'skype:' => 'fab fa-skype skype', 43 | 'slideshare.net' => 'fab fa-slideshare slideshare', 44 | 'snapchat.com' => 'fab fa-snapchat-ghost snapchat', 45 | 'soundcloud.com' => 'fab fa-soundcloud soundcloud', 46 | 'spotify.com' => 'fab fa-spotify spotify', 47 | 'stumbleupon.com' => 'fab fa-stumbleupon stumbleupon', 48 | 'tumblr.com' => 'fab fa-tumblr tumblr', 49 | 'twitch.tv' => 'fab fa-twitch twitch', 50 | 'twitter.com' => 'fab fa-twitter twitter', 51 | 'vimeo.com' => 'fab fa-vimeo-v vimeo', 52 | 'vine.co' => 'fab fa-vine vine', 53 | 'vk.com' => 'fab fa-vk vk', 54 | 'wordpress.org' => 'fab fa-wordpress wordpress', 55 | 'wordpress.com' => 'fab fa-wordpress-simple wordpress', 56 | 'yelp.com' => 'fab fa-yelp yelp', 57 | 'youtube.com' => 'fab fa-youtube youtube', 58 | ); 59 | 60 | return $social_links_icons; 61 | } 62 | 63 | /** 64 | * Filters a menu item's starting output. 65 | * 66 | * @param string $item_output The menu item output. 67 | * @param WP_Post $item Menu item object. 68 | * @param int $depth Depth of the menu. 69 | * @param stdClass $args wp_nav_menu() arguments. 70 | * @return string $item_output The menu item output with social icon. 71 | */ 72 | function mynote_nav_menu_social_icons( $item_output, $item, $depth, $args ) { 73 | 74 | // Get supported social icons. 75 | $social_icons = mynote_social_links_icons(); 76 | $size_type = get_theme_mod( 'layout_cols_footer_icon_size' ); 77 | 78 | if ( 'md' === $size_type ) { 79 | $size_css = 'brand-md'; 80 | } elseif ( 'lg' === $size_type ) { 81 | $size_css = 'brand-lg'; 82 | } elseif ( 'xl' === $size_type ) { 83 | $size_css = 'brand-xl'; 84 | } else { 85 | $size_css = 'brand-sm'; 86 | } 87 | 88 | // Replace title with font icon inside social links menu. 89 | if ( 'social' === $args->theme_location ) { 90 | $is_icon_found = false; 91 | foreach ( $social_icons as $attr => $value ) { 92 | if ( false !== strpos( $item_output, $attr ) ) { 93 | $is_icon_found = true; 94 | $item_output = preg_replace( '#' . $args->link_before . '(.+)' . $args->link_after . '#i', '', $item_output ); 95 | } 96 | } 97 | if ( ! $is_icon_found ) { 98 | $item_output = preg_replace( '#' . $args->link_before . '(.+)' . $args->link_after . '#i', '', $item_output ); 99 | } 100 | } 101 | return $item_output; 102 | } 103 | -------------------------------------------------------------------------------- /inc/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/inc/index.html -------------------------------------------------------------------------------- /inc/template-hook-functions.php: -------------------------------------------------------------------------------- 1 | 49 | 75 | 89 |
    90 |
    91 |
    92 | 93 |
    94 |
    95 |
    96 | 110 |
    111 |
    112 |
    113 |
    114 |
    115 |
    116 | 117 |
    118 |
    119 | 137 | 138 |
    139 |
    140 |
    141 |
    142 |

    143 |

    144 | 145 |

    146 |
    147 |
    148 | 149 | 156 | 157 |

    158 | 159 |
    160 |
    161 |
    162 |
    163 | 164 |
    165 |
    166 | 180 | 187 | 202 | 207 | 222 | 227 | 242 | 254 | ' ' . __( 'Previous page', 'mynote' ) . '', 273 | 'next_text' => '' . __( 'Next page', 'mynote' ) . ' ', 274 | 'before_page_number' => '' . __( 'Page', 'mynote' ) . ' ', 275 | ) 276 | ); 277 | } 278 | } 279 | } 280 | 281 | if ( ! function_exists( 'mynote_post_metadata' ) ) { 282 | /** 283 | * Display post metadata before post's content. 284 | * 285 | * @since 2.0.0 286 | * @return void 287 | */ 288 | function mynote_post_metadata() { 289 | if ( have_posts() ) { 290 | while ( have_posts() ) { 291 | the_post(); 292 | mynote_post_breadcrumb(); 293 | 294 | ?> 295 |
    296 |
    297 | 298 |

    299 |
    300 | 301 | 302 | 303 | 304 | 305 | 306 | 307 |
    308 | 309 | 310 |
    311 | 312 |
    313 | 314 | 315 |
    316 |
    317 | '; 333 | } 334 | } 335 | } 336 | -------------------------------------------------------------------------------- /inc/template-hooks.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 |
    25 | 26 | 34 | 35 |
    36 |
    37 | 38 |
    39 | 40 | 48 | 49 |
    50 | 51 | 59 | 60 |
    61 |
    62 |
    63 | 64 |
    65 | 66 | 74 | 75 |
    76 | 77 |
    78 | 79 | 17 | 18 | 19 | 20 |
    21 | 22 | 30 | 31 |
    32 |
    33 |
    34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
    > 42 | 43 | 44 | 45 | 46 | 47 |
    48 | '
    ' . __( 'Pages:', 'mynote' ), 64 | 'after' => '
    ', 65 | ) 66 | ); 67 | ?> 68 |
    69 |
    70 | 71 |
    72 | 73 | 74 |
    75 | 76 |
    77 | 78 |
    79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 |
    87 |

    88 |
    89 | 90 | 91 | 92 |
    93 |
    94 |
    95 | 96 | 102 | 103 |
    104 | 105 | > breakpoint-next(sm) 17 | // md 18 | // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 19 | // md 20 | // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl)) 21 | // md 22 | 23 | // 24 | // 25 | // $grid-breakpoints: ( 26 | // xs: 0, 27 | // mx: 360px, 28 | // sm: 576px, 29 | // md: 768px, 30 | // lg: 992px, 31 | // xl: 1200px 32 | // ) !default; 33 | // 34 | 35 | @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { 36 | $n: index($breakpoint-names, $name); 37 | @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); 38 | } 39 | 40 | // Minimum breakpoint width. Null for the smallest (first) breakpoint. 41 | // 42 | // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 43 | // 576px 44 | @function breakpoint-min($name, $breakpoints: $grid-breakpoints) { 45 | $min: map-get($breakpoints, $name); 46 | @return if($min != 0, $min, null); 47 | } 48 | 49 | // Maximum breakpoint width. Null for the largest (last) breakpoint. 50 | // The maximum value is calculated as the minimum of the next one less 0.02px 51 | // to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths. 52 | // See https://www.w3.org/TR/mediaqueries-4/#mq-min-max 53 | // Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari. 54 | // See https://bugs.webkit.org/show_bug.cgi?id=178261 55 | // 56 | // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 57 | // 767.98px 58 | @function breakpoint-max($name, $breakpoints: $grid-breakpoints) { 59 | $next: breakpoint-next($name, $breakpoints); 60 | @return if($next, breakpoint-min($next, $breakpoints) - .02px, null); 61 | } 62 | 63 | // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront. 64 | // Useful for making responsive utilities. 65 | // 66 | // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 67 | // "" (Returns a blank string) 68 | // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) 69 | // "-sm" 70 | @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) { 71 | @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}"); 72 | } 73 | 74 | // Media of at least the minimum breakpoint width. No query for the smallest breakpoint. 75 | // Makes the @content apply to the given breakpoint and wider. 76 | @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { 77 | $min: breakpoint-min($name, $breakpoints); 78 | @if $min { 79 | @media (min-width: $min) { 80 | @content; 81 | } 82 | } @else { 83 | @content; 84 | } 85 | } 86 | 87 | // Media of at most the maximum breakpoint width. No query for the largest breakpoint. 88 | // Makes the @content apply to the given breakpoint and narrower. 89 | @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { 90 | $max: breakpoint-max($name, $breakpoints); 91 | @if $max { 92 | @media (max-width: $max) { 93 | @content; 94 | } 95 | } @else { 96 | @content; 97 | } 98 | } 99 | 100 | // Media that spans multiple breakpoint widths. 101 | // Makes the @content apply between the min and max breakpoints 102 | @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) { 103 | $min: breakpoint-min($lower, $breakpoints); 104 | $max: breakpoint-max($upper, $breakpoints); 105 | 106 | @if $min != null and $max != null { 107 | @media (min-width: $min) and (max-width: $max) { 108 | @content; 109 | } 110 | } @else if $max == null { 111 | @include media-breakpoint-up($lower, $breakpoints) { 112 | @content; 113 | } 114 | } @else if $min == null { 115 | @include media-breakpoint-down($upper, $breakpoints) { 116 | @content; 117 | } 118 | } 119 | } 120 | 121 | // Media between the breakpoint's minimum and maximum widths. 122 | // No minimum for the smallest breakpoint, and no maximum for the largest one. 123 | // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower. 124 | @mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) { 125 | $min: breakpoint-min($name, $breakpoints); 126 | $max: breakpoint-max($name, $breakpoints); 127 | 128 | @if $min != null and $max != null { 129 | @media (min-width: $min) and (max-width: $max) { 130 | @content; 131 | } 132 | } @else if $max == null { 133 | @include media-breakpoint-up($name, $breakpoints) { 134 | @content; 135 | } 136 | } @else if $min == null { 137 | @include media-breakpoint-down($name, $breakpoints) { 138 | @content; 139 | } 140 | } 141 | } 142 | 143 | @mixin clearfix() { 144 | &::after { 145 | display: block; 146 | clear: both; 147 | content: ""; 148 | } 149 | } 150 | 151 | // Retrieve color Sass maps 152 | @function color($key: "blue") { 153 | @return map-get($colors, $key); 154 | } 155 | 156 | @function theme-color($key: "primary") { 157 | @return map-get($theme-colors, $key); 158 | } 159 | 160 | @function gray($key: "100") { 161 | @return map-get($grays, $key); 162 | } 163 | 164 | 165 | -------------------------------------------------------------------------------- /scss/_breadcrumb.scss: -------------------------------------------------------------------------------- 1 | .breadcrumb { 2 | font-size: 0.813rem !important; 3 | border-radius: 0 !important; 4 | 5 | ul, li { 6 | margin: 0 !important; 7 | padding-top: 0 !important; 8 | padding-bottom: 0 !important; 9 | } 10 | 11 | li:last-child { 12 | text-overflow: ellipsis; 13 | white-space: nowrap; 14 | overflow: hidden; 15 | 16 | @include media-breakpoint-down(sm) { 17 | width: 50%; 18 | 19 | } 20 | } 21 | 22 | i { 23 | color: #333333; 24 | } 25 | } 26 | 27 | .data-schema { 28 | .breadcrumb { 29 | margin-bottom: 0 !important; 30 | } 31 | } 32 | 33 | -------------------------------------------------------------------------------- /scss/_buttons.scss: -------------------------------------------------------------------------------- 1 | .btn-counter { 2 | display: inline-block; 3 | 4 | .btn { 5 | float: left; 6 | color: #24292e; 7 | position: relative; 8 | display: inline-block; 9 | padding: 3px 10px; 10 | font-size: 12px; 11 | font-weight: 600; 12 | line-height: 20px; 13 | white-space: nowrap; 14 | vertical-align: middle; 15 | cursor: pointer; 16 | -webkit-user-select: none; 17 | -moz-user-select: none; 18 | -ms-user-select: none; 19 | user-select: none; 20 | border: 1px solid rgba(27,31,35,0.2); 21 | border-radius: 0.25em; 22 | border-top-right-radius: 0; 23 | border-bottom-right-radius: 0; 24 | background-color: #eff3f6; 25 | background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%); 26 | background-repeat: repeat-x; 27 | background-position: -1px -1px; 28 | background-size: 110% 110%; 29 | -webkit-appearance: none; 30 | -moz-appearance: none; 31 | appearance: none; 32 | } 33 | 34 | &.active { 35 | .btn { 36 | background-image: linear-gradient(-180deg, #dddddd 0%, #ffffff 90%); 37 | } 38 | } 39 | 40 | &.text-only .btn { 41 | border-top-right-radius: 0.25em; 42 | border-bottom-right-radius: 0.25em; 43 | } 44 | 45 | .count-box { 46 | float: left; 47 | padding: 3px 10px; 48 | font-size: 12px; 49 | font-weight: 600; 50 | line-height: 20px; 51 | color: #24292e; 52 | vertical-align: middle; 53 | background-color: #fff; 54 | border: 1px solid rgba(27,31,35,0.2); 55 | border-left: 0; 56 | border-top-right-radius: 3px; 57 | border-bottom-right-radius: 3px; 58 | } 59 | } 60 | 61 | .btn-group { 62 | display: inline-block; 63 | font-size: 0; 64 | 65 | .btn-counter { 66 | 67 | .btn { 68 | border-radius: 0; 69 | } 70 | 71 | &:first-child .btn { 72 | border-top-left-radius: 0.25em; 73 | border-bottom-left-radius: 0.25em; 74 | } 75 | 76 | &:last-child .btn { 77 | border-left-width: 0 !important; 78 | border-top-right-radius: 0.25em; 79 | border-bottom-right-radius: 0.25em; 80 | } 81 | } 82 | } 83 | 84 | .post-mynote-buttons { 85 | overflow: hidden; 86 | font-size: 0; 87 | display: flex; 88 | 89 | 90 | 91 | a, a:hover { 92 | text-decoration: none !important; 93 | } 94 | 95 | > div, > a { 96 | margin-left: 5px !important; 97 | } 98 | 99 | .github-button-container { 100 | display: inline-block; 101 | margin-left: 5px; 102 | 103 | a { 104 | display: none; 105 | } 106 | } 107 | } 108 | 109 | .btn-green { 110 | background-color: #28a745; 111 | background-image: linear-gradient(-180deg, #34d058 0%, #28a745 90%); 112 | border-color: rgba(27,31,35,0.5); 113 | color: #ffffff; 114 | } 115 | 116 | a { 117 | &.btn, &.button-like-link { 118 | text-decoration: none !important; 119 | } 120 | &.btn-xs { 121 | padding: .125rem .25rem; 122 | font-size: .675rem; 123 | line-height: 1.2; 124 | border-radius: .2rem; 125 | } 126 | &.btn-info { 127 | color: #17a2b8; 128 | } 129 | } 130 | 131 | 132 | -------------------------------------------------------------------------------- /scss/_comment.scss: -------------------------------------------------------------------------------- 1 | /* Comment */ 2 | 3 | .discussion-timeline { 4 | margin-top: 20px; 5 | padding-top: 2px; 6 | border-top: 1px solid #e6ebf1; 7 | } 8 | 9 | .comment-wrapper { 10 | position: relative; 11 | padding-left: 60px; 12 | margin-top: 15px; 13 | margin-bottom: 15px; 14 | border-top: 2px solid #fff; 15 | border-bottom: 2px solid #fff; 16 | 17 | .comment-avatar { 18 | float: left; 19 | margin-left: -60px; 20 | border-radius: 3px; 21 | 22 | .avatar { 23 | display: inline-block; 24 | overflow: hidden; 25 | line-height: 1; 26 | vertical-align: middle; 27 | border-radius: 3px; 28 | } 29 | } 30 | 31 | .comment-container { 32 | position: relative; 33 | background-color: #fff; 34 | border: 1px solid #d1d5da; 35 | border-radius: 3px; 36 | } 37 | 38 | .comment-header { 39 | padding-right: 15px; 40 | padding-left: 15px; 41 | color: #586069; 42 | border-top-left-radius: 3px; 43 | border-top-right-radius: 3px; 44 | 45 | .comment-header-text { 46 | padding: 10px 0; 47 | max-width: 75%; 48 | } 49 | 50 | .comment-label { 51 | float: right; 52 | padding: 2px 5px; 53 | margin: 8px 0 0 10px; 54 | font-size: 12px; 55 | cursor: default; 56 | border: 1px solid rgba(27, 31, 35, 0.1); 57 | border-radius: 3px; 58 | } 59 | 60 | .comment-header-btn { 61 | display: block; 62 | float: right; 63 | margin: 8px 0 0 10px; 64 | 65 | a { 66 | font-size: 14px; 67 | padding: 5px; 68 | color: rgba(27, 31, 35, 0.3) !important; 69 | } 70 | } 71 | } 72 | 73 | cite { 74 | 75 | &.author { 76 | color: #c43d3d; 77 | 78 | a { 79 | color: #c43d3d !important; 80 | } 81 | } 82 | 83 | &.reader { 84 | color: #586069; 85 | 86 | a { 87 | color: #586069 !important; 88 | } 89 | } 90 | } 91 | 92 | .comment-link { 93 | color: #586069 !important; 94 | } 95 | 96 | .comment-body { 97 | width: 100%; 98 | padding: 15px; 99 | overflow: visible; 100 | } 101 | 102 | } 103 | 104 | .even { 105 | .comment-header { 106 | background-color: #f1f8ff; 107 | border-bottom: 1px solid #c0d3eb; 108 | } 109 | } 110 | 111 | .odd { 112 | .comment-header { 113 | background-color: #f6f8fa; 114 | border-bottom: 1px solid #d1d5da; 115 | } 116 | } 117 | 118 | .comment-reply-title { 119 | margin: 10px 0; 120 | } 121 | 122 | 123 | -------------------------------------------------------------------------------- /scss/_footer.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .footer { 4 | margin: 40px 0 20px 0; 5 | 6 | .footer-columns { 7 | font-weight: 400; 8 | font-size: 13px; 9 | text-align: left; 10 | display: flex; 11 | justify-content: space-between; 12 | 13 | a, strong { 14 | font-weight: normal; 15 | color: #333333; 16 | } 17 | } 18 | 19 | .footer-nav { 20 | text-align: center; 21 | font-size: 14px; 22 | display: inline-block; 23 | 24 | ul.footer-menu { 25 | padding: 0; 26 | margin: 0; 27 | display: inline-flex; 28 | list-style-type: none; 29 | 30 | li { 31 | margin: 0; 32 | 33 | &:after { 34 | content: "|"; 35 | color: #aaaaaa; 36 | margin: 0 10px; 37 | font-size: 13px; 38 | } 39 | 40 | &:last-child { 41 | &:after { 42 | display: none; 43 | } 44 | } 45 | } 46 | 47 | a { 48 | font-size: 13px; 49 | } 50 | } 51 | 52 | ul.social-icon-links { 53 | padding: 0; 54 | margin: 0; 55 | display: inline-flex; 56 | list-style-type: none; 57 | 58 | li { 59 | margin: 5px 10px; 60 | } 61 | 62 | a { 63 | color: #333333; 64 | } 65 | } 66 | } 67 | 68 | @include media-breakpoint-down(sm) { 69 | .footer-columns { 70 | display: block; 71 | } 72 | 73 | .footer-nav { 74 | display: block; 75 | 76 | ul.footer-menu { 77 | display: block; 78 | margin: 15px 0; 79 | 80 | li { 81 | 82 | a { 83 | border: 1px #dddddd solid; 84 | display: block; 85 | padding: 5px 10px; 86 | margin: 5px 0; 87 | border-radius: 4px; 88 | text-decoration: none; 89 | 90 | &:hover { 91 | border: 1px #222222 solid; 92 | background-color: #333333; 93 | color: #ffffff; 94 | } 95 | 96 | } 97 | 98 | &:after { 99 | content: ""; 100 | display: none; 101 | } 102 | } 103 | } 104 | 105 | ul.social-icon-links { 106 | display: block; 107 | list-style-type: none; 108 | 109 | li { 110 | display: inline-block; 111 | } 112 | } 113 | } 114 | } 115 | 116 | .brand-link { 117 | &:hover { 118 | background-color: #f1f1f1; 119 | color: #111111; 120 | } 121 | } 122 | } 123 | 124 | .home { 125 | .footer { 126 | border-top: 0; 127 | } 128 | } 129 | -------------------------------------------------------------------------------- /scss/_functions.scss: -------------------------------------------------------------------------------- 1 | // Base functions to get safe web font 2 | 3 | @function get-base-font($key: "en") { 4 | @return map-get($font-family-base, $key); 5 | } 6 | 7 | @function get-title-font($key: "en") { 8 | @return map-get($font-family-title, $key); 9 | } 10 | 11 | @function get-heading-font($key: "en") { 12 | @return map-get($font-family-heading, $key); 13 | } 14 | 15 | // Metal 16 | 17 | // Designer: Simurai 18 | // Credit: http://simurai.com 19 | // Source: https://codepen.io/simurai/pen/DwJdq 20 | 21 | // Simply modify it for my need. 22 | 23 | @mixin metal() { 24 | text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px; 25 | background-image: -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 6%, hsla(0, 0%, 100%, .1) 7.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 4%, hsla(0, 0%, 0%, .03) 4.5%), -webkit-repeating-linear-gradient(left, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 1.2%, hsla(0, 0%, 100%, .15) 2.2%), linear-gradient(180deg, hsl(0, 0%, 78%) 0%, hsl(0, 0%, 90%) 47%, hsl(0, 0%, 78%) 53%, hsl(0, 0%, 70%)100%); 26 | color: hsla(0,0%,20%,1); 27 | box-shadow: inset hsla(0,0%,15%, .2) 0 0px 0px 1px, /* border */ 28 | inset hsla(0,0%,15%, .2) 0 -1px 1px 1px, /* soft SD */ 29 | inset hsla(0,0%,0%, .25) 0 -1px 0px 2px, /* bottom SD */ 30 | inset hsla(0,0%,100%,.7) 0 1px 0px 2px, /* top HL */ 31 | hsla(0,0%, 0%,.15) 0 -1px 1px 1px, /* outer SD */ 32 | hsla(0,0%,100%,.5) 0 1px 1px 1px; /* outer HL */ 33 | } -------------------------------------------------------------------------------- /scss/_header.scss: -------------------------------------------------------------------------------- 1 | 2 | 3 | .header { 4 | background-color: $header_navbar_bg; 5 | color: #c8c9ca; 6 | position: relative; 7 | z-index: 2; 8 | 9 | .container { 10 | min-height: 60px; 11 | } 12 | 13 | .logo-img { 14 | height: 32px; 15 | } 16 | 17 | .navbar-brand { 18 | padding: 0; 19 | } 20 | 21 | .navbar { 22 | min-height: 60px; 23 | padding: 10px !important; 24 | 25 | .home-link { 26 | text-decoration: none; 27 | color: #f1f1f1; 28 | margin-right: 20px; 29 | 30 | &:hover { 31 | color: #ffffff !important; 32 | } 33 | } 34 | } 35 | 36 | &.fixed-top { 37 | .container { 38 | justify-content: flex-start; 39 | } 40 | } 41 | 42 | .search-bar { 43 | width: 300px; 44 | min-height: 30px; 45 | color: #fff; 46 | background-color: rgba(255,255,255,0.125); 47 | border: 0; 48 | position: relative; 49 | box-shadow: none; 50 | margin-right: 10px; 51 | 52 | .search-input { 53 | color: #ccc; 54 | display: table-cell; 55 | width: calc(100% - 30px); 56 | min-height: 30px; 57 | padding: 0 10px; 58 | background: none; 59 | border: 0; 60 | box-shadow: none; 61 | 62 | &:focus { 63 | background-color: rgba(255,255,255,0.06); 64 | color: #f1f1f1; 65 | outline: none; 66 | } 67 | } 68 | 69 | .search-icon { 70 | width: 30px; 71 | min-height: 24px; 72 | line-height: 24px; 73 | position: absolute; 74 | right: 0; 75 | top: 3px; 76 | display: table-cell; 77 | text-align: center; 78 | cursor: pointer; 79 | font-size: 13px; 80 | color: rgba(255,255,255,0.2); 81 | padding: 0; 82 | background: none; 83 | border: 0; 84 | border-left: 1px rgba(0, 0, 0, 0.3) solid; 85 | box-shadow: none; 86 | } 87 | } 88 | 89 | .navbar-nav { 90 | & > li > a { 91 | color: rgba(255, 255, 255, 0.75) !important; 92 | 93 | &:hover { 94 | color: rgba(255, 255, 255, 1) !important; 95 | } 96 | } 97 | 98 | /* The dropdown menu */ 99 | 100 | .dropdown-toggle { 101 | &::after { 102 | display: inline-block; 103 | width: 0; 104 | height: 0; 105 | margin-left: .4em !important; 106 | vertical-align: middle !important; 107 | content: ""; 108 | border-top: .3em solid; 109 | border-right: .3em solid transparent; 110 | border-bottom: 0; 111 | border-left: .3em solid transparent; 112 | } 113 | } 114 | 115 | .dropdown-menu { 116 | min-width: 10rem; 117 | padding: .5rem 0; 118 | margin: 6px 0 0; 119 | font-size: 1rem; 120 | color: #212529; 121 | text-align: left; 122 | list-style: none; 123 | background-color: #fff; 124 | background-clip: padding-box; 125 | border: 1px solid rgba(0,0,0,.15); 126 | border-radius: 0; 127 | box-shadow: 0 8px 6px -6px rgba(0,0,0,.15); 128 | 129 | @include media-breakpoint-up(lg) { 130 | 131 | &::before { 132 | border-bottom: 9px solid rgba(0, 0, 0, 0.2); 133 | border-left: 9px solid rgba(0, 0, 0, 0); 134 | border-right: 9px solid rgba(0, 0, 0, 0); 135 | content: ""; 136 | display: inline-block; 137 | left: 25px; 138 | position: absolute; 139 | top: -8px; 140 | } 141 | &::after { 142 | border-bottom: 8px solid #FFFFFF; 143 | border-left: 9px solid rgba(0, 0, 0, 0); 144 | border-right: 9px solid rgba(0, 0, 0, 0); 145 | content: ""; 146 | display: inline-block; 147 | left: 25px; 148 | position: absolute; 149 | top: -7px; 150 | } 151 | } 152 | } 153 | 154 | .dropdown-item { 155 | font-weight: 600; 156 | } 157 | } 158 | 159 | /* Default wordpress menu */ 160 | 161 | .menu-item a { 162 | display: block; 163 | padding: .5rem 0; 164 | } 165 | } 166 | 167 | .has-site-logo { 168 | .navbar-brand { 169 | margin-bottom: -10px; 170 | margin-top: -10px; 171 | } 172 | .header { 173 | .logo-img { 174 | height: 60px; 175 | } 176 | } 177 | } 178 | 179 | .wrapper { 180 | position: relative; 181 | } 182 | 183 | .menu-is-collapsed { 184 | header.header { 185 | width: 100%; 186 | position: absolute; 187 | top: 0; 188 | z-index: 9999; 189 | } 190 | .wrapper { 191 | padding-top: 60px; 192 | } 193 | } 194 | 195 | -------------------------------------------------------------------------------- /scss/_home.scss: -------------------------------------------------------------------------------- 1 | 2 | .section-intro { 3 | width: 100%; 4 | min-height: $home_intro_box_height; 5 | background-color: $home_intro_bg; 6 | color: $home-intro-font-color; 7 | overflow: hidden; 8 | 9 | a { 10 | color: $white !important; 11 | cursor: pointer; 12 | } 13 | 14 | .desc-text { 15 | color: gray("500"); 16 | } 17 | } 18 | /* 19 | .menu-is-collapsed { 20 | .header { 21 | -webkit-transition: background-color 0.5s; 22 | -moz-transition: background-color 0.5s; 23 | -o-transition: background-color 0.5s; 24 | transition: background-color 0.5s 25 | } 26 | } 27 | */ 28 | 29 | .main-header { 30 | position: relative; 31 | top: -60px; 32 | 33 | .section-intro { 34 | position: relative; 35 | 36 | @include media-breakpoint-down(sm) { 37 | width: 100%; 38 | min-height: 100vh; 39 | padding: 80px 0; 40 | background-position: 40% center; 41 | background-size: cover; 42 | } 43 | 44 | .scroll-area { 45 | position: absolute; 46 | bottom: 35px; 47 | margin-left: -25px; 48 | left: 50%; 49 | width: 50px; 50 | height: 50px; 51 | opacity: .9; 52 | overflow: hidden; 53 | display: none; 54 | 55 | a { 56 | width: 50px; 57 | height: 50px; 58 | text-align: center; 59 | display: inline-block; 60 | font-weight: normal; 61 | font-size: 25px; 62 | line-height: 44px; 63 | color: #ffffff; 64 | border-radius: 50%; 65 | border: 3px #ffffff solid; 66 | } 67 | } 68 | } 69 | 70 | &.has-custom-header { 71 | .desc-text { 72 | color: gray("300"); 73 | padding: 15px 45px; 74 | background-color: rgba(0, 0, 0, 0.2); 75 | border-top-left-radius: 1.5em; 76 | border-bottom-right-radius: 3em; 77 | font-style: italic; 78 | } 79 | } 80 | } 81 | 82 | @include media-breakpoint-down(sm) { 83 | .admin-bar { 84 | .main-header { 85 | .section-intro { 86 | min-height: calc(100vh - 46px); 87 | padding: 60px 0; 88 | } 89 | } 90 | } 91 | .scroll-area { 92 | display: inline-block !important; 93 | } 94 | } 95 | 96 | .article-list { 97 | color: #666666; 98 | min-height: 250px; 99 | overflow: hidden; 100 | 101 | a { 102 | color: #333333; 103 | 104 | &:hover { 105 | color: #0366dd; 106 | } 107 | } 108 | 109 | .read-more-link { 110 | color: #0366dd; 111 | } 112 | } 113 | 114 | 115 | 116 | -------------------------------------------------------------------------------- /scss/_labels.scss: -------------------------------------------------------------------------------- 1 | .label { 2 | padding: .125rem .25rem; 3 | line-height: 1.2; 4 | border-radius: .2rem; 5 | border: 1px solid transparent; 6 | &.label-success, 7 | &.label-cat { 8 | color: #155724; 9 | background-color: #d4edda; 10 | border-color: #c3e6cb; 11 | } 12 | &.label-warning, 13 | &.label-tag { 14 | color: #856404; 15 | background-color: #fff3cd; 16 | border-color: #ffeeba; 17 | } 18 | &.label-primary { 19 | color: #004085; 20 | background-color: #cce5ff; 21 | border-color: #b8daff; 22 | } 23 | &.label-secondary { 24 | color: #383d41; 25 | background-color: #e2e3e5; 26 | border-color: #d6d8db; 27 | } 28 | &.label-danger { 29 | color: #721c24; 30 | background-color: #f8d7da; 31 | border-color: #f5c6cb; 32 | } 33 | &.label-light { 34 | color: #818182; 35 | background-color: #fefefe; 36 | border-color: #fdfdfe; 37 | } 38 | &.label-dark { 39 | color: #1b1e21; 40 | background-color: #d6d8d9; 41 | border-color: #c6c8ca; 42 | } 43 | } 44 | 45 | .x-label { 46 | padding: .25rem .5rem; 47 | line-height: 1.5; 48 | border-radius: .3rem; 49 | border: 1px solid transparent; 50 | margin: 5px; 51 | word-break: keep-all !important; 52 | display: inline-block; 53 | } 54 | 55 | $i: 0; 56 | @each $color-name, $color-code in $colors { 57 | .x-label-#{$i} { 58 | color: $white !important; 59 | border-top-color: lighten($color-code, 10%) !important; 60 | border-bottom-color: darken($color-code, 10%) !important; 61 | background-color: $color-code !important; 62 | } 63 | $i: $i+1; 64 | } 65 | -------------------------------------------------------------------------------- /scss/_main.scss: -------------------------------------------------------------------------------- 1 | /* Single - Post */ 2 | 3 | .single-post-header { 4 | background-color: #fafbfc; 5 | background: none; 6 | padding: 20px 0px; 7 | margin-bottom: 20px; 8 | border-bottom: 0px solid #e1e4e8; 9 | 10 | h1 { 11 | font-size: 32px; 12 | margin-bottom: 0; 13 | font-weight: 400; 14 | line-height: 1.125; 15 | word-wrap: break-word; 16 | } 17 | 18 | .post-mynote-buttons { 19 | float: right; 20 | margin-top: 5px; 21 | } 22 | 23 | .author-link { 24 | font-weight: bold; 25 | color: #586069 !important; 26 | } 27 | 28 | .post-meta { 29 | padding: 5px; 30 | font-size: 14px; 31 | 32 | .poster-avatar { 33 | margin-right: 5px; 34 | } 35 | } 36 | } 37 | 38 | .page { 39 | /* Hide post meta in Page */ 40 | .post-meta { 41 | visibility: hidden; 42 | } 43 | } 44 | 45 | article { 46 | figcaption { 47 | color: gray("600"); 48 | margin: 0.25rem 0 1rem; 49 | text-align: center; 50 | font-style: italic; 51 | } 52 | } 53 | 54 | /* Category page. */ 55 | 56 | .category-header { 57 | background-color: #fafbfc; 58 | padding: 20px 0px; 59 | margin-bottom: 20px; 60 | border-bottom: 1px solid #e1e4e8; 61 | 62 | h1 { 63 | font-size: 2rem; 64 | margin-bottom: 0; 65 | font-weight: 400; 66 | line-height: 48px; 67 | word-wrap: break-word; 68 | 69 | &:before { 70 | font-family: 'Font Awesome 5 Free'; 71 | border: 0px #dddddd solid; 72 | border-radius: 5px; 73 | width: 48px; 74 | height: 48px; 75 | padding-left: 6px; 76 | display: inline-block; 77 | vertical-align: middle; 78 | position: relative; 79 | top: -3px; 80 | overflow: hidden; 81 | text-align: center; 82 | margin-right: 10px; 83 | line-height: 48px; 84 | font-size: 1.6rem; 85 | font-weight: 600; 86 | padding-right: 5px; 87 | @include metal(); 88 | } 89 | 90 | &.category:before { 91 | content: '\f0c6'; 92 | } 93 | 94 | &.archive:before { 95 | content: '\f1c6'; 96 | } 97 | 98 | &.tag:before { 99 | content: '\f02c'; 100 | } 101 | 102 | &.git:before { 103 | content: '\f1d3'; 104 | } 105 | 106 | &.search:before { 107 | content: '\f002'; 108 | } 109 | 110 | &.user:before { 111 | content: '\f007'; 112 | } 113 | 114 | &.error-404:before { 115 | content: '\f071'; 116 | } 117 | 118 | .badge { 119 | font-size: 0.81rem; 120 | } 121 | } 122 | 123 | .term-desctiotion { 124 | font-size: 0.81rem !important; 125 | } 126 | } 127 | 128 | /* Single - Post - A part of page title progress bar */ 129 | 130 | .single-post-title-bar { 131 | background-color: #24292e; 132 | color: #c8c9ca; 133 | font-weight: 600; 134 | display: none; 135 | transform: translateY(-60px); 136 | -webkit-transform: translateY(-60px); 137 | transform-origin: top; 138 | transition: .5s ease; 139 | 140 | &.fixed-top { 141 | z-index: 100001; 142 | } 143 | 144 | .container { 145 | justify-content: flex-start; 146 | } 147 | 148 | @include media-breakpoint-down(md) { 149 | .container { 150 | padding: 0; 151 | } 152 | } 153 | 154 | 155 | &.slide-down { 156 | transform: translateY(0); 157 | -webkit-transform: translateY(0); 158 | } 159 | 160 | .logo-img { 161 | height: 32px; 162 | } 163 | 164 | .navbar-brand { 165 | padding: 0; 166 | } 167 | 168 | .navbar { 169 | min-height: 60px; 170 | padding: 10px !important; 171 | } 172 | } 173 | 174 | /* Button - go to top. */ 175 | 176 | .go-top { 177 | display: inline-block; 178 | font-size: 16px; 179 | color: #fff; 180 | background: rgba(0, 0, 0, 0.5); 181 | position: fixed; 182 | right: 15px; 183 | bottom: 15px; 184 | margin: 0px; 185 | z-index: 1000; 186 | width: 35px; 187 | height: 35px; 188 | line-height: 35px; 189 | border-radius: 5px; 190 | text-align: center; 191 | 192 | &:hover { 193 | color: #ffffff; 194 | } 195 | 196 | i { 197 | position: relative; 198 | } 199 | } 200 | 201 | /* Tags */ 202 | 203 | .tags { 204 | margin: 15px 0; 205 | text-align: right; 206 | overflow: hidden; 207 | 208 | a { 209 | padding: 2px 5px; 210 | margin: 5px; 211 | text-decoration: none; 212 | font-size: 0.9rem; 213 | color: #24292e; 214 | border-radius: 3px; 215 | word-break: keep-all; 216 | display: inline-block; 217 | 218 | &:hover { 219 | background-image: linear-gradient(-180deg, #dddddd 0%, #ffffff 90%); 220 | } 221 | 222 | &:before { 223 | font-family: 'Font Awesome 5 Free'; 224 | content: "\f02b"; 225 | font-size: 13px; 226 | font-weight: 900; 227 | padding-right: 5px; 228 | color: #aaaaaa; 229 | } 230 | } 231 | } 232 | 233 | .modified-date { 234 | margin: 40px !important; 235 | text-align: center; 236 | font-size: 0.85rem; 237 | font-style: italic; 238 | } 239 | 240 | /* Pagination */ 241 | 242 | .pagination-container { 243 | margin: 20px auto !important; 244 | } 245 | 246 | /* Read more fade out effect */ 247 | 248 | .card-text-fade-out { 249 | height: 180px; 250 | max-height: 180px; 251 | position: relative !important; 252 | overflow: hidden; 253 | 254 | .effect-layer { 255 | position: absolute; 256 | content: ' '; 257 | bottom: 0; 258 | left: 0; 259 | width: 100%; 260 | height: 80px; 261 | overflow: hidden; 262 | display: block; 263 | text-align: center; 264 | z-index: 2; 265 | margin: 0; 266 | padding: 0 0 20px 0; 267 | background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .5), rgba(255, 255, 255, .9), white); 268 | } 269 | } 270 | 271 | .card-body-footer { 272 | margin-top: 15px; 273 | } 274 | 275 | /* Background image fit the center */ 276 | 277 | .bg-cover { 278 | background-size: cover; 279 | background-repeat: no-repeat; 280 | background-position: center center; 281 | } -------------------------------------------------------------------------------- /scss/_misc.scss: -------------------------------------------------------------------------------- 1 | ::selection { 2 | background:#04A4CC; 3 | color:#FFF; 4 | text-shadow:none; 5 | } 6 | ::-webkit-selection { 7 | background:#04A4CC; 8 | color:#FFF; 9 | text-shadow:none; 10 | } 11 | ::-moz-selection { 12 | background:#04A4CC; 13 | color:#FFF; 14 | text-shadow:none; 15 | } 16 | 17 | -------------------------------------------------------------------------------- /scss/_page-progress.scss: -------------------------------------------------------------------------------- 1 | 2 | $progress-bar-height: 4px; 3 | $progress-bar-color: rgba(214, 168, 168, 0.1); 4 | $progress-bar-value-color: dodgerblue; 5 | 6 | .progress-wrapper { 7 | position: relative; 8 | 9 | progress { 10 | appearance: none; 11 | position: absolute; 12 | width: 100%; 13 | height: $progress-bar-height; 14 | background-color: $progress-bar-color; 15 | border: none; 16 | 17 | &::-moz-progress-bar { 18 | background-color: $progress-bar-value-color; 19 | } 20 | 21 | &::-webkit-progress-bar { 22 | background-color: $progress-bar-color; 23 | } 24 | 25 | &::-webkit-progress-value { 26 | background-color: $progress-bar-value-color; 27 | } 28 | 29 | &::-ms-fill { 30 | background-color: $progress-bar-value-color; 31 | } 32 | } 33 | 34 | .progress-label { 35 | position: absolute; 36 | right: 0; bottom: 0; 37 | font-size: 14px; 38 | color: rgba(255, 255, 255, 0.6); 39 | } 40 | } 41 | 42 | #progress-title { 43 | width: 100%; 44 | display: inline-block; 45 | text-overflow: ellipsis; 46 | white-space: nowrap; 47 | word-break: keep-all !important; 48 | overflow: hidden; 49 | line-height: 40px; 50 | } 51 | 52 | .has-site-icon { 53 | #progress-title { 54 | width: calc(100% - 50px); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /scss/_responsive.scss: -------------------------------------------------------------------------------- 1 | /* > 1200px */ 2 | @include media-breakpoint-up(xl) { 3 | 4 | .section-intro { 5 | background-image: url("./assets/images/bg_circuit.png"); 6 | } 7 | } 8 | 9 | /* > 1200px */ 10 | @include media-breakpoint-up(xxl) { 11 | 12 | .section-intro { 13 | &[style] { 14 | background-size: cover; 15 | background-position: center center; 16 | } 17 | } 18 | } 19 | 20 | /* < 1200px */ 21 | @include media-breakpoint-down(lg) { 22 | .px-responsive { 23 | padding-left: 25px !important; 24 | padding-right: 25px !important; 25 | } 26 | } 27 | 28 | /* > 992px */ 29 | @include media-breakpoint-up(lg) { 30 | .navbar-expand-lg .navbar-nav .menu-item a { 31 | padding-right: .5rem; 32 | padding-left: .5rem; 33 | } 34 | } 35 | 36 | /* 992px - 1199.98px */ 37 | @include media-breakpoint-between(lg, lg) { 38 | .section-intro { 39 | background-image: url("./assets/images/bg_circuit_xl.png"); 40 | 41 | h1 { 42 | font-size: 4.2rem; 43 | } 44 | 45 | .desc-text { 46 | font-size: 1.5rem; 47 | } 48 | } 49 | } 50 | 51 | /* < 992px */ 52 | @include media-breakpoint-down(md) { 53 | .px-responsive { 54 | padding-left: 10px !important; 55 | padding-right: 10px !important; 56 | } 57 | .container { 58 | width: calc(100% - 20px); 59 | max-width: calc(100% - 20px); 60 | } 61 | 62 | nav.breadcrumb { 63 | padding-left: 0; 64 | padding-right: 0; 65 | 66 | ul { 67 | padding-left: 0; 68 | padding-right: 0; 69 | } 70 | } 71 | 72 | .header { 73 | .container { 74 | min-height: 60px; 75 | max-width: 100%; 76 | width: 100%; 77 | } 78 | 79 | .navbar-brand { 80 | position: absolute; 81 | top: 14px; 82 | left: 0; 83 | } 84 | 85 | .search-bar { 86 | width: calc(100% - 86px); 87 | position: absolute; 88 | top: 15px; 89 | right: 76px; 90 | } 91 | 92 | .navbar-toggler { 93 | position: absolute; 94 | top: 10px; 95 | right: 10px; 96 | } 97 | 98 | .navbar-collapse { 99 | margin-top: 50px; 100 | overflow: hidden; 101 | } 102 | 103 | @include clearfix(); 104 | } 105 | 106 | .has-site-icon { 107 | .search-bar { 108 | width: calc(100% - 135px) !important; 109 | position: absolute; 110 | top: 15px; 111 | right: 76px; 112 | } 113 | } 114 | 115 | .has-site-logo { 116 | 117 | .navbar-brand { 118 | position: absolute; 119 | top: 0; 120 | left: 0; 121 | margin-bottom: 0px; 122 | margin-top: 0px; 123 | } 124 | 125 | .search-bar { 126 | width: calc(100% - 280px) !important; 127 | position: absolute !important; 128 | top: 15px; 129 | right: 76px; 130 | } 131 | } 132 | } 133 | 134 | /* 768px - 991.98px */ 135 | @include media-breakpoint-between(md, md) { 136 | .section-intro { 137 | background-image: url("./assets/images/bg_circuit_lg.png"); 138 | 139 | h1 { 140 | font-size: 4.0rem; 141 | } 142 | 143 | .desc-text { 144 | font-size: 1.4rem; 145 | } 146 | } 147 | } 148 | 149 | /* < 768px */ 150 | @include media-breakpoint-down(sm) { 151 | .px-responsive { 152 | padding-left: 15px !important; 153 | padding-right: 15px !important; 154 | } 155 | .widget { 156 | margin: 15px 0; 157 | } 158 | 159 | .navbar-nav { 160 | .dropdown-menu { 161 | &::after { 162 | display: none !important; 163 | } 164 | &::before { 165 | display: none !important; 166 | } 167 | } 168 | } 169 | .column-control { 170 | display: none; 171 | } 172 | } 173 | 174 | /* 576px - 767.98px */ 175 | @include media-breakpoint-between(sm, sm) { 176 | .section-intro { 177 | background-image: url("./assets/images/bg_circuit_md.png"); 178 | 179 | h1 { 180 | font-size: 3.2rem; 181 | } 182 | 183 | .desc-text { 184 | font-size: 1.3rem; 185 | } 186 | } 187 | } 188 | 189 | /* < 576px */ 190 | @include media-breakpoint-down(mx) { 191 | .px-responsive { 192 | padding-left: 10px !important; 193 | padding-right: 10px !important; 194 | } 195 | .author-card { 196 | display: block !important; 197 | .author-avatar { 198 | text-align: center; 199 | } 200 | .author-info { 201 | padding-top: 0; 202 | } 203 | } 204 | 205 | .has-site-logo { 206 | .header { 207 | .search-bar { 208 | width: 100% !important; 209 | position: absolute; 210 | margin: 0 !important; 211 | top: 60px; 212 | right: 0; 213 | } 214 | } 215 | } 216 | .p-5 { 217 | padding: 0 !important; 218 | } 219 | } 220 | 221 | /* 360px - 575.98px */ 222 | @include media-breakpoint-between(mx, mx) { 223 | .section-intro { 224 | background-image: url("./assets/images/bg_circuit_sm.png"); 225 | 226 | h1 { 227 | margin-top: 20px; 228 | font-size: 2.8rem; 229 | } 230 | 231 | .desc-text { 232 | font-size: 1.1rem; 233 | } 234 | } 235 | } 236 | 237 | /* < 360px */ 238 | @include media-breakpoint-down(xs) { 239 | .section-intro { 240 | background-image: url("./assets/images/bg_circuit_mx.png"); 241 | 242 | h1 { 243 | margin-top: 30px; 244 | font-size: 2rem; 245 | } 246 | 247 | .desc-text { 248 | font-size: 0.95rem; 249 | } 250 | } 251 | } -------------------------------------------------------------------------------- /scss/_shortcode.scss: -------------------------------------------------------------------------------- 1 | /* Shortcode */ 2 | 3 | .brand-link { 4 | text-align: center; 5 | border: 1px #dddddd solid; 6 | border-radius: 50%; 7 | display: inline-block; 8 | 9 | @each $color-name, $color-code in $brand-colors { 10 | &.brand-#{$color-name} { 11 | 12 | border-top-color: lighten($color-code, 10%) !important; 13 | border-left-color: lighten($color-code, 10%) !important; 14 | border-right-color: darken($color-code, 10%) !important; 15 | border-bottom-color: darken($color-code, 10%) !important; 16 | color: $color-code !important; 17 | } 18 | } 19 | } 20 | 21 | .brand-sm .brand-link { 22 | width: 32px; 23 | height: 32px; 24 | font-size: 1rem; 25 | line-height: 32px; 26 | } 27 | 28 | .brand-md .brand-link { 29 | width: 40px; 30 | height: 40px; 31 | font-size: 1.25rem; 32 | line-height: 40px; 33 | } 34 | 35 | .brand-lg .brand-link { 36 | width: 48px; 37 | height: 48px; 38 | font-size: 1.5rem; 39 | line-height: 48px; 40 | } 41 | 42 | .brand-xl .brand-link { 43 | width: 64px; 44 | height: 64px; 45 | font-size: 1.8rem; 46 | line-height: 64px; 47 | } 48 | 49 | /* Author page */ 50 | 51 | .author-page { 52 | .brand-link { 53 | border: 0px; 54 | } 55 | 56 | .brand-sm .brand-link { 57 | width: 16px; 58 | height: 16px; 59 | line-height: 16px; 60 | } 61 | 62 | .brand-md .brand-link { 63 | width: 22px; 64 | height: 22px; 65 | line-height: 22px; 66 | } 67 | 68 | .brand-lg .brand-link { 69 | width: 28px; 70 | height: 28px; 71 | line-height: 28px; 72 | } 73 | 74 | .brand-xl .brand-link { 75 | width: 34px; 76 | height: 34px; 77 | line-height: 34px; 78 | } 79 | } -------------------------------------------------------------------------------- /scss/_sticky-top.scss: -------------------------------------------------------------------------------- 1 | .sticky-top { 2 | position: -webkit-sticky; 3 | position: sticky; 4 | z-index: 1020; 5 | 6 | &.sidebar { 7 | top: 90px !important; 8 | } 9 | 10 | &.title { 11 | top: 5px !important; 12 | } 13 | 14 | &.column-switch { 15 | top: 0px !important; 16 | z-index: 1030; 17 | color: #aaaaaa; 18 | height: 60px; 19 | 20 | .btn { 21 | font-size: 0.9rem; 22 | margin: 5px; 23 | 24 | &.active { 25 | color: #ffffff; 26 | } 27 | } 28 | 29 | } 30 | } -------------------------------------------------------------------------------- /scss/_table-of-content.scss: -------------------------------------------------------------------------------- 1 | 2 | nav[data-toggle='toc'] .nav>li>a { 3 | display: block; 4 | padding: 4px 20px; 5 | font-size: $toc_base_font_size; 6 | font-weight: 500; 7 | color: #767676; 8 | } 9 | 10 | nav[data-toggle='toc'] .nav>li>a:hover, 11 | nav[data-toggle='toc'] .nav>li>a:focus { 12 | padding-left: 19px; 13 | color: $toc_main_color; 14 | text-decoration: none; 15 | background-color: transparent; 16 | border-left: 2px solid $toc_border_color; 17 | } 18 | 19 | nav[data-toggle='toc'] .nav-link.active, 20 | nav[data-toggle='toc'] .nav-link.active:hover, 21 | nav[data-toggle='toc'] .nav-link.active:focus { 22 | padding-left: 18px; 23 | font-weight: bold; 24 | color: $toc_main_color; 25 | background-color: transparent; 26 | border-left: 3px solid $toc_border_color; 27 | } 28 | 29 | /* Nav: second level (shown on .active) */ 30 | 31 | nav[data-toggle='toc'] .nav-link+ul { 32 | /* display: none; */ 33 | /* Hide by default, but at >768px, show it */ 34 | padding-bottom: 10px; 35 | } 36 | 37 | nav[data-toggle='toc'] .nav .nav>li>a { 38 | padding-top: 1px; 39 | padding-bottom: 1px; 40 | padding-left: 30px; 41 | font-size: $toc_sub_font_size; 42 | font-weight: normal; 43 | } 44 | 45 | nav[data-toggle='toc'] .nav .nav>li>a:hover, 46 | nav[data-toggle='toc'] .nav .nav>li>a:focus { 47 | padding-left: 27px; 48 | } 49 | 50 | nav[data-toggle='toc'] .nav .nav>li>.active, 51 | nav[data-toggle='toc'] .nav .nav>li>.active:hover, 52 | nav[data-toggle='toc'] .nav .nav>li>.active:focus { 53 | padding-left: 27px; 54 | font-weight: 500; 55 | } 56 | 57 | nav[data-toggle='toc'] .nav-link.active+ul { 58 | display: block; 59 | } -------------------------------------------------------------------------------- /scss/_the-author-card.scss: -------------------------------------------------------------------------------- 1 | 2 | .author-card { 3 | display: flex; 4 | border-left: 15px gray("200") solid; 5 | background-color: gray("100"); 6 | border-radius: 3px; 7 | margin: 20px 0; 8 | 9 | .author-info { 10 | display: flex; 11 | flex-direction: column; 12 | } 13 | 14 | .author-links { 15 | margin-top: 10px; 16 | 17 | a { 18 | margin: 5px; 19 | } 20 | 21 | a:first-child { 22 | margin-left: 0px; 23 | } 24 | } 25 | 26 | > div { 27 | padding: 25px; 28 | } 29 | 30 | > img { 31 | border: 1px gray("400") solid !important; 32 | } 33 | 34 | .author-title { 35 | font-size: 1.6rem; 36 | line-height: 150%; 37 | margin-bottom: 10px; 38 | font-weight: bold; 39 | } 40 | } 41 | 42 | /* Author page */ 43 | 44 | .author-page { 45 | 46 | .author-card { 47 | border: 0px; 48 | background: none; 49 | border-radius: 0px; 50 | margin: 0; 51 | 52 | .author-title { 53 | font-size: 2.5rem; 54 | line-height: 150%; 55 | margin-bottom: 10px; 56 | font-weight: bold; 57 | 58 | a { 59 | color: #333333; 60 | text-decoration: none; 61 | } 62 | } 63 | } 64 | 65 | .section-title { 66 | display: none; 67 | } 68 | 69 | } 70 | 71 | 72 | -------------------------------------------------------------------------------- /scss/_typography.scss: -------------------------------------------------------------------------------- 1 | /* Typography */ 2 | 3 | .header { 4 | font-weight: 600; 5 | 6 | .search-bar { 7 | font-size: inherit; 8 | 9 | .search-input { 10 | font-size: 13px; 11 | } 12 | } 13 | 14 | .navbar-nav { 15 | & > li > a { 16 | font-size: 14px; 17 | } 18 | } 19 | } 20 | 21 | /* Typography - Single post page */ 22 | 23 | #post-title { 24 | font-family: $font-family-title-en !important; 25 | font-size: 2.2rem; 26 | font-weight: 300; 27 | padding: 0.5rem 0; 28 | 29 | @include media-breakpoint-down(mx) { 30 | font-size: 1.7rem; 31 | } 32 | } 33 | 34 | /* Typography - Home page */ 35 | 36 | .section-intro { 37 | font-family: $font-family-title-en !important; 38 | font-weight: 300; 39 | 40 | a { 41 | font-weight: 400; 42 | } 43 | 44 | h1 { 45 | font-size: 4.5rem; 46 | font-weight: 300; 47 | 48 | @include media-breakpoint-down(sm) { 49 | font-size: 3.5rem; 50 | } 51 | } 52 | 53 | .desc-text { 54 | font-size: 1.6rem; 55 | } 56 | } 57 | 58 | /* Typography - Comment */ 59 | 60 | .comment-wrapper { 61 | cite { 62 | font-style: normal !important; 63 | font-weight: 600 !important; 64 | } 65 | .comment-body { 66 | font-size: 14px; 67 | } 68 | } 69 | 70 | article { 71 | figcaption { 72 | font-size: 0.85rem; 73 | } 74 | } 75 | 76 | .comment-notes { 77 | font-size: 12px; 78 | } 79 | 80 | .section-title { 81 | font-size: 18px; 82 | margin: 40px 0 10px 0; 83 | } 84 | 85 | /* Typography - Others */ 86 | 87 | .label { 88 | font-size: .675rem; 89 | } 90 | 91 | .x-label { 92 | font-size: 1rem; 93 | } 94 | 95 | .f-14 { 96 | font-size: 14px !important; 97 | } 98 | 99 | .c-light { 100 | color: #586069 !important; 101 | } 102 | 103 | /* Post list */ 104 | .author-posted-date { 105 | font-size: 13px; 106 | } 107 | 108 | /* Use the best fit font for different languages */ 109 | 110 | @each $lang-code in $supported-languages { 111 | :lang(#{$lang-code}) { 112 | 113 | body { 114 | font-family: get-base-font($lang-code); 115 | } 116 | 117 | h1, h2, h3, h4, h5, h6 { 118 | font-family: get-heading-font($lang-code); 119 | } 120 | 121 | .section-intro, #post-title, .site-info { 122 | font-family: get-title-font($lang-code); 123 | } 124 | } 125 | } 126 | 127 | 128 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /scss/_variables.scss: -------------------------------------------------------------------------------- 1 | // Font settings 2 | 3 | $font-family-base-en: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif !default; 4 | $font-family-title-en: "Roboto", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif !default; 5 | $font-family-heading-en: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", sans-serif !default; 6 | 7 | // Font settings - for Mandarin Chinese 8 | 9 | $font-family-base-zh: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "微軟正黑體", "Microsoft JhengHei", "SimHei", "Microsoft YaHei", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "標楷體", "DFKai-SB" !default; 10 | $font-family-title-zh: "Roboto", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "SimHei", "Microsoft YaHei", "標楷體", "DFKai-SB" !default; 11 | $font-family-heading-zh: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "微軟正黑體", "Microsoft JhengHei", "SimHei", "Microsoft YaHei", "標楷體", "DFKai-SB" !default; 12 | 13 | // Font settings - for Japenese 14 | 15 | $font-family-base-ja: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic" !default; 16 | $font-family-title-ja: "Roboto", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic" !default; 17 | $font-family-heading-ja: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic" !default; 18 | 19 | // Font settings - for Korean 20 | 21 | $font-family-base-ko: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Dotum", "Gulim" !default; 22 | $font-family-title-ko: "Roboto", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Dotum", "Gulim" !default; 23 | $font-family-heading-ko: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Dotum", "Gulim" !default; 24 | 25 | $supported-languages: ( 26 | "en", 27 | "zh", 28 | "ja", 29 | "ko" 30 | ) !default; 31 | 32 | $font-family-base: () !default; 33 | $font-family-base: map-merge(( 34 | "en": $font-family-base-en, 35 | "zh": $font-family-base-zh, 36 | "ja": $font-family-base-ja, 37 | "ko": $font-family-base-ko 38 | ), $font-family-base); 39 | 40 | $font-family-title: () !default; 41 | $font-family-title: map-merge(( 42 | "en": $font-family-title-en, 43 | "zh": $font-family-title-zh, 44 | "ja": $font-family-title-ja, 45 | "ko": $font-family-title-ko 46 | ), $font-family-title); 47 | 48 | $font-family-heading: () !default; 49 | $font-family-heading: map-merge(( 50 | "en": $font-family-heading-en, 51 | "zh": $font-family-heading-zh, 52 | "ja": $font-family-heading-ja, 53 | "ko": $font-family-heading-ko 54 | ), $font-family-heading); 55 | 56 | // Home- Intro box 57 | 58 | $home_intro_box_height: 640px !default; 59 | $home_intro_bg: #2b3137 !default; 60 | $home_intro_font_color: #ffffff !default; 61 | 62 | // Header - Navbar 63 | 64 | $header_navbar_bg: rgba(20, 25, 29, 0.95) !default; 65 | $header_navbar_link_color: #c8c9ca !default; 66 | 67 | $primary_anchor_color: #007bff; 68 | 69 | // Table of Content 70 | $toc_main_color: dodgerblue; 71 | $toc_border_color: dodgerblue; 72 | $toc_base_font_size: 14px; 73 | $toc_sub_font_size: 13px; 74 | 75 | // Brand Color 76 | $brand-colors: () !default; 77 | $brand-colors: map-merge(( 78 | "github": #333333, 79 | "gitlab": #fca326, 80 | "stackoverflow": #f48024, 81 | "facebook": #3b5998, 82 | "twitter": #1da1f2, 83 | "google": #dd4b39, 84 | "instagram": #833ab4, 85 | "pinterest": #bd081c, 86 | "youtube": #ff0000 87 | ), $brand-colors); 88 | 89 | $white: #fff !default; 90 | $gray-100: #f8f9fa !default; 91 | $gray-200: #e9ecef !default; 92 | $gray-300: #dee2e6 !default; 93 | $gray-400: #ced4da !default; 94 | $gray-500: #adb5bd !default; 95 | $gray-600: #6c757d !default; 96 | $gray-700: #495057 !default; 97 | $gray-800: #343a40 !default; 98 | $gray-900: #212529 !default; 99 | $black: #000 !default; 100 | 101 | $grays: () !default; 102 | $grays: map-merge(( 103 | "100": $gray-100, 104 | "200": $gray-200, 105 | "300": $gray-300, 106 | "400": $gray-400, 107 | "500": $gray-500, 108 | "600": $gray-600, 109 | "700": $gray-700, 110 | "800": $gray-800, 111 | "900": $gray-900 112 | ), $grays); 113 | 114 | $blue: #007bff !default; 115 | $indigo: #6610f2 !default; 116 | $purple: #6f42c1 !default; 117 | $pink: #e83e8c !default; 118 | $red: #dc3545 !default; 119 | $orange: #fd7e14 !default; 120 | $yellow: #ffc107 !default; 121 | $green: #28a745 !default; 122 | $teal: #20c997 !default; 123 | $cyan: #17a2b8 !default; 124 | 125 | $colors: () !default; 126 | $colors: map-merge(( 127 | "blue": $blue, 128 | "indigo": $indigo, 129 | "purple": $purple, 130 | "pink": $pink, 131 | "red": $red, 132 | "orange": $orange, 133 | "yellow": $yellow, 134 | "green": $green, 135 | "teal": $teal, 136 | "cyan": $cyan, 137 | "white": $white, 138 | "gray": $gray-600, 139 | "gray-dark": $gray-800 140 | ), $colors); 141 | 142 | $primary: $blue !default; 143 | $secondary: $gray-600 !default; 144 | $success: $green !default; 145 | $info: $cyan !default; 146 | $warning: $yellow !default; 147 | $danger: $red !default; 148 | $light: $gray-100 !default; 149 | $dark: $gray-800 !default; 150 | 151 | $theme-colors: () !default; 152 | $theme-colors: map-merge(( 153 | "primary": $primary, 154 | "secondary": $secondary, 155 | "success": $success, 156 | "info": $info, 157 | "warning": $warning, 158 | "danger": $danger, 159 | "light": $light, 160 | "dark": $dark 161 | ), $theme-colors); 162 | 163 | $grid-breakpoints: ( 164 | xs: 0, 165 | mx: 360px, 166 | sm: 576px, 167 | md: 768px, 168 | lg: 992px, 169 | xl: 1200px, 170 | xxl: 1920px 171 | ) !default; 172 | 173 | -------------------------------------------------------------------------------- /scss/_video.scss: -------------------------------------------------------------------------------- 1 | .video-container { 2 | position: relative; 3 | padding-bottom: 56.25%; 4 | padding-top: 30px; 5 | height: 0; 6 | overflow: hidden; 7 | 8 | iframe, object, embed { 9 | position: absolute; 10 | top: 0; 11 | left: 0; 12 | width: 100%; 13 | height: 100%; 14 | } 15 | } 16 | 17 | -------------------------------------------------------------------------------- /scss/_widget.scss: -------------------------------------------------------------------------------- 1 | 2 | /* Sidebar widgets */ 3 | 4 | .sidebar { 5 | 6 | .widget { 7 | border-bottom: 1px #ddd solid; 8 | padding: 10px; 9 | margin: 0 0 10px 0; 10 | 11 | .search-field-wrapper { 12 | padding: 10px; 13 | } 14 | } 15 | } 16 | 17 | .widget { 18 | font-size: 0.9rem; 19 | 20 | .widget-title { 21 | font-size: 1.3rem; 22 | } 23 | 24 | ul { 25 | padding-left: 30px; 26 | } 27 | } 28 | 29 | /* Widget - Calendar */ 30 | 31 | .widget_calendar { 32 | .calendar_wrap { 33 | margin: 15px 0; 34 | border-radius: 4px; 35 | background-color: rgba(255, 255, 255, 0.1); 36 | } 37 | 38 | table { 39 | width: 100%; 40 | border: 1px #dddddd solid; 41 | background-color: #ffffff; 42 | color: #333333; 43 | 44 | th, td, caption { 45 | text-align: center; 46 | padding: 5px; 47 | } 48 | 49 | td a { 50 | color: $primary_anchor_color !important; 51 | } 52 | 53 | caption { 54 | font-weight: bold; 55 | } 56 | 57 | thead { 58 | border-bottom: 1px #dddddd solid; 59 | } 60 | 61 | tfoot { 62 | border-top: 1px #dddddd solid; 63 | } 64 | } 65 | } 66 | 67 | /* Widget - Tag could */ 68 | 69 | .widget_tag_cloud { 70 | .tag-cloud-link { 71 | color: #333333; 72 | background-color: #ffffff; 73 | border: 1px #dddddd solid; 74 | border-radius: 3px; 75 | margin: 2px 4px; 76 | line-height: 150%; 77 | padding: 2px 5px; 78 | word-break: keep-all; 79 | overflow: hidden; 80 | display: inline-block; 81 | } 82 | } 83 | 84 | /* Widgets in Home middle sidebar */ 85 | 86 | .home-middle-sidebar { 87 | width: 100%; 88 | background-color: lighten($home_intro_bg, 10%); 89 | color: darken($home-intro-font-color, 30%); 90 | overflow: hidden; 91 | display: block; 92 | margin: 20px 0; 93 | 94 | .widget { 95 | .widget-title { 96 | color: #ffffff; 97 | } 98 | a { 99 | color: #f1f1f1; 100 | } 101 | } 102 | 103 | .widget_tag_cloud { 104 | .tag-cloud-link { 105 | color: #333333; 106 | } 107 | } 108 | 109 | .widget_calendar { 110 | table { 111 | caption { 112 | color: #ffffff; 113 | } 114 | } 115 | } 116 | } 117 | 118 | .input-group { 119 | .search-field { 120 | border-right: 0; 121 | } 122 | } 123 | 124 | h2 { 125 | &.wp-block-heading { 126 | font-size: 1.25rem; 127 | } 128 | } 129 | 130 | .wp-block-search { 131 | &__input { 132 | border: 1px #dddddd solid; 133 | border-radius: 4px; 134 | } 135 | 136 | &__button { 137 | border-radius: 4px; 138 | } 139 | } 140 | 141 | .wp-block-latest-comments { 142 | padding-left: 0; 143 | } -------------------------------------------------------------------------------- /scss/_wordpress.scss: -------------------------------------------------------------------------------- 1 | .alignnone { 2 | margin: 5px 20px 20px 0; 3 | } 4 | 5 | .aligncenter { 6 | display: block; 7 | margin: 5px auto 5px auto; 8 | } 9 | 10 | .alignright { 11 | float: right; 12 | margin: 5px 0 20px 20px; 13 | } 14 | .alignleft { 15 | float: left; 16 | margin: 5px 20px 20px 0; 17 | } 18 | 19 | html.wp-toolbar { 20 | padding-top: 0 !important; 21 | padding-bottom: 32px !important; 22 | box-sizing: border-box; 23 | } 24 | 25 | /* Remove bottom on embeds that wrapped in paragraphs via wpautop. */ 26 | 27 | p { 28 | > embed:only-child, 29 | > iframe:only-child, 30 | > object:only-child { 31 | margin-bottom: 0; 32 | } 33 | } 34 | 35 | .wp-caption, 36 | .gallery-caption { 37 | color: #666; 38 | font-size: 13px; 39 | font-size: 0.8125rem; 40 | font-style: italic; 41 | margin-bottom: 1.5em; 42 | max-width: 100%; 43 | } 44 | 45 | .wp-caption { 46 | img[class*="wp-image-"] { 47 | display: block; 48 | margin-left: auto; 49 | margin-right: auto; 50 | } 51 | .wp-caption-text { 52 | margin: 0.8075em 0; 53 | } 54 | } 55 | 56 | .bypostauthor { 57 | border-bottom-width: 1px; 58 | } 59 | 60 | .screen-reader-text { 61 | clip: rect(1px, 1px, 1px, 1px); 62 | height: 1px; 63 | overflow: hidden; 64 | position: absolute !important; 65 | width: 1px; 66 | word-wrap: normal !important; 67 | 68 | &:focus { 69 | background-color: #f1f1f1; 70 | -webkit-border-radius: 3px; 71 | border-radius: 3px; 72 | -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 73 | box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); 74 | clip: auto !important; 75 | color: #21759b; 76 | display: block; 77 | font-size: 14px; 78 | font-size: 0.875rem; 79 | font-weight: 700; 80 | height: auto; 81 | left: 5px; 82 | line-height: normal; 83 | padding: 15px 23px 14px; 84 | text-decoration: none; 85 | top: 5px; 86 | width: auto; 87 | z-index: 100000; 88 | } 89 | } 90 | 91 | .error404 { 92 | .site-info { 93 | position: fixed; 94 | bottom: 10px; 95 | background: #ffffff; 96 | } 97 | &.admin-bar { 98 | .site-info { 99 | bottom: 50px; 100 | } 101 | } 102 | 103 | } 104 | 105 | 106 | 107 | 108 | -------------------------------------------------------------------------------- /scss/config.rb: -------------------------------------------------------------------------------- 1 | require 'compass/import-once/activate' 2 | # Require any additional compass plugins here. 3 | 4 | # Set this to the root of your project when deployed: 5 | http_path = "/" 6 | css_dir = ".." 7 | sass_dir = "" 8 | images_dir = "images" 9 | javascripts_dir = "js" 10 | 11 | # You can select your preferred output style here (can be overridden via the command line): 12 | # output_style = :expanded or :nested or :compact or :compressed 13 | 14 | # To enable relative paths to assets via compass helper functions. Uncomment: 15 | # relative_assets = true 16 | 17 | # To disable debugging comments that display the original location of your selectors. Uncomment: 18 | line_comments = false 19 | environment = :production 20 | output_style = :expanded 21 | 22 | # If you prefer the indented syntax, you might want to regenerate this 23 | # project again passing --syntax sass, or you can uncomment this: 24 | # preferred_syntax = :sass 25 | # and then run: 26 | # sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass 27 | # 28 | Encoding.default_external = Encoding.find('utf-8') 29 | #require 'compass-normalize' 30 | 31 | cache = false -------------------------------------------------------------------------------- /scss/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/scss/index.html -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Theme Name: Mynote 3 | Theme URI: https://terryl.in/en/repository/mynote/ 4 | Requires at least: 3.6 5 | Tested up to: 6.2.2 6 | Requires PHP: 5.2.4 7 | Description: Mynote is a responsive, clean, Markdown friendly WordPress blog theme. It is based on Bootstrap 4 and Fontawesome 5. It is suitable for programming, business, technical, professional, niche and any kind of blogging sites. Mynote has landing-page templates so that can your highly customize your homepage, make your website unique and professional. 8 | Version: 2.0.5 9 | Author: Terry Lin 10 | Author URI: https://terryl.in 11 | Tags: one-column, two-columns, left-sidebar, right-sidebar, custom-menu, custom-logo, custom-colors, custom-header, featured-images, featured-image-header, microformats, theme-options, footer-widgets, threaded-comments, translation-ready, blog, entertainment 12 | License: GNU General Public License v3 or later 13 | License URI: http://www.gnu.org/licenses/gpl-3.0.html 14 | Text Domain: mynote 15 | */ 16 | 17 | @import "variables"; 18 | @import "functions"; 19 | @import "bootstrap"; 20 | @import "misc"; 21 | @import "main"; 22 | @import "home"; 23 | @import "header"; 24 | @import "footer"; 25 | @import "comment"; 26 | @import "typography"; 27 | @import "widget"; 28 | @import "buttons"; 29 | @import "labels"; 30 | @import "sticky-top"; 31 | @import "page-progress"; 32 | @import "table-of-content"; 33 | @import "shortcode"; 34 | @import "breadcrumb"; 35 | @import "the-author-card"; 36 | @import "wordpress"; 37 | @import "responsive"; 38 | @import "video"; 39 | @import "markdown-theme-github"; 40 | 41 | -------------------------------------------------------------------------------- /search.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 |
    20 |

    21 | 22 | 23 | found_posts; ?> 24 | 25 |

    26 |
    27 | found_posts, get_search_query() ); 30 | ?> 31 |
    32 |
    33 |
    34 | 35 | 43 | 44 |
    45 | 46 |
    47 | 48 | 49 | -------------------------------------------------------------------------------- /searchform.php: -------------------------------------------------------------------------------- 1 | 17 | 18 | 24 | -------------------------------------------------------------------------------- /sidebar-archive.php: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /sidebar-home.php: -------------------------------------------------------------------------------- 1 | 18 | 19 | 20 | 23 | 24 | -------------------------------------------------------------------------------- /single-product.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 | 20 | 21 | 22 |
    23 |
    24 |

    25 |
    26 | 27 |
    28 |
    29 |
    30 | 31 | 32 | 33 |
    34 |
    35 |
    36 | 37 |
    38 |
    39 | ' ' . __( 'Previous Post', 'mynote' ) . ' %title', 43 | 'next_text' => ' ' . __( 'Next Post', 'mynote' ) . ' %title', 44 | ) 45 | ); 46 | 47 | ?> 48 |
    49 |
    50 | 51 | 17 | 18 | 19 | 20 |
    21 | 22 | 30 | 31 |
    32 |
    33 |
    34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
    > 42 | 43 | 44 | 45 | 46 | 47 |
    48 | 49 | '
    ' . __( 'Pages:', 'mynote' ), 65 | 'after' => '
    ', 66 | ) 67 | ); 68 | ?> 69 | 70 |
    71 |
    72 | 73 |
    74 | 75 | 76 |
    77 | 78 |
    79 | 80 |
    81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 |
    94 |

    95 |
    96 | 97 | 98 |
    99 | 100 | 108 | 109 |
    110 | 111 | ' ' . __( 'Previous Post', 'mynote' ) . ' %title', 116 | 'next_text' => ' ' . __( 'Next Post', 'mynote' ) . ' %title', 117 | ) 118 | ); 119 | 120 | ?> 121 | 122 |
    123 | 124 | 130 | 131 |
    132 | 133 | 18 | 19 |
    20 |
    21 |

    22 | 23 |

    24 | 25 | 26 |
    27 | 28 | 29 |
    30 |
    31 | 32 | 40 | 41 |
    42 | 43 |
    44 | 45 | 14 | 15 |
    16 |
    17 |
    18 | 42 |
    43 | 51 |
    52 |
    53 | -------------------------------------------------------------------------------- /template-parts/content-none.php: -------------------------------------------------------------------------------- 1 | 15 | 16 |
    17 |

    18 | 19 |

    20 |
    21 | -------------------------------------------------------------------------------- /template-parts/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/terrylinooo/mynote/25fa38f024c2e13e15ccd7d87e4cb99d595331eb/template-parts/index.html -------------------------------------------------------------------------------- /template-parts/loop.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 | 20 | 21 | 22 |
    23 |
    24 |
    25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
    33 |
    34 |
    35 | 36 | 37 | 38 |
    39 |

    40 | 41 |

    42 | 43 | 44 |
    45 | 46 |
    47 | 48 | 49 |
    50 | 56 |
    57 | 58 |
    59 | 60 | 61 |
    62 | 63 |
    64 | 65 | 66 |
    67 |
    68 |
    69 | 70 |
    71 | ID ), 'full' ); 19 | $intro_style = ' bg-cover" style="background-image: url(' . esc_url( $backgroundImg[0] ) . ')"'; 20 | $custom_header_css = 'has-custom-header'; 21 | } 22 | 23 | ?> 24 | 25 |
    26 |
    27 |
    28 |
    29 |
    30 |
    31 |

    32 | 33 |

    34 | 35 |

    36 | 37 |
    38 | 39 |
    40 | 47 |
    48 | 49 |

    50 | 51 |
    52 |
    53 |
    54 | 55 |
    56 |
    57 |
    58 |
    59 |
    60 | 61 | 62 | 63 |
    > 64 |
    65 | '
    ' . __( 'Pages:', 'mynote' ), 70 | 'after' => '
    ', 71 | ) 72 | ); 73 | ?> 74 |
    75 |
    76 | 77 | 78 | 79 | 80 |
    81 |
    82 |
    83 | 84 |
    85 |
    86 |
    87 | 'post', 99 | 'posts_per_page' => get_option( 'posts_per_page' ), 100 | 'paged' => $paged, 101 | ) 102 | ); 103 | 104 | if ( have_posts() ) { 105 | get_template_part( 'template-parts/loop' ); 106 | get_template_part( 'template-parts/pagination' ); 107 | } else { 108 | get_template_part( 'template-parts/content', 'none' ); 109 | } 110 | ?> 111 |
    112 | 120 |
    121 |
    122 |
    123 |
    124 |
    125 | -------------------------------------------------------------------------------- /template-parts/pagination.php: -------------------------------------------------------------------------------- 1 | 17 | 18 |
    19 | 27 |
    28 | 29 |