mirrors/hugo-theme-terminal
1
0
Fork 0
mirror of https://github.com/panr/hugo-theme-terminal.git synced 2024-11-22 09:35:30 +03:00
Code Issues Projects Releases Packages Wiki Activity

refactor from PostCSS to SASS

Browse source
This commit is contained in:
panr 2022-06-21 17:14:59 +02:00
parent 56791937ff
commit 7f097d7700
28 changed files with 139 additions and 179 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
assets/css/buttons.css → assets/css/buttons.scss
View file

@ -16,8 +16,8 @@ a.button {
text-decoration: none;
text-align: center;
border-radius: 0;
border: 1px solid var(--accent);
background: var(--accent);
border: 1px solid $accent;
background: $accent;
font: inherit;
font-weight: bold;
appearance: none;
@ -25,7 +25,7 @@ a.button {
outline: none;
&:hover {
background: color-mod(var(--accent) a(90%));
background: opacify($accent, .9);
}
/* variants */
@ -63,7 +63,7 @@ a.read-more:hover,
a.read-more:active {
display: inline-flex;
border: none;
color: var(--accent);
color: $accent;
background: none;
box-shadow: none;
padding: 0;

12
assets/css/code.css → assets/css/code.scss
View file

@ -1,5 +1,5 @@
.collapsable-code {
--border-color: color-mod(var(--accent) blend(#999 90%));
$border-color: mix($accent, #999, 90%);
position: relative;
width: 100%;
@ -39,13 +39,13 @@
min-width: 30px;
min-height: 30px;
margin: 0;
border-bottom: 1px solid var(--border-color);
border-bottom: 1px solid $border-color;
cursor: pointer;
}
&__title {
flex: 1;
color: var(--accent);
color: $accent;
padding: 3px 10px;
text-overflow: ellipsis;
white-space: nowrap;
@ -53,15 +53,15 @@
}
&__language {
color: var(--accent);
border: 1px solid var(--border-color);
color: $accent;
border: 1px solid $border-color;
border-bottom: none;
text-transform: uppercase;
padding: 3px 10px;
}
&__toggle {
color: var(--accent);
color: $accent;
font-size: 16px;
padding: 3px 10px;

13
assets/css/color/blue.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #23B0FF;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/blue.scss Normal file
View file

@ -0,0 +1 @@
$accent: #23B0FF;

13
assets/css/color/green.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #78E2A0;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/green.scss Normal file
View file

@ -0,0 +1 @@
$accent: #78E2A0;

13
assets/css/color/orange.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #FFA86A;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/orange.scss Normal file
View file

@ -0,0 +1 @@
$accent: #FFA86A;

13
assets/css/color/pink.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #EE72F1;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/pink.scss Normal file
View file

@ -0,0 +1 @@
$accent: #EE72F1;

13
assets/css/color/red.css
View file

@ -1,13 +0,0 @@
:root {
--accent: #FF6266;
--background: color-mod(var(--accent) blend(#1D1E28 98%));
--color: white;
--border-color: rgba(255, 255, 255, .1);
/* variables for js, must be the same as these in @custom-media queries */
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}
@custom-media --phone (max-width: 684px);
@custom-media --tablet (max-width: 900px);

1
assets/css/color/red.scss Normal file
View file

@ -0,0 +1 @@
$accent: #FF6266;

0
assets/css/font.css → assets/css/font.scss
View file

7
assets/css/footer.css → assets/css/footer.scss
View file

@ -11,7 +11,7 @@
width: 760px;
max-width: 100%;
@media (--tablet) {
@media ($tablet) {
flex-direction: column;
}
}
@ -25,7 +25,6 @@
flex-direction: row;
align-items: center;
font-size: 1rem;
color: var(--light-color-secondary);
&--user {
margin: auto;
@ -35,14 +34,14 @@
& > *:first-child:not(:only-child) {
margin-right: 10px;
@media (--tablet) {
@media ($tablet) {
border: none;
padding: 0;
margin: 0;
}
}
@media (--tablet) {
@media ($tablet) {
flex-direction: column;
margin-top: 10px;
}

14
assets/css/form.css → assets/css/form.scss
View file

@ -1,15 +1,15 @@
input, textarea, select {
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
color: $accent;
border: 1px solid $accent;
border-radius: 0;
padding: 10px;
font: inherit;
appearance: none;
&:focus, :active {
border-color: var(--color);
outline: 1px solid var(--color);
border-color: $color;
outline: 1px solid $color;
}
&:active {
@ -18,13 +18,13 @@ input, textarea, select {
}
select {
background: var(--background);
background: $background;
option {
background: var(--background);
background: $background;
}
}
::placeholder {
color: color-mod(var(--accent) a(50%));
color: color-mod($accent) a(50%);
}

0
assets/css/gist.css → assets/css/gist.scss
View file

41
assets/css/header.css → assets/css/header.scss
View file

@ -1,7 +1,9 @@
@define-mixin menu {
@mixin menu {
$shadow-color: opacify($background, .8);
$shadow: 0 10px $shadow-color, -10px 10px $shadow-color, 10px 10px $shadow-color;
position: absolute;
background: var(--background);
box-shadow: var(--shadow);
background: $background;
box-shadow: $shadow;
color: white;
border: 2px solid;
margin: 0;
@ -31,7 +33,7 @@
&:after {
content: '';
background: repeating-linear-gradient(90deg, var(--accent), var(--accent) 2px, transparent 0, transparent 10px);
background: repeating-linear-gradient(90deg, $accent, $accent 2px, transparent 0, transparent 10px);
display: block;
width: 100%;
right: 10px;
@ -45,14 +47,16 @@
}
.menu {
--shadow-color: color-mod(var(--background) a(80%));
--shadow: 0 10px var(--shadow-color), -10px 10px var(--shadow-color), 10px 10px var(--shadow-color);
margin: 20px 1px;
@media (--phone) {
@mixin menu;
@media ($phone) {
@include menu;
top: 50px;
right: 0;
&.hidden-on-mobile {
display: none;
}
}
&__inner {
@ -63,7 +67,7 @@
padding: 0;
&--desktop {
@media (--phone) {
@media ($phone) {
display: none;
}
}
@ -71,7 +75,7 @@
&--mobile {
display: none;
@media (--phone) {
@media ($phone) {
display: block;
}
}
@ -84,7 +88,7 @@
}
}
@media (--phone) {
@media ($phone) {
flex-direction: column;
align-items: flex-start;
padding: 0;
@ -107,12 +111,12 @@
}
&-more {
@mixin menu;
@include menu;
top: 35px;
left: 0;
&-trigger {
color: var(--accent);
color: $accent;
user-select: none;
cursor: pointer;
}
@ -138,26 +142,31 @@
list-style-type: none;
display: flex;
flex-direction: row;
color: var(--accent);
color: $accent;
cursor: pointer;
margin: 0;
}
&__more {
@mixin menu;
@include menu;
top: 35px;
right: 0;
}
}
&-trigger {
color: var(--accent);
display: none;
color: $accent;
border: 2px solid;
margin-left: 10px;
height: 100%;
padding: 3px 8px;
position: relative;
cursor: pointer;
@media ($phone) {
display: block;
}
}
}
}

2
assets/css/logo.css → assets/css/logo.scss
View file

@ -2,7 +2,7 @@
display: flex;
align-items: center;
text-decoration: none;
background: var(--accent);
background: $accent;
color: black;
padding: 5px 10px;
}

50
assets/css/main.css → assets/css/main.scss
View file

@ -15,8 +15,8 @@ body {
font-size: 1rem;
line-height: 1.54;
letter-spacing: -0.02em;
background-color: color-mod(var(--accent) blend(#1D1E28 98%));
color: var(--color);
background-color: $background;
color: $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 ($phone) {
font-size: 1rem;
}
}
@ -61,7 +61,7 @@ a {
/* Waiting for a better times... */
/* &:has(code) {
text-decoration-color: var(--accent);
text-decoration-color: $accent;
} */
}
@ -109,8 +109,8 @@ figure {
font-size: 14px;
padding: 5px 10px;
margin-top: 5px;
background: var(--accent);
color: var(--background);
background: $accent;
color: $background;
/* 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: color-mod(var(--accent) a(20%));
color: var(--accent);
background: color-mod($accent) a(20%);
color: $accent;
padding: 1px 6px;
margin: 0 2px;
font-size: .95rem;
@ -157,7 +157,7 @@ pre {
margin-top: -40px;
}
@media (--phone) {
@media ($phone) {
white-space: pre-wrap;
word-wrap: break-word;
}
@ -172,12 +172,12 @@ pre {
}
blockquote {
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
border-top: 1px solid $accent;
border-bottom: 1px solid $accent;
margin: 40px 0;
padding: 25px;
@media (--phone) {
@media ($phone) {
padding-right: 0;
}
@ -198,15 +198,15 @@ blockquote {
display: block;
position: absolute;
left: -25px;
color: var(--accent);
color: $accent;
}
&.twitter-tweet {
position: relative;
background: color-mod(var(--accent) a(10%));
background: color-mod($accent) a(10%);
font: inherit;
color: inherit;
border: 1px solid var(--accent);
border: 1px solid $accent;
padding-top: 60px;
p:before {
@ -217,12 +217,12 @@ blockquote {
content: '> From Twitter:';
position: absolute;
top: 20px;
color: var(--accent);
color: $accent;
font-weight: bold;
}
a {
color: var(--accent);
color: $accent;
}
}
}
@ -237,12 +237,12 @@ table {
table,
th,
td {
border: 1px dashed var(--accent);
border: 1px dashed $accent;
padding: 10px;
}
th {
color: var(--accent);
color: $accent;
}
ul,
@ -254,7 +254,7 @@ ol {
position: relative;
}
@media (--phone) {
@media ($phone) {
margin-left: 20px;
}
}
@ -271,7 +271,7 @@ ol {
content: counter(li);
position: absolute;
right: calc(100% + 10px);
color: var(--accent);
color: $accent;
display: inline-block;
text-align: right;
}
@ -290,8 +290,8 @@ ol {
}
mark {
background: var(--accent);
color: var(--background);
background: $accent;
color: $background;
}
.container {
@ -312,7 +312,7 @@ mark {
max-width: 100%;
}
@media (--phone) {
@media ($phone) {
padding: 20px;
}
@ -333,7 +333,7 @@ mark {
hr {
width: 100%;
border: none;
background: var(--border-color);
background: $border-color;
height: 1px;
}

2
assets/css/pagination.css → assets/css/pagination.scss
View file

@ -15,7 +15,7 @@
text-align: center;
margin: 0 auto;
padding: 5px 10px;
background: color-mod(var(--accent) blend(#1D1E28 98%));
background: mix($accent, #1D1E28, 98%);
font-size: .8rem;
text-transform: uppercase;
text-decoration: none;

28
assets/css/post.css → assets/css/post.scss
View file

@ -3,7 +3,7 @@
}
.framed {
border: 1px solid var(--accent);
border: 1px solid $accent;
padding: 20px;
*:first-child {
@ -25,27 +25,23 @@
margin: 20px auto;
padding: 20px 0;
@media (--tablet) {
max-width: 660px;
}
&:not(:last-of-type) {
border-bottom: 1px solid var(--border-color);
border-bottom: 1px solid $border-color;
}
&-meta {
font-size: 1rem;
margin-bottom: 10px;
color: color-mod(var(--accent) a(70%));
color: opcift($accent, 70%);
}
&-title {
--border: 3px dotted var(--accent);
$border: 3px dotted $accent;
position: relative;
color: var(--accent);
color: $accent;
margin: 0 0 15px;
padding-bottom: 15px;
border-bottom: var(--border);
border-bottom: $border;
&:after {
content: '';
@ -53,7 +49,7 @@
bottom: 2px;
display: block;
width: 100%;
border-bottom: var(--border);
border-bottom: $border;
}
a {
@ -77,12 +73,12 @@
}
&-cover {
border: 20px solid var(--accent);
border: 20px solid $accent;
background: transparent;
margin: 40px 0;
padding: 20px;
@media (--phone) {
@media ($phone) {
padding: 10px;
border-width: 10px;
}
@ -95,7 +91,7 @@
content: '-';
position: absolute;
left: -20px;
color: var(--accent);
color: $accent;
}
}
}
@ -117,7 +113,7 @@
}
.hanchor {
color: color-mod(var(--accent) alpha(90%));
color: opacify($accent, .9);
text-decoration: none;
margin-left: 10px;
visibility: hidden;
@ -128,5 +124,5 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
}
.footnotes {
color: color-mod(var(--color) alpha(50%));
color: opacify($color, .5);
}

0
assets/css/prism.css → assets/css/prism.scss
View file

16
assets/css/style.css
View file

@ -1,16 +0,0 @@
@import 'font.css';
@import 'buttons.css';
@import 'form.css';
@import 'header.css';
@import 'logo.css';
@import 'main.css';
@import 'post.css';
@import 'pagination.css';
@import 'footer.css';
@import 'prism.css';
@import 'syntax.css';
@import 'code.css';
@import 'terms.css';
@import 'gist.css';

18
assets/css/style.scss Normal file
View file

@ -0,0 +1,18 @@
@import "variables";
@import "font";
@import "buttons";
@import "form";
@import "header";
@import "logo";
@import "main";
@import "post";
@import "pagination";
@import "footer";
@import "prism";
@import "syntax";
@import "code";
@import "terms";
@import "gist";

14
assets/css/syntax.css → assets/css/syntax.scss
View file

@ -17,7 +17,7 @@ code.language-scss,
.token.number,
.token.inserted,
.token.important {
color: var(--accent) !important;
color: $accent !important;
}
.token.tag-id,
@ -34,7 +34,7 @@ code.language-scss,
.token.class-name,
.token.constant,
.token.symbol {
color: color-mod(var(--accent) a(70%)) !important;
color: opacify($accent, .7) !important;
}
.token.property,
@ -44,7 +44,7 @@ code.language-scss,
code.language-javascript,
code.language-html,
.command-line-prompt > span:before {
color: color-mod(var(--accent) blend(#999 90%)) !important;
color: mix($accent, #999, .9) !important;
}
.token.selector,
@ -80,7 +80,7 @@ pre[class*="language-"] {
right: 0;
padding: 0;
margin: 0;
background: color-mod(var(--accent) blend(#999 90%) a(8%));
background: opacify(mix($accent, #999, 90%), .08);
pointer-events: none;
line-height: inherit;
white-space: pre;
@ -116,9 +116,9 @@ pre[class*="language-"] {
}
.code-toolbar {
--code-margin: 40px;
$code-margin: 40px;
position: relative;
margin: var(--code-margin) 0;
margin: $code-margin 0;
padding: 20px;
border: 1px solid rgba(255, 255, 255, .1);
@ -126,7 +126,7 @@ pre[class*="language-"] {
+ .highlight,
+ .highlight .code-toolbar {
border-top: 0;
margin-top: calc(-1 * var(--code-margin));
margin-top: calc(-1 * $code-margin);
}
pre, code {

2
assets/css/terms.css → assets/css/terms.scss
View file

@ -1,6 +1,6 @@
.terms {
h1 {
color: var(--accent);
color: $accent;
}
h3 {

14
assets/css/variables.scss Normal file
View file

@ -0,0 +1,14 @@
/* COLOR VARIABLES */
$background: mix($accent, #1D1E28, 2%);
$color: white;
$border-color: rgba(255, 255, 255, .1);
/* MEDIA QUERIES */
$phone: (max-width: 684px);
$tablet: (max-width: 900px);
/* variables for js, must be the same as these in @custom-media queries */
:root {
--phoneWidth: (max-width: 684px);
--tabletWidth: (max-width: 900px);
}

20
layouts/partials/head.html
View file

@ -8,25 +8,25 @@
{{ template "_internal/google_analytics.html" . }}
<!-- Local Theme Variables -->
{{ $defaultStyles := resources.Get "css/style.css" }}
{{ $defaultStyles := resources.Get "css/style.scss" }}
{{ if (isset .Params "color") }}
{{ $localColorCss := resources.Get (printf "css/color/%s.css" .Params.color) }}
{{ $localCss := slice $defaultStyles $localColorCss | resources.Concat (printf "css/%s-local.css" .Params.color) }}
{{ $localColorStyles := $localCss | resources.ToCSS | resources.PostCSS }}
{{ $localColorCss := resources.Get (printf "css/color/%s.scss" .Params.color) }}
{{ $localCss := slice $localColorCss $defaultStyles | resources.Concat (printf "css/%s-local.scss" .Params.color) }}
{{ $localColorStyles := $localCss | resources.ToCSS }}
<link rel="stylesheet" href="{{ $localColorStyles.RelPermalink }}">
{{ else }}
<!-- Theme Variables -->
{{ $colorCss := resources.Get (printf "css/color/%s.css" ($.Site.Params.ThemeColor | default "orange")) }}
{{ $css := slice $defaultStyles $colorCss | resources.Concat "css/base.css" }}
{{ $colorCss := resources.Get (printf "css/color/%s.scss" ($.Site.Params.ThemeColor | default "orange")) }}
{{ $css := slice $colorCss $defaultStyles | resources.Concat "css/base.scss" }}
{{ $options := (dict "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" true "precision" 6 "includePaths" (slice "node_modules")) }}
{{ $styles := $css | resources.ToCSS $options | resources.PostCSS }}
{{ $styles := $css | resources.ToCSS $options }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}">
{{ end }}
<!-- Custom CSS to override theme properties (/static/style.css) -->
{{ if (fileExists "static/style.css") -}}
<link rel="stylesheet" href="{{ "style.css" | absURL }}">
<!-- Custom CSS to override theme properties (/static/style.scss) -->
{{ if (fileExists "static/style.scss") -}}
<link rel="stylesheet" href="{{ "style.scss" | absURL }}">
{{- end }}
<!-- Icons -->