parent
f6cab31474
commit
919afcbcfc
23 changed files with 1226 additions and 0 deletions
60
packages/core/src/_animations.scss
Normal file
60
packages/core/src/_animations.scss
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
@use "./mixins";
|
||||
|
||||
@include mixins.responsive using ($breakpoint, $size) {
|
||||
.anim-#{$breakpoint}-none {
|
||||
animation: none !important;
|
||||
}
|
||||
|
||||
.anim-group-#{$breakpoint}-none > * {
|
||||
animation: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hover {
|
||||
from {
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
transform: translate(0, var(--anim-translation-value));
|
||||
}
|
||||
}
|
||||
|
||||
$anim-base-offset: -1s;
|
||||
|
||||
.anim-idle-hover {
|
||||
--anim-translation-value: var(--prj-spacing-1);
|
||||
--anim-offset: 0s;
|
||||
animation: hover 1.5s ease-in-out var(--anim-offset) infinite alternate;
|
||||
}
|
||||
|
||||
.anim-idle-hover-group {
|
||||
& > * {
|
||||
@extend .anim-idle-hover;
|
||||
}
|
||||
|
||||
@for $index from 1 through 20 {
|
||||
$anim-offset: $anim-base-offset * $index;
|
||||
& > :nth-child(#{$index}n) {
|
||||
--anim-offset: #{$anim-offset};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.anim-hover-zoom {
|
||||
transition: scale 0.2s;
|
||||
&:hover {
|
||||
scale: 1.05;
|
||||
}
|
||||
}
|
||||
|
||||
.anim-hover-translate {
|
||||
--anim-translation-value: -5px;
|
||||
--anim-shadow-color: var(--prj-accent-bg);
|
||||
transition: translate 0.2s;
|
||||
|
||||
&:hover {
|
||||
translate: var(--anim-translation-value) var(--anim-translation-value);
|
||||
box-shadow: calc(var(--anim-translation-value) * -1)
|
||||
calc(var(--anim-translation-value) * -1) 0px 0px var(--anim-shadow-color);
|
||||
}
|
||||
}
|
||||
17
packages/core/src/_mixins.scss
Normal file
17
packages/core/src/_mixins.scss
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
@use "./tokens" as *;
|
||||
|
||||
@mixin responsive {
|
||||
@each $breakpoint, $size in $msp-breakpoints {
|
||||
@media screen and (min-width: $size) {
|
||||
@content ($breakpoint, $size);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin responsive-steps($from, $to) {
|
||||
@include responsive using ($breakpoint, $size) {
|
||||
@for $index from $from through $to {
|
||||
@content ($breakpoint, $index);
|
||||
}
|
||||
}
|
||||
}
|
||||
87
packages/core/src/_tokens.scss
Normal file
87
packages/core/src/_tokens.scss
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
@use "sass:color";
|
||||
|
||||
/* Using catppuccin for now, make a theme switcher later */
|
||||
@use "../themes/catppuccin/catppuccin";
|
||||
|
||||
@function getColor($color) {
|
||||
$ctp-theme: map-get(catppuccin.$palette, "macchiato");
|
||||
@return map-get($ctp-theme, $color);
|
||||
}
|
||||
|
||||
/*
|
||||
╭───────────────────────────────────────────────────────────╮
|
||||
│ Mini-Strap Design Tokens │
|
||||
╰───────────────────────────────────────────────────────────╯
|
||||
*/
|
||||
|
||||
// ── Structure and convention ────────────────────────────────────────────
|
||||
|
||||
/*
|
||||
* The token follow the following syntax: "prefix-group-property-value", where:
|
||||
* - prefix: always "msp" the project prefix to avoid clashes with other styles.
|
||||
* - group: the topic, Ex: "border", "color", "space".
|
||||
* - property: the property of the group we are modifying. Optional.
|
||||
* - value: depends of the property, but its the final modifier and the actual value.
|
||||
* */
|
||||
|
||||
/* Taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
||||
$msp-breakpoints: (
|
||||
"sm": 640px,
|
||||
"md": 768px,
|
||||
"lg": 1024px,
|
||||
"xl": 1280px,
|
||||
"2xl": 1536px,
|
||||
);
|
||||
|
||||
$spacings: (
|
||||
0 "--msp-spacing-0" 0,
|
||||
1 "--msp-spacing-1" 0.25rem,
|
||||
2 "--msp-spacing-2" 0.5rem,
|
||||
3 "--msp-spacing-3" 1rem,
|
||||
4 "--msp-spacing-4" 2rem,
|
||||
5 "--msp-spacing-5" 3rem
|
||||
);
|
||||
|
||||
$border-radius: 0.5rem;
|
||||
|
||||
// Native CSS Variables to allow overridings and usage in external stylesheets
|
||||
:root {
|
||||
/* Variables prefixed with prj to avoid collisions */
|
||||
|
||||
/* Colors are inspired by Material Design: https://m2.material.io/design/color/the-color-system.html */
|
||||
--msp-bg: #{getColor("mantle")};
|
||||
--msp-bg-transparent: #{color.scale(getColor("mantle"), $alpha: -10%)};
|
||||
--msp-shadow: #{getColor("crust")};
|
||||
--msp-text: #{getColor("text")};
|
||||
|
||||
--msp-surface-1: #{getColor("base")};
|
||||
--msp-surface-2: #{darken(getColor("surface0"), 2%)};
|
||||
--msp-surface-3: #{getColor("surface1")};
|
||||
--msp-surface-text: #{getColor("text")};
|
||||
|
||||
--msp-link-text: #{getColor("teal")};
|
||||
|
||||
--msp-accent-bg: #{getColor("teal")};
|
||||
--msp-accent-text: #{getColor("base")};
|
||||
|
||||
--msp-primary: #{getColor("teal")};
|
||||
--msp-primary-text: #{getColor("base")};
|
||||
|
||||
--msp-secondary: #{getColor("mauve")};
|
||||
--msp-secondary-text: #{getColor("base")};
|
||||
|
||||
--msp-danger: #{getColor("red")};
|
||||
--msp-danger-text: #{getColor("base")};
|
||||
|
||||
--msp-disabled: #{getColor("red")};
|
||||
--msp-disabled-text: rgba(#{getColor("raw")}, 0.5);
|
||||
|
||||
--msp-input: #{getColor("text")};
|
||||
--msp-input-text: #{getColor("base")};
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
#{$variable}: #{$value};
|
||||
}
|
||||
|
||||
--msp-border-radius: #{$border-radius};
|
||||
}
|
||||
329
packages/core/src/_utils.scss
Normal file
329
packages/core/src/_utils.scss
Normal file
|
|
@ -0,0 +1,329 @@
|
|||
@use "./tokens" as *;
|
||||
@use "./mixins";
|
||||
|
||||
.position-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.position-sticky {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.d-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.visually-hidden {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.d-#{$breakpoint}-none {
|
||||
display: none;
|
||||
}
|
||||
.d-#{$breakpoint}-block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.d-#{$breakpoint}-flex {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-eq > * {
|
||||
flex: 100%;
|
||||
}
|
||||
|
||||
.flex-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
.flex-#{$breakpoint}-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.vstack {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
gap: var(--prj-gap);
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vstack-reverse {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.flex-grow {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.flex-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.flex-#{$breakpoint}-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex-#{$breakpoint}-nowrap {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.justify-content-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.justify-content-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.grid {
|
||||
--prj-gap: var(--prj-spacing-3);
|
||||
--prj-columns: repeat(3, 1fr);
|
||||
--prj-min-col-width: 150px;
|
||||
display: grid;
|
||||
grid-template-columns: var(--prj-columns);
|
||||
gap: var(--prj-gap);
|
||||
}
|
||||
|
||||
@mixin grid-cols($amount) {
|
||||
--prj-columns: repeat(#{$amount}, minmax(var(--prj-min-col-width), 1fr));
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} {
|
||||
@include grid-cols($i);
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(1, 12) using ($breakpoint, $index) {
|
||||
.grid-#{$breakpoint}-cols-#{$index} {
|
||||
@include grid-cols($index);
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyle {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.text-justify {
|
||||
text-align: justify;
|
||||
text-justify: inter-word;
|
||||
}
|
||||
|
||||
.text-start {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-end {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.align-start {
|
||||
vertical-align: start;
|
||||
}
|
||||
|
||||
.align-center {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.align-end {
|
||||
vertical-align: end;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
.overflow-x-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.overflow-y-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
.h-auto {
|
||||
height: auto;
|
||||
}
|
||||
@for $i from 0 through 100 {
|
||||
.w-#{$i} {
|
||||
width: percentage(calc($i / 100));
|
||||
}
|
||||
.h-#{$i} {
|
||||
height: percentage(calc($i / 100));
|
||||
}
|
||||
}
|
||||
|
||||
@include mixins.responsive-steps(0, 100) using ($breakpoint, $index) {
|
||||
.w-#{$breakpoint}-#{$index} {
|
||||
width: percentage(calc($index / 100));
|
||||
}
|
||||
|
||||
.h-#{$breakpoint}-#{$index} {
|
||||
height: percentage(calc($index / 100));
|
||||
}
|
||||
}
|
||||
|
||||
@mixin spacing-utils($name, $value, $breakpoint: false) {
|
||||
@if $breakpoint {
|
||||
$name: "#{$breakpoint}-#{$name}";
|
||||
}
|
||||
|
||||
.m-#{$name} {
|
||||
margin: $value !important;
|
||||
}
|
||||
.mx-#{$name} {
|
||||
margin-left: $value !important;
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.my-#{$name} {
|
||||
margin-top: $value !important;
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.mt-#{$name} {
|
||||
margin-top: $value !important;
|
||||
}
|
||||
.mb-#{$name} {
|
||||
margin-bottom: $value !important;
|
||||
}
|
||||
.ml-#{$name} {
|
||||
margin-left: $value !important;
|
||||
}
|
||||
.mr-#{$name} {
|
||||
margin-right: $value !important;
|
||||
}
|
||||
.p-#{$name} {
|
||||
padding: $value !important;
|
||||
}
|
||||
.px-#{$name} {
|
||||
padding-left: $value !important;
|
||||
padding-right: $value !important;
|
||||
}
|
||||
.py-#{$name} {
|
||||
padding-top: $value !important;
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pt-#{$name} {
|
||||
padding-top: $value !important;
|
||||
}
|
||||
.pb-#{$name} {
|
||||
padding-bottom: $value !important;
|
||||
}
|
||||
.pl-#{$name} {
|
||||
padding-left: $value !important;
|
||||
}
|
||||
.pr-#{$name} {
|
||||
padding-right: $value !important;
|
||||
}
|
||||
|
||||
.gap-#{$name} {
|
||||
--prj-gap: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@include spacing-utils(auto, auto);
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
@include spacing-utils(auto, auto);
|
||||
}
|
||||
|
||||
@each $index, $variable, $value in $spacings {
|
||||
@include spacing-utils($index, var(#{$variable}));
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
@include spacing-utils($index, var(#{$variable}), $breakpoint);
|
||||
}
|
||||
}
|
||||
|
||||
.shadow-0 {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.shadow-1 {
|
||||
box-shadow: 10px 10px 5px 0px var(--prj-shadow);
|
||||
}
|
||||
|
||||
.border-radius {
|
||||
border-radius: var(--prj-border-radius);
|
||||
}
|
||||
|
||||
.text-none {
|
||||
text-transform: none;
|
||||
}
|
||||
.text-capitalize {
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.text-lowercase {
|
||||
text-transform: lowercase;
|
||||
}
|
||||
171
packages/core/src/style.scss
Normal file
171
packages/core/src/style.scss
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
@use "./tokens.scss" as *;
|
||||
@use "./utils.scss";
|
||||
@use "./animations.scss";
|
||||
@use "./mixins";
|
||||
|
||||
// SASS variables are imported without namespace, but try to always use native
|
||||
// CSS variables when possible so they can be overrwritten by custom styles
|
||||
|
||||
html {
|
||||
background-color: var(--msp-bg);
|
||||
color: var(--msp-text);
|
||||
|
||||
/* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
|
||||
font-size: calc(15px + 0.390625vw);
|
||||
}
|
||||
|
||||
body > main {
|
||||
max-width: 95vw; /* leave some space in the end by default */
|
||||
margin: auto;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
section:not(.clean) {
|
||||
/* outline: 1px solid var(--msp-accent-bg); */
|
||||
padding: var(--msp-spacing-3);
|
||||
background-color: var(--msp-surface-1);
|
||||
box-shadow: 10px 10px 5px 0px var(--msp-shadow);
|
||||
border-radius: var(--msp-border-radius);
|
||||
}
|
||||
|
||||
section:not(:first-of-type) {
|
||||
margin-top: var(--msp-spacing-4);
|
||||
}
|
||||
|
||||
h1,
|
||||
.fs-1 {
|
||||
font-size: 3rem !important;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--msp-spacing-3);
|
||||
}
|
||||
h2,
|
||||
.fs-2 {
|
||||
font-size: 2.5rem !important;
|
||||
margin-bottom: var(--msp-spacing-3);
|
||||
}
|
||||
h3,
|
||||
.fs-3 {
|
||||
font-size: 2rem !important;
|
||||
margin-bottom: var(--msp-spacing-2);
|
||||
}
|
||||
h4,
|
||||
.fs-4 {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: var(--msp-spacing-2);
|
||||
}
|
||||
h5,
|
||||
.fs-5 {
|
||||
font-size: 1.25rem !important;
|
||||
margin-bottom: var(--msp-spacing-1);
|
||||
}
|
||||
h6,
|
||||
.fs-6 {
|
||||
font-size: 1rem !important;
|
||||
margin-bottom: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--msp-spacing-2);
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.msp-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
|
||||
@include mixins.responsive using($breakpoint, $size) {
|
||||
.msp-container {
|
||||
margin: auto;
|
||||
max-width: $size;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--msp-link-text);
|
||||
}
|
||||
|
||||
ul {
|
||||
/* Make the marker position is inside the container */
|
||||
list-style-position: inside;
|
||||
margin: 0;
|
||||
|
||||
ul {
|
||||
margin-left: var(--msp-spacing-3);
|
||||
}
|
||||
}
|
||||
|
||||
.list-unstyle {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.respect-width,
|
||||
video.respect-width {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
img.respect-height,
|
||||
video.respect-height {
|
||||
max-height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
li:not(:last-child) {
|
||||
margin-bottom: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: var(--msp-spacing-1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--msp--primary-bg);
|
||||
color: var(--msp--primary-text);
|
||||
}
|
||||
|
||||
/* Lightgallery iframe fix */
|
||||
.lg-has-iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.lg-object {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-image {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
|
||||
var(--bg-image);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
color: var(--msp-text);
|
||||
|
||||
padding: var(--msp-spacing-3);
|
||||
|
||||
.text {
|
||||
padding: var(--msp-spacing-2);
|
||||
background-color: var(--msp-bg-transparent);
|
||||
|
||||
border-radius: var(--msp-border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
transition: text-shadow 0.2s;
|
||||
--anim-shadow-color: var(--msp-accent-bg);
|
||||
|
||||
&:not(.clean):hover {
|
||||
text-shadow: 1px 1px 8px var(--anim-shadow-color);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue