diff --git a/models/style.go b/models/style.go index 20c41dd2..5c180c08 100644 --- a/models/style.go +++ b/models/style.go @@ -99,6 +99,15 @@ func (s StyleCard) Author() string { return s.Username } +// Truncate large styles to prevent long loading times. +func (s APIStyle) TruncateCode() bool { + if len(s.Code) > 150_000 { + return true + } + + return false +} + func getDBSession(db *gorm.DB) (tx *gorm.DB) { var log logger.LogLevel switch config.DB_DEBUG { diff --git a/scss/ui/_reset.scss b/scss/ui/_reset.scss index 8fa73523..bd7e1c87 100644 --- a/scss/ui/_reset.scss +++ b/scss/ui/_reset.scss @@ -39,6 +39,12 @@ html { } h1 { font-size: 2.5em } img { width: 100% } + + mark { + display: inline-flex; + color: var(--inverse); + background-color: var(--ac-4); + } } h2, h3 { margin: 1em 0 0.5em } diff --git a/static/css/main.css b/static/css/main.css index 78969bc8..358dcada 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -1 +1 @@ -@media screen and (min-width: 720px){@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Regular.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Regular.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Italic.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Italic.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Bold.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Bold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-BoldItalic.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-BoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}}:root{--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-sans: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Droid Sans", sans-serif;--font-mono: "Iosevka", "Fira Code", "Fira Mono", "Droid Mono", "Ubuntu Mono", Monaco, monospace;--br-1: 1rem;--br-2: 0.66rem;--br-3: 0.33rem;--inverse: #ffffff;--card-min-width: 300px;--form-max-width: 840px;--layout-max-width: 80rem}[data-color-scheme="dark"]{--bg-1: #1a1a1a;--bg-2: #272727;--bg-3: #343434;--bg-4: #404040;--bg-5: #4d4d4d;--fg-1: #ddd;--fg-2: #bebebe;--fg-3: #a0a0a0;--fg-4: #919191;--fg-5: #636363;--ac-1: #679cd0;--ac-2: #3673af;--ac-3: #2d5f90;--ac-4: #234a71;--ac-5: #193652;--st-1: #27fffb;--st-2: #00c0bc;--st-3: #009794;--st-4: #008380;--st-5: #005a58;--bg-t: rgba(26,26,26,0.7)}[data-color-scheme="light"]{--bg-1: #eee;--bg-2: #dadada;--bg-3: #c5c5c5;--bg-4: #b1b1b1;--bg-5: #9c9c9c;--fg-1: #101010;--fg-2: #242424;--fg-3: #393939;--fg-4: #4d4d4d;--fg-5: #626262;--ac-1: #0b459b;--ac-2: #1067e7;--ac-3: #307ef0;--ac-4: #5695f3;--ac-5: #7cadf6;--st-1: #66edd9;--st-2: #19d4b8;--st-3: #15b099;--st-4: #139d89;--st-5: #0e7969;--bg-t: rgba(238,238,238,0.8)}[data-darkreader-scheme="dark"] .github svg,[data-color-scheme="dark"] .github svg{filter:invert(1)}*{box-sizing:border-box;margin:0}html{scrollbar-color:var(--bg-5) var(--bg-2)}html body{margin:0;color:var(--fg-1);background:var(--bg-1);line-height:1.5;font-family:var(--font-sans),var(--font-emoji)}html body>*>.wrapper{width:100%;margin:auto;padding-left:1rem;padding-right:1rem;max-width:var(--layout-max-width)}html body>main{display:flex;min-height:calc(100vh - 130px)}html body>footer>div{min-height:64px}html a{color:var(--ac-1);text-decoration:none}html hr{border:none;border-top:1px solid var(--bg-3)}html h1{font-size:2.5em}html img{width:100%}h2,h3{margin:1em 0 0.5em}section>p{margin-bottom:0.5em}input,button{padding:0.5rem;min-height:42px;font-size:inherit;line-height:inherit;color:var(--fg-1);background-color:var(--bg-3);border:1px solid var(--bg-4);border-radius:var(--br-3)}input:hover,button:hover{border-color:var(--bg-5)}input:focus,button:focus{border-color:var(--ac-3);outline-color:transparent;box-shadow:0 0 0 0.25rem var(--ac-5)}input:-moz-focusring,button:-moz-focusring{outline:1px solid transparent}textarea{padding:0.5rem;font-size:0.875rem;min-width:100%;max-width:100%;min-height:300px;font-family:var(--font-mono);color:var(--fg-1);border:1px solid var(--bg-4);background-color:var(--bg-3);border-radius:var(--br-3)}textarea[readonly]{background-color:var(--bg-2)}textarea:hover:not([readonly]){border-color:var(--bg-5)}textarea:focus:not([readonly]){border-color:var(--ac-3);outline-color:transparent;box-shadow:0 0 0 0.25rem var(--ac-5)}textarea.raw{border:none;border-radius:0;background:none;min-height:auto;font-family:var(--font-sans)}textarea:-moz-focusring{outline:1px solid transparent}pre{padding:0.5rem;overflow:scroll;resize:vertical;border:1px solid var(--bg-4);background-color:var(--bg-2);border-radius:var(--br-3);min-height:20rem;height:20rem}form,.form-wrapper{margin:1rem auto;padding:1rem;max-width:var(--form-max-width);border:1px solid var(--bg-4);background-color:var(--bg-2);border-radius:var(--br-3)}form label,.form-wrapper label{display:flex}form input,form textarea,form select,.form-wrapper input,.form-wrapper textarea,.form-wrapper select{width:100%;display:flex;margin:0.5rem 0 1.5rem}form input:invalid:not(:focus):placeholder-shown,form textarea:invalid:not(:focus):placeholder-shown,form select:invalid:not(:focus):placeholder-shown,.form-wrapper input:invalid:not(:focus):placeholder-shown,.form-wrapper textarea:invalid:not(:focus):placeholder-shown,.form-wrapper select:invalid:not(:focus):placeholder-shown{box-shadow:none}form input:invalid:not(:placeholder-shown),form textarea:invalid:not(:placeholder-shown),form select:invalid:not(:placeholder-shown),.form-wrapper input:invalid:not(:placeholder-shown),.form-wrapper textarea:invalid:not(:placeholder-shown),.form-wrapper select:invalid:not(:placeholder-shown){border-color:#f00a;box-shadow:0 0 0 0.25rem #f003}form select,.form-wrapper select{width:auto}form>button,.form-wrapper>button{cursor:pointer;line-height:initial}form.search,.form-wrapper.search{margin:-2px 0;padding:0;min-width:12rem;max-width:12rem;position:relative;border:none;border-radius:0;background-color:transparent}form.search svg,.form-wrapper.search svg{stroke:var(--fg-3)}form.search input,form.search button,.form-wrapper.search input,.form-wrapper.search button{margin:0;padding:0.25rem 0.5rem;background-color:var(--bg-3)}form.search button,.form-wrapper.search button{min-height:unset;position:absolute;top:1px;right:1px;bottom:1px;border:none}form.search button:focus,.form-wrapper.search button:focus{top:0px;right:0px;bottom:0px;border:1px solid var(--ac-3)}@supports not (overflow: clip){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-thumb{background-color:var(--bg-5)}::-webkit-scrollbar-track{background-color:var(--bg-2)}}@supports (scrollbar-color: white black){input{filter:none !important}}input:-webkit-autofill{outline:1px solid transparent !important;-webkit-text-fill-color:var(--fg-1) !important;box-shadow:inset 0 0 0 50px var(--bg-3) !important}a{color:var(--ac-1);text-decoration:none}a:not([class]):hover{text-decoration:underline}a::after{font-size:0.7rem;vertical-align:super;color:var(--fg-3)}a[href^='http']::after{content:'[\01F517]'}a[href^='java']::after{content:'{JS}'}a[href^='mail']::after{content:'[📧]'}h1{font-size:2.5em}h2{font-size:1.8em}img{width:100%}hr{border:none;border-top:1px solid var(--bg-3)}.btn{padding:0.5rem 0.8rem;border-radius:var(--br-3);transition:color 0.2s ease-in-out,border-color 0.2s ease-in-out,background-color 0.2s ease-in-out;border:1px solid var(--bg-3);background-color:var(--bg-2);color:var(--fg-3);outline:none}.btn ::-moz-focus-inner{outline:none}.btn:hover{color:var(--fg-2);border-color:var(--bg-4)}.btn:not(.active):focus{color:var(--fg-2);border-color:var(--bg-5);box-shadow:0 0 0 0.25rem var(--bg-2)}.btn.active{color:var(--fg-1);border-color:var(--bg-5);background-color:var(--bg-3)}.btn.primary{color:var(--fg-1);border-color:var(--ac-3);background-color:var(--ac-5)}.btn.primary:hover{border-color:var(--ac-2);background-color:var(--ac-3)}.btn.primary:not(.active):focus{color:var(--inverse);border-color:var(--ac-2);box-shadow:0 0 0 0.25rem var(--ac-5)}.btn.stylus{color:var(--inverse);border-color:var(--st-3);background-color:var(--st-5)}.btn.stylus::after{color:var(--inverse)}.btn.stylus:hover{border-color:var(--st-2);background-color:var(--st-3)}.btn.stylus:not(.active):focus{color:var(--inverse);border-color:var(--st-2);box-shadow:0 0 0 0.25rem var(--st-5)}[data-color-scheme="light"] .btn.stylus{border-color:var(--st-5)}[data-color-scheme="light"] .btn.stylus:not(.active):focus{border-color:var(--st-5);box-shadow:0 0 0 0.25rem var(--st-2)}.link{padding:0;border:none;background:none}.link:hover{text-decoration:underline;cursor:pointer}.link:focus{box-shadow:none}.err{margin:1rem auto;padding:1rem;color:#f66;border-left:var(--br-3) solid rgba(255,102,102,0.5);background-color:rgba(255,102,102,0.1);border-radius:var(--br-3)}.err ul{padding-left:1.5rem}.err p:last-child{margin-bottom:0}[data-color-scheme="light"] .err{color:red;border-left:var(--br-3) solid rgba(255,0,0,0.5);background-color:rgba(255,0,0,0.1);border-radius:var(--br-3)}input[type="checkbox"],label[for="remember"]{width:unset}input[type="checkbox"]{box-shadow:none;filter:invert(0.9) hue-rotate(180deg)}@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}.oauth{width:100%;align-items:center;display:inline-flex;background-color:var(--bg-2)}.oauth:not(:first-child){margin-left:1rem}.oauth svg{margin-right:0.8rem}.oauth:hover{background-color:var(--bg-3);cursor:pointer}.welcome{max-width:var(--form-max-width)}.socials svg{margin-right:1rem}#share{min-width:300px}.bd\:o{border:1px solid var(--bg-3)}.bd\:t{border-top:1px solid var(--bg-3)}.bd\:b{border-bottom:1px solid var(--bg-3)}.bg\:2{background-color:var(--bg-2)}.fg\:4{color:var(--fg-4)}.fg\:3{color:var(--fg-3)}.fg\:2{color:var(--fg-2)}.fg\:1{color:var(--fg-1)}.f\:h3{font-size:1.125em}.f\:b{font-weight:bold}.f\:col{display:flex;flex-flow:column wrap}.mx\:r{margin-left:-0.5rem;margin-right:-0.5rem}.mx\:s{margin-left:0.5rem;margin-right:0.5rem}.mx\:m{margin-left:1rem;margin-right:1rem}.mx\:a{margin-left:auto;margin-right:auto}.my\:0{margin-top:0rem;margin-bottom:0rem}.mt\:0{margin-top:0rem}.mt\:s{margin-top:0.5rem}.mt\:m{margin-top:1rem}.mt\:l{margin-top:2rem}.mb\:0{margin-bottom:0rem}.mb\:s{margin-bottom:0.5rem}.mb\:m{margin-bottom:1rem}.mb\:l{margin-bottom:2rem}.ml\:0{margin-left:0rem}.ml\:a{margin-left:auto}.ml\:s{margin-left:0.5rem}.ml\:m{margin-left:1rem}.mr\:a{margin-right:auto}.mr\:s{margin-right:0.5rem}.mr\:m{margin-right:1rem}.p\:m{padding:1rem}.px\:m{padding-left:1rem;padding-right:1rem}.px\:0{padding-left:0rem;padding-right:0rem}.py\:0{padding-top:0rem;padding-bottom:0rem}.py\:m{padding-top:1rem;padding-bottom:1rem}.py\:l{padding-top:2rem;padding-bottom:2rem}.pt\:m{padding-top:1rem}.pb\:m{padding-bottom:1rem}.ta\:l{text-align:left}.ta\:c{text-align:center}.col{flex-basis:calc(100% / 4 - 1rem)}.gap{margin:0 0.5rem 1rem .5rem}.flex{display:flex}.iflex{display:inline-flex}.f-col{flex-direction:column}.rwrap{flex-flow:row wrap}.cwrap{flex-flow:column wrap}.lsn{list-style-type:none;padding-left:0px}.unset{all:unset !important}.limit{max-width:480px}.jc\:c{justify-content:center}.jc\:a{justify-content:space-around}.jc\:b{justify-content:space-between}.ai\:c{align-items:center}.full{max-width:100%}.sticky{top:0;z-index:9;position:sticky}.minw{display:inline-flex;min-width:15ex}.td\:d{text-decoration:underline}.card{min-width:var(--card-min-width);border-radius:var(--br-3);background-color:var(--bg-2)}[data-color-scheme="dark"] .card.col picture{margin:-1px}.card.animate{transition:transform 0.2s linear}.card.animate:hover{transform:translateY(-0.25rem)}.card .screenshot{overflow:hidden;position:relative;border-radius:var(--br-3)}.card .screenshot img{border-radius:var(--br-3);object-fit:contain}.card .screenshot .blurred{position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px;filter:blur(16px) brightness(0.6)}.card picture{padding-top:56.25%;position:relative;display:flex}.card picture img{top:0;left:0;height:100%;position:absolute;border-radius:var(--br-3) var(--br-3) 0 0;object-position:center top;object-fit:cover}.card picture.no-screenshot svg{height:140px;position:absolute;top:calc(50% - 70px)}.card .thumbnail picture::before,.card .thumbnail picture::after{top:0;left:0;right:0;bottom:0;z-index:1;content:'';position:absolute;text-align:center;font-size:1.4rem;transition:all 0.3s ease-in-out;color:var(--fg-1);opacity:0}.card .thumbnail picture::before{border-radius:var(--br-3);background-color:var(--bg-1)}.card .thumbnail picture::after{content:'Click to see details';top:calc(50% - 0.8rem);bottom:unset}.card .thumbnail picture:hover::before{opacity:0.85;background-color:var(--bg-3);transition-delay:0.4s}.card .thumbnail picture:hover::after{opacity:1;transition-delay:0.4s}.card-body>*{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-footer small{font-size:75%}@media screen and (max-width: 640px){.preview+section .header{flex-wrap:wrap}.preview+section .header h1{width:100%;text-align:center}.preview+section .header *:nth-child(2){margin-left:auto !important}.preview+section .header *:last-of-type{margin-right:auto}}@media screen and (max-width: 1280px){.grid .col{flex-basis:calc(100% / 3 - 1rem)}}@media screen and (max-width: 964px){.grid .col{flex-basis:calc(100% / 2 - 1rem)}}@media screen and (max-width: 648px){.grid .col{flex-basis:100%}}.details img{max-width:50%;border-radius:var(--br-3);background-color:var(--bg-3)}.md h1{font-size:1.8rem}.md h2{font-size:1.6rem}.md h3{font-size:1.3rem}.md h2,.md h3{padding-top:1rem}.md code{padding:0.125rem 0.25rem;display:inline-flex;font-size:0.875rem;border-radius:var(--br-3);background-color:var(--bg-3)}.hero{min-height:75vh;align-items:center;justify-content:center}.hero h1{font-size:3.5em;margin-bottom:1rem}.hero p{max-width:54ex;font-size:1.2em}@media (max-width: 600px){.hero h1{font-size:2.6em}.hero p{font-size:1.2em}}.hero .mascot svg{width:128px}main>aside{flex-basis:100%}nav{border-bottom:1px solid var(--bg-4);background-color:var(--bg-2)}nav a{color:var(--fg-1);text-decoration:none}nav input{min-height:unset;border-color:var(--bg-4)}nav .mascot{margin-right:auto;display:inline-flex}nav .mascot svg{width:32px}nav .mascot:hover span{text-decoration:underline}nav>div{position:relative;flex-direction:column}nav ul{padding:0;list-style:none;overflow:hidden}nav ul li a{display:flex;border-radius:var(--br-3)}nav .menu{clear:both;max-height:0;transition:max-height 0.425s linear}nav .menu-icon{top:32px;right:16px;padding:1rem;margin:-1rem;position:absolute;display:inline-flex;cursor:pointer;float:right}nav .menu-icon .i{height:2px;width:18px;display:block;position:relative;transition:background 0.2s ease-out;background-color:var(--fg-1)}nav .menu-icon .i:before,nav .menu-icon .i:after{content:'';width:100%;height:100%;display:block;position:absolute;transition:all 0.2s ease-out;background-color:var(--fg-1)}nav .menu-icon .i:before{top:5px}nav .menu-icon .i:after{top:-5px}nav .menu-btn{display:none}nav .menu-btn:checked~.menu{max-height:calc(100vh - 64px)}nav .menu-btn:checked~.menu-icon .i{background-color:transparent}nav .menu-btn:checked~.menu-icon .i:before{transform:rotate(-45deg)}nav .menu-btn:checked~.menu-icon .i:after{transform:rotate(45deg)}nav .menu-btn:checked~.menu-icon:not(.steps) .i:before,nav .menu-btn:checked~.menu-icon:not(.steps) .i:after{top:0}@media screen and (max-width: 820px){.menu{padding:0}.menu form{margin:1rem}nav ul li a{padding:1rem}nav ul li a:hover{background-color:var(--bg-3)}}@media screen and (min-width: 821px){nav>div{flex-direction:row}nav li{float:left}nav li a{margin-left:1rem}nav .menu{clear:none;float:right;display:flex;align-items:center;max-height:none;padding-left:1rem}nav .menu-icon{display:none}}footer{border-top:1px solid var(--bg-4);background-color:var(--bg-2)}footer li{list-style:none}footer li:not(:last-child)::after{content:"/";padding:0 0.5rem;color:var(--fg-5)}footer a{color:var(--fg-1);text-decoration:none}footer a:hover{color:var(--ac-1)}footer .wrapper{justify-content:space-between}[tooltip-data]{cursor:pointer;position:relative}[tooltip-data]:hover{z-index:1337}[tooltip-data]:hover::before,[tooltip-data]:hover:after{opacity:0.9}[tooltip-data]::before,[tooltip-data]::after{opacity:0;transition:opacity 0.15s linear;pointer-events:none}[tooltip-data]::before{background-color:var(--bg-4);border-radius:var(--br-3);bottom:120%;content:attr(tooltip-data);color:var(--fg-1);font-size:0.875rem;font-weight:normal;left:50%;line-height:1.2;margin-bottom:5px;margin-left:-100px;padding:0.5rem;position:absolute;text-align:center;white-space:break-spaces;width:200px}[tooltip-data]:after{border-style:solid;border-left-color:transparent;border-right-color:transparent;border-top-color:var(--bg-4);border-width:5px;border-bottom:none;bottom:120%;content:' ';left:50%;margin-left:-5px;position:absolute;width:0}#btn-share[tooltip-data]:not(.copied)::before,#btn-share[tooltip-data]:not(.copied)::after{content:unset} +@media screen and (min-width: 720px){@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Regular.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Regular.woff") format("woff");font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Italic.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Italic.woff") format("woff");font-weight:normal;font-style:italic;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-Bold.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-Bold.woff") format("woff");font-weight:bold;font-style:normal;font-display:swap}@font-face{font-family:'Inter';src:url("https://fonts.imma.link/src/inter/Inter-BoldItalic.woff2") format("woff2"), url("https://fonts.imma.link/src/inter/Inter-BoldItalic.woff") format("woff");font-weight:bold;font-style:italic;font-display:swap}}:root{--font-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--font-sans: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Droid Sans", sans-serif;--font-mono: "Iosevka", "Fira Code", "Fira Mono", "Droid Mono", "Ubuntu Mono", Monaco, monospace;--br-1: 1rem;--br-2: 0.66rem;--br-3: 0.33rem;--inverse: #ffffff;--card-min-width: 300px;--form-max-width: 840px;--layout-max-width: 80rem}[data-color-scheme="dark"]{--bg-1: #1a1a1a;--bg-2: #272727;--bg-3: #343434;--bg-4: #404040;--bg-5: #4d4d4d;--fg-1: #ddd;--fg-2: #bebebe;--fg-3: #a0a0a0;--fg-4: #919191;--fg-5: #636363;--ac-1: #679cd0;--ac-2: #3673af;--ac-3: #2d5f90;--ac-4: #234a71;--ac-5: #193652;--st-1: #27fffb;--st-2: #00c0bc;--st-3: #009794;--st-4: #008380;--st-5: #005a58;--bg-t: rgba(26,26,26,0.7)}[data-color-scheme="light"]{--bg-1: #eee;--bg-2: #dadada;--bg-3: #c5c5c5;--bg-4: #b1b1b1;--bg-5: #9c9c9c;--fg-1: #101010;--fg-2: #242424;--fg-3: #393939;--fg-4: #4d4d4d;--fg-5: #626262;--ac-1: #0b459b;--ac-2: #1067e7;--ac-3: #307ef0;--ac-4: #5695f3;--ac-5: #7cadf6;--st-1: #66edd9;--st-2: #19d4b8;--st-3: #15b099;--st-4: #139d89;--st-5: #0e7969;--bg-t: rgba(238,238,238,0.8)}[data-darkreader-scheme="dark"] .github svg,[data-color-scheme="dark"] .github svg{filter:invert(1)}*{box-sizing:border-box;margin:0}html{scrollbar-color:var(--bg-5) var(--bg-2)}html body{margin:0;color:var(--fg-1);background:var(--bg-1);line-height:1.5;font-family:var(--font-sans),var(--font-emoji)}html body>*>.wrapper{width:100%;margin:auto;padding-left:1rem;padding-right:1rem;max-width:var(--layout-max-width)}html body>main{display:flex;min-height:calc(100vh - 130px)}html body>footer>div{min-height:64px}html a{color:var(--ac-1);text-decoration:none}html hr{border:none;border-top:1px solid var(--bg-3)}html h1{font-size:2.5em}html img{width:100%}html mark{display:inline-flex;color:var(--inverse);background-color:var(--ac-4)}h2,h3{margin:1em 0 0.5em}section>p{margin-bottom:0.5em}input,button{padding:0.5rem;min-height:42px;font-size:inherit;line-height:inherit;color:var(--fg-1);background-color:var(--bg-3);border:1px solid var(--bg-4);border-radius:var(--br-3)}input:hover,button:hover{border-color:var(--bg-5)}input:focus,button:focus{border-color:var(--ac-3);outline-color:transparent;box-shadow:0 0 0 0.25rem var(--ac-5)}input:-moz-focusring,button:-moz-focusring{outline:1px solid transparent}textarea{padding:0.5rem;font-size:0.875rem;min-width:100%;max-width:100%;min-height:300px;font-family:var(--font-mono);color:var(--fg-1);border:1px solid var(--bg-4);background-color:var(--bg-3);border-radius:var(--br-3)}textarea[readonly]{background-color:var(--bg-2)}textarea:hover:not([readonly]){border-color:var(--bg-5)}textarea:focus:not([readonly]){border-color:var(--ac-3);outline-color:transparent;box-shadow:0 0 0 0.25rem var(--ac-5)}textarea.raw{border:none;border-radius:0;background:none;min-height:auto;font-family:var(--font-sans)}textarea:-moz-focusring{outline:1px solid transparent}pre{padding:0.5rem;overflow:scroll;resize:vertical;border:1px solid var(--bg-4);background-color:var(--bg-2);border-radius:var(--br-3);min-height:20rem;height:20rem}form,.form-wrapper{margin:1rem auto;padding:1rem;max-width:var(--form-max-width);border:1px solid var(--bg-4);background-color:var(--bg-2);border-radius:var(--br-3)}form label,.form-wrapper label{display:flex}form input,form textarea,form select,.form-wrapper input,.form-wrapper textarea,.form-wrapper select{width:100%;display:flex;margin:0.5rem 0 1.5rem}form input:invalid:not(:focus):placeholder-shown,form textarea:invalid:not(:focus):placeholder-shown,form select:invalid:not(:focus):placeholder-shown,.form-wrapper input:invalid:not(:focus):placeholder-shown,.form-wrapper textarea:invalid:not(:focus):placeholder-shown,.form-wrapper select:invalid:not(:focus):placeholder-shown{box-shadow:none}form input:invalid:not(:placeholder-shown),form textarea:invalid:not(:placeholder-shown),form select:invalid:not(:placeholder-shown),.form-wrapper input:invalid:not(:placeholder-shown),.form-wrapper textarea:invalid:not(:placeholder-shown),.form-wrapper select:invalid:not(:placeholder-shown){border-color:#f00a;box-shadow:0 0 0 0.25rem #f003}form select,.form-wrapper select{width:auto}form>button,.form-wrapper>button{cursor:pointer;line-height:initial}form.search,.form-wrapper.search{margin:-2px 0;padding:0;min-width:12rem;max-width:12rem;position:relative;border:none;border-radius:0;background-color:transparent}form.search svg,.form-wrapper.search svg{stroke:var(--fg-3)}form.search input,form.search button,.form-wrapper.search input,.form-wrapper.search button{margin:0;padding:0.25rem 0.5rem;background-color:var(--bg-3)}form.search button,.form-wrapper.search button{min-height:unset;position:absolute;top:1px;right:1px;bottom:1px;border:none}form.search button:focus,.form-wrapper.search button:focus{top:0px;right:0px;bottom:0px;border:1px solid var(--ac-3)}@supports not (overflow: clip){::-webkit-scrollbar{width:12px}::-webkit-scrollbar-thumb{background-color:var(--bg-5)}::-webkit-scrollbar-track{background-color:var(--bg-2)}}@supports (scrollbar-color: white black){input{filter:none !important}}input:-webkit-autofill{outline:1px solid transparent !important;-webkit-text-fill-color:var(--fg-1) !important;box-shadow:inset 0 0 0 50px var(--bg-3) !important}a{color:var(--ac-1);text-decoration:none}a:not([class]):hover{text-decoration:underline}a::after{font-size:0.7rem;vertical-align:super;color:var(--fg-3)}a[href^='http']::after{content:'[\01F517]'}a[href^='java']::after{content:'{JS}'}a[href^='mail']::after{content:'[📧]'}h1{font-size:2.5em}h2{font-size:1.8em}img{width:100%}hr{border:none;border-top:1px solid var(--bg-3)}.btn{padding:0.5rem 0.8rem;border-radius:var(--br-3);transition:color 0.2s ease-in-out,border-color 0.2s ease-in-out,background-color 0.2s ease-in-out;border:1px solid var(--bg-3);background-color:var(--bg-2);color:var(--fg-3);outline:none}.btn ::-moz-focus-inner{outline:none}.btn:hover{color:var(--fg-2);border-color:var(--bg-4)}.btn:not(.active):focus{color:var(--fg-2);border-color:var(--bg-5);box-shadow:0 0 0 0.25rem var(--bg-2)}.btn.active{color:var(--fg-1);border-color:var(--bg-5);background-color:var(--bg-3)}.btn.primary{color:var(--fg-1);border-color:var(--ac-3);background-color:var(--ac-5)}.btn.primary:hover{border-color:var(--ac-2);background-color:var(--ac-3)}.btn.primary:not(.active):focus{color:var(--inverse);border-color:var(--ac-2);box-shadow:0 0 0 0.25rem var(--ac-5)}.btn.stylus{color:var(--inverse);border-color:var(--st-3);background-color:var(--st-5)}.btn.stylus::after{color:var(--inverse)}.btn.stylus:hover{border-color:var(--st-2);background-color:var(--st-3)}.btn.stylus:not(.active):focus{color:var(--inverse);border-color:var(--st-2);box-shadow:0 0 0 0.25rem var(--st-5)}[data-color-scheme="light"] .btn.stylus{border-color:var(--st-5)}[data-color-scheme="light"] .btn.stylus:not(.active):focus{border-color:var(--st-5);box-shadow:0 0 0 0.25rem var(--st-2)}.link{padding:0;border:none;background:none}.link:hover{text-decoration:underline;cursor:pointer}.link:focus{box-shadow:none}.err{margin:1rem auto;padding:1rem;color:#f66;border-left:var(--br-3) solid rgba(255,102,102,0.5);background-color:rgba(255,102,102,0.1);border-radius:var(--br-3)}.err ul{padding-left:1.5rem}.err p:last-child{margin-bottom:0}[data-color-scheme="light"] .err{color:red;border-left:var(--br-3) solid rgba(255,0,0,0.5);background-color:rgba(255,0,0,0.1);border-radius:var(--br-3)}input[type="checkbox"],label[for="remember"]{width:unset}input[type="checkbox"]{box-shadow:none;filter:invert(0.9) hue-rotate(180deg)}@media (prefers-reduced-motion: reduce){*{transition:none !important;animation:none !important}}.oauth{width:100%;align-items:center;display:inline-flex;background-color:var(--bg-2)}.oauth:not(:first-child){margin-left:1rem}.oauth svg{margin-right:0.8rem}.oauth:hover{background-color:var(--bg-3);cursor:pointer}.welcome{max-width:var(--form-max-width)}.socials svg{margin-right:1rem}#share{min-width:300px}.bd\:o{border:1px solid var(--bg-3)}.bd\:t{border-top:1px solid var(--bg-3)}.bd\:b{border-bottom:1px solid var(--bg-3)}.bg\:2{background-color:var(--bg-2)}.fg\:4{color:var(--fg-4)}.fg\:3{color:var(--fg-3)}.fg\:2{color:var(--fg-2)}.fg\:1{color:var(--fg-1)}.f\:h3{font-size:1.125em}.f\:b{font-weight:bold}.f\:col{display:flex;flex-flow:column wrap}.mx\:r{margin-left:-0.5rem;margin-right:-0.5rem}.mx\:s{margin-left:0.5rem;margin-right:0.5rem}.mx\:m{margin-left:1rem;margin-right:1rem}.mx\:a{margin-left:auto;margin-right:auto}.my\:0{margin-top:0rem;margin-bottom:0rem}.mt\:0{margin-top:0rem}.mt\:s{margin-top:0.5rem}.mt\:m{margin-top:1rem}.mt\:l{margin-top:2rem}.mb\:0{margin-bottom:0rem}.mb\:s{margin-bottom:0.5rem}.mb\:m{margin-bottom:1rem}.mb\:l{margin-bottom:2rem}.ml\:0{margin-left:0rem}.ml\:a{margin-left:auto}.ml\:s{margin-left:0.5rem}.ml\:m{margin-left:1rem}.mr\:a{margin-right:auto}.mr\:s{margin-right:0.5rem}.mr\:m{margin-right:1rem}.p\:m{padding:1rem}.px\:m{padding-left:1rem;padding-right:1rem}.px\:0{padding-left:0rem;padding-right:0rem}.py\:0{padding-top:0rem;padding-bottom:0rem}.py\:m{padding-top:1rem;padding-bottom:1rem}.py\:l{padding-top:2rem;padding-bottom:2rem}.pt\:m{padding-top:1rem}.pb\:m{padding-bottom:1rem}.ta\:l{text-align:left}.ta\:c{text-align:center}.col{flex-basis:calc(100% / 4 - 1rem)}.gap{margin:0 0.5rem 1rem .5rem}.flex{display:flex}.iflex{display:inline-flex}.f-col{flex-direction:column}.rwrap{flex-flow:row wrap}.cwrap{flex-flow:column wrap}.lsn{list-style-type:none;padding-left:0px}.unset{all:unset !important}.limit{max-width:480px}.jc\:c{justify-content:center}.jc\:a{justify-content:space-around}.jc\:b{justify-content:space-between}.ai\:c{align-items:center}.full{max-width:100%}.sticky{top:0;z-index:9;position:sticky}.minw{display:inline-flex;min-width:15ex}.td\:d{text-decoration:underline}.card{min-width:var(--card-min-width);border-radius:var(--br-3);background-color:var(--bg-2)}[data-color-scheme="dark"] .card.col picture{margin:-1px}.card.animate{transition:transform 0.2s linear}.card.animate:hover{transform:translateY(-0.25rem)}.card .screenshot{overflow:hidden;position:relative;border-radius:var(--br-3)}.card .screenshot img{border-radius:var(--br-3);object-fit:contain}.card .screenshot .blurred{position:absolute;top:-16px;right:-16px;bottom:-16px;left:-16px;filter:blur(16px) brightness(0.6)}.card picture{padding-top:56.25%;position:relative;display:flex}.card picture img{top:0;left:0;height:100%;position:absolute;border-radius:var(--br-3) var(--br-3) 0 0;object-position:center top;object-fit:cover}.card picture.no-screenshot svg{height:140px;position:absolute;top:calc(50% - 70px)}.card .thumbnail picture::before,.card .thumbnail picture::after{top:0;left:0;right:0;bottom:0;z-index:1;content:'';position:absolute;text-align:center;font-size:1.4rem;transition:all 0.3s ease-in-out;color:var(--fg-1);opacity:0}.card .thumbnail picture::before{border-radius:var(--br-3);background-color:var(--bg-1)}.card .thumbnail picture::after{content:'Click to see details';top:calc(50% - 0.8rem);bottom:unset}.card .thumbnail picture:hover::before{opacity:0.85;background-color:var(--bg-3);transition-delay:0.4s}.card .thumbnail picture:hover::after{opacity:1;transition-delay:0.4s}.card-body>*{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.card-footer small{font-size:75%}@media screen and (max-width: 640px){.preview+section .header{flex-wrap:wrap}.preview+section .header h1{width:100%;text-align:center}.preview+section .header *:nth-child(2){margin-left:auto !important}.preview+section .header *:last-of-type{margin-right:auto}}@media screen and (max-width: 1280px){.grid .col{flex-basis:calc(100% / 3 - 1rem)}}@media screen and (max-width: 964px){.grid .col{flex-basis:calc(100% / 2 - 1rem)}}@media screen and (max-width: 648px){.grid .col{flex-basis:100%}}.details img{max-width:50%;border-radius:var(--br-3);background-color:var(--bg-3)}.md h1{font-size:1.8rem}.md h2{font-size:1.6rem}.md h3{font-size:1.3rem}.md h2,.md h3{padding-top:1rem}.md code{padding:0.125rem 0.25rem;display:inline-flex;font-size:0.875rem;border-radius:var(--br-3);background-color:var(--bg-3)}.hero{min-height:75vh;align-items:center;justify-content:center}.hero h1{font-size:3.5em;margin-bottom:1rem}.hero p{max-width:54ex;font-size:1.2em}@media (max-width: 600px){.hero h1{font-size:2.6em}.hero p{font-size:1.2em}}.hero .mascot svg{width:128px}main>aside{flex-basis:100%}nav{border-bottom:1px solid var(--bg-4);background-color:var(--bg-2)}nav a{color:var(--fg-1);text-decoration:none}nav input{min-height:unset;border-color:var(--bg-4)}nav .mascot{margin-right:auto;display:inline-flex}nav .mascot svg{width:32px}nav .mascot:hover span{text-decoration:underline}nav>div{position:relative;flex-direction:column}nav ul{padding:0;list-style:none;overflow:hidden}nav ul li a{display:flex;border-radius:var(--br-3)}nav .menu{clear:both;max-height:0;transition:max-height 0.425s linear}nav .menu-icon{top:32px;right:16px;padding:1rem;margin:-1rem;position:absolute;display:inline-flex;cursor:pointer;float:right}nav .menu-icon .i{height:2px;width:18px;display:block;position:relative;transition:background 0.2s ease-out;background-color:var(--fg-1)}nav .menu-icon .i:before,nav .menu-icon .i:after{content:'';width:100%;height:100%;display:block;position:absolute;transition:all 0.2s ease-out;background-color:var(--fg-1)}nav .menu-icon .i:before{top:5px}nav .menu-icon .i:after{top:-5px}nav .menu-btn{display:none}nav .menu-btn:checked~.menu{max-height:calc(100vh - 64px)}nav .menu-btn:checked~.menu-icon .i{background-color:transparent}nav .menu-btn:checked~.menu-icon .i:before{transform:rotate(-45deg)}nav .menu-btn:checked~.menu-icon .i:after{transform:rotate(45deg)}nav .menu-btn:checked~.menu-icon:not(.steps) .i:before,nav .menu-btn:checked~.menu-icon:not(.steps) .i:after{top:0}@media screen and (max-width: 820px){.menu{padding:0}.menu form{margin:1rem}nav ul li a{padding:1rem}nav ul li a:hover{background-color:var(--bg-3)}}@media screen and (min-width: 821px){nav>div{flex-direction:row}nav li{float:left}nav li a{margin-left:1rem}nav .menu{clear:none;float:right;display:flex;align-items:center;max-height:none;padding-left:1rem}nav .menu-icon{display:none}}footer{border-top:1px solid var(--bg-4);background-color:var(--bg-2)}footer li{list-style:none}footer li:not(:last-child)::after{content:"/";padding:0 0.5rem;color:var(--fg-5)}footer a{color:var(--fg-1);text-decoration:none}footer a:hover{color:var(--ac-1)}footer .wrapper{justify-content:space-between}[tooltip-data]{cursor:pointer;position:relative}[tooltip-data]:hover{z-index:1337}[tooltip-data]:hover::before,[tooltip-data]:hover:after{opacity:0.9}[tooltip-data]::before,[tooltip-data]::after{opacity:0;transition:opacity 0.15s linear;pointer-events:none}[tooltip-data]::before{background-color:var(--bg-4);border-radius:var(--br-3);bottom:120%;content:attr(tooltip-data);color:var(--fg-1);font-size:0.875rem;font-weight:normal;left:50%;line-height:1.2;margin-bottom:5px;margin-left:-100px;padding:0.5rem;position:absolute;text-align:center;white-space:break-spaces;width:200px}[tooltip-data]:after{border-style:solid;border-left-color:transparent;border-right-color:transparent;border-top-color:var(--bg-4);border-width:5px;border-bottom:none;bottom:120%;content:' ';left:50%;margin-left:-5px;position:absolute;width:0}#btn-share[tooltip-data]:not(.copied)::before,#btn-share[tooltip-data]:not(.copied)::after{content:unset} diff --git a/views/style.html b/views/style.html index a30c3f84..cc725c3e 100644 --- a/views/style.html +++ b/views/style.html @@ -116,7 +116,14 @@