css minimizing
This commit is contained in:
Penelope Gwen
parent
46c9f2f9e6
commit
1f0c9445ae
3 changed files with 187 additions and 188 deletions
8
package.json
Normal file
8
package.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
178
style/css/style-large.css
Normal file
178
style/css/style-large.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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}
|
||||
Loading…
Add table
Reference in a new issue