diff options
| author | Juan Marin Noguera <juan@mnpi.eu> | 2023-08-22 17:56:56 +0200 | 
|---|---|---|
| committer | Juan Marin Noguera <juan@mnpi.eu> | 2023-08-22 17:56:56 +0200 | 
| commit | 1fd2213192d22880706440e7f724bdc6db966ee0 (patch) | |
| tree | ff2d6812ef6db399852ad8c4cf2b6f1cd417dfed /present/css/layout.scss | |
| parent | 2f9eb7a94819a08937ba08320a142b7f0be407fd (diff) | |
Añadida presentación1.0
Diffstat (limited to 'present/css/layout.scss')
| -rw-r--r-- | present/css/layout.scss | 69 | 
1 files changed, 69 insertions, 0 deletions
| diff --git a/present/css/layout.scss b/present/css/layout.scss new file mode 100644 index 0000000..f499fdd --- /dev/null +++ b/present/css/layout.scss @@ -0,0 +1,69 @@ +/** + * Layout helpers. + */ + +// Stretch an element vertically based on available space +.reveal .stretch, +.reveal .r-stretch { +	max-width: none; +	max-height: none; +} + +.reveal pre.stretch code, +.reveal pre.r-stretch code { +	height: 100%; +	max-height: 100%; +	box-sizing: border-box; +} + +// Text that auto-fits its container +.reveal .r-fit-text { +	display: inline-block; // https://github.com/rikschennink/fitty#performance +	white-space: nowrap; +} + +// Stack multiple elements on top of each other +.reveal .r-stack { +	display: grid; +} + +.reveal .r-stack > * { +	grid-area: 1/1; +	margin: auto; +} + +// Horizontal and vertical stacks +.reveal .r-vstack, +.reveal .r-hstack { +	display: flex; + +	img, video { +		min-width: 0; +		min-height: 0; +		object-fit: contain; +	} +} + +.reveal .r-vstack { +	flex-direction: column; +	align-items: center; +	justify-content: center; +} + +.reveal .r-hstack { +	flex-direction: row; +	align-items: center; +	justify-content: center; +} + +// Naming based on tailwindcss +.reveal .items-stretch { align-items: stretch; } +.reveal .items-start { align-items: flex-start; } +.reveal .items-center { align-items: center; } +.reveal .items-end { align-items: flex-end; } + +.reveal .justify-between { justify-content: space-between; } +.reveal .justify-around { justify-content: space-around; } +.reveal .justify-start { justify-content: flex-start; } +.reveal .justify-center { justify-content: center; } +.reveal .justify-end { justify-content: flex-end; } | 
