Fix browser compatibility issues

This commit is contained in:
Cole Bemis 2017-05-30 18:23:18 -07:00
parent ffdda30107
commit dbd2643623

View File

@ -1,16 +1,3 @@
:root {
--accent: #4353FF;
--accent-darker: #3E4DED;
}
.bg-accent {
background-color: var(--accent);
}
.hover-bg-accent-darker:hover {
background-color: var(--accent-darker);
}
.rubik {
font-family: "Rubik", sans-serif;
}
@ -20,6 +7,14 @@
-moz-osx-font-smoothing: grayscale;
}
.bg-accent {
background-color: #4353FF;
}
.hover-bg-accent-darker:hover {
background-color: #3E4DED;
}
.button {
display: inline-block;
padding: 1rem 2rem;
@ -39,12 +34,6 @@
text-overflow: ellipsis;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-gap: 1rem;
}
.svg [stroke] {
stroke: currentColor;
}
@ -52,3 +41,45 @@
.svg [fill]:not([fill=none]) {
fill: currentColor;
}
.icon-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -0.5rem -1rem;
}
.icon-grid li {
width: 100%;
padding: 0 0.5rem 1rem;
}
/* medium breakpoint */
@media (min-width: 30em) {
.icon-grid li {
width: 50%;
}
}
/* large breakpoint */
@media (min-width: 60em) {
.icon-grid li {
width: 25%;
}
}
/* if supported, use grid layout */
@supports (display: grid) {
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
grid-gap: 1rem;
margin: 0;
}
/* override default styles */
.icon-grid li {
width: 100%;
padding: 0;
}
}