diff options
author | Adam T. Carpenter <atc@53hor.net> | 2020-07-11 10:59:50 -0400 |
---|---|---|
committer | Adam T. Carpenter <atc@53hor.net> | 2020-07-11 10:59:50 -0400 |
commit | 66e98b7125c87706782b8247b8e0329473dbeb5a (patch) | |
tree | 4d33c71e5462aa991199159f7fa70c1b3acf355b /styles/_sass/components/level.sass | |
parent | 52daf90e6206a67414b2de2f7b741b9af2cd959a (diff) | |
download | cobalt-site-66e98b7125c87706782b8247b8e0329473dbeb5a.tar.xz cobalt-site-66e98b7125c87706782b8247b8e0329473dbeb5a.zip |
reorganized assets and CSS, added a post
Diffstat (limited to 'styles/_sass/components/level.sass')
-rw-r--r-- | styles/_sass/components/level.sass | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/styles/_sass/components/level.sass b/styles/_sass/components/level.sass new file mode 100644 index 0000000..a3b7716 --- /dev/null +++ b/styles/_sass/components/level.sass @@ -0,0 +1,75 @@ +.level + @extend %block + align-items: center + justify-content: space-between + code + border-radius: $radius + img + display: inline-block + vertical-align: top + // Modifiers + &.is-mobile + display: flex + .level-left, + .level-right + display: flex + .level-left + .level-right + margin-top: 0 + .level-item + &:not(:last-child) + margin-bottom: 0 + margin-right: 0.75rem + &:not(.is-narrow) + flex-grow: 1 + // Responsiveness + +tablet + display: flex + & > .level-item + &:not(.is-narrow) + flex-grow: 1 + +.level-item + align-items: center + display: flex + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + justify-content: center + .title, + .subtitle + margin-bottom: 0 + // Responsiveness + +mobile + &:not(:last-child) + margin-bottom: 0.75rem + +.level-left, +.level-right + flex-basis: auto + flex-grow: 0 + flex-shrink: 0 + .level-item + // Modifiers + &.is-flexible + flex-grow: 1 + // Responsiveness + +tablet + &:not(:last-child) + margin-right: 0.75rem + +.level-left + align-items: center + justify-content: flex-start + // Responsiveness + +mobile + & + .level-right + margin-top: 1.5rem + +tablet + display: flex + +.level-right + align-items: center + justify-content: flex-end + // Responsiveness + +tablet + display: flex |