mirror of
https://github.com/yrzam/yrzam-hugo-theme.git
synced 2025-04-11 08:52:29 +00:00
reorg
This commit is contained in:
parent
7fccc43414
commit
a73de7d673
159
assets/css/basic.scss
Normal file
159
assets/css/basic.scss
Normal file
@ -0,0 +1,159 @@
|
||||
$margin-base-x: 1rem;
|
||||
$margin-base-y: 1rem;
|
||||
$width-base: 50rem;
|
||||
$font-size-base-px: 16px;
|
||||
|
||||
$color-fg-op-m: rgba($color-fg, $opacity-mid);
|
||||
$color-fg-accent-op-m: rgba($color-fg-accent, $opacity-mid);
|
||||
$color-fg-accent-op-l: rgba($color-fg-accent, $opacity-low);
|
||||
$color-bg-accent-light-op-m: rgba($color-bg-accent-light, $opacity-mid);
|
||||
|
||||
/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */
|
||||
|
||||
/* elements */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
html,body,ul,ol,li,blockquote,pre,hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: $color-fg-accent-op-m transparent;
|
||||
line-height: 1.3;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: $color-bg;
|
||||
color: $color-fg;
|
||||
}
|
||||
a {
|
||||
color: $color-fg;
|
||||
&:hover {
|
||||
color: $color-fg-accent;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
.paginator {
|
||||
text-align: center;
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0;
|
||||
min-width: 2rem;
|
||||
text-decoration: none;
|
||||
background: $color-bg-accent-dark;
|
||||
&.current {
|
||||
background: $color-bg-accent-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taxo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 1em 0;
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 1rem;
|
||||
border: 1px solid $color-fg-op-m;
|
||||
border-radius: 0.25rem;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border: 1px solid $color-fg-accent;
|
||||
color: $color-fg;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.icon-a-wrapper {
|
||||
// if icon is inside link, eliminate inline line-height artifacts
|
||||
display: inline-block;
|
||||
.icon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* markdown */
|
||||
article {
|
||||
overflow-wrap: break-word;
|
||||
& > :first-child {
|
||||
margin-top: $margin-base-y !important;
|
||||
}
|
||||
pre {
|
||||
background: $color-bg-accent-dark !important;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid $color-bg-accent-light-op-m;
|
||||
margin: 1em 0;
|
||||
scrollbar-color: $color-fg-accent-op-l transparent;
|
||||
&:hover {
|
||||
scrollbar-color: $color-fg-accent-op-m transparent;
|
||||
}
|
||||
transition: 0.1s scrollbar-color;
|
||||
}
|
||||
h2 > code,
|
||||
p > code,
|
||||
li > code {
|
||||
background: $color-bg-accent-dark;
|
||||
padding: 0.1rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid $color-bg-accent-light-op-m;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
p img,
|
||||
li img {
|
||||
width: 100%;
|
||||
border: 1px solid $color-bg-accent-light;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5rem solid $color-bg-accent-light;
|
||||
background: $color-bg-accent-dark;
|
||||
padding: 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
& > ul,
|
||||
& > ol {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
@ -8,17 +8,17 @@
|
||||
height: 100%;
|
||||
header,
|
||||
footer {
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
padding: $margin-base-y $margin-base-x;
|
||||
.content {
|
||||
max-width: $base-width;
|
||||
max-width: $width-base;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
header {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$bg-accent-color-light 0%,
|
||||
$bg-accent-color-dark 100%
|
||||
$color-bg-accent-light 0%,
|
||||
$color-bg-accent-dark 100%
|
||||
);
|
||||
box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
|
||||
.content {
|
||||
@ -40,10 +40,10 @@
|
||||
|
||||
/* section specific - list of classic */
|
||||
.classic-layout-container main .content.list {
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
padding: $margin-base-y $margin-base-x;
|
||||
.main-container {
|
||||
.list-container {
|
||||
max-width: $base-width;
|
||||
max-width: $width-base;
|
||||
margin: 0 auto;
|
||||
ul {
|
||||
padding-left: 1rem;
|
||||
@ -59,7 +59,7 @@
|
||||
line-height: 1.5;
|
||||
.summary,
|
||||
.pub-date {
|
||||
color: $fg-color-dark;
|
||||
color: $color-fg-dark;
|
||||
}
|
||||
.title {
|
||||
font-weight: bold;
|
||||
@ -69,7 +69,7 @@
|
||||
}
|
||||
}
|
||||
.paginator {
|
||||
margin: $base-margin-y 0 0 0;
|
||||
margin: $margin-base-y 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -77,7 +77,7 @@
|
||||
/* section specific - single of classic */
|
||||
.classic-layout-container header .content.post {
|
||||
.pub-date {
|
||||
color: $fg-color-semitransp;
|
||||
color: $color-fg-op-m;
|
||||
margin: 1em 0;
|
||||
}
|
||||
}
|
||||
@ -85,7 +85,7 @@
|
||||
.nav-block {
|
||||
.toc-title {
|
||||
text-align: center;
|
||||
margin-top: $base-margin-y;
|
||||
margin-top: $margin-base-y;
|
||||
}
|
||||
nav {
|
||||
overflow-wrap: break-word;
|
||||
@ -96,7 +96,7 @@
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
margin: $margin-base-y $margin-base-x;
|
||||
}
|
||||
}
|
||||
@mixin media--classic-main-content-post_1col {
|
||||
@ -104,13 +104,13 @@
|
||||
.nav-block {
|
||||
nav {
|
||||
max-height: 50vh;
|
||||
background-color: $bg-accent-color-dark;
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
border: 2px solid $bg-accent-color-light;
|
||||
background-color: $color-bg-accent-dark;
|
||||
padding: $margin-base-y $margin-base-x;
|
||||
border: 2px solid $color-bg-accent-light;
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y * 2 $base-margin-x $base-margin-y $base-margin-x;
|
||||
margin: $margin-base-y * 2 $margin-base-x $margin-base-y $margin-base-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -120,7 +120,7 @@
|
||||
.aside-container {
|
||||
display: flex;
|
||||
.nav-block {
|
||||
margin: $base-margin-y $base-margin-x 0 $base-margin-x;
|
||||
margin: $margin-base-y $margin-base-x 0 $margin-base-x;
|
||||
max-width: 20.5rem;
|
||||
min-width: 0;
|
||||
nav {
|
||||
@ -131,22 +131,22 @@
|
||||
scrollbar-width: thin;
|
||||
&,
|
||||
a {
|
||||
color: $fg-color-dark;
|
||||
color: $color-fg-dark;
|
||||
}
|
||||
a:hover {
|
||||
color: $fg-color;
|
||||
color: $color-fg;
|
||||
}
|
||||
}
|
||||
scrollbar-color: transparent transparent;
|
||||
&:hover {
|
||||
scrollbar-color: rgba($fg-color-dark, 0.6) transparent;
|
||||
scrollbar-color: rgba($color-fg-dark, 0.6) transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
margin: $margin-base-y $margin-base-x;
|
||||
article {
|
||||
max-width: $base-width;
|
||||
max-width: $width-base;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@ -156,7 +156,7 @@
|
||||
.classic-layout-container main .content.post {
|
||||
.aside-container {
|
||||
min-width: 0;
|
||||
flex: 0 1 auto;
|
||||
flex: 0 1.5 auto;
|
||||
}
|
||||
.main-container {
|
||||
min-width: 0;
|
||||
@ -177,7 +177,7 @@
|
||||
}
|
||||
.main-container {
|
||||
min-width: 0;
|
||||
flex: 0 1 $base-width;
|
||||
flex: 0 1 $width-base;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -7,16 +7,16 @@
|
||||
.about-container {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
$bg-accent-color-light 0%,
|
||||
$bg-accent-color-dark 100%
|
||||
$color-bg-accent-light 0%,
|
||||
$color-bg-accent-dark 100%
|
||||
);
|
||||
box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
|
||||
padding: $base-margin-y $base-margin-x;
|
||||
padding: $margin-base-y $margin-base-x;
|
||||
}
|
||||
.bottom-container {
|
||||
margin: $base-margin-y $base-margin-x;
|
||||
margin: $margin-base-y $margin-base-x;
|
||||
.bottom-block {
|
||||
max-width: $base-width;
|
||||
max-width: $width-base;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
@ -25,14 +25,14 @@
|
||||
}
|
||||
|
||||
.home-layout-container .content.home .about-block {
|
||||
max-width: $base-width;
|
||||
max-width: $width-base;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: $base-margin-y $base-margin-x;
|
||||
gap: $margin-base-y $margin-base-x;
|
||||
.info-container {
|
||||
flex: 1;
|
||||
h1 {
|
||||
@ -47,13 +47,13 @@
|
||||
.icon {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
color: $fg-color-semitransp;
|
||||
color: $color-fg-op-m;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
color: $color-fg-accent;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
color: $fg-color-dark;
|
||||
color: $color-fg-dark;
|
||||
margin-right: -0.2rem;
|
||||
.spaced {
|
||||
margin-right: 0.2rem;
|
||||
@ -67,9 +67,9 @@
|
||||
.icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
color: $fg-color-semitransp;
|
||||
color: $color-fg-op-m;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
color: $color-fg-accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -95,11 +95,11 @@
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 0.25rem rgba(0,0,0,0.5);
|
||||
&:hover {
|
||||
border: 1px solid $fg-accent-color;
|
||||
border: 1px solid $color-fg-accent;
|
||||
}
|
||||
display: block;
|
||||
flex: 1 0 30%;
|
||||
border: 1px solid $fg-color-semitransp;
|
||||
border: 1px solid $color-fg-op-m;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
@ -107,12 +107,12 @@
|
||||
height: 2.5rem;
|
||||
width: 2.5rem;
|
||||
vertical-align: middle;
|
||||
color: $fg-color-semitransp;
|
||||
color: $color-fg-op-m;
|
||||
}
|
||||
.label {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: $fg-color-dark;
|
||||
color: $color-fg-dark;
|
||||
vertical-align: middle;
|
||||
margin: 0 0 0 0.75rem;
|
||||
}
|
||||
@ -120,8 +120,8 @@
|
||||
}
|
||||
|
||||
.home-layout-container .content.home .notice {
|
||||
margin: $base-margin-y 0 0 0;
|
||||
color: $fg-color-semitransp;
|
||||
margin: $margin-base-y 0 0 0;
|
||||
color: $color-fg-op-m;
|
||||
}
|
||||
|
||||
@mixin media--home-content-about_vert_top {
|
||||
@ -138,7 +138,7 @@
|
||||
.home-layout-container {
|
||||
.content.home {
|
||||
.about-container {
|
||||
padding: $base-margin-y * 2 $base-margin-x;
|
||||
padding: $margin-base-y * 2 $margin-base-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,212 +1,5 @@
|
||||
$bg-color: #0d1117;
|
||||
$fg-color: #fff;
|
||||
$fg-color-dark: #b8bcc1;
|
||||
$fg-color-semitransp: rgba(#fff, 0.55);
|
||||
$bg-accent-color-dark: #020030;
|
||||
$bg-accent-color-light: #510079;
|
||||
$fg-accent-color: #98f;
|
||||
|
||||
$base-margin-x: 1rem;
|
||||
$base-margin-y: 1rem;
|
||||
$base-width: 50rem;
|
||||
$base-font-size: 16px;
|
||||
|
||||
/* If style is modified in a certain context, other uses must not inherit from user agent stylesheet */
|
||||
|
||||
/* elements */
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
html,body,ul,ol,li,blockquote,pre,hr {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
/* prettier-ignore */
|
||||
h1,h2,h3,h4,h5,h6 {
|
||||
margin: 0.5em 0;
|
||||
padding: 0;
|
||||
}
|
||||
html {
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
|
||||
line-height: 1.3;
|
||||
}
|
||||
body {
|
||||
height: 100%;
|
||||
background-color: $bg-color;
|
||||
color: $fg-color;
|
||||
}
|
||||
a {
|
||||
color: $fg-color;
|
||||
&:hover {
|
||||
color: $fg-accent-color;
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin: 1em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* generic */
|
||||
.paginator {
|
||||
text-align: center;
|
||||
.button {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 0.2rem 0;
|
||||
min-width: 2rem;
|
||||
text-decoration: none;
|
||||
background: $bg-accent-color-dark;
|
||||
&.current {
|
||||
background: $bg-accent-color-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
.taxo-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin: 1em 0;
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 0.1rem 1rem;
|
||||
border: 1px solid $fg-color-semitransp;
|
||||
border-radius: 0.25rem;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
border: 1px solid $fg-accent-color;
|
||||
color: $fg-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
display: inline-block;
|
||||
svg {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.icon-a-wrapper {
|
||||
// if icon is inside link, eliminate inline line-height artifacts
|
||||
display: inline-block;
|
||||
.icon {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@import "variables.scss";
|
||||
@import "basic.scss";
|
||||
@import "classic-layout.scss";
|
||||
@import "home-layout.scss";
|
||||
|
||||
/* markdown */
|
||||
article {
|
||||
overflow-wrap: break-word;
|
||||
& > :first-child {
|
||||
margin-top: $base-margin-y !important;
|
||||
}
|
||||
pre {
|
||||
background: $bg-accent-color-dark !important;
|
||||
overflow-x: auto;
|
||||
padding: 1rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid rgba($bg-accent-color-light,0.6);
|
||||
margin: 1em 0;
|
||||
scrollbar-color: rgba($fg-accent-color, 0.2) transparent;
|
||||
&:hover {
|
||||
scrollbar-color: rgba($fg-accent-color, 0.6) transparent;
|
||||
}
|
||||
transition: 0.1s all;
|
||||
}
|
||||
h2 > code,
|
||||
p > code,
|
||||
li > code {
|
||||
background: $bg-accent-color-dark;
|
||||
padding: 0.1rem 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
border: 1px solid rgba($bg-accent-color-light,0.6);
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
p img,
|
||||
li img {
|
||||
width: 100%;
|
||||
border: 1px solid $bg-accent-color-light;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 0.5rem solid $bg-accent-color-light;
|
||||
background: $bg-accent-color-dark;
|
||||
padding: 0.5rem;
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2rem;
|
||||
li {
|
||||
margin: 0.5em 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
& > ul,
|
||||
& > ol {
|
||||
margin: 1em 0;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 1.5em 0 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* media */
|
||||
@mixin screen-w($mode, $rem1, $rem2: "") {
|
||||
@if $mode== "less" {
|
||||
@media screen and(max-width: ($rem1 / 1rem * $base-font-size - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "more" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $base-font-size)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "between" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $base-font-size)) and (max-width: ($rem2 / 1rem * $base-font-size - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
$base-width-with-margin: $base-width + $base-margin-x * 2;
|
||||
$post-2col-nav-block-max-width: 20.5rem + 1rem * 2;
|
||||
@include screen-w("less", 35rem + $base-margin-x * 2) {
|
||||
@include media--home-content-about_vert_top();
|
||||
}
|
||||
@include screen-w("more", 35rem + $base-margin-x * 2) {
|
||||
@include media--home-content-about_vert_middle();
|
||||
}
|
||||
@include screen-w("less", $base-width-with-margin) {
|
||||
@include media--classic-main-content-post_1col();
|
||||
}
|
||||
@include screen-w("more", $base-width-with-margin) {
|
||||
@include media--classic-main-content-post_2col();
|
||||
@include media--home-content-about_vert_middle_wide();
|
||||
}
|
||||
@include screen-w(
|
||||
"between",
|
||||
$base-width-with-margin,
|
||||
$base-width-with-margin + $post-2col-nav-block-max-width * 2
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_narrow();
|
||||
}
|
||||
@include screen-w(
|
||||
"more",
|
||||
$base-width-with-margin + $post-2col-nav-block-max-width * 2
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_wide();
|
||||
}
|
||||
@import "media.scss";
|
||||
|
||||
45
assets/css/media.scss
Normal file
45
assets/css/media.scss
Normal file
@ -0,0 +1,45 @@
|
||||
@mixin screen-w($mode, $rem1, $rem2: "") {
|
||||
@if $mode== "less" {
|
||||
@media screen and(max-width: ($rem1 / 1rem * $font-size-base-px - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "more" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $font-size-base-px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@if $mode== "between" {
|
||||
@media screen and(min-width: ($rem1 / 1rem * $font-size-base-px)) and (max-width: ($rem2 / 1rem * $font-size-base-px - 0.02px)) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
$width-base-with-margin: $width-base + $margin-base-x * 2;
|
||||
$post-2col-nav-block-max-width: 20.5rem + 1rem * 2;
|
||||
@include screen-w("less", 35rem + $margin-base-x * 2) {
|
||||
@include media--home-content-about_vert_top();
|
||||
}
|
||||
@include screen-w("more", 35rem + $margin-base-x * 2) {
|
||||
@include media--home-content-about_vert_middle();
|
||||
}
|
||||
@include screen-w("less", $width-base-with-margin + 5rem) {
|
||||
@include media--classic-main-content-post_1col();
|
||||
}
|
||||
@include screen-w("more", $width-base-with-margin + 5rem) {
|
||||
@include media--classic-main-content-post_2col();
|
||||
@include media--home-content-about_vert_middle_wide();
|
||||
}
|
||||
@include screen-w(
|
||||
"between",
|
||||
$width-base-with-margin + 5rem,
|
||||
$width-base-with-margin + $post-2col-nav-block-max-width * 2
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_narrow();
|
||||
}
|
||||
@include screen-w(
|
||||
"more",
|
||||
$width-base-with-margin + $post-2col-nav-block-max-width * 2
|
||||
) {
|
||||
@include media--classic-main-content-post_2col_wide();
|
||||
}
|
||||
9
assets/css/variables.scss
Normal file
9
assets/css/variables.scss
Normal file
@ -0,0 +1,9 @@
|
||||
$color-fg: #ffffff;
|
||||
$color-fg-dark: #b8bcc1;
|
||||
$color-fg-accent: #9988ff;
|
||||
$color-bg: #0d1117;
|
||||
$color-bg-accent-light: #510079;
|
||||
$color-bg-accent-dark: #020030;
|
||||
|
||||
$opacity-low: 0.2;
|
||||
$opacity-mid: 0.55;
|
||||
9
assets/css/variables.scss.tmpl
Normal file
9
assets/css/variables.scss.tmpl
Normal file
@ -0,0 +1,9 @@
|
||||
$color-fg: #$THEME_COLOR_FG;
|
||||
$color-fg-dark: #$THEME_COLOR_FG_DARK;
|
||||
$color-fg-accent: #$THEME_COLOR_FG_ACCENT;
|
||||
$color-bg: #$THEME_COLOR_BG;
|
||||
$color-bg-accent-light: #$THEME_COLOR_BG_ACCENT_LIGHT;
|
||||
$color-bg-accent-dark: #$THEME_COLOR_BG_ACCENT_DARK;
|
||||
|
||||
$opacity-low: $THEME_OPACITY_LOW;
|
||||
$opacity-mid: $THEME_OPACITY_MID;
|
||||
14
init/import-environment.sh
Normal file
14
init/import-environment.sh
Normal file
@ -0,0 +1,14 @@
|
||||
#!/bin/sh
|
||||
set -e
|
||||
cd "$(dirname "$0")/.."
|
||||
if [ ! -f "../../themes/yrzam/init/import-environment.sh" ]; then
|
||||
echo "Wrong path" >&2
|
||||
exit 1;
|
||||
fi
|
||||
|
||||
VARS=$(printenv | \
|
||||
grep -E 'THEME_.*' | \
|
||||
sed -e 's/[= ].*//g' | sed -e 's/^/\$/' | tr '\n' ' '
|
||||
)
|
||||
|
||||
envsubst "$VARS" < "./assets/css/variables.scss.tmpl" > "./assets/css/variables.scss"
|
||||
Loading…
Reference in New Issue
Block a user