/* Name: blueidea Date: Oct 2013 Description: A Pelican theme inspired by the default theme notmyidea Version: 1.0 License: MIT Licensed by: Smashing Media GmbH Original author: Enrique Ramirez Customized by : Nassim Kacha */ /* - - - - - - - - - - - - Basic & Universal - - - - - - - - - - - - */ html { font-size: 100%; /* Default: 16px */ overflow-y: overlay; /* scroll bar not take up body width */ scroll-behavior: smooth; } body { background: #2080F0; color: #000000; line-height: 1.618; /* golden ratio */ text-align: left; font-family: "Helvetica Neue", Tahoma, Arial, "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif; font-display: fallback; margin: 0; padding: 0; } header, section, footer, aside, nav, article, figure { display: block; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.17rem; } h4 { font-size: 1rem; } h5 { font-size: 0.83rem; } h6 { font-size: 0.67rem; } p { margin-top: 1rem; margin-bottom: 1rem; } a { outline: 0; padding: 0; color: #000000; text-decoration-line: underline; text-underline-offset: 2px; text-decoration-style: solid; } a:link, a:visited { text-decoration-color: #000000; text-decoration-thickness: 1px; } a:hover, a:active { text-decoration-color: #404040; text-decoration-thickness: 2px; } /* - - - - - - - - - - - - Layout - - - - - - - - - - - - */ /* all direct children */ .body-child { clear: both; margin: 0 auto; box-sizing: border-box; } /* all container type children: main container and footer */ .body-child-container { padding: 3rem 4.5rem 3.5rem 4.5rem; } /* - - - - - - - - - - - - Page header - - - - - - - - - - - - */ #banner { padding: 2em 0 0 0; } /* Banner */ #banner div.page-header { /* Goal: big, thin, only ASCII chars, in macOS and Windows, regardless of other OS */ font-family: "Helvetica Neue", sans-serif; font-weight: 200; /* 200: Extra Light (Ultra Light) */ display: block; margin: 0 0 0.75rem 0; } #banner div.page-header a, #banner div.page-header a:link, #banner div.page-header a:visited, #banner div.page-header a:hover, #banner div.page-header a:active { color: #F2F2F2; text-decoration: none; background: none; text-shadow: none; display: inline-block; } #banner div.page-header span.page-header-title { font-size: 3.2rem; } #banner div.page-header span.page-header-subtitle { font-size: 1.3rem; } /* Main Nav */ #banner nav { background: rgba(255, 255, 255, 0.88); height: 40px; line-height: 30px; margin: 0 auto 0.75rem auto; padding: 0; text-align: center; width: 100%; border-radius: 6px; } #banner nav ul { list-style: none; margin: 0 auto; padding: 0; } #banner nav li { float: left; display: inline; margin: 0; } #banner nav a, #banner nav a:link, #banner nav a:visited, #banner nav a:hover, #banner nav a:active { color: #000000; display: inline-block; height: 30px; padding: 5px 1.5em; text-decoration: none; text-shadow: none !important; transition: background-color 0.15s ease-out; } #banner nav a:hover, #banner nav a:active, #banner nav li.active a:link, #banner nav li.active a:visited { background: #FFFFFF; } #banner nav li:first-child a { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } /* - - - - - - - - - - - - main container - - - - - - - - - - - - */ #article_content, #article_list { background: rgba(255, 255, 255, 0.93); margin-bottom: 0.75em; overflow: hidden; border-radius: 6px 6px 0 0; } /* - - - - - - - - - - - - Article list - - - - - - - - - - - */ #article_list > .article_index_info { margin: 0 0 1.0rem 0; color: #2080F0; line-height: 1.44; font-weight: 400; /* 400: normal */ } #article_list > div.hentry { border: 0; padding: 0; margin-bottom: 2.5rem; } #article_list > div.hentry:last-child { margin-bottom: 0; } /* - - - - - - - - - - - - Entry header - - - - - - - - - - - - */ .entry-header { margin-bottom: 1.5rem; line-height: 1.44; } .entry-header .post-info { font-size: 0.75rem; /* Do NOT use x-small, different browser different size */ text-align: left; margin-bottom: 1rem; } .entry-header .post-info * { font-style: normal; } .entry-header .post-info > span:not(:last-child):after { content: "|"; margin: 0 0.25rem; } .entry-header .post-info .post-info-strong { font-weight: bold; /* bold = 700 */ } h1.entry-title { color: #000000; font-weight: 400; /* 400: normal */ margin-top: 0; margin-bottom: 0; border-bottom: 1px solid #000000; } h1.entry-title a, h1.entry-title a:link, h1.entry-title a:visited { text-decoration: none; color: #000000; } .entry-summary { margin: 1.5rem 0 0 0; } /* - - - - - - - - - - - - Entry content - - - - - - - - - - - - */ .entry-content { font-family: Consolas, Monaco, "Droid Sans Mono", "Courier New", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif; /* Safari not supported */ /* overflow-wrap: anywhere; */ /* word-break: normal; */ word-break: break-word; } .entry-content h1, .entry-content h2 { font-weight: 400; /* 400: normal */ } .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { font-weight: 600; /* 600: Semi Bold */ } .entry-content img, .entry-content video { max-width: 85%; max-height: max(100px, 85vh); display: block; margin: auto; } /* ![](){: class="inline"} */ .entry-content img.inline { display: inline; vertical-align: text-bottom; max-height: 2em; } /* ![XXX](./images/yyy.png "ZZZ") ![XXX](./images/yyy.png){: title='ZZZ' } - - - - - - - - - - - - - - ->
XXX
ZZZ
*/ .entry-content figure { margin: 1.5em 0; /* more top & bottom margin than

*/ } .entry-content figcaption { text-align: center; color: #808080; } .entry-content a.headerlink { color: #000000; margin-left: 0.5em; opacity: 0.0; transition: opacity 0.12s ease-out; /* vertical-align: text-top; */ text-decoration: none; } .entry-content h1:hover a.headerlink, .entry-content h2:hover a.headerlink, .entry-content h3:hover a.headerlink, .entry-content h4:hover a.headerlink, .entry-content h5:hover a.headerlink, .entry-content h6:hover a.headerlink { opacity: 1.0; } .entry-content a img { border: none; } .entry-content strong, .entry-content b { font-weight: bold; /* bold = 700 */ } .entry-content em, .entry-content i { font-style: italic; } /* Lists */ .entry-content li { line-height: 1.44; } .entry-content ul, .entry-content ol { padding-left: 1.6rem; } .entry-content ol { list-style-type: decimal; } .entry-content ol ol, .entry-content ul ol { list-style-type: lower-roman; } .entry-content ol ol ol, .entry-content ol ul ol, .entry-content ul ol ol, .entry-content ul ul ol { list-style-type: lower-alpha; } /* GFM task list */ .entry-content ul.task-list, .entry-content ol.task-list { padding-left: 1.6em; } .entry-content li.task-list-item { list-style-type: none; } .entry-content li.task-list-item input { margin-left: -1.6em; } /* markdown -> html - - - - - - - - - - - - - - - - - - - - inline `xxx` -> xxx ``` ->

[TOC] ->
  • */ /* Inline code & code blocks */ .entry-content .highlight { padding: 1rem 1.25rem; margin: 1rem 0; border: 1px solid #E0E0E0; border-radius: 3px; color: #000000; line-height: 1.44; overflow: auto; } .entry-content pre { margin: 0; } .entry-content code{ padding: 0 0.25em; border: 1px solid #E0E0E0; border-radius: 3px; background-color: #F8F8F8; } .entry-content pre > code { padding: 0; border: none; } .entry-content pre, .entry-content code{ font-family: Consolas, Monaco, "Droid Sans Mono", "Courier New", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif; } /* [TOC] Table of Contents */ .entry-content div.toc { width: fit-content; min-width: 33%; padding: 0.5rem 1.25rem; margin: 1rem 0; border: 1px solid #E0E0E0; border-radius: 3px; background-color: #F8F8F8; font-family: Consolas, Monaco, "Droid Sans Mono", "Courier New", "Microsoft YaHei", "PingFang SC", "WenQuanYi Micro Hei", sans-serif; } .entry-content div.toc > span.toctitle { border-bottom: 2px solid #E0E0E0; display: block; margin: 0.5rem 0; padding-bottom: 0.5rem; } .entry-content div.toc a { text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 1px; } .entry-content div.toc a:link, .entry-content div.toc a:visited { text-decoration-line: none; } .entry-content div.toc a:hover, .entry-content div.toc a:active { text-decoration-line: underline; } .entry-content div.toc ul { list-style: none; padding: 0; } .entry-content div.toc li { padding: 0; } .entry-content div.toc > ul { margin: 0; } .entry-content div.toc > ul > li { margin: 0.75rem 0; } .entry-content div.toc li > ul { margin: 0 0 0 1.5rem; } .entry-content div.toc li > ul > li { margin: 0; } /* [^xxx] footnote */ .entry-content sup { /* vertical-align: super; */ /* Use normalize.css */ font-size: smaller; } .entry-content sup a { padding: 0 0.25em; } .entry-content div.footnote { padding: 0.5rem 1.25rem; margin: 1rem 0; border: 1px solid #E0E0E0; border-radius: 3px; } .entry-content div.footnote .footnote-title { border-bottom: 1px solid #E0E0E0; display: block; margin: 0.5rem 0; padding-bottom: 0.5rem; } .entry-content div.footnote p { margin: 0; } .entry-content div.footnote a.footnote-backref { font-family: monospace; /* avoid emoji in all devices, especially iOS */ margin-left: 0.5em; } .entry-content div.footnote a.footnote-backref:not(:last-child){ margin-right: 0.5em; } /* Admonition alerts Modified from Bootstrap v4.5.2 CSS .alert */ .entry-content .admonition { position: relative; padding: 0.5rem 1.25rem; margin-bottom: 1rem; border: 1px solid transparent; border-radius: 3px; } .entry-content .admonition p { margin: 0.5rem 0; } .entry-content .admonition-title { font-weight: bolder; } .entry-content .admonition.success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .entry-content .admonition.info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .entry-content .admonition.warning { color: #856404; background-color: #fff3cd; border-color: #ffeeba; } .entry-content .admonition.danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } /* Quotes */ .entry-content blockquote { /* Latin chars: use font built-in */ /* font-family: "Kaiti SC", "STKaiti", "华文楷体", "KaiTi", "楷体", serif; */ /* https://github.com/zenozeng/fonts.css */ font-family: Georgia, "Nimbus Roman No9 L", "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", STSong, "AR PL New Sung", "AR PL SungtiL GB", NSimSun, SimSun, "TW\-Sung", "WenQuanYi Bitmap Song", "AR PL UMing CN", "AR PL UMing HK", "AR PL UMing TW", "AR PL UMing TW MBE", PMingLiU, MingLiU, serif; margin: 1rem 0; padding-left: 0.875rem; border-left: 0.375rem solid #E0E0E0; } /* Tables */ .entry-content table { margin: 0.5rem 0 1.5rem 0; max-width: 100%; word-break: break-word; border-collapse: collapse; } .entry-content thead th, .entry-content tbody td { padding: 0.5rem 1.25rem; text-align: left; border: solid 1px #E0E0E0; } .entry-content thead th { background-color: #F8F8F8; } .entry-content tbody td { background-color: #FFFFFF; } .entry-content hr { border: 1px solid #E0E0E0; margin: 2em auto; } /* - - - - - - - - - - - - Article additional info - - - - - - - - - - - - */ #article_content hr.article-separate:not(:last-child) { border: 2px solid #E0E0E0; margin: 3em auto; } #article_content hr.article-separate:last-child { display: none; } #article_content h2.article-addition-title { font-weight: 400; /* 400 = normal */ } /* Advertisements */ /* https://support.google.com/adsense/answer/10762946 */ ins.adsbygoogle:not([data-ad-status="filled"]) { height: 0px !important; } ins.adsbygoogle:not([data-ad-status="filled"]) > div { display: none !important; } ins.adsbygoogle[data-ad-status="filled"] { margin-bottom: 1rem; } /* Comments */ #article_addition_comments_usage p { font-size: 0.75rem; margin: 0.5em 0; } /* License */ #article_addition_license_content p { font-size: 0.75rem; margin: 0.5em 0; } /* - - - - - - - - - - - - Page footer - - - - - - - - - - - - */ #extras { margin-bottom: 3rem; overflow: hidden; background: #101010; border-radius: 0 0 6px 6px; } #extras a { text-decoration-style: solid; text-decoration-color: currentColor; text-decoration-thickness: 1px; } #extras a:link, #extras a:visited { color: #FFFFFF; display: block; text-decoration-line: none; padding: 0.3em 0.25em 0 0; } #extras a:hover, #extras a:active { text-decoration-line: underline; } /* Social & Blogroll */ #extras #extras_container { display: flex; } #extras #extras_container .blogroll { margin-right: 3em; flex: 1; } #extras #extras_container h2 { color: #2080F0; font-size: 1.25rem; font-weight: 400; /* 400 = normal */ margin: 0 0 0.5em 0; padding: 0; } #extras #extras_container ul { list-style: none; margin: 0; padding: 0; } #extras #extras_container li { padding: 0; } #extras #extras_container .social li { margin: 0; } #extras #extras_container .blogroll li { display: inline-block; margin: 0 0.5em 0 0; } /* Social icons */ #extras #extras_container .social .social_logo_container { position: relative; display: inline-block; vertical-align: bottom; width: 2em; height: 1.5em; } #extras #extras_container .social a .social_logo { height: 1.5em; margin-right: 0.5em; transition: opacity 0.12s ease-out; position: absolute; top: 0; left: 0; } #extras #extras_container .social a .social_logo_hover { z-index: 1; } #extras #extras_container .social a .social_logo_regular { z-index: 0; } #extras #extras_container .social a:link .social_logo_hover, #extras #extras_container .social a:visited .social_logo_hover { opacity: 0.0; /* fully transparent, invisible */ } #extras #extras_container .social a:hover .social_logo_hover, #extras #extras_container .social a:active .social_logo_hover { opacity: 1.0; /* fully opaque, visually solid */ } /* Site info */ #extras #site_info { display: block; margin-top: 3em; text-align: left; font-size: 0.75rem; color: #CCCCCC; } #extras #site_info p { margin: 0; } #extras #site_info a { font-weight: bold; /* bold = 700 */ display: inline !important; } /* - - - - - - - - - - - - Scroll to top button - - - - - - - - - - - - */ #BtnScrollToTop { position: fixed; z-index: 99; right: 50px; bottom: 3em; width: 36px; height: 36px; border: none; border-radius: 6px; overflow: hidden; cursor: pointer; background: #FFFFFF; transition: all 0.15s ease-out; /* Default not show, no hover, no click */ visibility: hidden; opacity: 0.0; } #BtnScrollToTop.show_scroll_to_top_btn { visibility: visible; opacity: 0.88; } #BtnScrollToTop.show_scroll_to_top_btn:hover { opacity: 1.0; } #BtnScrollToTop img { width: 28px; height: 28px; margin: 4px; } /* - - - - - - - - - - - - Background - - - - - - - - - - - - */ canvas.background { position: fixed; top: 0px; left: 0px; z-index: -1; pointer-events: none; } /* - - - - - - - - - - - - Responsive design - - - - - - - - - - - - */ @media print { #banner nav, #article_addition_comments_usage, div.article_addition_ads, #extras { display: none; } html { font-size: 10pt; /* pt = point, NOT px */ } body { background: #FFFFFF; } #banner { padding: 0 !important; } #banner div.page-header * { color: #000000; } #banner div.page-header { margin-bottom: 0.5rem !important; } .main-container { padding-top: 0 !important; padding-bottom: 0 !important; } } /* Small */ @media print, screen and (max-width:767px) { html { overflow-y: unset; /* default scroll bar */ } /* font-size > 1: (orginal - 1) * 75% + 1 font-size <= 1: not changed */ h1 { font-size: 1.75rem; } h2 { font-size: 1.375rem; } h3 { font-size: 1.1275rem; } h4 { font-size: 1rem; } h5 { font-size: 0.83rem; } h6 { font-size: 0.67rem; } .body-child { width: 100%; } .body-child-container { padding: 1.5rem 0.75rem 2.5rem 0.75rem; } #article_list > div.hentry { margin-bottom: 1.5rem; } #article_content, #article_list { background: #FFFFFF; border-radius: initial; } #banner { padding: 1.5rem 0 0 0; } #banner div.page-header { padding-left: 0.75rem; } #banner div.page-header span.page-header-title { font-size: 2rem; } #banner div.page-header span.page-header-subtitle { font-size: 1rem; } #banner nav { background: #FFFFFF; border-radius: initial; } #banner nav a:hover, #banner nav a:active, #banner nav li.active a:link, #banner nav li.active a:visited { background: #E0E0E0; } #banner nav li a { background: #FFFFFF; padding: 5px 10px !important; } #banner nav li:first-child a { padding-left: 0.75rem !important; border-top-left-radius: initial; border-bottom-left-radius: initial; } .entry-content img, .entry-content video { max-width: 90%; max-height: max(100px, 90vh); } #extras { margin-bottom: 0; border-radius: 0 !important; } #BtnScrollToTop { visibility: hidden !important; } canvas.background { display: none !important; } } /* Medium */ @media screen and (min-width:768px) and (max-width:1199px){ .body-child { width: 85%; /* width: 652.8 - 1020 px, 1 side margin min: 57.6 px */ } #BtnScrollToTop { visibility: hidden !important; } } /* Large */ @media screen and (min-width:1200px) and (max-width:1679px){ .body-child { width: 70%; /* width: 840 - 1176 px, 1 side margin min: 180 px */ } } /* Very Large */ @media screen and (min-width:1680px){ .body-child { width: 1176px; } }