diff --git a/_config.yml b/_config.yml index a6f245c..d4f79af 100644 --- a/_config.yml +++ b/_config.yml @@ -18,7 +18,7 @@ libs: { url: 'https://cdn.jsdelivr.net/npm/less@4.2.0/dist/less.min.js', sri: 'sha384-SlYTcCEsC10TwMfcpGjqd+bWfA2QdB0CInBtPX6erDT3NnEkhX2X3gJ83UyHtXs3' }, - css: '/styles/styles.min.css?v=2024021800', + css: '/styles/styles.min.css?v=2026041800', bootstrap: { css: { url: 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css', diff --git a/styles/styles.less b/styles/styles.less index fba5d1d..890253e 100644 --- a/styles/styles.less +++ b/styles/styles.less @@ -2,10 +2,13 @@ @nav-height: 66px; @nav-offset: 6rem; @thumbnail-width: 140px; +@icon-margin: .25rem; -@max-width-md: 991px; -@max-width-sm: 767px; -@max-width-xs: 575px; +@min-width-sm: 576px; +@min-width-md: 768px; +@min-width-lg: 992px; +@min-width-xl: 1200px; +@min-width-xxl: 1400px; @color-primary: #37beff; @color-background-alt: rgba(0, 0, 0, 0.05); @@ -98,8 +101,8 @@ a:not(.btn):not(.nav-link):not(.dropdown-item), > .container > .grid { display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: auto 1fr; + grid-template-columns: auto; + grid-template-rows: auto; > .logo { grid-column: 1; @@ -107,16 +110,16 @@ a:not(.btn):not(.nav-link):not(.dropdown-item), } > .image { - grid-column: 2; - grid-row: 1 / 3; + grid-column: 1; + grid-row: 2; } > .download { grid-column: 1; - grid-row: 2; + grid-row: 3; } - @media (max-width: @max-width-md) { + @media (min-width: @min-width-md) { grid-template-columns: 1fr 1.5fr; > .logo { @@ -135,9 +138,9 @@ a:not(.btn):not(.nav-link):not(.dropdown-item), } } - @media (max-width: @max-width-sm) { - grid-template-columns: auto; - grid-template-rows: auto; + @media (min-width: @min-width-lg) { + grid-template-columns: 1fr 1fr; + grid-template-rows: auto 1fr; > .logo { grid-column: 1; @@ -145,13 +148,13 @@ a:not(.btn):not(.nav-link):not(.dropdown-item), } > .image { - grid-column: 1; - grid-row: 2; + grid-column: 2; + grid-row: 1 / 3; } > .download { grid-column: 1; - grid-row: 3; + grid-row: 2; } } } @@ -293,11 +296,11 @@ footer { } .rc-icon::before { - margin-right: .25rem; + margin-right: @icon-margin; } .rc-icon::after { - margin-left: .25rem; + margin-left: @icon-margin; } a.back-link::before { @@ -362,13 +365,21 @@ a.current-theme::after { } &.btn-sm { - @media (max-width: @max-width-xs) { + & > span { + display: none; + } + + &::before { + margin-right: 0; + } + + @media (min-width: @min-width-sm) { & > span { - display: none; + display: inline; } &::before { - margin-right: 0; + margin-right: .5rem; } } } @@ -450,25 +461,29 @@ div.color-modes > ul.dropdown-menu { } table.download-table { + tbody th, + tbody td { + vertical-align: middle; + } + th.package { + width: 55%; + } + + td.link { width: 20%; } - td.link, td.size { - width: 15%; + width: 20%; } td.checksum { font-size: 0.9em; + width: 5%; } - tbody th, - tbody td { - vertical-align: middle; - } - - @media (max-width: @max-width-md) { + @media (min-width: @min-width-md) { th.package { width: 40%; } @@ -482,25 +497,18 @@ table.download-table { } td.checksum { - width: 5%; + width: auto; } } - @media (max-width: @max-width-xs) { + @media (min-width: @min-width-lg) { th.package { - width: 55%; - } - - td.link { width: 20%; } + td.link, td.size { - width: 20%; - } - - td.checksum { - width: 5%; + width: 15%; } } } diff --git a/styles/styles.min.css b/styles/styles.min.css index 82aed2e..c9282ac 100644 --- a/styles/styles.min.css +++ b/styles/styles.min.css @@ -1 +1 @@ -:root{--bs-font-sans-serif:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--rc-color-primary:#37beff;--rc-color-header-background:#212529;--rc-color-banner-background:rgba(189, 234, 255, 0.5);--rc-color-background-alt:rgba(0, 0, 0, 0.05);--rc-color-download-bg:#1eb6ff;--rc-color-download-border:#13b2ff;--rc-color-thumbnail-background:rgba(0, 0, 0, 0.05);--rc-color-footer:#495057;--rc-color-footer-hover:#262a2d}html[data-bs-theme=dark]{--rc-color-primary:#006a9d;--rc-color-header-background:#000;--rc-color-banner-background:rgba(0, 35, 52, 0.5);--rc-color-background-alt:rgba(255, 255, 255, 0.05);--rc-color-download-bg:#005984;--rc-color-download-border:#005279;--rc-color-thumbnail-background:rgba(255, 255, 255, 0.05);--rc-color-footer:#949da5;--rc-color-footer-hover:#bdc3c8}.navbar{--bs-navbar-toggler-focus-width:0;--bs-navbar-toggler-border-color:transparent;--bs-navbar-toggler-padding-x:0}.table{--bs-table-striped-bg:var(--rc-color-background-alt)}.bg-badge,.bg-quote{background-color:var(--rc-color-background-alt)!important}.bg-header,.bg-navbar,.modal-footer.bg-footer{background-color:var(--rc-color-header-background)!important}.btn-link,a:not(.btn):not(.nav-link):not(.dropdown-item){text-decoration:none}.btn-link.anchor,a:not(.btn):not(.nav-link):not(.dropdown-item).anchor{top:-6rem}.btn-link:hover,a:not(.btn):not(.nav-link):not(.dropdown-item):hover{text-decoration:underline}.card-header{padding:.75rem 1.25rem}.card-body{padding:1.25rem}.list-group-item{padding:.75rem 1.25rem}#banner{margin-top:66px;background-color:var(--rc-color-banner-background)}#banner>.container>.grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}#banner>.container>.grid>.logo{grid-column:1;grid-row:1}#banner>.container>.grid>.image{grid-column:2;grid-row:1/3}#banner>.container>.grid>.download{grid-column:1;grid-row:2}@media (max-width:991px){#banner>.container>.grid{grid-template-columns:1fr 1.5fr}#banner>.container>.grid>.logo{grid-column:1/3;grid-row:1}#banner>.container>.grid>.image{grid-column:2;grid-row:2}#banner>.container>.grid>.download{grid-column:1;grid-row:2}}@media (max-width:767px){#banner>.container>.grid{grid-template-columns:auto;grid-template-rows:auto}#banner>.container>.grid>.logo{grid-column:1;grid-row:1}#banner>.container>.grid>.image{grid-column:1;grid-row:2}#banner>.container>.grid>.download{grid-column:1;grid-row:3}}main{padding-top:6rem}main .h1,main h1{font-size:2.2rem;margin-bottom:1rem}main .h2,main h2{font-size:1.8rem;margin-top:1.5rem;font-weight:700}main .h3,main h3{font-size:1.4rem;margin-top:1rem}blockquote{padding:.6rem 1rem;background-color:var(--rc-color-background-alt)}blockquote>p{margin:0}code.block{white-space:pre}a.anchor{color:var(--bs-secondary-color);font-size:.75rem;vertical-align:middle;opacity:0}a.anchor:hover{text-decoration:none!important}a.anchor:after{font:var(--fa-font-solid);content:"\f0c1"}:hover>a.anchor{opacity:1}a.copy-link{color:var(--bs-secondary-color);font-size:.75rem;display:inline-block;width:1.25em;text-align:center;margin-left:.5rem}a.copy-link:hover{text-decoration:none!important}a.copy-link:after{font:var(--fa-font-regular);content:"\f328"}a.copy-link.complete:after{font:var(--fa-font-solid);content:"\f00c"}a.copy-link.error:after{font:var(--fa-font-solid);content:"\f071"}a.copy-popover-link{color:var(--bs-body-color);text-decoration:none!important}a.copy-popover-link.checksum:after{font:var(--fa-font-solid);content:"\e4f0"}div.popover.copy-popover>div.popover-body{padding:0 var(--bs-popover-body-padding-x);display:flex}h1,h2,h3,p{scroll-margin-top:80px}.artical-list>.artical:nth-of-type(odd),ul.ul-striped li:nth-of-type(odd){background-color:var(--rc-color-background-alt)}.artical-list+nav{margin-top:2rem}footer ul,ul.screens{list-style:none}.artical>div.snippet>p{display:inline}footer a{font-weight:500;color:var(--rc-color-footer)}footer a:focus,footer a:hover{color:var(--rc-color-footer-hover)}.rc-icon::after,.rc-icon::before{font:var(--fa-font-solid)}.rc-icon::before{margin-right:.25rem}.rc-icon::after{margin-left:.25rem}a.back-link::before{content:"\f100"}a.read-link::after{content:"\f101"}a.external-link::after{content:"\f35d"}a.rss-link::after{content:"\f09e"}a.mail-list-link::before{font:var(--fa-font-regular);content:"\f0e0"}a.irc-link::after{content:"\f086"}a.dark-mode::before{content:"\f186"}a.light-mode::before{content:"\f185"}a.auto-mode::before{content:"\f72b"}a.current-theme::after{content:"\f00c"}.btn-rc-download{color:var(--bs-white)!important;background-color:var(--rc-color-primary);border-color:var(--rc-color-primary)}.btn-rc-download:hover{color:var(--bs-white);background-color:var(--rc-color-download-bg);border-color:var(--rc-color-download-border)}.btn-rc-download::before{margin-right:.5rem;content:"\f019"}@media (max-width:575px){.btn-rc-download.btn-sm>span{display:none}.btn-rc-download.btn-sm::before{margin-right:0}}div.color-modes>ul.dropdown-menu{min-width:auto}div.color-modes>ul.dropdown-menu>li>a{font-size:.8rem}div.color-modes>ul.dropdown-menu>li>a::before{text-align:center;width:1.25em;margin-right:.5em;display:inline-block}div.color-modes>ul.dropdown-menu>li>a::after{margin-left:.75em}.img-thumbnail>a{width:140px;background-color:var(--rc-color-thumbnail-background)}#viewer .modal-body{user-select:none}#viewer .modal-body>img{position:relative}#viewer .modal-body .modal-loading span{font-size:10em;opacity:.5}#viewer .modal-body .modal-arrow{position:absolute;top:0;bottom:0;height:100%;width:30%}#viewer .modal-body .modal-arrow.right-arrow{right:0}#viewer .modal-body.loading>img{display:none}#viewer .modal-body:not(.loading)>.modal-loading{display:none}#viewer .modal-footer{color:var(--bs-white)}#viewer .modal-footer .nav{user-select:none}#viewer .modal-footer .nav>.nav-link:not(.disabled){color:var(--bs-white)}table.download-table th.package{width:20%}table.download-table td.link,table.download-table td.size{width:15%}table.download-table td.checksum{font-size:.9em}table.download-table tbody td,table.download-table tbody th{vertical-align:middle}@media (max-width:991px){table.download-table th.package{width:40%}table.download-table td.link{width:35%}table.download-table td.size{width:20%}table.download-table td.checksum{width:5%}}@media (max-width:575px){table.download-table th.package{width:55%}table.download-table td.link{width:20%}table.download-table td.size{width:20%}table.download-table td.checksum{width:5%}} +:root{--bs-font-sans-serif:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--rc-color-primary:#37beff;--rc-color-header-background:#212529;--rc-color-banner-background:rgba(189, 234, 255, 0.5);--rc-color-background-alt:rgba(0, 0, 0, 0.05);--rc-color-download-bg:#1eb6ff;--rc-color-download-border:#13b2ff;--rc-color-thumbnail-background:rgba(0, 0, 0, 0.05);--rc-color-footer:#495057;--rc-color-footer-hover:#262a2d}html[data-bs-theme=dark]{--rc-color-primary:#006a9d;--rc-color-header-background:#000;--rc-color-banner-background:rgba(0, 35, 52, 0.5);--rc-color-background-alt:rgba(255, 255, 255, 0.05);--rc-color-download-bg:#005984;--rc-color-download-border:#005279;--rc-color-thumbnail-background:rgba(255, 255, 255, 0.05);--rc-color-footer:#949da5;--rc-color-footer-hover:#bdc3c8}.navbar{--bs-navbar-toggler-focus-width:0;--bs-navbar-toggler-border-color:transparent;--bs-navbar-toggler-padding-x:0}.table{--bs-table-striped-bg:var(--rc-color-background-alt)}.bg-badge,.bg-quote{background-color:var(--rc-color-background-alt)!important}.bg-header,.bg-navbar,.modal-footer.bg-footer{background-color:var(--rc-color-header-background)!important}.btn-link,a:not(.btn):not(.nav-link):not(.dropdown-item){text-decoration:none}.btn-link.anchor,a:not(.btn):not(.nav-link):not(.dropdown-item).anchor{top:-6rem}.btn-link:hover,a:not(.btn):not(.nav-link):not(.dropdown-item):hover{text-decoration:underline}.card-header{padding:.75rem 1.25rem}.card-body{padding:1.25rem}.list-group-item{padding:.75rem 1.25rem}#banner{margin-top:66px;background-color:var(--rc-color-banner-background)}#banner>.container>.grid{display:grid;grid-template-columns:auto;grid-template-rows:auto}#banner>.container>.grid>.logo{grid-column:1;grid-row:1}#banner>.container>.grid>.image{grid-column:1;grid-row:2}#banner>.container>.grid>.download{grid-column:1;grid-row:3}@media (min-width:768px){#banner>.container>.grid{grid-template-columns:1fr 1.5fr}#banner>.container>.grid>.logo{grid-column:1/3;grid-row:1}#banner>.container>.grid>.image{grid-column:2;grid-row:2}#banner>.container>.grid>.download{grid-column:1;grid-row:2}}@media (min-width:992px){#banner>.container>.grid{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}#banner>.container>.grid>.logo{grid-column:1;grid-row:1}#banner>.container>.grid>.image{grid-column:2;grid-row:1/3}#banner>.container>.grid>.download{grid-column:1;grid-row:2}}main{padding-top:6rem}main .h1,main h1{font-size:2.2rem;margin-bottom:1rem}main .h2,main h2{font-size:1.8rem;margin-top:1.5rem;font-weight:700}main .h3,main h3{font-size:1.4rem;margin-top:1rem}blockquote{padding:.6rem 1rem;background-color:var(--rc-color-background-alt)}blockquote>p{margin:0}code.block{white-space:pre}a.anchor{color:var(--bs-secondary-color);font-size:.75rem;vertical-align:middle;opacity:0}a.anchor:hover{text-decoration:none!important}a.anchor:after{font:var(--fa-font-solid);content:"\f0c1"}:hover>a.anchor{opacity:1}a.copy-link{color:var(--bs-secondary-color);font-size:.75rem;display:inline-block;width:1.25em;text-align:center;margin-left:.5rem}a.copy-link:hover{text-decoration:none!important}a.copy-link:after{font:var(--fa-font-regular);content:"\f328"}a.copy-link.complete:after{font:var(--fa-font-solid);content:"\f00c"}a.copy-link.error:after{font:var(--fa-font-solid);content:"\f071"}a.copy-popover-link{color:var(--bs-body-color);text-decoration:none!important}a.copy-popover-link.checksum:after{font:var(--fa-font-solid);content:"\e4f0"}div.popover.copy-popover>div.popover-body{padding:0 var(--bs-popover-body-padding-x);display:flex}h1,h2,h3,p{scroll-margin-top:80px}.artical-list>.artical:nth-of-type(odd),ul.ul-striped li:nth-of-type(odd){background-color:var(--rc-color-background-alt)}.artical-list+nav{margin-top:2rem}footer ul,ul.screens{list-style:none}.artical>div.snippet>p{display:inline}footer a{font-weight:500;color:var(--rc-color-footer)}footer a:focus,footer a:hover{color:var(--rc-color-footer-hover)}.rc-icon::after,.rc-icon::before{font:var(--fa-font-solid)}.rc-icon::before{margin-right:.25rem}.rc-icon::after{margin-left:.25rem}a.back-link::before{content:"\f100"}a.read-link::after{content:"\f101"}a.external-link::after{content:"\f35d"}a.rss-link::after{content:"\f09e"}a.mail-list-link::before{font:var(--fa-font-regular);content:"\f0e0"}a.irc-link::after{content:"\f086"}a.dark-mode::before{content:"\f186"}a.light-mode::before{content:"\f185"}a.auto-mode::before{content:"\f72b"}a.current-theme::after{content:"\f00c"}.btn-rc-download{color:var(--bs-white)!important;background-color:var(--rc-color-primary);border-color:var(--rc-color-primary)}.btn-rc-download:hover{color:var(--bs-white);background-color:var(--rc-color-download-bg);border-color:var(--rc-color-download-border)}.btn-rc-download::before{margin-right:.5rem;content:"\f019"}.btn-rc-download.btn-sm>span{display:none}.btn-rc-download.btn-sm::before{margin-right:0}@media (min-width:576px){.btn-rc-download.btn-sm>span{display:inline}.btn-rc-download.btn-sm::before{margin-right:.5rem}}div.color-modes>ul.dropdown-menu{min-width:auto}div.color-modes>ul.dropdown-menu>li>a{font-size:.8rem}div.color-modes>ul.dropdown-menu>li>a::before{text-align:center;width:1.25em;margin-right:.5em;display:inline-block}div.color-modes>ul.dropdown-menu>li>a::after{margin-left:.75em}.img-thumbnail>a{width:140px;background-color:var(--rc-color-thumbnail-background)}#viewer .modal-body{user-select:none}#viewer .modal-body>img{position:relative}#viewer .modal-body .modal-loading span{font-size:10em;opacity:.5}#viewer .modal-body .modal-arrow{position:absolute;top:0;bottom:0;height:100%;width:30%}#viewer .modal-body .modal-arrow.right-arrow{right:0}#viewer .modal-body.loading>img{display:none}#viewer .modal-body:not(.loading)>.modal-loading{display:none}#viewer .modal-footer{color:var(--bs-white)}#viewer .modal-footer .nav{user-select:none}#viewer .modal-footer .nav>.nav-link:not(.disabled){color:var(--bs-white)}table.download-table tbody td,table.download-table tbody th{vertical-align:middle}table.download-table th.package{width:55%}table.download-table td.link{width:20%}table.download-table td.size{width:20%}table.download-table td.checksum{font-size:.9em;width:5%}@media (min-width:768px){table.download-table th.package{width:40%}table.download-table td.link{width:35%}table.download-table td.size{width:20%}table.download-table td.checksum{width:auto}}@media (min-width:992px){table.download-table th.package{width:20%}table.download-table td.link,table.download-table td.size{width:15%}} \ No newline at end of file