personal-page/src/assets/style/global.css
aleidk 8f15b45e9b feat(components): add carousel components
it's inmidiatly used in the image gallery
2024-02-27 21:10:39 -03:00

104 lines
1.7 KiB
CSS

@import url('./themes.css');
@import url('./utils.css');
html {
background-color: var(--prj-bg);
color: var(--prj-text);
/* Update font size based on screen width, source: https://matthewjamestaylor.com/responsive-font-size */
font-size: calc(15px + 0.390625vw);
}
body {
max-width: 95vw; /* leave some space in the end by default */
margin: auto;
padding: 15px 0;
}
section:not(:first-child) {
margin-top: var(--prj-spacing-4);
}
/* Main content fix width, taken from Tailwind: https://tailwindcss.com/docs/container#using-the-container */
@media screen and (min-width: 640px) {
body {
min-width: 640px;
}
}
@media screen and (min-width: 768px) {
body {
min-width: 768px;
}
}
@media screen and (min-width: 1024px) {
body {
min-width: 1024px;
}
}
@media screen and (min-width: 1280px) {
body {
min-width: 1280px;
}
}
@media screen and (min-width: 1536px) {
body {
max-width: 1536px;
}
}
a {
color: var(--prj-link-text);
}
ul {
/* Make the marker position is inside the container */
list-style-position: inside;
margin: 0;
}
.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(--prj-spacing-1);
}
.btn {
padding: var(--prj-spacing-1);
}
.btn-primary {
background-color: var(--prj--primary-bg);
color: var(--prj--primary-text);
}
/* Lightgallery iframe fix */
.lg-has-iframe {
position: absolute;
top: 0;
left: 0;
.lg-object {
width: 100% !important;
height: 100% !important;
}
}