Change blog.css to scss

This commit is contained in:
TEC 2021-12-02 15:05:53 +08:00
parent 1116396b23
commit 70c372b172
Signed by: tec
GPG Key ID: 779591AFDB81F06C
3 changed files with 96 additions and 91 deletions

View File

@ -1,89 +0,0 @@
header {
position: relative;
margin: 0 auto -2rem;
}
header > h4 > a.orgicorn img {
height: 1.5em;
top: 0.25em;
opacity: 0.85;
position: relative;
}
@media (min-width: 1000px) {
#content {
margin: auto;
}
header > h4 > a.orgicorn img {
position: absolute;
top: -0.3em;
transform: translateX(-100%) translateX(-0.8rem);
}
}
header > h4 > a {
text-decoration: none;
color: inherit;
}
header > h4 > a.rss {
float: right;
}
header > h4 > a.rss img {
position: relative;
top: -0.2em;
filter: invert(0.6);
}
header > h4 > a.rss img:hover {
opacity: 1;
filter: invert(38%) sepia(98%) saturate(1640%) hue-rotate(11deg) contrast(98%);
}
#postamble {
display: block;
}
footer {
display: block;
text-align: center;
font-size: 0.8rem;
padding: 1rem 0;
font-family: sans;
color: #666;
}
footer a {
color: #777;
font-weight: bold;
background-image: none !important;
opacity: 0.65;
}
#content {
min-height: calc(100vh - 10rem - 48px); /* because of the header */
}
.doom-one { /* make doom-one screenshots match the blog */
filter: invert(5%) sepia(3%);
}
#theme-switch:checked ~ #page .doom-one {
filter: invert(91.5%) hue-rotate(180deg) sepia(1%)
}
.underline { /* repurpose to show off contributors */
color: var(--text-medium);
border-radius: .8em;
padding: .5em .4em .2em;
height: 0;
font-size: .9em;
font-family: "Open Sans",sans;
}
.underline:last-child {
float: right;
white-space: break-spaces;
line-height: 1;
}
/* click on a figure to enlarge it */
figure:active {
position: relative;
left: #{"min(0px, 720px - 60vw)"};
width: 80vw;
transition-duration: 150ms;
}
figure {
transition-property: left width;
left: 0;
width: 90%;
transition-duration: 0ms;
}

89
assets/blog.scss Normal file
View File

@ -0,0 +1,89 @@
header {
position: relative;
margin: 0 auto -2rem;
& > h4 > a {
text-decoration: none;
color: inherit;
&.orgicorn img {
height: 1.5em;
top: 0.25em;
opacity: 0.85;
position: relative;
}
&.rss {
float: right;
& img {
position: relative;
top: -0.2em;
filter: invert(0.6);
&:hover {
opacity: 1;
filter: invert(38%) sepia(98%) saturate(1640%) hue-rotate(11deg) contrast(98%);
}
}
}
}
}
@media (min-width: 1000px) {
#content {
margin: auto;
}
header > h4 > a.orgicorn img {
position: absolute;
top: -0.3em;
transform: translateX(-100%) translateX(-0.8rem);
}
}
#postamble {
display: block;
}
footer {
display: block;
text-align: center;
font-size: 0.8rem;
padding: 1rem 0;
font-family: sans;
color: #666;
& a {
color: #777;
font-weight: bold;
background-image: none !important;
opacity: 0.65;
}
}
#content {
min-height: calc(100vh - 10rem - 48px); /* because of the header */
}
.doom-one { /* make doom-one screenshots match the blog */
filter: invert(5%) sepia(3%);
}
#theme-switch:checked ~ #page .doom-one {
filter: invert(91.5%) hue-rotate(180deg) sepia(1%)
}
.underline { /* repurpose to show off contributors */
color: var(--text-medium);
border-radius: .8em;
padding: .5em .4em .2em;
height: 0;
font-size: .9em;
font-family: "Open Sans",sans;
&:last-child {
float: right;
white-space: break-spaces;
line-height: 1;
}
}
/* click on a figure to enlarge it */
figure {
transition-property: left width;
left: 0;
width: 90%;
transition-duration: 0ms;
&:active {
position: relative;
left: #{"min(0px, 720px - 60vw)"};
width: 80vw;
transition-duration: 150ms;
}
}

View File

@ -96,8 +96,13 @@ Return output file name."
(executable-find "csso"))
(message "optimising %s with csso" (file-name-nondirectory filename))
(call-process "csso" nil nil nil "-i" filename "-o" outfile))
(t (copy-file filename outfile t))))
outfile))
((and (string= "scss" ext)
(executable-find "sassc"))
(message "converting %s to css with sassc" (file-name-nondirectory filename))
(setq outfile (replace-regexp-in-string "\\.scss$" ".css" outfile))
(call-process "sassc" nil nil nil "--style" "compressed" filename outfile))
(t (copy-file filename outfile t)))
outfile)))
;;; Use ascii colours to make output more informative