Nyoom, bye bye Vue
This commit is contained in:
Dane Everitt
parent
109bed4f7d
commit
e69d55ec6f
80 changed files with 2 additions and 5097 deletions
28
resources/styles/components/animations.css
Normal file
28
resources/styles/components/animations.css
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/*! purgecss start ignore */
|
||||
.fade-enter {
|
||||
@apply .opacity-0;
|
||||
}
|
||||
|
||||
.fade-enter-active {
|
||||
@apply .opacity-100;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
.fade-exit {
|
||||
@apply .opacity-100;
|
||||
}
|
||||
|
||||
.fade-exit-active {
|
||||
@apply .opacity-0;
|
||||
transition: opacity 250ms;
|
||||
}
|
||||
|
||||
/** @todo fix this, hides footer stuff */
|
||||
div.route-transition-group {
|
||||
@apply .relative;
|
||||
|
||||
& section {
|
||||
@apply .absolute .w-full .pin-t .pin-l;
|
||||
}
|
||||
}
|
||||
/*! purgecss end ignore */
|
||||
9
resources/styles/components/authentication.css
Normal file
9
resources/styles/components/authentication.css
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
.login-box {
|
||||
@apply .bg-white .shadow-lg .rounded-lg .p-6;
|
||||
|
||||
@screen xsx {
|
||||
@apply .rounded-none;
|
||||
margin-top: 25%;
|
||||
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .2), 0 -15px 30px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
}
|
||||
81
resources/styles/components/filemanager.css
Normal file
81
resources/styles/components/filemanager.css
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
.filemanager {
|
||||
& .header {
|
||||
@apply .flex .text-xs .text-neutral-600 .pb-4 .font-bold .border-b .border-neutral-200 .mb-3 .uppercase;
|
||||
|
||||
& > div:not(:last-of-type) {
|
||||
@apply .pr-4;
|
||||
}
|
||||
}
|
||||
|
||||
& .row {
|
||||
@apply .flex .text-sm .py-3 .text-sm .border .border-transparent .text-black .rounded .no-underline;
|
||||
|
||||
& > div:not(:last-of-type) {
|
||||
@apply .pr-4;
|
||||
}
|
||||
|
||||
&.active-selection, &:hover {
|
||||
@apply .bg-neutral-50 .text-neutral-900;
|
||||
}
|
||||
|
||||
& > .icon {
|
||||
@apply .w-8 .text-center;
|
||||
|
||||
& > svg {
|
||||
@apply .h-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.context-menu {
|
||||
@apply .absolute .bg-white .py-2 .border .border-neutral-300 .shadow-lg .rounded .text-neutral-600 .text-sm .cursor-pointer;
|
||||
|
||||
& > div:not(:last-of-type) {
|
||||
@apply .border-b .border-neutral-100 .pb-2 .mb-2;
|
||||
}
|
||||
|
||||
& .context-row {
|
||||
@apply .flex .flex-row .items-center .py-2 .px-8 .mx-2 .rounded;
|
||||
transition: background-color 50ms linear;
|
||||
|
||||
& > .icon {
|
||||
@apply .flex-none;
|
||||
|
||||
& > svg {
|
||||
@apply .h-4;
|
||||
}
|
||||
}
|
||||
|
||||
& > .action {
|
||||
@apply .flex-auto .pl-2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply .bg-neutral-50 .text-neutral-800;
|
||||
}
|
||||
|
||||
&.danger {
|
||||
@apply .border .border-transparent;
|
||||
transition: border 50ms linear;
|
||||
|
||||
&:hover {
|
||||
@apply .bg-red-50 .border-red-100;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filemanager-breadcrumbs {
|
||||
@apply .px-4 .py-3 .mb-6 .rounded .bg-white .text-neutral-400 .border .border-neutral-100 .shadow;
|
||||
|
||||
& a {
|
||||
@apply .no-underline .text-neutral-400;
|
||||
transition: color 100ms linear;
|
||||
|
||||
&:hover {
|
||||
@apply .text-primary-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
197
resources/styles/components/forms.css
Normal file
197
resources/styles/components/forms.css
Normal file
|
|
@ -0,0 +1,197 @@
|
|||
textarea, select, input, button {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=number]::-webkit-outer-spin-button,
|
||||
input[type=number]::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Styling for other forms throughout the Panel.
|
||||
*/
|
||||
.input, .input-dark {
|
||||
@apply .appearance-none .w-full;
|
||||
min-width: 0;
|
||||
|
||||
&:required, &:invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.input {
|
||||
@apply .p-3 .rounded .border .border-neutral-200 .text-neutral-800;
|
||||
transition: border 150ms linear;
|
||||
|
||||
&:focus {
|
||||
@apply .border-primary-400;
|
||||
}
|
||||
|
||||
&.error {
|
||||
@apply .text-red-600 .border-red-500;
|
||||
}
|
||||
}
|
||||
|
||||
.input:disabled {
|
||||
@apply .bg-neutral-100 .border-neutral-200;
|
||||
}
|
||||
|
||||
.input + .input-help {
|
||||
@apply .text-xs .text-neutral-400 .pt-2;
|
||||
|
||||
&.error {
|
||||
@apply .text-red-600;
|
||||
}
|
||||
}
|
||||
|
||||
.input-dark {
|
||||
@apply .p-3 .bg-neutral-600 .border .border-neutral-500 .text-sm .rounded .text-neutral-200 .shadow-none;
|
||||
transition: border 150ms linear, box-shaodw 150ms ease-in;
|
||||
|
||||
&:focus {
|
||||
@apply .shadow-md .border-neutral-400;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply .border-neutral-400;
|
||||
}
|
||||
|
||||
& + .input-help {
|
||||
@apply .text-xs .text-neutral-400 .mt-2
|
||||
}
|
||||
|
||||
&.error {
|
||||
@apply .text-red-100 .border-red-400;
|
||||
}
|
||||
|
||||
&.error + .input-help {
|
||||
@apply .text-red-400;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
@apply .opacity-75;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
@apply .block .text-xs .uppercase .text-neutral-700 .mb-2;
|
||||
}
|
||||
|
||||
select:not(.appearance-none) {
|
||||
@apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
|
||||
transition: border-color 150ms linear, color 150ms linear;
|
||||
|
||||
&:hover:not(:disabled), &:focus {
|
||||
@apply .outline-none .border-primary-500 .text-neutral-700;
|
||||
}
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
|
||||
&::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ") no-repeat center center;
|
||||
background-size: 1rem;
|
||||
background-position-x: calc(100% - 0.75rem);
|
||||
}
|
||||
|
||||
.input-dark-label {
|
||||
@apply .uppercase .text-neutral-200;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold;
|
||||
|
||||
&:not(.mb-0) {
|
||||
@apply .mb-2;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn {
|
||||
@apply .no-underline;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply .rounded .p-2 .uppercase .tracking-wide .text-sm;
|
||||
transition: all 150ms linear;
|
||||
|
||||
/**
|
||||
* Button Colors
|
||||
*/
|
||||
&.btn-primary {
|
||||
@apply .bg-primary-500 .border-primary-600 .border .text-primary-50;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@apply .bg-primary-600 .border-primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-green {
|
||||
@apply .bg-green-500 .border-green-600 .border .text-green-50;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@apply .bg-green-600 .border-green-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-red {
|
||||
&:not(.btn-secondary) {
|
||||
@apply .bg-red-500 .border-red-600 .text-red-50;
|
||||
}
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@apply .bg-red-600 .border-red-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-grey {
|
||||
@apply .border .border-neutral-600 .bg-neutral-500 .text-neutral-50;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@apply .bg-neutral-600 .border-neutral-700;
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
@apply .border .border-neutral-600 .bg-transparent .text-neutral-200;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
@apply .border-neutral-500 .text-neutral-100;
|
||||
}
|
||||
|
||||
&.btn-red:hover:not(:disabled) {
|
||||
@apply .bg-red-500 .border-red-600 .text-red-50;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Button Sizes
|
||||
*/
|
||||
&.btn-jumbo {
|
||||
@apply .p-4 .w-full;
|
||||
}
|
||||
|
||||
&.btn-lg {
|
||||
@apply .p-4 .text-sm;
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@apply .p-3;
|
||||
}
|
||||
|
||||
&.btn-xs {
|
||||
@apply .p-2 .text-xs;
|
||||
}
|
||||
|
||||
&:disabled, &.disabled {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
120
resources/styles/components/miscellaneous.css
Normal file
120
resources/styles/components/miscellaneous.css
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
code.clean {
|
||||
@apply .font-mono .px-2 .py-1;
|
||||
background-color: #eef1f6;
|
||||
color: #596981;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(0, 0, 0, .1);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Indicators for server online status.
|
||||
*/
|
||||
.indicator {
|
||||
@apply .bg-neutral-800 .border .border-primary-500;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
|
||||
&.online {
|
||||
@apply .bg-green-600 .border-green-500;
|
||||
animation: onlineblink 2s infinite alternate;
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@apply .bg-green-600 .border-red-500;
|
||||
animation: offlineblink 2s infinite alternate;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Usage indicator labels for the server listing.
|
||||
*/
|
||||
.usage {
|
||||
@apply .flex-1 .text-center .relative;
|
||||
|
||||
& > .indicator-title {
|
||||
@apply .text-xs .uppercase .font-hairline .bg-white .absolute .text-primary-500;
|
||||
margin-top:-9px;
|
||||
padding: 0 8px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Styling for elements that contain the core page content.
|
||||
*/
|
||||
.content-box {
|
||||
@apply .bg-white .p-6 .rounded .shadow .border .border-neutral-100;
|
||||
}
|
||||
|
||||
/**
|
||||
* Flex boxes for server listing on user dashboard.
|
||||
*/
|
||||
.server-card-container {
|
||||
@apply .mb-4 .w-full;
|
||||
|
||||
@screen md {
|
||||
@apply .w-1/2 .pr-4;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
@apply .pr-0;
|
||||
}
|
||||
}
|
||||
|
||||
@screen lg {
|
||||
@apply .w-1/3 .pr-4;
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
@apply .pr-4;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n) {
|
||||
@apply .pr-0;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
@apply .flex .flex-col;
|
||||
transition: box-shadow 150ms ease-in;
|
||||
|
||||
&:hover {
|
||||
@apply .shadow-md;
|
||||
}
|
||||
}
|
||||
|
||||
& > div > .server-card {
|
||||
@apply .flex .flex-col .p-4 .border .border-t-4 .border-neutral-100 .bg-white;
|
||||
transition: all 100ms ease-in;
|
||||
|
||||
& .identifier-icon {
|
||||
@apply .select-none .inline-block .rounded-full .text-white .text-center .leading-none .justify-center .w-8 .h-8 .mr-2 .flex .flex-row .items-center;
|
||||
}
|
||||
|
||||
& a, & a:visited {
|
||||
@apply .no-underline .text-neutral-800;
|
||||
}
|
||||
}
|
||||
|
||||
& > div > .footer {
|
||||
@apply .border .border-neutral-100 .border-t-0 .bg-neutral-50 .shadow-inner;
|
||||
}
|
||||
}
|
||||
|
||||
.pillbox {
|
||||
@apply .rounded-full .px-2 .py-1 .text-white .font-medium .leading-none .text-xs;
|
||||
}
|
||||
|
||||
.server-search {
|
||||
@apply .w-full .my-4;
|
||||
|
||||
& > input[type="text"] {
|
||||
@apply .w-full .p-4 .rounded .border .border-neutral-200 .text-neutral-500;
|
||||
transition: border 150ms ease-in;
|
||||
|
||||
&:focus {
|
||||
@apply .border-primary-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
50
resources/styles/components/modal.css
Normal file
50
resources/styles/components/modal.css
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
.modal-mask {
|
||||
@apply .fixed .pin .z-50 .overflow-auto .flex;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
transition: opacity 250ms ease;
|
||||
|
||||
& > .modal-container {
|
||||
@apply .relative .w-full .max-w-md .m-auto .flex-col .flex;
|
||||
|
||||
&.top {
|
||||
margin-top: 15%;
|
||||
}
|
||||
|
||||
& > .modal-close-icon {
|
||||
@apply .absolute .pin-r .p-2 .text-white .cursor-pointer .opacity-50;
|
||||
transition: opacity 150ms linear, transform 150ms ease-in;
|
||||
top: -2.5rem;
|
||||
|
||||
&:hover {
|
||||
@apply .opacity-100;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
|
||||
& > .modal-content {
|
||||
@apply .bg-white .rounded .shadow-md;
|
||||
transition: all 250ms ease;
|
||||
}
|
||||
|
||||
/**
|
||||
* On tiny phone screens make sure there is a margin on the sides and also
|
||||
* center the modal rather than putting it towards the top of the screen.
|
||||
*/
|
||||
@screen smx {
|
||||
width: 90%;
|
||||
.top {
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .modal-container.full-screen {
|
||||
@apply .w-3/4 .mt-32;
|
||||
height: calc(100vh - 16rem);
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
& > .modal-container.w-auto {
|
||||
@apply .w-auto;
|
||||
}
|
||||
}
|
||||
64
resources/styles/components/navigation.css
Normal file
64
resources/styles/components/navigation.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
#navigation {
|
||||
@apply .w-full .bg-neutral-900 .shadow-md;
|
||||
|
||||
& > div {
|
||||
@apply .mx-auto .w-full .flex .items-center;
|
||||
}
|
||||
|
||||
& #logo {
|
||||
@apply .flex-1;
|
||||
|
||||
& > a {
|
||||
@apply .text-2xl .font-header .px-4 .no-underline .text-neutral-200;
|
||||
transition: color 150ms linear;
|
||||
|
||||
&:hover {
|
||||
@apply .text-neutral-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .right-navigation {
|
||||
@apply .flex .h-full .items-center .justify-center;
|
||||
|
||||
& > a {
|
||||
@apply .flex .items-center .h-full .no-underline .text-neutral-300 .px-6;
|
||||
transition: background-color 150ms linear, color 150ms linear, box-shadow 150ms ease-in;
|
||||
|
||||
&.active, &:hover {
|
||||
@apply .text-neutral-100 .bg-black;
|
||||
box-shadow: inset 0 -2px config('colors.cyan-700');
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: inset 0 -2px config('colors.cyan-500');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sub-navigation {
|
||||
@apply .w-full .bg-neutral-700 .shadow;
|
||||
|
||||
.items {
|
||||
@apply .flex .items-center .text-sm .mx-2;
|
||||
|
||||
& > a, & > div {
|
||||
@apply .inline-block .py-3 .px-4 .text-neutral-300 .no-underline;
|
||||
transition: color 150ms linear, box-shadow 150ms ease-in;
|
||||
|
||||
&:not(:first-of-type) {
|
||||
@apply .ml-2;
|
||||
}
|
||||
|
||||
&.active, &:hover {
|
||||
@apply .text-neutral-100;
|
||||
box-shadow: inset 0 -2px config('colors.cyan-700');
|
||||
}
|
||||
|
||||
&.active {
|
||||
box-shadow: inset 0 -2px config('colors.cyan-500');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
46
resources/styles/components/notifications.css
Normal file
46
resources/styles/components/notifications.css
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* Styling to control alert boxes.
|
||||
*/
|
||||
.alert {
|
||||
@apply .p-2 .border .items-center .leading-normal .rounded .flex .w-full .text-sm;
|
||||
|
||||
& > .title {
|
||||
@apply .flex .rounded-full .uppercase .px-2 .py-1 .text-xs .font-bold .mr-3 .leading-none;
|
||||
}
|
||||
|
||||
& > .message {
|
||||
@apply .mr-2 .text-left .flex-auto;
|
||||
}
|
||||
|
||||
&.error {
|
||||
@apply .bg-red-600 .border-red-800 .text-red-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-red-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
@apply .bg-primary-600 .border-primary-800 .text-primary-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-primary-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
@apply .bg-green-600 .border-green-800 .text-green-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-green-500;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply .bg-yellow-600 .border-yellow-800 .text-yellow-50;
|
||||
|
||||
& > .title {
|
||||
@apply .bg-yellow-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
91
resources/styles/components/spinners.css
Normal file
91
resources/styles/components/spinners.css
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
.spinner {
|
||||
@apply .h-4 .relative .bg-transparent;
|
||||
pointer-events: none;
|
||||
|
||||
&.spinner-xl {
|
||||
@apply .h-16;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@apply .border-2 .border-neutral-400 .absolute .block .h-4 .w-4 .rounded-full;
|
||||
animation: spinners--spin 500ms infinite linear;
|
||||
border-top-color: transparent !important;
|
||||
border-right-color: transparent !important;
|
||||
content: '';
|
||||
left: calc(50% - (1em / 2));
|
||||
}
|
||||
|
||||
&.spinner-relative:after {
|
||||
@apply .relative;
|
||||
}
|
||||
|
||||
&.spinner-xl:after {
|
||||
@apply .h-16 .w-16;
|
||||
left: calc(50% - (4rem / 2));
|
||||
}
|
||||
|
||||
/**
|
||||
* Speeds
|
||||
*/
|
||||
&.spin-slow:after {
|
||||
animation: spinners--spin 1200ms infinite linear;
|
||||
}
|
||||
|
||||
/**
|
||||
* Spinner Colors
|
||||
*/
|
||||
&.blue:after, &.text-blue:after {
|
||||
@apply .border-primary-500;
|
||||
}
|
||||
|
||||
&.white:after, &.text-white:after {
|
||||
@apply .border-white;
|
||||
}
|
||||
|
||||
&.spinner-thick:after {
|
||||
@apply .border-4;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinners--spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.spinner-circle {
|
||||
@apply .w-8 .h-8;
|
||||
border: 3px solid hsla(211, 12%, 43%, 0.2);
|
||||
border-top-color: hsl(211, 12%, 43%);
|
||||
border-radius: 50%;
|
||||
animation: spin 1s cubic-bezier(0.55, 0.25, 0.25, 0.70) infinite;
|
||||
|
||||
&.spinner-sm {
|
||||
@apply .w-4 .h-4 .border-2;
|
||||
}
|
||||
|
||||
&.spinner-lg {
|
||||
@apply .w-16 .h-16;
|
||||
border-width: 6px;
|
||||
}
|
||||
|
||||
&.spinner-blue {
|
||||
border: 3px solid hsla(212, 92%, 43%, 0.2);
|
||||
border-top-color: hsl(212, 92%, 43%);
|
||||
}
|
||||
|
||||
&.spinner-white {
|
||||
border: 3px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: rgb(255, 255, 255);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
17
resources/styles/components/typography.css
Normal file
17
resources/styles/components/typography.css
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@import url('//fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css?family=IBM+Plex+Sans:500&display=swap');
|
||||
|
||||
body {
|
||||
@apply .text-neutral-200;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
@apply .font-medium;
|
||||
letter-spacing: 0;
|
||||
font-family: 'IBM Plex Sans', -apple-system, '"Roboto"', 'system-ui', 'sans-serif';
|
||||
}
|
||||
|
||||
p {
|
||||
@apply .text-neutral-200;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue