diff --git a/package.json b/package.json new file mode 100644 index 0000000..9fd878c --- /dev/null +++ b/package.json @@ -0,0 +1,8 @@ +{ + "devDependencies": { + "lightningcss-cli": "^1.29.1" + }, + "scripts": { + "build": "lightningcss --minify --targets \">= 0.5%\" style/css/style-large.css -o style/css/style.css" + } +} diff --git a/style/css/style-large.css b/style/css/style-large.css new file mode 100644 index 0000000..fb29e50 --- /dev/null +++ b/style/css/style-large.css @@ -0,0 +1,178 @@ +body { + background-color: #000000; + margin: 0 5vw; +} +h1,h2,h3,p,a,hr { + color: #da74e5; +} +h1,h2,h3,p,a{ + font-family: 'Overpass', sans-serif; + font-weight: 50; + text-align: center; + margin-bottom: 0; + text-decoration: none; +} +h1 { + font-size: 3em; +} +.button { + margin: 1vh 1vw; + transition: 0.5s; + display:block; + & > p { + margin: 1vh 0vw; + } + &:hover{ + box-shadow: 0px 0px 30px #da75e5dd; + transition: 0.25s; + } +} +.flexrow,.wrapgroup{ + display:flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; +} +.flexrow { + margin: 1vh 0; +} +.wrapgroup { + flex-wrap: nowrap; + flex: 0 1 0px; +} +.header { + .wrapgroup > .flexobject { + a { + min-width: 45px; + img { + width: auto; + } + p { + font-size: 0.75em; + } + } + } +} +.footer { + .wrapgroup > .flexobject > a { + min-width: 35px; + } +} +.flexobject,.flexobject > a { + display: flex; + flex-direction: column; + justify-content: center; +} +.pinkborder { + border-style: solid; + border-color: #da74e5; + border-width: 3px; + border-radius: 8px; +} +.warning { + padding: 0.5vh 1vh; + width: fit-content; + margin: 0 1vmin; + border-style: solid; + border-color: #f00; + border-width: 3px; + border-radius: 8px; + & > p { + color: red; + margin: auto 0; + } + & > h2 { + margin: auto 0; + } + & > img { + margin: auto 1vh auto 0px; + height: 1em; + } +} +.flexobject { + & > a { + min-width: 75px; + text-decoration: none; + padding: 1.5vh; + & > p { + font-size: 1em; + margin-bottom: 0px; + } + } + & > .buttondetails { + display:flex; + flex-direction: row; + width: 100%; + justify-content: space-evenly; + & > a { + width: 50%; + padding: 10px 0; + & > img { + display: block; + margin: 0 auto; + } + } + & > a:hover { + opacity: 50%; + } + } +} +.platformicon{ + margin: 0px 0px 7px 0.75vmin; +} +h2:has(+ .platformicon) { + margin: auto 0; +} +.textsection { + margin: 2vh auto; + max-width: 600px; + & > .groupcontent { + margin-top: 3vh; + } +} +.clientgroup { + flex: 1 1 0px; + flex-wrap: wrap; + min-width: 40vh; + margin: 2vh 2vw; + height: fit-content; +} +.clientgroup,.textsection{ + & > .groupheader { + background-color: #da74e5; + color: #000; + margin-top: 0; + } + & > .groupcontent { + padding: 0 2vw 2vh; + & > .flexrow:has(h2) { + margin-top: 3vh; + } + } +} +.termtext { + font-family:monospace; + background-color: #da75e5ff; + padding: 0px 3px; + color: #000; +} +:target { + background-color: #da75e522; + border-radius: 13px; + padding: 2vh 0; +} +@font-face { + font-family: 'Overpass'; + font-style: normal; + font-weight: 400; + src: url(/style/fonts/overpass/latin-ext.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +@font-face { + font-family: 'Overpass'; + font-style: normal; + font-weight: 400; + src: url(/style/fonts/overpass/latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/style/css/style.css b/style/css/style.css index 27deda3..e7e594d 100644 --- a/style/css/style.css +++ b/style/css/style.css @@ -1,188 +1 @@ -body { - background-color: #000000; - margin: 0 5vw; -} -h1,h2,h3,p,a,hr { - color: #da74e5; -} -h1,h2,h3,p,a{ - font-family: 'Overpass', sans-serif; - font-weight: 50; - text-align: center; - margin-bottom: 0; - text-decoration: none; -} -h1 { - font-size: 3em; -} -.button { - margin: 1vh 1vw; - transition: 0.5s; - display:block; - > p { - margin: 1vh 0vw; - } -} -.button:hover { - box-shadow: 0px 0px 30px #da75e5dd; - transition: 0.25s; -} -.flexrow { - margin: 1vh 0; -} -.flexrow,.wrapgroup{ - display:flex; - flex-direction: row; - justify-content: center; - flex-wrap: wrap; -} -.wrapgroup { - flex-wrap: nowrap; - flex: 0 1 0px; -} -.header { - .wrapgroup > .flexobject { - a { - min-width: 45px; - img { - width: auto; - } - p { - font-size: 0.75em; - } - } - } -} -.footer { - .wrapgroup > .flexobject > a { - min-width: 35px; -/* padding: 1vmax;*/ - } -} -.flexobject,.flexobject > a { - display: flex; - flex-direction: column; - justify-content: center; -} -.pinkborder { - border-style: solid; - border-color: #da74e5; - border-width: 3px; - border-radius: 8px; -} -.warning { - padding: 0.5vh 1vh; - width: fit-content; - margin: 0 1vmin; - border-style: solid; - border-color: #f00; - border-width: 3px; - border-radius: 8px; - > p { - color: red; - margin: auto 0; - } - > h2 { - margin: auto 0; - } - > img { - margin: auto 1vh auto 0px; - height: 1em; - } -} -.flexobject { - > a { - min-width: 75px; - text-decoration: none; - padding: 1.5vh; - > p { - font-size: 1em; - margin-bottom: 0px; - } - } - > .buttondetails { - display:flex; - flex-direction: row; - width: 100%; - justify-content: space-evenly; - > a { - width: 50%; - padding: 10px 0; - > img { - display: block; - margin: 0 auto; - } - } - > a:hover { - opacity: 50%; - } - } -} -.platformicon{ - margin: 0px 0px 7px 0.75vmin; -} -h2:has(+ .platformicon) { - margin: auto 0; -} -.icon-inline { - width: 1.5em; - height: 1.5em; - position: relative; - margin: auto 1vw; -} -.textsection { - margin: 2vh auto; - max-width: 600px; - > .groupcontent { - margin-top: 3vh; - } -} -.clientgroup { - flex: 1 1 0px; - flex-wrap: wrap; - min-width: 40vh; - margin: 2vh 2vw; - height: fit-content; -} -.clientgroup,.textsection{ - > .groupheader { - background-color: #da74e5; - color: #000; - margin-top: 0; - } - > .groupcontent { - padding: 0 2vw 2vh; - > .flexrow:has(h2) { - margin-top: 3vh; - } - } -} -.termtext { - font-family:monospace; - background-color: #da75e5ff; - padding: 0px 3px; - color: #000; -} -:target { -/* box-shadow: 0px 0px 30px #da75e5dd;*/ - background-color: #da75e522; - border-radius: 13px; - padding: 2vh 0; -} -/* latin-ext */ -@font-face { - font-family: 'Overpass'; - font-style: normal; - font-weight: 400; - src: url(/style/fonts/overpass/latin-ext.woff2) format('woff2'); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; -} - -/* latin */ -@font-face { - font-family: 'Overpass'; - font-style: normal; - font-weight: 400; - src: url(/style/fonts/overpass/latin.woff2) format('woff2'); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; -} +body{background-color:#000;margin:0 5vw}h1,h2,h3,p,a,hr{color:#da74e5}h1,h2,h3,p,a{text-align:center;margin-bottom:0;font-family:Overpass,sans-serif;font-weight:50;text-decoration:none}h1{font-size:3em}.button{margin:1vh 1vw;transition:all .5s;display:block}.button>p{margin:1vh 0}.button:hover{transition:all .25s;box-shadow:0 0 30px rgba(218,117,229,.867)}.flexrow,.wrapgroup{flex-flow:wrap;justify-content:center;display:flex}.flexrow{margin:1vh 0}.wrapgroup{flex-wrap:nowrap;flex:0 1 0}.header .wrapgroup>.flexobject a{min-width:45px}.header .wrapgroup>.flexobject a img{width:auto}.header .wrapgroup>.flexobject a p{font-size:.75em}.footer .wrapgroup>.flexobject>a{min-width:35px}.flexobject,.flexobject>a{flex-direction:column;justify-content:center;display:flex}.pinkborder{border:3px solid #da74e5;border-radius:8px}.warning{border:3px solid red;border-radius:8px;width:fit-content;margin:0 1vmin;padding:.5vh 1vh}.warning>p{color:red;margin:auto 0}.warning>h2{margin:auto 0}.warning>img{height:1em;margin:auto 1vh auto 0}.flexobject>a{min-width:75px;padding:1.5vh;text-decoration:none}.flexobject>a>p{margin-bottom:0;font-size:1em}.flexobject>.buttondetails{flex-direction:row;justify-content:space-evenly;width:100%;display:flex}.flexobject>.buttondetails>a{width:50%;padding:10px 0}.flexobject>.buttondetails>a>img{margin:0 auto;display:block}.flexobject>.buttondetails>a:hover{opacity:.5}.platformicon{margin:0 0 7px .75vmin}h2:has(+.platformicon){margin:auto 0}.textsection{max-width:600px;margin:2vh auto}.textsection>.groupcontent{margin-top:3vh}.clientgroup{flex-wrap:wrap;flex:1 1 0;min-width:40vh;height:fit-content;margin:2vh 2vw}:is(.clientgroup,.textsection)>.groupheader{color:#000;background-color:#da74e5;margin-top:0}:is(.clientgroup,.textsection)>.groupcontent{padding:0 2vw 2vh}:is(.clientgroup,.textsection)>.groupcontent>.flexrow:has(h2){margin-top:3vh}.termtext{color:#000;background-color:#da75e5;padding:0 3px;font-family:monospace}:target{background-color:rgba(218,117,229,.133);border-radius:13px;padding:2vh 0}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin-ext.woff2)format("woff2");unicode-range:U+100-2AF,U+304,U+308,U+329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Overpass;font-style:normal;font-weight:400;src:url(/style/fonts/overpass/latin.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} \ No newline at end of file