Skip to content

Instantly share code, notes, and snippets.

@codingnninja
Created Dec 3, 2021
Embed
What would you like to do?
html {
--black: #000;
--white: #fff;
--dark: #A4AFBF;
--light: #DAD4F1;
--lighter: var(--white);
--primary: #7B16FF;
--primary-light: #DDD9FF;
--primary-trans: rgba(123,22,255,0.4);
--orange: #E17055;
--green: #14c04d;
--bg: var(--white);
--color: var(--lighter); }
*, *:before, *:after {
padding: 0;
margin: 0;
box-sizing: border-box; }
html {
font-size: 62.5%; }
html, body {
width: 100%;
height: 100%; }
body {
color: var(--color);
background: var(--bg);
font-family: 'Overpass Mono', system-ui;
font-size: 1.6rem; }
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
font-family: 'Oswald', system-ui;
letter-spacing: 0.05em;
margin-top: 0.9rem;
margin-bottom: 0.9rem;
text-transform: uppercase; }
a {
color: var(--primary);
border-radius: 0.45rem;
display: inline-block;
text-decoration: none;
transition: all 110ms ease-out 0s; }
a:hover {
background: var(--primary-trans);
color: var(--primary-light);
box-shadow: 0px 0px 0px 0.45rem var(--primary-trans); }
button, textarea, input, select {
font-family: inherit;
color: inherit; }
button:active, button:focus, textarea:active, textarea:focus, input:active, input:focus, select:active, select:focus {
outline: 0; }
button, select {
cursor: pointer; }
.container {
width: 100%;
max-width: 960px;
margin: auto;
padding: 1.8rem 1.8rem 3.6rem; }
.row {
display: grid;
grid-template-columns: 3fr;
grid-column-gap: 1.8rem;
grid-row-gap: 1.8rem;
position: relative; }
@media screen and (max-width: 700px) {
.row {
grid-template-columns: 1fr; } }
.header {
padding: 1.8rem 0;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.2rem;
position: relative; }
.header:before {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 0.225rem;
background: var(--primary-trans); }
.card {
border-radius: 0.9rem;
background: var(--white);
width: 100%;
margin-bottom: 1.8rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 0.1125rem; }
.card__body, .card__header {
padding: 2.7rem; }
@media screen and (max-width: 700px) {
.card__body, .card__header {
padding: 0.9rem; } }
.card__header {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 0; }
@media screen and (max-width: 700px) {
.card__header {
flex-direction: column; } }
.logo {
display: inline-block;
width: 100%;
max-width: 14.4rem;
user-select: none; }
.list {
margin: 0;
padding: 0;
list-style-type: none; }
.list__item {
padding: 2.7rem;
box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; }
.list__grid {
display: grid;
grid-template-columns: 7.2rem 3fr;
grid-column-gap: 2.7rem; }
@media screen and (max-width: 700px) {
.list__grid {
grid-template-columns: 7.2rem 1fr;
grid-column-gap: 7.2rem; } }
.media {
display: inline-flex;
align-items: center; }
.media__content {
padding-left: 0.9rem;
color: var(--dark); }
.media__title {
margin-bottom: 0.45rem; }
@media screen and (max-width: 700px) {
.media__title {
font-size: 1.4rem; } }
.avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 5.4rem;
height: 5.4rem;
border-radius: 50%;
background: var(--lighter);
color: var(--dark);
margin-right: 1.8rem; }
@media screen and (max-width: 700px) {
.avatar {
width: 3.6rem;
height: 3.6rem;
margin-right: 0; } }
.avatar--lg {
width: 9rem;
height: 9rem; }
.button {
display: inline-block;
background: var(--dark);
border: 0;
border-radius: 0.45rem;
padding: 1.35rem 2.25rem;
transition: all 100ms ease-out 0s; }
.button--block {
display: block;
width: 100%; }
.button:hover, .button:focus {
filter: brightness(0.9); }
.button:focus {
box-shadow: 0px 0px 0px 0.45rem var(--primary-trans); }
.button:active {
box-shadow: 0px 0px 0px 0.45rem var(--primary-trans), inset 0px 0px 0.9rem rgba(0, 0, 0, 0.2);
filter: brightness(0.8); }
.select, .price, .quantity {
background: transparent;
color: #444;
border: 1px solid #f1d3f1;
padding: 1.35rem;
appearance: none;
font-size: 1.35rem;
transition: all 120ms ease-out 0s; }
.select:hover, .price:hover, .quantity:hover {
background: var(--darkest); }
.button--dark {
background: var(--dark); }
.button--light {
background: var(--lighter); }
.button--orange {
background: var(--orange); }
.button--primary {
background: var(--primary); }
.button--success {
background: var(--green); }
.button--transparent {
background: transparent; }
.text--title {
font-family: 'Oswald', system-ui; }
.text--left {
text-align: left; }
.text--center {
text-align: center; }
.text--right {
text-align: right; }
.bg--dark {
background: var(--dark) !important; }
.text--dark {
color: var(--dark) !important; }
.bg--light {
background: var(--lighter) !important; }
.text--light {
color: var(--lighter) !important; }
.bg--orange {
background: var(--orange) !important; }
.text--orange {
color: var(--orange) !important; }
.bg--primary {
background: var(--primary) !important; }
.text--primary {
color: var(--primary) !important; }
.bg--success {
background: var(--green) !important; }
.text--success {
color: var(--green) !important; }
.bg--transparent {
background: transparent !important; }
.text--transparent {
color: transparent !important; }
.display--flex {
display: flex; }
.align--center {
align-items: center; }
.justify--center {
justify-content: center; }
.align--flex-end {
align-items: flex-end; }
.justify--flex-end {
justify-content: flex-end; }
.align--flex-start {
align-items: flex-start; }
.justify--flex-start {
justify-content: flex-start; }
.align--space-between {
align-items: space-between; }
.justify--space-between {
justify-content: space-between; }
.text--small {
font-size: 1.4rem; }
.pl--2 {
padding-left: 0.225rem; }
.ml--2 {
margin-left: 0.225rem; }
.pr--2 {
padding-right: 0.225rem; }
.mr--2 {
margin-right: 0.225rem; }
.pb--2 {
padding-bottom: 0.225rem; }
.mb--2 {
margin-bottom: 0.225rem; }
.pt--2 {
padding-top: 0.225rem; }
.mt--2 {
margin-top: 0.225rem; }
.pl--4 {
padding-left: 0.45rem; }
.ml--4 {
margin-left: 0.45rem; }
.pr--4 {
padding-right: 0.45rem; }
.mr--4 {
margin-right: 0.45rem; }
.pb--4 {
padding-bottom: 0.45rem; }
.mb--4 {
margin-bottom: 0.45rem; }
.pt--4 {
padding-top: 0.45rem; }
.mt--4 {
margin-top: 0.45rem; }
.pl--8 {
padding-left: 0.9rem; }
.ml--8 {
margin-left: 0.9rem; }
.pr--8 {
padding-right: 0.9rem; }
.mr--8 {
margin-right: 0.9rem; }
.pb--8 {
padding-bottom: 0.9rem; }
.mb--8 {
margin-bottom: 0.9rem; }
.pt--8 {
padding-top: 0.9rem; }
.mt--8 {
margin-top: 0.9rem; }
.pl--16 {
padding-left: 1.8rem; }
.ml--16 {
margin-left: 1.8rem; }
.pr--16 {
padding-right: 1.8rem; }
.mr--16 {
margin-right: 1.8rem; }
.pb--16 {
padding-bottom: 1.8rem; }
.mb--16 {
margin-bottom: 1.8rem; }
.pt--16 {
padding-top: 1.8rem; }
.mt--16 {
margin-top: 1.8rem; }
.pl--24 {
padding-left: 2.7rem; }
.ml--24 {
margin-left: 2.7rem; }
.pr--24 {
padding-right: 2.7rem; }
.mr--24 {
margin-right: 2.7rem; }
.pb--24 {
padding-bottom: 2.7rem; }
.mb--24 {
margin-bottom: 2.7rem; }
.pt--24 {
padding-top: 2.7rem; }
.mt--24 {
margin-top: 2.7rem; }
.pl--32 {
padding-left: 3.6rem; }
.ml--32 {
margin-left: 3.6rem; }
.pr--32 {
padding-right: 3.6rem; }
.mr--32 {
margin-right: 3.6rem; }
.pb--32 {
padding-bottom: 3.6rem; }
.mb--32 {
margin-bottom: 3.6rem; }
.pt--32 {
padding-top: 3.6rem; }
.mt--32 {
margin-top: 3.6rem; }
/*# sourceMappingURL=style.css.map */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment