New version of hello-friend-ng-clone
This commit is contained in:
parent
66da990f5c
commit
34adf86a92
58 changed files with 1482 additions and 437 deletions
|
|
@ -1 +1,51 @@
|
|||
// Some code could be here ...
|
||||
/**
|
||||
* Theming.
|
||||
*
|
||||
* Supports the preferred color scheme of the operation system as well as
|
||||
* the theme choice of the user.
|
||||
*
|
||||
*/
|
||||
const themeToggle = document.querySelector(".theme-toggle");
|
||||
const chosenTheme = window.localStorage && window.localStorage.getItem("theme");
|
||||
const chosenThemeIsDark = chosenTheme == "dark";
|
||||
const chosenThemeIsLight = chosenTheme == "light";
|
||||
|
||||
// Detect the color scheme the operating system prefers.
|
||||
function detectOSColorTheme() {
|
||||
if (chosenThemeIsDark) {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
} else if (chosenThemeIsLight) {
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
}
|
||||
}
|
||||
|
||||
// Switch the theme.
|
||||
function switchTheme(e) {
|
||||
if (chosenThemeIsDark) {
|
||||
localStorage.setItem("theme", "light");
|
||||
} else {
|
||||
localStorage.setItem("theme", "dark");
|
||||
}
|
||||
|
||||
detectOSColorTheme();
|
||||
window.location.reload();
|
||||
}
|
||||
|
||||
// Event listener
|
||||
if (themeToggle) {
|
||||
themeToggle.addEventListener("click", switchTheme, false);
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: light)")
|
||||
.addEventListener("change", (e) => e.matches && detectOSColorTheme());
|
||||
|
||||
detectOSColorTheme();
|
||||
} else {
|
||||
localStorage.removeItem("theme");
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,25 +0,0 @@
|
|||
// Toggle theme
|
||||
|
||||
const theme = window.localStorage && window.localStorage.getItem("theme");
|
||||
const themeToggle = document.querySelector(".theme-toggle");
|
||||
const isDark = theme === "dark";
|
||||
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||
|
||||
if (theme !== null) {
|
||||
document.body.classList.toggle("dark-theme", isDark);
|
||||
isDark
|
||||
? metaThemeColor.setAttribute("content", "#252627")
|
||||
: metaThemeColor.setAttribute("content", "#fafafa");
|
||||
}
|
||||
|
||||
themeToggle.addEventListener("click", () => {
|
||||
document.body.classList.toggle("dark-theme");
|
||||
window.localStorage &&
|
||||
window.localStorage.setItem(
|
||||
"theme",
|
||||
document.body.classList.contains("dark-theme") ? "dark" : "light"
|
||||
);
|
||||
document.body.classList.contains("dark-theme")
|
||||
? metaThemeColor.setAttribute("content", "#252627")
|
||||
: metaThemeColor.setAttribute("content", "#fafafa");
|
||||
});
|
||||
9
themes/hello-friend-ng-clone/assets/scss/_404.scss
Normal file
9
themes/hello-friend-ng-clone/assets/scss/_404.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.btn-404 svg {
|
||||
vertical-align: middle;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn-404 a {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -13,7 +13,6 @@ a.button {
|
|||
justify-content: center;
|
||||
padding: 8px 18px;
|
||||
margin-bottom: 5px;
|
||||
background: $light-background-secondary;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
|
|
@ -22,24 +21,51 @@ a.button {
|
|||
appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
// Default
|
||||
background: $light-background-header;
|
||||
|
||||
.dark-theme & {
|
||||
background: $dark-background-secondary;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-header;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* variants */
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-header;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
&.outline {
|
||||
background: transparent;
|
||||
border-color: $light-background-secondary;
|
||||
box-shadow: none;
|
||||
padding: 8px 18px;
|
||||
// Default
|
||||
border-color: $light-background-secondary;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-color: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
border-color: $light-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
border-color: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
border-color: $light-background-secondary;
|
||||
}
|
||||
|
||||
:hover {
|
||||
transform: none;
|
||||
|
|
@ -80,7 +106,6 @@ a.button {
|
|||
justify-content: center;
|
||||
padding: 3px 8px;
|
||||
margin-bottom: 5px;
|
||||
background: $light-background-secondary;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
|
|
@ -90,10 +115,25 @@ a.button {
|
|||
appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
// Default
|
||||
background: $light-background-secondary;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-secondary;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
& > *:last-child {
|
||||
padding: 0 5px;
|
||||
padding: 0 0px;
|
||||
|
||||
@media #{$media-size-tablet} {
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,26 @@
|
|||
.header {
|
||||
background: #fafafa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
// Default
|
||||
background: $light-background-header;
|
||||
|
||||
.dark-theme & {
|
||||
background: #252627;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
&__right {
|
||||
|
|
@ -42,7 +55,7 @@
|
|||
fill: currentColor;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
.not-selectable {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
|
|||
|
|
@ -10,10 +10,23 @@
|
|||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
// Default
|
||||
border-bottom: 1px solid $light-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
border-color: $dark-border-color;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border-bottom: 1px solid $dark-border-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
border-bottom: 1px solid $light-border-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
border-bottom: 1px solid $dark-border-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
border-bottom: 1px solid $light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
html {
|
||||
box-sizing: border-box;
|
||||
line-height: 1.6;
|
||||
letter-spacing: .06em;
|
||||
letter-spacing: 0.06em;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
|
|
@ -14,12 +14,11 @@ html {
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: 'Inter UI', -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
|
||||
"Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-display: auto;
|
||||
font-size: 1rem;
|
||||
line-height: 1.54;
|
||||
background-color: $light-background;
|
||||
color: $light-color;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
|
||||
|
|
@ -30,17 +29,40 @@ body {
|
|||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
|
||||
// Default
|
||||
background-color: $light-background;
|
||||
color: $light-color;
|
||||
|
||||
@media #{$media-size-phone} {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&.dark-theme {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $dark-background;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $light-background;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background-color: $dark-background;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background-color: $light-background;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
|
||||
h2, h3, h4, h5, h6 {
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1.3;
|
||||
|
|
@ -52,6 +74,7 @@ h1 {
|
|||
|
||||
h2 {
|
||||
font-size: 1.625rem;
|
||||
margin-top: 2.5em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -150,7 +173,7 @@ figure {
|
|||
figcaption {
|
||||
font-size: 14px;
|
||||
margin-top: 5px;
|
||||
opacity: .8;
|
||||
opacity: 0.8;
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
|
|
@ -166,26 +189,60 @@ figure {
|
|||
}
|
||||
}
|
||||
|
||||
em, i, strong {
|
||||
// Default
|
||||
color: black;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
color: black;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
color: white;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
|
||||
font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
|
||||
font-display: auto;
|
||||
font-feature-settings: normal;
|
||||
background: $light-background-secondary;
|
||||
padding: 1px 6px;
|
||||
margin: 0 2px;
|
||||
border-radius: 5px;
|
||||
font-size: .95rem;
|
||||
font-size: 0.95rem;
|
||||
// Default
|
||||
background: $light-background-secondary;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background: #212020;
|
||||
padding: 10px 10px 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: .95rem;
|
||||
font-size: 0.95rem;
|
||||
overflow: auto;
|
||||
|
||||
@media #{$media-size-phone} {
|
||||
|
|
@ -195,19 +252,32 @@ pre {
|
|||
|
||||
code {
|
||||
background: none !important;
|
||||
color: #ccc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: inherit;
|
||||
// Default
|
||||
color: #ccc;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: 2px solid;
|
||||
border-left: 3px solid #3eb0ef;
|
||||
margin: 40px;
|
||||
padding: 10px 20px;
|
||||
|
||||
|
|
@ -217,7 +287,7 @@ blockquote {
|
|||
}
|
||||
|
||||
&:before {
|
||||
content: '”';
|
||||
content: "”";
|
||||
font-family: Georgia, serif;
|
||||
font-display: auto;
|
||||
font-size: 3.875rem;
|
||||
|
|
@ -235,7 +305,8 @@ blockquote {
|
|||
}
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
margin-left: 40px;
|
||||
padding: 0;
|
||||
|
||||
|
|
@ -272,12 +343,25 @@ ol ol {
|
|||
hr {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: $light-border-color;
|
||||
height: 1px;
|
||||
// Default
|
||||
background: $light-border-color;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-border-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-border-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.hidden {
|
||||
|
|
@ -298,35 +382,47 @@ hr {
|
|||
|
||||
// Accessibility
|
||||
.screen-reader-text {
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
border: 0;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
word-wrap: normal !important;
|
||||
}
|
||||
|
||||
.screen-reader-text:focus {
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
width: auto;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
z-index: 100000;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
color: #21759b;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
width: auto;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
line-height: normal;
|
||||
padding: 15px 23px 14px;
|
||||
text-decoration: none;
|
||||
z-index: 100000;
|
||||
}
|
||||
|
||||
.background-image {
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
// Prism JS Additionals
|
||||
.highlight {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
|
@ -1,11 +1,22 @@
|
|||
.menu {
|
||||
background: #fafafa;
|
||||
border-right: 1px solid;
|
||||
margin-right: 18px;
|
||||
z-index: 9999;
|
||||
// Default
|
||||
background: $light-background-header;
|
||||
|
||||
.dark-theme & {
|
||||
background: #252627;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-header;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-header;
|
||||
}
|
||||
|
||||
@media #{$media-size-phone} {
|
||||
|
|
@ -49,6 +60,11 @@
|
|||
fill: currentColor;
|
||||
margin-left: 10px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
@media #{$media-size-phone} {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
/* PrismJS 1.20.0
|
||||
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+arduino+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+c+csharp+cpp+cil+coffeescript+clojure+crystal+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+erb+erlang+fsharp+flow+fortran+gcode+gedcom+gherkin+git+glsl+gml+go+graphql+groovy+haml+handlebars+haskell+haxe+hcl+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+javastacktrace+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+markup-templating+matlab+mel+mizar+monkey+n1ql+n4js+nand2tetris-hdl+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+plsql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+tsx+renpy+reason+rest+rip+roboconf+ruby+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+soy+sql+stylus+swift+tap+tcl+textile+toml+tt2+twig+typescript+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+xquery+yaml */
|
||||
/* PrismJS 1.23.0
|
||||
https://prismjs.com/download.html#themes=prism-twilight&languages=markup+css+clike+javascript+ada+apacheconf+bash+batch+c+csharp+cpp+coffeescript+css-extras+dart+django+dns-zone-file+docker+elixir+etlua+erlang+git+go+graphql+groovy+haml+handlebars+haskell+http+hpkp+hsts+ini+java+javadoc+javadoclike+jsdoc+js-extras+json+json5+jsonp+julia+kotlin+latex+less+lisp+lua+markup-templating+matlab+nginx+objectivec+perl+php+phpdoc+php-extras+powershell+promql+protobuf+puppet+purescript+python+r+jsx+tsx+regex+rest+ruby+rust+sass+scss+shell-session+sql+stylus+swift+toml+twig+typescript+typoscript+verilog+vhdl+vim+visual-basic+wasm+xml-doc+yaml&plugins=line-highlight+line-numbers+show-language+toolbar */
|
||||
/**
|
||||
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
|
||||
* Based on https://github.com/chriskempson/tomorrow-theme
|
||||
* @author Rose Pritchard
|
||||
* prism.js Twilight theme
|
||||
* Based (more or less) on the Twilight theme originally of Textmate fame.
|
||||
* @author Remy Bach
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: #ccc;
|
||||
color: white;
|
||||
background: none;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
text-shadow: 0 -.1em .2em black;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
|
|
@ -27,84 +27,107 @@ pre[class*="language-"] {
|
|||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"],
|
||||
:not(pre) > code[class*="language-"] {
|
||||
background: hsl(0, 0%, 8%); /* #141414 */
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
border-radius: .5em;
|
||||
border: .3em solid hsl(0, 0%, 33%); /* #282A2B */
|
||||
box-shadow: 1px 1px .5em black inset;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #2d2d2d;
|
||||
pre[class*="language-"]::-moz-selection {
|
||||
/* Firefox */
|
||||
background: hsl(200, 4%, 16%); /* #282A2B */
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection {
|
||||
/* Safari */
|
||||
background: hsl(200, 4%, 16%); /* #282A2B */
|
||||
}
|
||||
|
||||
/* Text Selection colour */
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: hsla(0, 0%, 93%, 0.15); /* #EDEDED */
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
border: .13em solid hsl(0, 0%, 33%); /* #545454 */
|
||||
box-shadow: 1px 1px .3em -.1em black inset;
|
||||
padding: .15em .2em .05em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.block-comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: #999;
|
||||
color: hsl(0, 0%, 47%); /* #777777 */
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #ccc;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.tag,
|
||||
.token.attr-name,
|
||||
.token.namespace,
|
||||
.token.deleted {
|
||||
color: #e2777a;
|
||||
}
|
||||
|
||||
.token.function-name {
|
||||
color: #6196cc;
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.function {
|
||||
color: #f08d49;
|
||||
.token.deleted {
|
||||
color: hsl(14, 58%, 55%); /* #CF6A4C */
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.class-name,
|
||||
.token.constant,
|
||||
.token.symbol {
|
||||
color: #f8c555;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.important,
|
||||
.token.atrule,
|
||||
.token.keyword,
|
||||
.token.property,
|
||||
.token.selector,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.builtin {
|
||||
color: #cc99cd;
|
||||
color: hsl(53, 89%, 79%); /* #F9EE98 */
|
||||
}
|
||||
|
||||
.token.attr-name,
|
||||
.token.attr-value,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.attr-value,
|
||||
.token.regex,
|
||||
.token.variable {
|
||||
color: #7ec699;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url {
|
||||
color: #67cdcc;
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable,
|
||||
.token.inserted {
|
||||
color: hsl(76, 21%, 52%); /* #8F9D6A */
|
||||
}
|
||||
|
||||
.token.atrule {
|
||||
color: hsl(218, 22%, 55%); /* #7587A6 */
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: hsl(42, 75%, 65%); /* #E9C062 */
|
||||
}
|
||||
|
||||
.token.important,
|
||||
|
|
@ -119,7 +142,237 @@ pre[class*="language-"] {
|
|||
cursor: help;
|
||||
}
|
||||
|
||||
.token.inserted {
|
||||
color: green;
|
||||
pre[data-line] {
|
||||
padding: 1em 0 1em 3em;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Markup */
|
||||
.language-markup .token.tag,
|
||||
.language-markup .token.attr-name,
|
||||
.language-markup .token.punctuation {
|
||||
color: hsl(33, 33%, 52%); /* #AC885B */
|
||||
}
|
||||
|
||||
/* Make the tokens sit above the line highlight so the colours don't look faded. */
|
||||
.token {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
background: hsla(0, 0%, 33%, 0.25); /* #545454 */
|
||||
background: linear-gradient(to right, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
|
||||
border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
|
||||
border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
|
||||
left: 0;
|
||||
line-height: inherit;
|
||||
margin-top: 0.75em; /* Same as .prism’s padding-top */
|
||||
padding: inherit 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
white-space: pre;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.line-highlight:before,
|
||||
.line-highlight[data-end]:after {
|
||||
background-color: hsl(215, 15%, 59%); /* #8794A6 */
|
||||
border-radius: 999px;
|
||||
box-shadow: 0 1px white;
|
||||
color: hsl(24, 20%, 95%); /* #F5F2F0 */
|
||||
content: attr(data-start);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
left: .6em;
|
||||
min-width: 1em;
|
||||
padding: 0 .5em;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
text-shadow: none;
|
||||
top: .4em;
|
||||
vertical-align: .3em;
|
||||
}
|
||||
|
||||
.line-highlight[data-end]:after {
|
||||
bottom: .4em;
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
}
|
||||
|
||||
pre[data-line] {
|
||||
position: relative;
|
||||
padding: 1em 0 1em 3em;
|
||||
}
|
||||
|
||||
.line-highlight {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: inherit 0;
|
||||
margin-top: 1em; /* Same as .prism’s padding-top */
|
||||
|
||||
background: hsla(24, 20%, 50%,.08);
|
||||
background: linear-gradient(to right, hsla(24, 20%, 50%,.1) 70%, hsla(24, 20%, 50%,0));
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
line-height: inherit;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.line-highlight {
|
||||
/*
|
||||
* This will prevent browsers from replacing the background color with white.
|
||||
* It's necessary because the element is layered on top of the displayed code.
|
||||
*/
|
||||
-webkit-print-color-adjust: exact;
|
||||
color-adjust: exact;
|
||||
}
|
||||
}
|
||||
|
||||
.line-highlight:before,
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-start);
|
||||
position: absolute;
|
||||
top: .4em;
|
||||
left: .6em;
|
||||
min-width: 1em;
|
||||
padding: 0 .5em;
|
||||
background-color: hsla(24, 20%, 50%,.4);
|
||||
color: hsl(24, 20%, 95%);
|
||||
font: bold 65%/1.5 sans-serif;
|
||||
text-align: center;
|
||||
vertical-align: .3em;
|
||||
border-radius: 999px;
|
||||
text-shadow: none;
|
||||
box-shadow: 0 1px white;
|
||||
}
|
||||
|
||||
.line-highlight[data-end]:after {
|
||||
content: attr(data-end);
|
||||
top: auto;
|
||||
bottom: .4em;
|
||||
}
|
||||
|
||||
.line-numbers .line-highlight:before,
|
||||
.line-numbers .line-highlight:after {
|
||||
content: none;
|
||||
}
|
||||
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows {
|
||||
pointer-events: all;
|
||||
}
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows > span:before {
|
||||
cursor: pointer;
|
||||
}
|
||||
pre[id].linkable-line-numbers span.line-numbers-rows > span:hover:before {
|
||||
background-color: rgba(128, 128, 128, .2);
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers {
|
||||
position: relative;
|
||||
padding-left: 3.8em;
|
||||
counter-reset: linenumber;
|
||||
}
|
||||
|
||||
pre[class*="language-"].line-numbers > code {
|
||||
position: relative;
|
||||
white-space: inherit;
|
||||
}
|
||||
|
||||
.line-numbers .line-numbers-rows {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
font-size: 100%;
|
||||
left: -3.8em;
|
||||
width: 3em; /* works for line-numbers below 1000 lines */
|
||||
letter-spacing: -1px;
|
||||
border-right: 1px solid #999;
|
||||
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
}
|
||||
|
||||
.line-numbers-rows > span {
|
||||
display: block;
|
||||
counter-increment: linenumber;
|
||||
}
|
||||
|
||||
.line-numbers-rows > span:before {
|
||||
content: counter(linenumber);
|
||||
color: #999;
|
||||
display: block;
|
||||
padding-right: 0.8em;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
div.code-toolbar {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar {
|
||||
position: absolute;
|
||||
top: .3em;
|
||||
right: .2em;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
div.code-toolbar:hover > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Separate line b/c rules are thrown out if selector is invalid.
|
||||
IE11 and old Edge versions don't support :focus-within. */
|
||||
div.code-toolbar:focus-within > .toolbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar .toolbar-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar button {
|
||||
background: none;
|
||||
border: 0;
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
line-height: normal;
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
-webkit-user-select: none; /* for button */
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a,
|
||||
div.code-toolbar > .toolbar button,
|
||||
div.code-toolbar > .toolbar span {
|
||||
color: #bbb;
|
||||
font-size: .8em;
|
||||
padding: 0 .5em;
|
||||
background: #f5f2f0;
|
||||
background: rgba(224, 224, 224, 0.2);
|
||||
box-shadow: 0 2px 0 0 rgba(0,0,0,0.2);
|
||||
border-radius: .5em;
|
||||
}
|
||||
|
||||
div.code-toolbar > .toolbar a:hover,
|
||||
div.code-toolbar > .toolbar a:focus,
|
||||
div.code-toolbar > .toolbar button:hover,
|
||||
div.code-toolbar > .toolbar button:focus,
|
||||
div.code-toolbar > .toolbar span:hover,
|
||||
div.code-toolbar > .toolbar span:focus {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -44,14 +44,19 @@
|
|||
&-cover {
|
||||
border-radius: 8px;
|
||||
margin: 40px -50px;
|
||||
width: 860px;
|
||||
max-width: 860px;
|
||||
width: $max-width;
|
||||
max-width: $max-width;
|
||||
@media #{$media-size-tablet} {
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-excerpt {
|
||||
color: grey;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&-info {
|
||||
margin-top: 30px;
|
||||
font-size: 0.8rem;
|
||||
|
|
@ -86,6 +91,17 @@
|
|||
}
|
||||
}
|
||||
|
||||
&-audio {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
|
||||
audio {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.flag {
|
||||
border-radius: 50%;
|
||||
margin: 0 5px;
|
||||
|
|
@ -105,18 +121,34 @@
|
|||
text-align: center;
|
||||
margin: 0 auto;
|
||||
padding: 5px 10px;
|
||||
background: $light-background;
|
||||
color: $light-color-secondary;
|
||||
font-size: 0.8rem;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
letter-spacing: 0.1em;
|
||||
z-index: 1;
|
||||
// Default
|
||||
background: $light-background;
|
||||
color: $light-color-secondary;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background;
|
||||
color: $dark-color-secondary;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background;
|
||||
color: $light-color-secondary;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background;
|
||||
color: $dark-color-secondary;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background;
|
||||
color: $light-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
|
|
@ -146,7 +178,6 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: $light-background-secondary;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
|
|
@ -154,11 +185,25 @@
|
|||
padding: 0;
|
||||
cursor: pointer;
|
||||
appearance: none;
|
||||
// Default
|
||||
background: $light-background-secondary;
|
||||
|
||||
.dark-theme & {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background: $dark-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background: $light-background-secondary;
|
||||
}
|
||||
|
||||
+ .button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
|
|||
84
themes/hello-friend-ng-clone/assets/scss/_tables.scss
Normal file
84
themes/hello-friend-ng-clone/assets/scss/_tables.scss
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
.post-content {
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 25px auto;
|
||||
font-size: 0.9em;
|
||||
min-width: 400px;
|
||||
max-width: 100%;
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 12px 15px;
|
||||
// Default
|
||||
border: 1px solid $light-table-color;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
border: 1px solid $light-table-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
border: 1px solid $light-table-color;
|
||||
}
|
||||
}
|
||||
|
||||
thead {
|
||||
tr {
|
||||
text-align: left;
|
||||
// Default
|
||||
background-color: $light-table-color;
|
||||
color: $light-color;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: $dark-table-color;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: $light-table-color;
|
||||
color: $light-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
background-color: $dark-table-color;
|
||||
color: $dark-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background-color: $light-table-color;
|
||||
color: $light-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
tbody {
|
||||
tr {
|
||||
// Default
|
||||
border: 1px solid $light-table-color;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
border: 1px solid $light-table-color;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
border: 1px solid $dark-table-color;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
border: 1px solid $light-table-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,24 +1,31 @@
|
|||
@charset "UTF-8";
|
||||
|
||||
/* light theme color */
|
||||
/* Light theme color */
|
||||
$light-background: #fff;
|
||||
$light-background-secondary: #eaeaea;
|
||||
$light-background-header: #fafafa;
|
||||
$light-color: #222;
|
||||
$light-color-secondary: #999;
|
||||
$light-border-color: #dcdcdc;
|
||||
$light-table-color: #dcdcdc;
|
||||
|
||||
/* dark theme colors */
|
||||
$dark-background: #292a2d;
|
||||
/* Dark theme colors */
|
||||
$dark-background: #232425;
|
||||
$dark-background-secondary: #3b3d42;
|
||||
$dark-background-header: #1b1c1d;
|
||||
$dark-color: #a9a9b3;
|
||||
$dark-color-secondary: #73747b;
|
||||
$dark-border-color: #4a4b50;
|
||||
$dark-color-secondary: #b3b3bd;
|
||||
$dark-border-color: #4e4e57;
|
||||
$dark-table-color: #4e4e57;
|
||||
|
||||
$media-size-phone: "(max-width: 684px)";
|
||||
$media-size-tablet: "(max-width: 900px)";
|
||||
|
||||
/* variables for js, must be the same as these in @custom-media queries */
|
||||
/* Variables for js, must be the same as these in @custom-media queries */
|
||||
:root {
|
||||
--phoneWidth: (max-width: 684px);
|
||||
--tabletWidth: (max-width: 900px);
|
||||
}
|
||||
|
||||
/* Content */
|
||||
$max-width: 860px;
|
||||
|
|
@ -14,4 +14,6 @@
|
|||
@import "list";
|
||||
@import "single";
|
||||
@import "footer";
|
||||
@import "sharing-buttons";
|
||||
@import "sharing-buttons";
|
||||
@import "tables";
|
||||
@import "404";
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue