From 490b6e251bd36d5a51dbb98b012301818454b372 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=A0=D1=83=D1=81=D0=BB=D0=B0=D0=BD?= Date: Sun, 30 Jul 2023 14:58:54 +0600 Subject: [PATCH] validate --- assets/css/main.css | 785 +++++++++++++++++++------------------------- 1 file changed, 337 insertions(+), 448 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 26ae306..7761e8f 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,531 +1,420 @@ -/* Markdown */ -:root{ ---maincolor: blue; +root { +--maincolor : blue; } - html { - color: #232333; - font-family: 'Roboto Mono', monospace; - font-size: 15px; - line-height: 1.6em; +color : #232333; +font-family : 'Roboto Mono', monospace; +font-size : 15px; +line-height : 1.6em; } - -body{ - display: block; - margin: 8px; +body { +display : block; +margin : 8px; } - -* { - -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -} - ::selection { - background: var(--maincolor); - color: #fff; +background : blue; +color : #fff; } - p { - font-family: 'Fira Sans', sans-serif; - line-height: 1.5; +font-family : 'Fira Sans', sans-serif; +line-height : 1.5; } - hr { - margin: 1em 0; +margin : 1em 0; } - blockquote { - color: #737373; - margin: 0; - padding-left: 1em; +color : #737373; +margin : 0; +padding-left : 1em; } - a { - border-bottom: 3px solid var(--maincolor); - color: inherit; - text-decoration: none; +border-bottom : 3px solid blue; +color : inherit; +text-decoration : none; } - a:hover { - background-color: var(--maincolor); - color: #fff; +background-color : blue; +color : #fff; } - ul { - list-style: none; - padding-left: 2ch; +list-style : none; +padding-left : 2ch; } - ul li { - text-indent: -2ch; +text-indent : -2ch; } - ul > li::before { - content: '* '; - font-weight: bold; +content : '* '; +font-weight : bold; } - -/* Images */ img { - border: 3px solid #ececec; - max-width: 100%; +border : #ececec solid 3px; +max-width : 100%; } - figure { - box-sizing: border-box; - display: inline-block; - margin: 0; - max-width: 100%; +box-sizing : border-box; +display : inline-block; +margin : 0; +max-width : 100%; } - figure img { - max-height: 500px; +max-height : 500px; } - @media screen and (min-width: 600px) { - figure { - padding: 0 40px; - } +figure { +padding : 0 40px; +} } - figure h4 { - font-size: 1rem; - margin: 0; - margin-bottom: 1em; +font-size : 1rem; +margin : 0; +margin-bottom : 1em; } figure h4::before { - content: '↳ '; +content : '↳ '; } - -/* Code blocks */ code { - background-color: #f1f1f1; - padding: .1em .2em; +background-color : #f1f1f1; +padding : 0.1em 0.2em; } - pre { - background-color: #ececec; - line-height: 1.4; - overflow-x: auto; - padding: 1em; +background-color : #ececec; +line-height : 1.4; +overflow-x : auto; +padding : 1em; } - .highlight pre ::selection { - background: rgba(255, 255, 255, 0.2); - color: inherit; +background : rgb(255, 255, 255, 0.2); +color : inherit; } - pre code { - background-color: transparent; - color: inherit; - font-size: 100%; - padding: 0; +background-color : transparent; +color : inherit; +font-size : 100%; +padding : 0; } - -/* Containers */ .content { - margin-bottom: 4em; - margin-left: auto; - margin-right: auto; - max-width: 800px; - padding: 0 1ch; - word-wrap: break-word; +margin-bottom : 4em; +margin-left : auto; +margin-right : auto; +max-width : 800px; +padding : 0 1ch; +overflow-wrap : break-word; } - -/* Header */ header { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - margin: 1em 0; - line-height: 2.5em; +display : flex; +flex-wrap : wrap; +justify-content : space-between; +margin : 1em 0; +line-height : 2.5em; } - header .main { - font-size: 1.5rem; +font-size : 1.5rem; } h1, h2, h3, h4, h5, h6 { - font-size: 1.2rem; - margin-top: 2em; +font-size : 1.2rem; +margin-top : 2em; } - -h1::before { color: var(--maincolor); content: '# '; } -h2::before { color: var(--maincolor); content: '## '; } -h3::before { color: var(--maincolor); content: '### '; } -h4::before { color: var(--maincolor); content: '#### '; } -h5::before { color: var(--maincolor); content: '##### '; } -h6::before { color: var(--maincolor); content: '###### '; } - -.meta { - color: #999; - letter-spacing: -0.5px; -} - -/* Footer */ -footer { - display: flex; - align-items: center; - padding: 2rem 0rem; - margin-top: 2rem; -} - -.soc { - display: flex; - align-items: center; - border-bottom: none; -} - -.border { - margin-left: 0.5rem; - margin-right: 0.5rem; - border: 1px solid; -} - -.footer-info { - padding: var(--footer-padding); -} - -/* Common */ -.title h1 { - margin-bottom: 0; -} - -time { - color: grey; -} - -/* Posts */ -article .title { - margin-bottom: 1em; -} - - -/* Callout */ -.callout { - background-color: var(--maincolor); - color: #fff; - padding: 1em; -} - -.callout p { - font-family: 'IBM Plex Mono', monospace; - margin: 0; -} - -.callout a { - border-bottom: 3px solid #fff; -} - -.callout a:hover { - background-color: #fff; - color: var(--maincolor); -} - -.site-description { -display: flex; -justify-content: space-between; -} - -.tags li::before{ - content: "<"; -} - -.tags li::after{ - content: ">"; -} - -.tags a{ - border-bottom: 3px solid var(--maincolor); -} - -.tags a:hover{ - color:white; - background-color: var(--maincolor); -} - -svg{ - max-height: 15px; -} - -.soc:hover{ - color: white; -} - -.draft-label{ - text-decoration: none; - padding: 2px 4px; - margin-left: 6px; - background-color: #f9f2f4; -} - -.highlight { - position: relative; - -webkit-overflow-scrolling: touch; -} - -.highlight pre code[class*="language-"] { - -webkit-overflow-scrolling: touch; -} - -.highlight pre code[class*="language-"]::before { - background: black; - border-radius: 0 0 0.25rem 0.25rem; - color: white; - font-size: 12px; - letter-spacing: 0.025rem; - padding: 0.1rem 0.5rem; - position: absolute; - right: 1rem; - text-align: right; - text-transform: uppercase; - top: 0; -} - -.highlight pre code[class=language-javaScript]::before, -.highlight pre code[class="language-js"]::before { -content: "js"; -background: #f7df1e; -color: black; -} - -.highlight pre code[class*='language-yml']::before, -.highlight pre code[class*='language-yaml']::before { -content: 'yaml'; -background: #f71e6a; -color: white; -} - -.highlight pre code[class*='language-shell']::before, -.highlight pre code[class*='language-bash']::before, -.highlight pre code[class*='language-sh']::before { -content: 'shell'; -background: green; -color:white -} - -.highlight pre code[class*='language-json']::before{ -content: 'json'; -background: dodgerblue; - color: #000000 -} - -.highlight pre code[class*='language-python']::before, -.highlight pre code[class*='language-py']::before { -content: 'py'; -background: blue; -color: yellow ; -} - -.highlight pre code[class*='language-css']::before{ -content: 'css'; -background: cyan; -color: black ; -} - -.highlight pre code[class*='language-go']::before{ -content: 'Go'; -background: cyan; -color: royalblue ; -} - -.highlight pre code[class*='language-md']::before, -.highlight pre code[class*='language-md']::before{ -content: 'Markdown'; -background: royalblue; -color: whitesmoke ; -} - -/* table */ -table { - border-spacing: 0; - border-collapse: collapse; -} - -table th{ - padding: 6px 13px; - border: 1px solid #dfe2e5; - font-size: large; -} - -table td{ - padding: 6px 13px; - border: 1px solid #dfe2e5; -} - -body { - color: white; - background-color: black; -} - -::-moz-selection { - background: var(--maincolor); - color: #fff; - text-shadow: none; -} - -::selection { - background: var(--maincolor); - color: #fff; - text-shadow: none; -} - -hr { - border-top: 3px dotted blue; -} - -code { - background-color: lightblue; - color: black; - text-decoration: bold; - padding: 0.1em 0.2em; -} - -pre { - background-color: #272822; - line-height: 1.4; - overflow-x: auto; - padding: 1em; -} - -blockquote { - border-color: blue; -} - -h1, -h2, -h3, -h4, -h5, -h6 { - color: #ddd; -} - h1::before { - color: var(--maincolor); - content: "# "; +color : var(--maincolor); +content : '# '; } - h2::before { - color: var(--maincolor); - content: "## "; +color : var(--maincolor); +content : '## '; } - h3::before { - color: var(--maincolor); - content: "### "; +color : var(--maincolor); +content : '### '; } - h4::before { - color: var(--maincolor); - content: "#### "; +color : var(--maincolor); +content : '#### '; } - h5::before { - color: var(--maincolor); - content: "##### "; +color : var(--maincolor); +content : '##### '; } - h6::before { - color: var(--maincolor); - content: "###### "; +color : var(--maincolor); +content : '###### '; } - -a { - border-bottom: 3px solid var(--maincolor); - color: inherit; +.meta { +color : #999; +letter-spacing : -0.5px; } -a:hover { - background-color: var(--maincolor); - color: black; +footer { +display : flex; +align-items : center; +padding : 2rem 0; +margin-top : 2rem; } - -.site-description a { - color: #ddd; +.soc { +display : flex; +align-items : center; +border-bottom : none; } -.site-description a:hover { - color: black; +.border { +margin-left : 0.5rem; +margin-right : 0.5rem; +border : solid 1px; +} +.title h1 { +margin-bottom : 0; +} +time { +color : grey; +} +article .title { +margin-bottom : 1em; +} +.callout { +background-color : blue; +color : #fff; +padding : 1em; +} +.callout p { +font-family : 'IBM Plex Mono', monospace; +margin : 0; +} +.callout a { +border-bottom : 3px solid #fff; +} +.callout a:hover { +background-color : #fff; +color : var(--maincolor); +} +.site-description { +display : flex; +justify-content : space-between; +} +.tags li::before { +content : "<"; +} +.tags li::after { +content : ">"; } - .tags a { - border-bottom: 3px solid var(--maincolor); +border-bottom : 3px solid blue; } .tags a:hover { - background-color: var(--maincolor); - color: black; +color : white; +background-color : blue; } - -.site-title a { - color: white; - text-decoration: none !important; +svg { +max-height : 15px; } - -.header nav, -.footer { - border-color: #333; -} - -.highlight { - background-color: #333; -} - .soc:hover { - color: black; +color : white; } - .draft-label { - color: var(--maincolor); - background-color: blue; +text-decoration : none; +padding : 2px 4px; +margin-left : 6px; +background-color : #f9f2f4; } - -.highlight pre code[class=language-javaScript]::before, -.highlight pre code[class="language-js"]::before { - content: "js"; - background: #f7df1e; - color: black; +.highlight { +position : relative; } - -.highlight pre code[class*='language-yml']::before, -.highlight pre code[class*='language-yaml']::before { - content: 'yaml'; - background: #f71e6a; - color: white; +.highlight pre code[class*="language-"]::before { +background : black; +border-radius : 0 0 0.25rem 0.25rem; +color : white; +font-size : 12px; +letter-spacing : 0.025rem; +padding : 0.1rem 0.5rem; +position : absolute; +right : 1rem; +text-align : right; +text-transform : uppercase; +top : 0; } - -.highlight pre code[class*='language-shell']::before, -.highlight pre code[class*='language-bash']::before, -.highlight pre code[class*='language-sh']::before { - content: 'shell'; - background: green; - color:white +.highlight pre code[class="language-javaScript"]::before, .highlight pre code[class="language-js"]::before { +content : "js"; +background : #f7df1e; +color : black; } - -.highlight pre code[class*='language-json']::before{ - content: 'json'; - background: dodgerblue; - color: #000000 +.highlight pre code[class*="language-yml"]::before, .highlight pre code[class*="language-yaml"]::before { +content : 'yaml'; +background : #f71e6a; +color : white; } - -.highlight pre code[class*='language-python']::before, -.highlight pre code[class*='language-py']::before { - content: 'py'; - background: blue; - color: yellow ; +.highlight pre code[class*="language-shell"]::before, .highlight pre code[class*="language-bash"]::before, .highlight pre code[class*="language-sh"]::before { +content : 'shell'; +background : green; +color : white; } - -.highlight pre code[class*='language-css']::before{ - content: 'css'; - background: cyan; - color: black ; +.highlight pre code[class*="language-json"]::before { +content : 'json'; +background : dodgerblue; +color : #000000; } - -.highlight pre code[class*='language-go']::before{ - content: 'Go'; - background: cyan; - color: royalblue ; +.highlight pre code[class*="language-python"]::before, .highlight pre code[class*="language-py"]::before { +content : 'py'; +background : blue; +color : yellow; } - -.highlight pre code[class*='language-md']::before, -.highlight pre code[class*='language-md']::before{ - content: 'Markdown'; - background: royalblue; - color: whitesmoke ; +.highlight pre code[class*="language-css"]::before { +content : 'css'; +background : cyan; +color : black; +} +.highlight pre code[class*="language-go"]::before { +content : 'Go'; +background : cyan; +color : royalblue; +} +.highlight pre code[class*="language-md"]::before, .highlight pre code[class*="language-md"]::before { +content : 'Markdown'; +background : royalblue; +color : whitesmoke; +} +table { +border-spacing : 0; +border-collapse : collapse; +} +table th { +padding : 6px 13px; +border : #dfe2e5 solid 1px; +font-size : large; +} +table td { +padding : 6px 13px; +border : #dfe2e5 solid 1px; +} +body { +color : white; +background-color : black; +} +::-moz-selection { +background : blue; +color : #fff; +text-shadow : none; +} +::selection { +background : blue; +color : #fff; +text-shadow : none; +} +hr { +border-top : 3px dotted blue; +} +code { +background-color : lightblue; +color : black; +padding : 0.1em 0.2em; +} +pre { +background-color : #272822; +line-height : 1.4; +overflow-x : auto; +padding : 1em; +} +blockquote { +border-color : blue; +} +h1, h2, h3, h4, h5, h6 { +color : #ddd; +} +h1::before { +color : var(--maincolor); +content : "# "; +} +h2::before { +color : var(--maincolor); +content : "## "; +} +h3::before { +color : var(--maincolor); +content : "### "; +} +h4::before { +color : var(--maincolor); +content : "#### "; +} +h5::before { +color : var(--maincolor); +content : "##### "; +} +h6::before { +color : var(--maincolor); +content : "###### "; +} +a { +border-bottom : 3px solid blue; +color : inherit; +} +a:hover { +background-color : blue; +color : black; +} +.site-description a { +color : #ddd; +} +.site-description a:hover { +color : black; +} +.tags a { +border-bottom : 3px solid blue; +} +.tags a:hover { +background-color : blue; +color : black; +} +.site-title a { +color : white; +text-decoration : none !important ; +} +.header nav, .footer { +border-color : #333; +} +.highlight { +background-color : #333; +} +.soc:hover { +color : black; +} +.draft-label { +color : var(--maincolor); +background-color : blue; +} +.highlight pre code[class="language-javaScript"]::before, .highlight pre code[class="language-js"]::before { +content : "js"; +background : #f7df1e; +color : black; +} +.highlight pre code[class*="language-yml"]::before, .highlight pre code[class*="language-yaml"]::before { +content : 'yaml'; +background : #f71e6a; +color : white; +} +.highlight pre code[class*="language-shell"]::before, .highlight pre code[class*="language-bash"]::before, .highlight pre code[class*="language-sh"]::before { +content : 'shell'; +background : green; +color : white; +} +.highlight pre code[class*="language-json"]::before { +content : 'json'; +background : dodgerblue; +color : #000000; +} +.highlight pre code[class*="language-python"]::before, .highlight pre code[class*="language-py"]::before { +content : 'py'; +background : blue; +color : yellow; +} +.highlight pre code[class*="language-css"]::before { +content : 'css'; +background : cyan; +color : black; +} +.highlight pre code[class*="language-go"]::before { +content : 'Go'; +background : cyan; +color : royalblue; +} +.highlight pre code[class*="language-md"]::before, .highlight pre code[class*="language-md"]::before { +content : 'Markdown'; +background : royalblue; +color : whitesmoke; }