dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-27 14:02:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add spiceFont mixin

Browse source
This commit is contained in:
Send_Nukez 2021-11-11 01:23:21 +01:00
parent fc6ac2e35c
commit d1d15d2425
2 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/styles/Fonts.scss
View file

@ -4,7 +4,7 @@ $font-names: (
"glue": "GoogleSans", "glue": "GoogleSans",
"info": "Roboto" "info": "Roboto"
); );
$font-styles: ( $font-weights: (
"Thin": 100, "Thin": 100,
"Light": 300, "Light": 300,
"Regular": 400, "Regular": 400,
@ -13,8 +13,9 @@ $font-styles: (
"Black": 900 "Black": 900
); );
// add @font-face rules
@each $prefix, $font in $font-names { @each $prefix, $font in $font-names {
@each $style, $weight in $font-styles { @each $style, $weight in $font-weights {
@font-face { @font-face {
font-family: $font; font-family: $font;
font-weight: $weight; font-weight: $weight;
@ -24,6 +25,30 @@ $font-styles: (
} }
} }
// spiceFont mixin
@mixin spiceFont($type: "glue", $size: null, $weight: null) {
@if map-has-key($font-names, $type) {
font-family: var(--#{$type}-font-family);
} @else {
@error "$type is invalid";
}
@if $size != null {
font-size: $size;
}
@if $weight != null {
@if type-of($weight) == "number" and unit($weight) == "" {
font-weight: $weight;
} @else if map-has-key($font-weights, $weight) {
font-weight: #{map-get($font-weights, $weight)};
} @else {
@error "$weight is invalid";
}
}
}
// set font variables
body { body {
--glue-font-family: #{map-get($font-names, "glue")}, #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; --glue-font-family: #{map-get($font-names, "glue")}, #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;
--info-font-family: #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif; --info-font-family: #{map-get($font-names, "info")}, spotify-circular, spotify-circular-cyrillic, spotify-circular-arabic, spotify-circular-hebrew, Helvetica Neue, helvetica, arial, Hiragino Kaku Gothic Pro, Meiryo, MS Gothic, sans-serif;

11
src/styles/main.scss
View file

@ -51,7 +51,7 @@
.main-type-ballad, .main-type-ballad,
.main-type-balladBold, .main-type-balladBold,
.main-type-canon { .main-type-canon {
font-family: var(--info-font-family); @include spiceFont("info");
letter-spacing: normal; letter-spacing: normal;
} }
@ -60,7 +60,7 @@
} }
.lyrics-lyricsContainer-LyricsLine { .lyrics-lyricsContainer-LyricsLine {
font-family: var(--glue-font-family); @include spiceFont("glue");
letter-spacing: -0.03em !important; letter-spacing: -0.03em !important;
} }
@ -836,7 +836,6 @@ li.GlueDropTarget {
.main-nowPlayingWidget-nowPlaying { .main-nowPlayingWidget-nowPlaying {
justify-content: center; justify-content: center;
// Workaround for #73 (https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/73)
& button { & button {
color: spiceColor("subtext"); color: spiceColor("subtext");
@ -901,9 +900,9 @@ li.GlueDropTarget {
.main-collectionLinkButton-collectionLinkText, .main-collectionLinkButton-collectionLinkText,
.main-createPlaylistButton-text, .main-createPlaylistButton-text,
.main-navBar-navBarLink > span { .main-navBar-navBarLink > span,
font-size: 14px; .main-rootlist-rootlistItemLink > span {
font-weight: 400; @include spiceFont("info", 14px, "Regular");
letter-spacing: normal; letter-spacing: normal;
line-height: 20px; line-height: 20px;
text-transform: none; text-transform: none;