diff --git a/_includes/root.css b/_includes/root.css new file mode 100644 index 0000000..14e4cba --- /dev/null +++ b/_includes/root.css @@ -0,0 +1,24 @@ +:root { + --px-size: 2.5%; + --sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif; + --bull-margin: 4px; + --bull-symbol: "•"; + --underline-rgb: 53, 224, 71; + --underline-color: rgb(var(--underline-rgb)); + --meta-rgb: 134, 25, 143; + --body-rgb: 34, 34, 34; + --link-rgb: 51, 102, 203; + --meta-color: rgb(var(--meta-rgb)); + --body-color: rgb(var(--body-rgb)); + --h: 126; + --s: 73.4%; + --l: 54%; + --hsl: var(--h), var(--s), var(--l); + --darker: hsl(var(--h), 89%, 20%); + --accent-color: hsl(var(--h), var(--s), var(--l)); + --gray: hsl(0, 0%, var(--l, 80%)); + --heart: url('data:image/svg+xml;utf8,'); + --svg-size: 10px; + --heart: url('data:image/svg+xml;utf8,'); + --star: url('data:image/svg+xml;utf8,') +} \ No newline at end of file diff --git a/_includes/style.css b/_includes/style.css index d105bcd..d7abd1b 100644 --- a/_includes/style.css +++ b/_includes/style.css @@ -1,31 +1,3 @@ -:root { - --px-size: 2.5%; - --sans-serif: Helvetica Neue, Helvetica, Arial, sans-serif; - --bull-margin: 4px; - --bull-symbol: "•"; - --underline-rgb: 53, 224, 71; - --underline-color: rgb(var(--underline-rgb)); - --meta-rgb: 134, 25, 143; - --body-rgb: 34, 34, 34; - --link-rgb: 51, 102, 203; - --meta-color: rgb(var(--meta-rgb)); - --body-color: rgb(var(--body-rgb)); - --h: 126; - --s: 73.4%; - --l: 54%; - --hsl: var(--h), var(--s), var(--l); - --darker: hsl(var(--h), 89%, 20%); - --accent-color: hsl(var(--h), var(--s), var(--l)); - --gray: hsl(0, 0%, var(--l, 80%)); - --heart: url('data:image/svg+xml;utf8,'); - --svg-size: 10px; - --heart: url('data:image/svg+xml;utf8,'); - --star: url('data:image/svg+xml;utf8,') -} -.heart{--svg:var(--heart);--svg-color:#f43f5e} -.star{--svg:var(--star);--svg-color:#eab308} -i{all:unset;display:inline-flex;align-items:center;font-style:normal} -i:before{background-color:var(--svg-color);width:var(--svg-size);height:var(--svg-size);-webkit-mask:var(--svg);mask:var(--svg);margin-right:1px;content:''} *{box-sizing:border-box} .hidden,[hidden]{display:none!important} html{font-size:13px} @@ -97,7 +69,7 @@ strong{--darker:#222;color:var(--darker)} .postlist ul{display:inline-flex;gap:.4rem;position:relative;position:sticky;top:0;line-height:1.3;font-size:.925rem} .chapters{display:flex;flex-direction:column;gap:4rem;margin:2.5rem 0;margin-bottom:1rem} .chapters ul{position:relative;margin:0 0} -.chapters ul[data-label]:before{font-size:1.3rem;content:attr(data-label);margin:0 0;padding:0 0;position:absolute;left:0;margin-top:-2.5rem;font-family:times;font-weight:700} +.chapters ul[data-label]:before{font-size:1.2rem;content:attr(data-label);margin:0 0;padding:0 0;/*! position:absolute; *//*! left:0; */margin-top:-2.5rem;font-family:times;font-weight:700;margin-left:-1.25rem} .chapters{flex:1} .right{text-align:right} .subtitle{font-family:var(--sans-serif);font-weight:400} @@ -109,6 +81,10 @@ strong{--darker:#222;color:var(--darker)} .site-title a:hover{text-decoration-color:var(--accent-color)} .up{text-transform:uppercase} [id]>a:hover:after{content:"#";color:#aaa} +.heart{--svg:var(--heart);--svg-color:#f43f5e} +.star{--svg:var(--star);--svg-color:#eab308} +i{all:unset;display:inline-flex;align-items:center;font-style:normal} +i:before{background-color:var(--svg-color);width:var(--svg-size);height:var(--svg-size);-webkit-mask:var(--svg);mask:var(--svg);margin-right:1px;content:''} @media (max-width:600px){ .container{flex-direction:column} .sm-col{flex-direction:column} diff --git a/_layouts/default.html b/_layouts/default.html index b2d7d7a..9a8d5ca 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -25,6 +25,7 @@