Added sass

This commit is contained in:
Nick Yeoman 2025-11-10 18:54:16 -08:00
parent 869c3a8d6a
commit 39a14a759b
4 changed files with 156 additions and 174 deletions

12
docs/Sass.md Normal file
View File

@ -0,0 +1,12 @@
# Sass
Running Sass
```
sudo docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app sass-container sass novaconium/sass/project.sass novaconium/public/css/novaconium.css
```
Compressed:
```
sudo docker run --rm -v $(pwd):/usr/src/app -w /usr/src/app sass-container sass --style=compressed novaconium/sass/project.sass novaconium/public/css/novaconium.css
```

142
sass/novaconium.sass Normal file
View File

@ -0,0 +1,142 @@
body
background-color: #1b1f23
width: 100%
font-family: 'Fira Code', 'Source Code Pro', monospace
#page .container
display: flex
padding: 0
justify-content: center
align-items: flex-start
margin-top: 20px
article
width: 900px
flex-shrink: 0
#leftnav
width: 320px
flex-shrink: 0
margin: 0
margin-right: 50px
article, #leftnav
border: 1px solid #3b444c
background-color: #14171a
color: #fff
padding: 20px
ul#leftnav
list-style: none
padding: 0
#leftnav li
border-bottom: 1px solid #3b444c
&:last-child
border-bottom: none
#leftnav a
display: block
padding: 10px 15px
text-decoration: none
color: #fff
&:hover
background: #333
code
font-family: 'Fira Code', monospace
font-size: 13px
background-color: #0d1117
color: #c9d1d9
padding: 0.2em 0.4em
border-radius: 6px
border: 1px solid #30363d
.small
font-size: 10px
h2
margin-top: 40px
div.error, div#debug
border: 1px solid red
padding: 30px
background-color: pink
color: darkred
margin: 0 auto
width: 900px
div.notice
border: 1px solid rgb(31, 119, 13)
padding: 30px
background-color: rgb(169, 218, 163)
color: rgb(20, 56, 13)
margin: 0 auto
width: 900px
div#debug
margin-top: 100px
margin-bottom: 100px
.pages-table
width: 100%
border-collapse: collapse
border: 1px solid #333
th, td
padding: 10px
border: 1px solid #ddd
text-align: left
th
font-weight: bold
/* ============================================================
DARK MODE STYLES edit-page-form-novaconium
============================================================ */
@media (prefers-color-scheme: dark)
#edit-page-form-novaconium
input[type="text"],
input[type="number"],
textarea,
select
background: #2a2a2a
border: 1px solid #444
color: #eee
input:focus,
textarea:focus,
select:focus
border-color: #3399ff
box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.25)
input[type="checkbox"]
accent-color: #3399ff
button[type="submit"]
background: #3399ff
color: #fff
&:hover
background: #1d7fd4
p
color: #aaa
a
color: #66b3ff
&:hover
color: #99ccff
.form-group
margin-bottom: 1.2rem
&.fullwidth textarea
width: 100%
resize: vertical
.checkbox-group
margin-top: 1.5rem

View File

@ -1,174 +1 @@
body {
background-color: #1b1f23;
width: 100%;
font-family: 'Fira Code', 'Source Code Pro', monospace;
}
#page .container {
display: flex;
padding: 0;
justify-content: center;
align-items: flex-start;
margin-top: 20px;
}
article {
width: 900px;
flex-shrink: 0;
}
#leftnav {
width: 320px;
flex-shrink: 0;
margin: 0;
margin-right: 50px;
}
article, #leftnav {
border: 1px solid #3b444c;
background-color: #14171a;
color: #fff;
padding: 20px;
}
ul#leftnav {
list-style: none;
padding: 0;
}
#leftnav li {
border-bottom: 1px solid #3b444c;
}
#leftnav a {
display: block;
padding: 10px 15px;
text-decoration: none;
color: #fff;
}
#leftnav a:hover {
background: #333;
}
#leftnav li:last-child {
border-bottom: none;
}
code {
font-family: 'Fira Code', monospace;
font-size: 13px;
background-color: #0d1117;
color: #c9d1d9;
padding: 0.2em 0.4em;
border-radius: 6px;
border: 1px solid #30363d;
}
.small {
font-size: 10px;
}
h2 {
margin-top: 40px;
}
div.error, div#debug {
border: 1px solid red;
padding: 30px;
background-color: pink;
color: darkred;
margin: 0 auto;
width: 900px;
}
div.notice {
border: 1px solid rgb(31, 119, 13);
padding: 30px;
background-color: rgb(169, 218, 163);
color: rgb(20, 56, 13);
margin: 0 auto;
width: 900px;
}
div#debug {
margin-top: 100px;
margin-bottom: 100px;
}
.pages-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #333;
}
.pages-table th,
.pages-table td {
padding: 10px;
border: 1px solid #ddd;
text-align: left;
}
.pages-table th {
font-weight: bold;
}
/* ============================================================
DARK MODE STYLES edit-page-form-novaconium
============================================================ */
@media (prefers-color-scheme: dark) {
#edit-page-form-novaconium input[type="text"],
#edit-page-form-novaconium input[type="number"],
#edit-page-form-novaconium textarea,
#edit-page-form-novaconium select {
background: #2a2a2a;
border: 1px solid #444;
color: #eee;
}
#edit-page-form-novaconium input:focus,
#edit-page-form-novaconium textarea:focus,
#edit-page-form-novaconium select:focus {
border-color: #3399ff;
box-shadow: 0 0 0 3px rgba(51, 153, 255, 0.25);
}
#edit-page-form-novaconium input[type="checkbox"] {
accent-color: #3399ff;
}
#edit-page-form-novaconium button[type="submit"] {
background: #3399ff;
color: #fff;
}
#edit-page-form-novaconium button[type="submit"]:hover {
background: #1d7fd4;
}
#edit-page-form-novaconium p {
color: #aaa;
}
#edit-page-form-novaconium a {
color: #66b3ff;
}
#edit-page-form-novaconium a:hover {
color: #99ccff;
}
#edit-page-form-novaconium .form-group {
margin-bottom: 1.2rem;
}
#edit-page-form-novaconium .form-group.fullwidth textarea {
width: 100%;
resize: vertical;
}
#edit-page-form-novaconium .checkbox-group {
margin-top: 1.5rem;
}
}
body{background-color:#1b1f23;width:100%;font-family:"Fira Code","Source Code Pro",monospace}#page .container{display:flex;padding:0;justify-content:center;align-items:flex-start;margin-top:20px}article{width:900px;flex-shrink:0}#leftnav{width:320px;flex-shrink:0;margin:0;margin-right:50px}article,#leftnav{border:1px solid #3b444c;background-color:#14171a;color:#fff;padding:20px}ul#leftnav{list-style:none;padding:0}#leftnav li{border-bottom:1px solid #3b444c}#leftnav li:last-child{border-bottom:none}#leftnav a{display:block;padding:10px 15px;text-decoration:none;color:#fff}#leftnav a:hover{background:#333}code{font-family:"Fira Code",monospace;font-size:13px;background-color:#0d1117;color:#c9d1d9;padding:.2em .4em;border-radius:6px;border:1px solid #30363d}.small{font-size:10px}h2{margin-top:40px}div.error,div#debug{border:1px solid red;padding:30px;background-color:pink;color:darkred;margin:0 auto;width:900px}div.notice{border:1px solid #1f770d;padding:30px;background-color:#a9daa3;color:#14380d;margin:0 auto;width:900px}div#debug{margin-top:100px;margin-bottom:100px}.pages-table{width:100%;border-collapse:collapse;border:1px solid #333}.pages-table th,.pages-table td{padding:10px;border:1px solid #ddd;text-align:left}.pages-table th{font-weight:bold}@media(prefers-color-scheme: dark){#edit-page-form-novaconium input[type=text],#edit-page-form-novaconium input[type=number],#edit-page-form-novaconium textarea,#edit-page-form-novaconium select{background:#2a2a2a;border:1px solid #444;color:#eee}#edit-page-form-novaconium input:focus,#edit-page-form-novaconium textarea:focus,#edit-page-form-novaconium select:focus{border-color:#39f;box-shadow:0 0 0 3px rgba(51,153,255,.25)}#edit-page-form-novaconium input[type=checkbox]{accent-color:#39f}#edit-page-form-novaconium button[type=submit]{background:#39f;color:#fff}#edit-page-form-novaconium button[type=submit]:hover{background:#1d7fd4}#edit-page-form-novaconium p{color:#aaa}#edit-page-form-novaconium a{color:#66b3ff}#edit-page-form-novaconium a:hover{color:#9cf}#edit-page-form-novaconium .form-group{margin-bottom:1.2rem}#edit-page-form-novaconium .form-group.fullwidth textarea{width:100%;resize:vertical}#edit-page-form-novaconium .checkbox-group{margin-top:1.5rem}}/*# sourceMappingURL=novaconium.css.map */

View File

@ -0,0 +1 @@
@use '../vendor/4lt/novaconium/sass/novaconium'