feat: design v2
This commit is contained in:
@ -1,12 +1,6 @@
|
||||
$line-height: 1.15
|
||||
$size-small: 600px
|
||||
|
||||
html
|
||||
font-size: 1.25rem
|
||||
line-height: $line-height
|
||||
|
||||
p, li
|
||||
line-height: 1.4
|
||||
$layout-size: 960px
|
||||
|
||||
// COLOR
|
||||
|
||||
@ -17,7 +11,7 @@ $color-main: #abd1c6
|
||||
$color-light: #e8e4e6
|
||||
$color-lightest: #fffffe
|
||||
$color-secondary: #f9bc60
|
||||
$color-tertiary: #A91804
|
||||
$color-tertiary: #A61A07
|
||||
|
||||
@mixin theme
|
||||
// https://www.happyhues.co/palettes/10
|
||||
@ -28,8 +22,8 @@ $color-tertiary: #A91804
|
||||
--color-tertiary: #{$color-tertiary}
|
||||
|
||||
--color-background: #{$color-dark}
|
||||
--color-headline: #{$color-lightest}
|
||||
--color-paragraph: var(--color-secondary)
|
||||
--color-headline: var(--color-highlight)
|
||||
--color-paragraph: var(--color-main)
|
||||
--color-link: var(--color-highlight)
|
||||
--color-button: var(--color-highlight)
|
||||
--color-button-text: var(--color-stroke)
|
||||
@ -39,7 +33,7 @@ $color-tertiary: #A91804
|
||||
--color-card-paragraph: #{$color-darken}
|
||||
--color-card-link: var(--color-background)
|
||||
--color-card-button: var(--color-background)
|
||||
--color-card-button-text: var(--color-headline)
|
||||
--color-card-button-text: #{$color-lightest}
|
||||
|
||||
|
||||
--color-secondary-background: var(--color-secondary)
|
||||
@ -67,7 +61,7 @@ $color-tertiary: #A91804
|
||||
color: var(--color-button-text)
|
||||
a
|
||||
color: var(--color-link)
|
||||
.card, .cards > *
|
||||
.card, .cards > *, .footnotes
|
||||
color: var(--color-card-paragraph)
|
||||
background: var(--color-card-background)
|
||||
h1, h2, h3, h4, h5, h6
|
||||
@ -88,6 +82,8 @@ $color-tertiary: #A91804
|
||||
color: var(--color-link)
|
||||
|
||||
@mixin theme-secondary
|
||||
--color-link: var(--color-secondary-link)
|
||||
--color-headline: var(--color-secondary-headline)
|
||||
color: var(--color-secondary-paragraph)
|
||||
background: var(--color-secondary-background)
|
||||
h1, h2, h3, h4, h5, h6
|
||||
@ -97,9 +93,10 @@ $color-tertiary: #A91804
|
||||
color: var(--color-secondary-button-text)
|
||||
a
|
||||
color: var(--color-secondary-link)
|
||||
.card, .cards > *
|
||||
.card, .cards > *, .footnotes
|
||||
color: var(--color-secondary-card-paragraph)
|
||||
background: var(--color-secondary-card-background)
|
||||
border-radius: var(--border-radius)
|
||||
h1, h2, h3, h4, h5, h6
|
||||
color: var(--color-secondary-card-headline)
|
||||
button, .button
|
||||
@ -108,31 +105,66 @@ $color-tertiary: #A91804
|
||||
a
|
||||
color: var(--color-secondary-card-link)
|
||||
|
||||
svg
|
||||
height: 120px
|
||||
.st0
|
||||
fill: var(--color-paragraph)
|
||||
.st1
|
||||
fill: var(--color-link)
|
||||
// HTML TAG
|
||||
|
||||
html
|
||||
font-size: 1.25rem
|
||||
line-height: $line-height
|
||||
|
||||
body
|
||||
@include theme
|
||||
@include theme-primary
|
||||
|
||||
.theme-secondary
|
||||
@include theme-secondary
|
||||
p, li
|
||||
line-height: 1.6
|
||||
|
||||
.card, .cards > *
|
||||
padding: 1rem
|
||||
margin: 1rem
|
||||
.cards
|
||||
display: grid
|
||||
grid-auto-columns: 1fr
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-template-rows: auto auto auto
|
||||
column-gap: var(--tile)
|
||||
row-gap: var(--tile)
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.cards > *, .card
|
||||
padding: calc(var(--tile))
|
||||
border-radius: var(--border-radius)
|
||||
|
||||
header
|
||||
display: grid
|
||||
column-gap: 1rem
|
||||
grid-template-columns: 70px auto
|
||||
align-items: center
|
||||
margin-bottom: 1rem
|
||||
|
||||
p
|
||||
display: inline-block
|
||||
|
||||
img
|
||||
width: 70px
|
||||
height: 70px
|
||||
|
||||
p, h1, h2, h3
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
@media screen and (max-width: 800px)
|
||||
text-align: center
|
||||
|
||||
body
|
||||
--tile: 2rem
|
||||
|
||||
--border-style: dashed
|
||||
--border-size: 4px
|
||||
--border-radius: calc(var(--tile)/2)
|
||||
--link-style: dotted
|
||||
|
||||
--tile: 2rem
|
||||
|
||||
font-size: 1.125rem
|
||||
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
|
||||
|
||||
@ -145,31 +177,37 @@ body
|
||||
--tile: 1rem
|
||||
font-size: .9rem
|
||||
|
||||
.content
|
||||
max-width: 800px
|
||||
padding: var(--tile)
|
||||
margin: 0 auto
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
@media screen and (max-width: $size-small)
|
||||
max-width: calc(100% + 1rem)
|
||||
margin-left: -.5rem
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
|
||||
margin: var(--tile) auto
|
||||
@media screen and (max-width: $size-small)
|
||||
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
|
||||
|
||||
.center
|
||||
h1
|
||||
margin: 0 auto calc(var(--tile)*2)
|
||||
padding: calc(var(--tile)*2.5) 0 0
|
||||
text-align: center
|
||||
|
||||
p + ol, p + ul
|
||||
margin: 0
|
||||
> li:first-child
|
||||
padding-top: 0
|
||||
h2
|
||||
margin: 0 auto calc(var(--tile)*1.5)
|
||||
padding: calc(var(--tile)*2) 0 0
|
||||
|
||||
h3
|
||||
margin: 0 auto var(--tile)
|
||||
padding: calc(var(--tile)*1.5) 0 0
|
||||
|
||||
h1 + h2, h2 + h3, h3 + h4
|
||||
padding-top: 0
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
border-bottom: 2px var(--link-style)
|
||||
&:hover
|
||||
border-bottom: 2px solid
|
||||
|
||||
&:active, &:visited
|
||||
border-bottom: 2px dashed
|
||||
|
||||
a[href^="http"]::after
|
||||
content: "\2197"
|
||||
font-size: .8rem
|
||||
display: inline-block
|
||||
position: relative
|
||||
margin-left: .2em
|
||||
|
||||
ol, ul
|
||||
padding-left: 1.2rem
|
||||
@ -185,65 +223,83 @@ ul.no-style
|
||||
|
||||
li
|
||||
padding: 0
|
||||
line-height: $line-height
|
||||
|
||||
a
|
||||
text-decoration: underline var(--link-style)
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
.header .title
|
||||
font-size: 2.25rem
|
||||
font-weight: 700
|
||||
margin: 1.5rem 0
|
||||
|
||||
h2
|
||||
margin: calc(var(--tile)*1.5) auto
|
||||
|
||||
h3
|
||||
// display: inline-block
|
||||
margin: calc(var(--tile)*1.5) auto var(--tile)
|
||||
|
||||
.frame
|
||||
border: var(--border-size) var(--border-style) var(--color-highlight)
|
||||
padding: var(--tile)
|
||||
|
||||
.footer
|
||||
font-size: 0.8rem
|
||||
padding-bottom: calc(var(--tile)/2)
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
@media screen and (max-width: $size-small)
|
||||
.cell, .cell.-right
|
||||
text-align: center
|
||||
flex: 0 0 100%
|
||||
padding-bottom: calc(var(--tile)/2)
|
||||
|
||||
.flex
|
||||
--margin-tile: calc(var(--tile)/2)
|
||||
margin: calc(var(--margin-tile) * -1)
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
width: calc(100% + 2 * var(--margin-tile))
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
li
|
||||
text-align: center
|
||||
padding: var(--margin-tile)
|
||||
flex: 0 0 50%
|
||||
box-sizing: border-box
|
||||
|
||||
img
|
||||
max-width: 100%
|
||||
width: 40%
|
||||
max-width: calc(100% + 1rem)
|
||||
margin-left: -.5rem
|
||||
|
||||
hr
|
||||
border: 0
|
||||
border-bottom: var(--border-size) var(--border-style) var(--color-highlight)
|
||||
margin: var(--tile) auto
|
||||
@media screen and (max-width: $size-small)
|
||||
margin: calc(var(--tile)*2) calc(var(--tile)*-1)
|
||||
|
||||
.theme-primary
|
||||
@include theme-primary
|
||||
|
||||
.theme-secondary
|
||||
@include theme-secondary
|
||||
|
||||
.half
|
||||
max-width: 50%
|
||||
margin: 0 auto
|
||||
|
||||
.center
|
||||
text-align: center
|
||||
|
||||
.header
|
||||
justify-content: space-between
|
||||
|
||||
.title
|
||||
font-size: 2.25rem
|
||||
font-weight: 700
|
||||
margin: 0
|
||||
width: 100%
|
||||
padding: 0
|
||||
a
|
||||
border: none
|
||||
text-align: center
|
||||
|
||||
img
|
||||
height: 120px
|
||||
max-width: 100%
|
||||
margin: 0 auto
|
||||
|
||||
@media screen and (max-width: $size-small)
|
||||
flex-direction: column
|
||||
justify-content: space-around
|
||||
|
||||
.title
|
||||
a
|
||||
display: block
|
||||
width: 100%
|
||||
|
||||
.menu
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style-type: none
|
||||
|
||||
li
|
||||
padding: 0
|
||||
margin-top: .3rem
|
||||
|
||||
a
|
||||
padding: .3rem calc(var(--tile)/4)
|
||||
|
||||
@media screen and (max-width: $size-small)
|
||||
ul
|
||||
display: flex
|
||||
flex-direction: row-reverse
|
||||
li
|
||||
flex: 0 0 100%
|
||||
display: inline
|
||||
margin: var(--tile) auto
|
||||
|
||||
.quote
|
||||
border: var(--border-size) var(--border-style) var(--color-highlight)
|
||||
border-radius: var(--border-radius)
|
||||
padding: var(--tile)
|
||||
margin: calc(1.5 * var(--tile)) 0
|
||||
position: relative
|
||||
@ -251,25 +307,62 @@ h3
|
||||
|
||||
h2
|
||||
margin: 0
|
||||
padding: 0
|
||||
|
||||
strong
|
||||
font-size: 130%
|
||||
|
||||
.content
|
||||
max-width: $layout-size
|
||||
padding: var(--tile)
|
||||
margin: 0 auto
|
||||
|
||||
.blogDate:first-child + h1
|
||||
padding-top: var(--tile)
|
||||
|
||||
h1:first-child
|
||||
padding-top: 0
|
||||
|
||||
.quote:first-child
|
||||
margin-top: 0
|
||||
|
||||
.footnotes
|
||||
font-size: .8rem
|
||||
padding: var(--tile)
|
||||
|
||||
hr
|
||||
border: none
|
||||
margin: 0
|
||||
p
|
||||
margin: 0
|
||||
|
||||
.footer
|
||||
font-size: 0.8rem
|
||||
padding-bottom: calc(var(--tile)/2)
|
||||
font-family: monospace
|
||||
line-height: 1.2
|
||||
|
||||
@media screen and (max-width: $size-small)
|
||||
.cell, .cell.-right
|
||||
text-align: center
|
||||
flex: 0 0 100%
|
||||
padding-bottom: calc(var(--tile)/2)
|
||||
|
||||
ul + ul
|
||||
border-top: 2px dotted
|
||||
padding-top: var(--tile)
|
||||
margin-top: var(--tile)
|
||||
|
||||
.blogDate
|
||||
font-style: italic
|
||||
font-size: 0.9rem
|
||||
display: block
|
||||
margin-top: 1.5rem
|
||||
|
||||
.footnotes
|
||||
font-size: .8rem
|
||||
p
|
||||
margin: 0
|
||||
text-align: center
|
||||
|
||||
// Grid
|
||||
|
||||
.grid { display: flex; flex-wrap: wrap; }
|
||||
.grid.\-middle { align-items: center; }
|
||||
.grid.\-bottom { align-items: end; }
|
||||
.cell { flex: 1; box-sizing: border-box; }
|
||||
.cell.\-left { text-align: left ;}
|
||||
|
||||
Reference in New Issue
Block a user