Trouble implementing a gradient background

Issue I am trying to implement this design on my website- https://kevinhufnagl.com/how-to-stripe-website-gradient-effect/ I have copied most of the code but I am getting an error in the scss code. –section-gap: calc( #{$standard_space}); –gradient-padding:120px; –gradient-title-margin: 100px; –section-skew-Y: -12deg; –section-angle-sin: 0.212; –transform-origin-x:

Continue reading

how do I use a bundle.css file?

Issue I created a bundle.css file from multiple sass file sources using gulp 4, and the sourceMaps were added to it in this function: const bundleSass = () => { return src(‘./src/scss/**/*.scss’) .pipe(sourceMaps.init()) .pipe(sass().on(‘error’, sass.logError)) .pipe(minifyCss()) .pipe(sourceMaps.write()) .pipe(concat(‘bundle.css’)) .pipe(dest(‘./dist/static/css’)) }

Continue reading

Using nth-child within another nth-child

Issue <table> <tr> <th>heading a</th> <th>heading b</th> <th>heading c</th> </tr> <tbody> <tr> <td>Blue</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>White</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> <tr> <td>Blue</td> <td>data 2</td> <td>data 3</td> <td>data 4</td> </tr> </tbody> </table>

Continue reading

Issue with node-sass while compiling asset – npm

Issue I am getting this error on npm run prod npm run prod > @ prod /opt/atlassian/pipelines/agent/build > encore production Running webpack … ERROR Failed to compile with 2 errors4:15:08 PM error in ./web/assets/src/scss/styles.scss Module build failed: $navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2))

Continue reading

CSS grid-template-columns stops working when used with auto-fit/auto-fill

Issue I have this component: <template> <div id="cms-img-upload-multiple" class="cms-img-upload-multiple"> <input class="btn-upload" v-if="!state.images.length" type="file" @change="displayImage" multiple> <div class="img-wrap" v-else> <div class="img-loop-wrap" v-for="(image, index) in state.images"> <div class="img-con-wrap" v-if="state.images[index]"> <img class="img-display" :src="image"> <fa class="cancel-icon" @click="clearDisplay(index)" :icon="[ ‘fas’, ‘circle-xmark’ ]"></fa> </div> </div> </div>

Continue reading

Compass Vertical Rhythm

Issue I have a <tr> with 4 <th>‘s inside and without borders the <tr> and <th>‘s are all 22 pixels tall which equals my $base-line-height – Perfect. However, when I add +horizontal-borders(1px, 0) the <th>‘s show up as 23 pixels

Continue reading

Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown

Issue This is my stylelint.config.js, module.exports = { extends: [‘stylelint-config-standard-scss’], rules: { ‘at-rule-no-unknown’: [ true, { ignoreAtRules: [‘tailwind’] } ], ‘declaration-block-trailing-semicolon’: null, ‘scss/at-extend-no-missing-placeholder’: null, ‘color-function-notation’: ‘legacy’, ‘selector-pseudo-class-no-unknown’: [ true, { ignorePseudoClasses: [‘deep’] } ] } } And when I run

Continue reading

Unexpected unknown at-rule "@tailwind" scss/at-rule-no-unknown

Issue This is my stylelint.config.js, module.exports = { extends: [‘stylelint-config-standard-scss’], rules: { ‘at-rule-no-unknown’: [ true, { ignoreAtRules: [‘tailwind’] } ], ‘declaration-block-trailing-semicolon’: null, ‘scss/at-extend-no-missing-placeholder’: null, ‘color-function-notation’: ‘legacy’, ‘selector-pseudo-class-no-unknown’: [ true, { ignorePseudoClasses: [‘deep’] } ] } } And when I run

Continue reading