mirror of
https://github.com/explosion/spaCy.git
synced 2025-01-27 17:54:39 +03:00
58 lines
1.3 KiB
Sass
58 lines
1.3 KiB
Sass
// Images - Variables
|
|
// ============================================================================
|
|
|
|
$image-background : color(grey, light)
|
|
$image-profile-margin : 1rem 3rem
|
|
$image-profile-width : $width-profile
|
|
$image-ratio : $image-ratio
|
|
$image-width-l : 100%
|
|
$image-width-m : 75%
|
|
$image-width-s : 50%
|
|
|
|
|
|
// Images - Style
|
|
// ============================================================================
|
|
|
|
// Image Containers
|
|
// .image-container - container for figures and inline images
|
|
// .image-hero - container for hero image for blog posts
|
|
// .image-profile - container for profile photo
|
|
|
|
.image-container
|
|
@extend .block
|
|
margin-left: 0
|
|
margin-right: 0
|
|
|
|
.image-profile
|
|
@include size($image-profile-width)
|
|
background: $image-background
|
|
border-radius: 50%
|
|
margin: $image-profile-margin
|
|
overflow: hidden
|
|
shape-outside: circle()
|
|
|
|
|
|
// Image sizes
|
|
// .image--small - small width
|
|
// .image--medium - medium width
|
|
// .image--large - large width
|
|
|
|
.image--small
|
|
width: $image-width-s
|
|
|
|
.image--medium
|
|
width: $image-width-m
|
|
|
|
.image--large
|
|
width: $image-width-l
|
|
|
|
|
|
// Global image ratio
|
|
|
|
.image-ratio
|
|
background: $image-background
|
|
height: 0
|
|
overflow: hidden
|
|
padding-bottom: (100% / $image-ratio)
|
|
width: 100%
|