MThakkar121

$padding: 12px

.post
  // Since these max() calls don't use any Sass features other than
  // interpolation, they're compiled to CSS max() calls.
  padding-left: max(#{$padding}, env(safe-area-inset-left))
  padding-right: max(#{$padding}, env(safe-area-inset-right))


.sidebar

MThakkar121

$roboto-font-path: "../fonts/roboto"

@font-face
    // This is parsed as a normal function call that takes a quoted string.
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2")

    font-family: "Roboto"
    font-weight: 100

MThakkar121

/// Computes an exponent.
///
/// @param {number} $base
///   The number to multiply by itself.
/// @param {integer (unitless)} $exponent
///   The number of `$base`s to multiply together.
/// @return {number} `$base` to the power of `$exponent`.
@function pow($base, $exponent)
  $result: 1
  @for $_ from 1 through $exponent

MThakkar121

// This comment won't be included in the CSS.
   This is also commented out.

/* But this comment will, except in compressed mode.

/* It can also contain interpolation:
   1 + 1 = #{1 + 1}

/*! This comment will be included even in compressed mode.

MThakkar121

// This comment won't be included in the CSS.

/* But this comment will, except in compressed mode. */

/* It can also contain interpolation:
 * 1 + 1 = #{1 + 1} */

/*! This comment will be included even in compressed mode. */

p /* Multi-line comments can be written anywhere

MThakkar121

@mixin button-base()
  @include typography(button)
  @include ripple-surface
  @include ripple-radius-bounded

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

MThakkar121

@mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;
    &:hover {

MThakkar121

//Scss syntax
@mixin button-base() {
    @include typography(button);
    @include ripple-surface;
    @include ripple-radius-bounded;
    display: inline-flex;
    position: relative;
    height: $button-height;
    border: none;
    vertical-align: middle;

MThakkar121

Installing Git – the easy way

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

– The Git website

Choose one of the following options.

• Instructions for Windows
• Instructions for Mac
• Instructions for Linux

MThakkar121

Geometric business card with CSS Grid

Playing around with css grid, flexbox, clip-path, and radial-gradient

Recreating the business card template as found here: https://novadonna.me/product/business-card-template-designs-pop-geometric/

A Pen by MThakkar121 on CodePen.

License.