Asta Valentaite

Grid 

<h1>Not much to see here...</h1>
 
<h1>Not much to see here...</h1>
 
{
  "siteTitle": "Asta Valentaite",
  "copyright": "© 2017 Asta Valentaite. All rights reserved.",
  "craft": {
    "app": {
      "config": {
        "general": {
          "custom": {
            "objects": "/02-objects/",
            "global": "../03-global/",
            "components": "/04-components/",
            "pages": "/05-pages/",
            "macros": "/macros/",
            "wrapper": "/wrapper/"
          }
        }
      }
    }
  },
  "sitemenu": [
    {
      "title": "About",
      "slug": "/components/preview/about"
    },
    {
      "title": "Fashion",
      "slug": "/components/preview/press"
    },
    {
      "title": "Beauty",
      "slug": "/components/preview/post"
    },
    {
      "title": "Lifestyle",
      "slug": "/components/preview/vertical"
    },
    {
      "title": "Collaborations",
      "slug": "/components/preview/collaborations"
    },
    {
      "title": "Press",
      "slug": "/components/preview/press"
    }
  ]
}
  • Content: 
    @include mq($from: breakpoint('md')) {
	.md\:base-grid {
		@apply .px-0;

		display: grid;
		grid-template-columns: repeat(12, 1fr);
		grid-template-rows: auto;
		max-width: 100%;
	}

	.md\:grid-inset-r {
		grid-column: 7 / 12;
	}

	.md\:grid-inset-l {
		grid-column: 2 / 9;
	}

	.md\:grid-edge-l {
		grid-column: 1 / 8;
	}

	.md\:grid-edge-r {
		grid-column: 5 / 13;
	}
}

@include mq($from: breakpoint('xl')) {
	.xl\:base-grid {
		grid-template-columns: 1fr ($width / 12) repeat(12, #{($width / 12)}) ($width / 12) 1fr;
	}

	.xl\:grid-inset-r {
		grid-column: 10 / 16;
	}

	.xl\:grid-inset-l {
		grid-column: 2 / 9;
	}

	.xl\:grid-edge-l {
		grid-column: 1 / 9;
	}

	.xl\:grid-edge-r {
		grid-column: 8 / 17;
	}
}
  • URL: /components/raw/grid/_grid.scss
  • Filesystem Path: src/templates/01-base/grid/_grid.scss
  • Size: 716 Bytes

There are no notes for this item.