New version of hello-friend-ng-clone
This commit is contained in:
parent
2af22c2c10
commit
3a80032b84
609 changed files with 26159 additions and 104 deletions
2159
themes/hello-friend-ng-clone/assets/scss/_flag-icons.scss
Normal file
2159
themes/hello-friend-ng-clone/assets/scss/_flag-icons.scss
Normal file
File diff suppressed because it is too large
Load diff
|
@ -1,50 +1,50 @@
|
|||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/Inter-UI-Regular.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-Regular.woff") format("woff");
|
||||
src: url("fonts/Inter-Regular.woff2") format("woff2"),
|
||||
url("fonts/Inter-Regular.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url("../fonts/Inter-UI-Italic.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-Italic.woff") format("woff");
|
||||
src: url("fonts/Inter-Italic.woff2") format("woff2"),
|
||||
url("fonts/Inter-Italic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: url("../fonts/Inter-UI-Medium.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-Medium.woff") format("woff");
|
||||
src: url("fonts/Inter-Medium.woff2") format("woff2"),
|
||||
url("fonts/Inter-Medium.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 600;
|
||||
src: url("../fonts/Inter-UI-MediumItalic.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-MediumItalic.woff") format("woff");
|
||||
src: url("fonts/Inter-MediumItalic.woff2") format("woff2"),
|
||||
url("fonts/Inter-MediumItalic.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: normal;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 800;
|
||||
src: url("../fonts/Inter-UI-Bold.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-Bold.woff") format("woff");
|
||||
src: url("fonts/Inter-Bold.woff2") format("woff2"),
|
||||
url("fonts/Inter-Bold.woff") format("woff");
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Inter UI';
|
||||
font-family: "Inter";
|
||||
font-style: italic;
|
||||
font-display: auto;
|
||||
font-display: swap;
|
||||
font-weight: 800;
|
||||
src: url("../fonts/Inter-UI-BoldItalic.woff2") format("woff2"),
|
||||
url("../fonts/Inter-UI-BoldItalic.woff") format("woff");
|
||||
src: url("fonts/Inter-BoldItalic.woff2") format("woff2"),
|
||||
url("fonts/Inter-BoldItalic.woff") format("woff");
|
||||
}
|
||||
|
|
|
@ -67,7 +67,7 @@
|
|||
&-item {
|
||||
border-bottom: 1px grey dashed;
|
||||
|
||||
a {
|
||||
&-inner {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
|
|
|
@ -16,6 +16,7 @@
|
|||
|
||||
&__text {
|
||||
font-size: 1.125rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&__cursor {
|
||||
|
|
|
@ -14,7 +14,7 @@ html {
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Roboto",
|
||||
font-family: Inter, -apple-system, BlinkMacSystemFont, "Roboto",
|
||||
"Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-display: auto;
|
||||
font-size: 1rem;
|
||||
|
@ -191,14 +191,14 @@ figure {
|
|||
|
||||
em, i, strong {
|
||||
// Default
|
||||
color: black;
|
||||
color: $light-color-variant;
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: white;
|
||||
color: $dark-color-variant;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
color: black;
|
||||
color: $light-color-variant;
|
||||
}
|
||||
|
||||
[data-theme=dark] & {
|
||||
|
@ -239,7 +239,14 @@ code {
|
|||
}
|
||||
|
||||
pre {
|
||||
background: #212020;
|
||||
[data-theme=dark] & {
|
||||
background-color: $dark-background-secondary;
|
||||
}
|
||||
|
||||
[data-theme=light] & {
|
||||
background-color: $light-background-secondary;
|
||||
}
|
||||
|
||||
padding: 10px 10px 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
|
@ -425,4 +432,4 @@ hr {
|
|||
// Prism JS Additionals
|
||||
.highlight {
|
||||
margin: 30px auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -81,3 +81,85 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.submenu {
|
||||
background: $light-background-header;
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
li a, .dropbtn {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
li.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
padding: 12px 20px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
}
|
|
@ -46,6 +46,7 @@
|
|||
margin: 40px -50px;
|
||||
width: $max-width;
|
||||
max-width: $max-width;
|
||||
overflow: hidden;
|
||||
@media #{$media-size-tablet} {
|
||||
margin: 20px 0;
|
||||
width: 100%;
|
||||
|
@ -230,4 +231,4 @@
|
|||
&.previous .button__icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@ $light-background: #fff;
|
|||
$light-background-secondary: #eaeaea;
|
||||
$light-background-header: #fafafa;
|
||||
$light-color: #222;
|
||||
$light-color-variant: black;
|
||||
$light-color-secondary: #999;
|
||||
$light-border-color: #dcdcdc;
|
||||
$light-table-color: #dcdcdc;
|
||||
|
@ -14,6 +15,7 @@ $dark-background: #232425;
|
|||
$dark-background-secondary: #3b3d42;
|
||||
$dark-background-header: #1b1c1d;
|
||||
$dark-color: #a9a9b3;
|
||||
$dark-color-variant: white;
|
||||
$dark-color-secondary: #b3b3bd;
|
||||
$dark-border-color: #4e4e57;
|
||||
$dark-table-color: #4e4e57;
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
/* Must be loaded before everything else */
|
||||
@import "normalize";
|
||||
@import "prism";
|
||||
@import "flag-icons";
|
||||
|
||||
/* Main stuff */
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
@ -16,4 +18,4 @@
|
|||
@import "footer";
|
||||
@import "sharing-buttons";
|
||||
@import "tables";
|
||||
@import "404";
|
||||
@import "404";
|
Loading…
Add table
Add a link
Reference in a new issue