Mirus
GitHub
commit
d34c132d73
2
.github/workflows/firebase-hosting-merge.yml
vendored
2
.github/workflows/firebase-hosting-merge.yml
vendored
@ -26,7 +26,7 @@ jobs:
|
||||
extended: true # optional, default is false
|
||||
|
||||
- name: Build
|
||||
run: hugo --config exampleSite/config.toml --minify
|
||||
run: hugo --config demoSite/config.toml --minify
|
||||
|
||||
- uses: FirebaseExtended/action-hosting-deploy@v0
|
||||
with:
|
||||
|
||||
@ -24,7 +24,7 @@ jobs:
|
||||
extended: true # optional, default is false
|
||||
|
||||
- name: Build
|
||||
run: hugo --config exampleSite/config.toml --minify
|
||||
run: hugo --config demoSite/config.toml --minify
|
||||
|
||||
- uses: FirebaseExtended/action-hosting-deploy@v0
|
||||
with:
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@ -4,6 +4,9 @@
|
||||
# firebase
|
||||
.firebase
|
||||
|
||||
# mac
|
||||
**/.DS_Store
|
||||
|
||||
### Node ###
|
||||
# Logs
|
||||
logs
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
height: 2rem;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
background: $accent;
|
||||
background: var(--accent);
|
||||
|
||||
& span {
|
||||
display: flex;
|
||||
@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
& a {
|
||||
color: #1d212c;
|
||||
color: var(--accent-contrast-color);
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
||||
@ -16,9 +16,9 @@ a.button {
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border-radius: 8;
|
||||
border: 1px solid $accent;
|
||||
background: $accent;
|
||||
color: $background;
|
||||
border: 1px solid var(--accent);
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast-color);
|
||||
font: inherit;
|
||||
font-weight: bold;
|
||||
appearance: none;
|
||||
@ -26,7 +26,7 @@ a.button {
|
||||
outline: none;
|
||||
|
||||
&:hover {
|
||||
background: transparentize($accent, .1);
|
||||
background: color-mix(in srgb, var(--accent), transparent 10%);
|
||||
}
|
||||
|
||||
/* variants */
|
||||
@ -64,7 +64,7 @@ a.read-more:hover,
|
||||
a.read-more:active {
|
||||
display: inline-flex;
|
||||
border: none;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.collapsable-code {
|
||||
$border-color: mix($accent, #999, 90%);
|
||||
--border-color: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@ -39,13 +39,13 @@
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
margin: 0;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&__title {
|
||||
flex: 1;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
padding: 3px 10px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
@ -53,15 +53,15 @@
|
||||
}
|
||||
|
||||
&__language {
|
||||
color: $accent;
|
||||
border: 1px solid $border-color;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--border-color);
|
||||
border-bottom: none;
|
||||
text-transform: uppercase;
|
||||
padding: 3px 10px;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
font-size: 16px;
|
||||
padding: 3px 10px;
|
||||
|
||||
|
||||
@ -1 +1,3 @@
|
||||
$accent: #23B0FF;
|
||||
:root {
|
||||
--accent: #23B0FF;
|
||||
}
|
||||
@ -1 +1,3 @@
|
||||
$accent: #78E2A0;
|
||||
:root {
|
||||
--accent: #78E2A0;
|
||||
}
|
||||
@ -1 +1,3 @@
|
||||
$accent: #FFA86A;
|
||||
:root {
|
||||
--accent: #FFA86A;
|
||||
}
|
||||
@ -1 +1,3 @@
|
||||
$accent: #EE72F1;
|
||||
:root {
|
||||
--accent: #EE72F1;
|
||||
}
|
||||
@ -1 +1,3 @@
|
||||
$accent: #FF6266;
|
||||
:root {
|
||||
--accent: #FF6266;
|
||||
}
|
||||
@ -11,7 +11,7 @@
|
||||
width: 760px;
|
||||
max-width: 100%;
|
||||
|
||||
@media ($tablet) {
|
||||
@media (var(--tablet)) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
input, textarea, select {
|
||||
background: transparent;
|
||||
color: $accent;
|
||||
border: 1px solid $accent;
|
||||
color: var(--accent);
|
||||
border: 1px solid var(--accent);
|
||||
border-radius: 0;
|
||||
padding: 10px;
|
||||
margin: 5px 0;
|
||||
@ -9,8 +9,8 @@ input, textarea, select {
|
||||
appearance: none;
|
||||
|
||||
&:focus, :active {
|
||||
border-color: $color;
|
||||
outline: 1px solid $color;
|
||||
border-color: var(--color);
|
||||
outline: 1px solid var(--color);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -19,25 +19,25 @@ input, textarea, select {
|
||||
}
|
||||
|
||||
select {
|
||||
background: $background;
|
||||
background: var(--background);
|
||||
|
||||
option {
|
||||
background: $background;
|
||||
background: var(--background);
|
||||
}
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: transparentize($accent, .5);
|
||||
color: color-mix(in srgb, var(--accent), transparent 50%);
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="checkbox"] {
|
||||
vertical-align: middle;
|
||||
padding: 10px;
|
||||
box-shadow: inset 0 0 0 3px $background;
|
||||
box-shadow: inset 0 0 0 3px var(--background);
|
||||
|
||||
&:checked {
|
||||
background: $accent;
|
||||
background: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
|
||||
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
|
||||
display: block;
|
||||
width: 100%;
|
||||
right: 10px;
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
background: $accent;
|
||||
color: black;
|
||||
background: var(--accent);
|
||||
color: color-mix(in srgb, var(--accent), var(--accent-contrast-color) 90%);;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
@ -15,8 +15,8 @@ body {
|
||||
font-size: 1rem;
|
||||
line-height: 1.54;
|
||||
letter-spacing: -0.02em;
|
||||
background-color: $background;
|
||||
color: $color;
|
||||
background-color: var(--background);
|
||||
color: var(--color);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "liga", "tnum", "zero", "ss01", "locl";
|
||||
@ -24,7 +24,7 @@ body {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@ -61,7 +61,7 @@ a {
|
||||
|
||||
/* Waiting for a better times... */
|
||||
/* &:has(code) {
|
||||
text-decoration-color: $accent;
|
||||
text-decoration-color: var(--accent);
|
||||
} */
|
||||
}
|
||||
|
||||
@ -109,8 +109,8 @@ figure {
|
||||
font-size: 14px;
|
||||
padding: 5px 10px;
|
||||
margin-top: 5px;
|
||||
background: $accent;
|
||||
color: $background;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast-color);
|
||||
/* opacity: .8; */
|
||||
|
||||
&.left {
|
||||
@ -130,8 +130,8 @@ figure {
|
||||
code, kbd {
|
||||
font-family: 'Fira Code', Monaco, Consolas, Ubuntu Mono, monospace !important;
|
||||
font-feature-settings: normal;
|
||||
background: transparentize($accent, .8);
|
||||
color: $accent;
|
||||
background: color-mix(in srgb, var(--accent), transparent 80%);
|
||||
color: var(--accent);
|
||||
padding: 1px 6px;
|
||||
margin: 0 2px;
|
||||
font-size: .95rem;
|
||||
@ -157,7 +157,7 @@ pre {
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -172,12 +172,12 @@ pre {
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-top: 1px solid $accent;
|
||||
border-bottom: 1px solid $accent;
|
||||
border-top: 1px solid var(--accent);
|
||||
border-bottom: 1px solid var(--accent);
|
||||
margin: 40px 0;
|
||||
padding: 25px;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
@ -198,15 +198,15 @@ blockquote {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
&.twitter-tweet {
|
||||
position: relative;
|
||||
background: transparentize($accent, .9);
|
||||
background: color-mix(in srgb, var(--accent), transparent 90%);;
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
border: 1px solid $accent;
|
||||
border: 1px solid var(--accent);
|
||||
padding-top: 60px;
|
||||
|
||||
p:before {
|
||||
@ -217,12 +217,12 @@ blockquote {
|
||||
content: '> From Twitter:';
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -237,12 +237,12 @@ table {
|
||||
table,
|
||||
th,
|
||||
td {
|
||||
border: 1px dashed $accent;
|
||||
border: 1px dashed var(--accent);
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
th {
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
ul,
|
||||
@ -254,7 +254,7 @@ ol {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
@ -270,7 +270,7 @@ ol {
|
||||
content: counter(li);
|
||||
position: absolute;
|
||||
right: calc(100% + 10px);
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
@ -290,8 +290,8 @@ ol {
|
||||
}
|
||||
|
||||
mark {
|
||||
background: $accent;
|
||||
color: $background;
|
||||
background: var(--accent);
|
||||
color: var(--accent-contrast-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
@ -312,7 +312,7 @@ mark {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
@ -333,7 +333,7 @@ mark {
|
||||
hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: $border-color;
|
||||
background: var(--border-color);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
@mixin menu {
|
||||
--shadow-color: color-mix(in srgb, var(--background), transparent 20%);;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
$shadow-color: transparentize($background, .2);
|
||||
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
|
||||
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
|
||||
position: absolute;
|
||||
background: $background;
|
||||
box-shadow: $shadow;
|
||||
background: var(--background);
|
||||
box-shadow: var(--shadow);
|
||||
color: white;
|
||||
border: 2px solid;
|
||||
margin: 0;
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
@mixin header-menu-trigger {
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
border: 2px solid;
|
||||
margin-left: 10px;
|
||||
height: 100%;
|
||||
@ -33,7 +33,7 @@
|
||||
justify-content: space-between;
|
||||
margin: 20px 1px;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 0;
|
||||
@ -82,7 +82,7 @@
|
||||
|
||||
&__trigger {
|
||||
margin-right: 0 !important;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
&--desktop {
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
@ -119,13 +119,13 @@
|
||||
@include header-menu-trigger;
|
||||
display: none;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu__dropdown {
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@ -144,7 +144,7 @@
|
||||
.menu__trigger {
|
||||
@include header-menu-trigger;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,8 +15,8 @@
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 5px 10px;
|
||||
background: $background;
|
||||
color: transparentize($color, .7);
|
||||
background: var(--background);
|
||||
color: color-mix(in srgb, var(--accent), transparent 70%);;
|
||||
font-size: .8rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
@ -56,7 +56,7 @@
|
||||
padding: 0;
|
||||
appearance: none;
|
||||
|
||||
@media($phone) {
|
||||
@media(var(--phone)) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
}
|
||||
|
||||
.framed {
|
||||
border: 1px solid $accent;
|
||||
border: 1px solid var(--accent);
|
||||
padding: 20px;
|
||||
|
||||
*:first-child {
|
||||
@ -26,13 +26,13 @@
|
||||
padding: 20px 0;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
&-meta {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 10px;
|
||||
color: transparentize($accent, .3);
|
||||
color: color-mix(in srgb, var(--accent), transparent 30%);;
|
||||
|
||||
& > *:not(:first-child) {
|
||||
&::before {
|
||||
@ -44,12 +44,12 @@
|
||||
}
|
||||
|
||||
&-title {
|
||||
$border: 3px dotted $accent;
|
||||
--border: 3px dotted var(--accent);
|
||||
position: relative;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
margin: 0 0 15px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: $border;
|
||||
border-bottom: var(--border);
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
@ -57,7 +57,7 @@
|
||||
bottom: 2px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-bottom: $border;
|
||||
border-bottom: var(--border);
|
||||
}
|
||||
|
||||
a {
|
||||
@ -81,12 +81,12 @@
|
||||
}
|
||||
|
||||
&-cover {
|
||||
border: 20px solid $accent;
|
||||
border: 20px solid var(--accent);
|
||||
background: transparent;
|
||||
margin: 40px 0;
|
||||
padding: 20px;
|
||||
|
||||
@media ($phone) {
|
||||
@media (var(--phone)) {
|
||||
padding: 10px;
|
||||
border-width: 10px;
|
||||
}
|
||||
@ -99,7 +99,7 @@
|
||||
content: '-';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -121,7 +121,7 @@
|
||||
}
|
||||
|
||||
.hanchor {
|
||||
color: transparentize($accent, .1);
|
||||
color: color-mix(in srgb, var(--accent), transparent 10%);
|
||||
text-decoration: none;
|
||||
margin-left: 10px;
|
||||
visibility: hidden;
|
||||
@ -132,5 +132,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
|
||||
}
|
||||
|
||||
.footnotes {
|
||||
color: transparentize($color, .5);
|
||||
color: color-mix(in srgb, var(--accent), transparent 50%);
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@ code.language-scss,
|
||||
.token.number,
|
||||
.token.inserted,
|
||||
.token.important {
|
||||
color: $accent !important;
|
||||
color: var(--syntax-value-color, color-mix(in srgb, var(--accent), white)) !important;
|
||||
}
|
||||
|
||||
.token.tag-id,
|
||||
@ -34,7 +34,7 @@ code.language-scss,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: transparentize($accent, .3) !important;
|
||||
color: var(--syntax-var-color, color-mix(in srgb, var(--accent) 90%, transparent)) !important;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
@ -44,7 +44,7 @@ code.language-scss,
|
||||
code.language-javascript,
|
||||
code.language-html,
|
||||
.command-line-prompt > span:before {
|
||||
color: mix($accent, #999, .9) !important;
|
||||
color: var(--syntax-func-color, color-mix(in srgb, var(--accent) 70%, #999 30%)) !important;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
@ -75,12 +75,13 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
--line-highlight-mix: color-mix(in srgb, var(--accent) 90%, #999 10%);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparentize(mix($accent, #999, 90%), .92);
|
||||
background: color-mix(in srgb, var(--line-highlight-mix), transparent 92%);
|
||||
pointer-events: none;
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
@ -116,9 +117,9 @@ pre[class*="language-"] {
|
||||
}
|
||||
|
||||
.code-toolbar {
|
||||
$code-margin: 40px;
|
||||
--code-margin: 40px;
|
||||
position: relative;
|
||||
margin: $code-margin 0;
|
||||
margin: var(--code-margin) 0;
|
||||
padding: 20px;
|
||||
border: 1px solid rgba(255, 255, 255, .1);
|
||||
|
||||
@ -126,7 +127,7 @@ pre[class*="language-"] {
|
||||
+ .highlight,
|
||||
+ .highlight .code-toolbar {
|
||||
border-top: 0;
|
||||
margin-top: calc(-1 * $code-margin);
|
||||
margin-top: calc(-1 * var(--code-margin));
|
||||
}
|
||||
|
||||
pre, code {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
li {
|
||||
a {
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
content: '-';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
color: $accent;
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,8 +1,11 @@
|
||||
/* COLOR VARIABLES */
|
||||
$background: mix($accent, #1D1E28, 2%);
|
||||
$color: white;
|
||||
$border-color: rgba(255, 255, 255, .1);
|
||||
:root {
|
||||
/* COLOR VARIABLES */
|
||||
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%);
|
||||
--accent-contrast-color: black;
|
||||
--color: white;
|
||||
--border-color: rgba(255, 255, 255, .1);
|
||||
|
||||
/* MEDIA QUERIES */
|
||||
$phone: "max-width: 684px";
|
||||
$tablet: "max-width: 900px";
|
||||
/* MEDIA QUERIES */
|
||||
--phone: "max-width: 684px";
|
||||
--tablet: "max-width: 900px";
|
||||
}
|
||||
@ -3,15 +3,6 @@ languageCode = "en-us"
|
||||
# theme = "hugo-theme-re-terminal"
|
||||
paginate = 5
|
||||
|
||||
# Only for demo deploy perpous
|
||||
[module]
|
||||
[[module.mounts]]
|
||||
source = 'exampleSite/content'
|
||||
target = 'content'
|
||||
[[module.mounts]]
|
||||
source = 'exampleSite/static'
|
||||
target = 'static'
|
||||
|
||||
[params]
|
||||
contentTypeName = "posts"
|
||||
themeColor = "blue"
|
||||
@ -46,3 +37,25 @@ url = "/about"
|
||||
identifier = "showcase"
|
||||
name = "Showcase"
|
||||
url = "/showcase"
|
||||
|
||||
|
||||
# Only for demo deploy perpous
|
||||
[module]
|
||||
[[module.mounts]]
|
||||
source = 'demoSite/content'
|
||||
target = 'content'
|
||||
[[module.mounts]]
|
||||
source = 'demoSite/static'
|
||||
target = 'static'
|
||||
[[module.mounts]]
|
||||
source = 'static'
|
||||
target = 'static'
|
||||
[[module.mounts]]
|
||||
source = 'demoSite/layouts'
|
||||
target = 'layouts'
|
||||
[[module.mounts]]
|
||||
source = 'layouts'
|
||||
target = 'layouts'
|
||||
[[module.mounts]]
|
||||
source = 'archetypes'
|
||||
target = 'archetypes'
|
||||
62
demoSite/content/posts/css-vars.md
Normal file
62
demoSite/content/posts/css-vars.md
Normal file
@ -0,0 +1,62 @@
|
||||
+++
|
||||
title = "CSS Variables update"
|
||||
date = "2024-07-30"
|
||||
author = "Mirus"
|
||||
cover = "img/css-variables-update.webp"
|
||||
description = "A small demo of native CSS Variables. You can create your very own re-Terminal today!"
|
||||
layout = "css-vars-showcase"
|
||||
Toc=true
|
||||
+++
|
||||
|
||||
## What is going on?
|
||||
|
||||
Hello. This is a first step toward color schema flexibility.
|
||||
|
||||
You still can use existing predefined `accent` colors from the list:
|
||||
- blue
|
||||
- green
|
||||
- orange
|
||||
- pink
|
||||
- red
|
||||
|
||||
but if you need to pick another accent colors you can do it with the help of native CSS Variables.
|
||||
|
||||
Just create, if you haven't any yet, `static/style.css`
|
||||
|
||||
and redefine two CSS variables, like this
|
||||
|
||||
```css
|
||||
:root {
|
||||
--accent: blue;
|
||||
--accent-contrast-color: yellow;
|
||||
}
|
||||
```
|
||||
|
||||
### Any other CSS Variable I should know?
|
||||
|
||||
You can find all of them in the browser's page inspector, but here is the list with default values anyway:
|
||||
|
||||
```css
|
||||
:root {
|
||||
--accent: #23B0FF; /* 1 of 5 basic colors */
|
||||
--background: color-mix(in srgb, var(--accent) 2%, #1D1E28 98%); /* background color; inherit shades of the accent */
|
||||
--accent-contrast-color: black; /* mainly uses for text on the accent backgrounds but not limited */
|
||||
--color: white; /* text color, also some other text use the variable in color mixing */
|
||||
--border-color: rgba(255, 255, 255, .1); /* border color */
|
||||
--phone: "max-width: 684px"; /* phone breakpoint */
|
||||
--tablet: "max-width: 900px"; /* tablet breakpoint */
|
||||
|
||||
/* code syntax */
|
||||
/* take a look at themes/re-terminal/assets/css/syntax.scss to understand in detail which color stands for */
|
||||
--syntax-func-color: color-mix(in srgb, var(--accent) 70%, #999 30%);
|
||||
--syntax-var-color: color-mix(in srgb, var(--accent) 90%, transparent);
|
||||
--syntax-value-color: color-mix(in srgb, var(--accent), white);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Future plans
|
||||
Already right now you can play with CSS Variables and achieve decent results, but I hope will work on some light-ish presets and maybe on exposing event more tokens to the users.
|
||||
|
||||
|
||||
## The interactive demo
|
||||
@ -4,6 +4,9 @@ date: "2018-07-18"
|
||||
author: "Hello Robot"
|
||||
---
|
||||
|
||||
# Features in updates
|
||||
- [native CSS variables showcase](/posts/css-vars/)
|
||||
|
||||
## Header 2
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec interdum metus. Aenean rutrum ligula sodales ex auctor, sed tempus dui mollis. Curabitur ipsum dui, aliquet nec commodo at, tristique eget ante. **Donec quis dolor nec nunc mollis interdum vel in purus**. Sed vitae leo scelerisque, sollicitudin elit sed, congue ante. In augue nisl, vestibulum commodo est a, tristique porttitor est. Proin laoreet iaculis ornare. Nullam ut neque quam.
|
||||
51
demoSite/layouts/posts/css-vars-showcase.html
Normal file
51
demoSite/layouts/posts/css-vars-showcase.html
Normal file
@ -0,0 +1,51 @@
|
||||
{{ define "head" }}
|
||||
<style>
|
||||
.color-container {
|
||||
background-color: var(--accent);
|
||||
padding: 10px;
|
||||
color: var(--accent-contrast-color)
|
||||
}
|
||||
</style>
|
||||
{{ end }}{{ define "main" }}
|
||||
<div class="post">
|
||||
<!-- Common header, cover, etc. -->
|
||||
{{ partial "single_basic.html" . }}
|
||||
|
||||
<form oninput="accentColor.value=accentColorPicker.value">
|
||||
<output class="color-container" name="accentColor" for="accentColorPicker">#------</output>
|
||||
<label>
|
||||
Pick accent color
|
||||
<input id="accentColorPicker" name="accentColorPicker" type="color" />
|
||||
</label>
|
||||
</form>
|
||||
<form oninput="accentContrastColor.value=accentContrastColorPicker.value;">
|
||||
<output class="color-container" name="accentContrastColor" for="accentContrastColorPicker">#------</output>
|
||||
<label>
|
||||
Pick accent contrast color
|
||||
<input id="accentContrastColorPicker" name="accentContrastColorPicker" type="color" />
|
||||
</label>
|
||||
</form>
|
||||
|
||||
<script defer>
|
||||
const root = document.querySelector(':root');
|
||||
|
||||
const accentPicker = document.getElementById("accentColorPicker");
|
||||
const accentListener = accentPicker.addEventListener("input", () => {
|
||||
if (accentPicker.value) {
|
||||
root.style.setProperty('--accent', accentPicker.value);
|
||||
}
|
||||
})
|
||||
|
||||
const accentContrastPicker = document.getElementById("accentContrastColorPicker");
|
||||
const accentContrastListener = accentContrastPicker.addEventListener("input", () => {
|
||||
if (accentContrastPicker.value) {
|
||||
root.style.setProperty('--accent-contrast-color', accentContrastPicker.value);
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{{ if eq .Type $.Site.Params.contentTypeName }} {{ partial
|
||||
"posts_pagination.html" . }} {{ end }} {{ if not (.Params.hideComments |
|
||||
default false) }} {{ partial "comments.html" . }} {{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
BIN
demoSite/static/img/css-variables-update.webp
Normal file
BIN
demoSite/static/img/css-variables-update.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 438 KiB After Width: | Height: | Size: 474 KiB |
BIN
images/tn.png
BIN
images/tn.png
Binary file not shown.
|
Before Width: | Height: | Size: 168 KiB After Width: | Height: | Size: 193 KiB |
Loading…
Reference in New Issue
Block a user