| 1 |
- {"version":3,"sources":["webpack://_N_E/src/pages/tajweedColors.module.scss","webpack://_N_E/src/styles/_breakpoints.scss","webpack://_N_E/src/styles/_theme.scss"],"names":[],"mappings":"AAGA,6BACE,gCAAA,CACA,mCAAA,CACA,iBAAA,CACA,uCAAA,CAGF,gCACE,uCAAA,CACA,SAAA,CACA,aAAA,CC+BA,yCDlCF,gCAKI,SAAA,CAAA,CAIJ,qCACE,YAAA,CACA,wCAAA,CAGF,6BACE,2BAAA,CACA,0BAAA,CACA,yCAAA,CACA,oBAAA,CACA,uCAAA,CEnBA,mCFsBF,6BAEI,wBAAA,CAAA,CErBF,gDFqBE,wBAAA,CEjCF,kCF+BF,6BAKI,wBAAA,CAAA,CEjCF,+CFiCE,wBAAA,CE3BF,mCF8BF,4BAEI,wBAAA,CAAA,CE7BF,+CF6BE,wBAAA,CEzCF,kCFuCF,4BAKI,wBAAA,CAAA,CEzCF,8CFyCE,wBAAA,CEnCF,mCFsCF,4BAEI,wBAAA,CAAA,CErCF,+CFqCE,wBAAA,CEjDF,kCF+CF,4BAKI,wBAAA,CAAA,CEjDF,8CFiDE,wBAAA,CE3CF,mCF8CF,gCAEI,wBAAA,CAAA,CE7CF,mDF6CE,wBAAA,CEzDF,kCFuDF,gCAKI,wBAAA,CAAA,CEzDF,kDFyDE,wBAAA,CEnDF,mCFsDF,8BAEI,wBAAA,CAAA,CErDF,iDFqDE,wBAAA,CEjEF,kCF+DF,8BAKI,wBAAA,CAAA,CEjEF,gDFiEE,wBAAA,CE3DF,mCF8DF,4BAEI,wBAAA,CAAA,CE7DF,+CF6DE,wBAAA,CEzEF,kCFuEF,4BAKI,wBAAA,CAAA,CEzEF,8CFyEE,wBAAA,CEnEF,mCFsEF,8BAEI,wBAAA,CAAA,CErEF,iDFqEE,wBAAA,CEjFF,kCF+EF,8BAKI,wBAAA,CAAA,CEjFF,gDFiFE,wBAAA","file":"static/css/47802d65ab35aedb.css","sourcesContent":["@use \"src/styles/breakpoints\";\n@use \"src/styles/theme\";\n\n.header {\n font-size: var(--font-size-jumbo);\n font-weight: var(--font-weight-bold);\n text-align: center;\n padding-block-end: var(--spacing-medium);\n}\n\n.container {\n padding-block-start: var(--spacing-mega);\n width: 95%;\n margin: 0 auto;\n @include breakpoints.tablet {\n width: 25%;\n }\n}\n\n.colorContainer {\n display: flex;\n padding-block-end: var(--spacing-xxsmall);\n}\n\n.circle {\n height: var(--spacing-large);\n width: var(--spacing-large);\n border-radius: var(--border-radius-circle);\n display: inline-block;\n margin-inline-end: var(--spacing-medium);\n}\n\n.edgham {\n @include theme.light {\n background-color: #afafaf;\n }\n @include theme.dark {\n background-color: #676767;\n }\n}\n.mad-2 {\n @include theme.light {\n background-color: #53bbfc;\n }\n @include theme.dark {\n background-color: #d21ffb;\n }\n}\n.mad-6 {\n @include theme.light {\n background-color: #afafaf;\n }\n @include theme.dark {\n background-color: #676767;\n }\n}\n.mad-2-4-6 {\n @include theme.light {\n background-color: #2c93fc;\n }\n @include theme.dark {\n background-color: #ee30fa;\n }\n}\n.mad-4-5 {\n @include theme.light {\n background-color: #4572fb;\n }\n @include theme.dark {\n background-color: #ff55f1;\n }\n}\n.ekhfa {\n @include theme.light {\n background-color: #fc8e03;\n }\n @include theme.dark {\n background-color: #00b600;\n }\n}\n.qalqala {\n @include theme.light {\n background-color: #fc060a;\n }\n @include theme.dark {\n background-color: #82f200;\n }\n}\n","// For usage see: https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2\n$breakpoints-mobileS: 320px;\n$breakpoints-mobileM: 375px;\n$breakpoints-mobileL: 425px;\n$breakpoints-tablet: 768px;\n$breakpoints-desktop: 1024px;\n\n@mixin mobileS {\n @media only screen and (min-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin smallerThanMobileS {\n @media only screen and (max-width: $breakpoints-mobileS) {\n @content;\n }\n}\n\n@mixin mobileM {\n @media only screen and (min-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin smallerThanMobileM {\n @media only screen and (max-width: $breakpoints-mobileM) {\n @content;\n }\n}\n\n@mixin mobileL {\n @media only screen and (min-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin smallerThanMobileL {\n @media only screen and (max-width: $breakpoints-mobileL) {\n @content;\n }\n}\n\n@mixin tablet {\n @media only screen and (min-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin smallerThanTablet {\n @media only screen and (max-width: $breakpoints-tablet) {\n @content;\n }\n}\n\n@mixin desktop {\n @media only screen and (min-width: $breakpoints-desktop) {\n @content;\n }\n}\n\n@mixin smallerThanDesktop {\n @media only screen and (max-width: $breakpoints-desktop) {\n @content;\n }\n}\n","@mixin dark {\n @media (prefers-color-scheme: dark) {\n @content;\n }\n [data-theme=\"dark\"] & {\n @content;\n }\n}\n\n@mixin light {\n @media (prefers-color-scheme: light) {\n @content;\n }\n [data-theme=\"light\"] & {\n @content;\n }\n}\n\n@mixin sepia {\n [data-theme=\"sepia\"] & {\n @content;\n }\n}\n"],"sourceRoot":""}
|
