123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- // The site-wide header, with title, recent posts, and identity links
-
- #header
- display: flex
- flex-direction: column
- align-items: flex-end
- justify-content: space-between
-
- background-color: #1f1815
- background-attachment: scroll, fixed
- background-image: url("/res/images/overlay.png"), url("/res/images/background.jpg")
- background-position: top left, top left
- background-repeat: repeat, no-repeat
- background-size: auto, auto 100%
-
- color: rgba(255, 255, 255, 0.4)
-
- width: 20%
- height: 100%
- left: 0
- top: 0
-
- position: fixed
- text-align: right
- padding: 8em 2em 8em 1em
-
- @media screen and (max-width: 1280px)
- padding: 6em 3em 3em 3em
- width: 30%
-
- @media screen and (max-width: 980px)
- background-attachment: scroll
- background-position: top left, center center
- background-size: auto, cover
- left: auto
- padding: 6em 4em
- position: relative
- text-align: center
- top: auto
- width: 100%
- display: block
-
- @media screen and (max-width: 736px), screen and (max-height: 700px)
- padding: 2.25em 1.5em
- min-height: 18em
-
- ul
- margin-bottom: 0
-
- @media screen and (max-width: 480px), screen and (max-height: 700px)
- padding: 2.25em 1.5em 2em
- min-height: 18em
-
- ul
- margin-bottom: 0
-
- & > *
- flex-shrink: 0
- width: 100%
-
- & > .inner
- flex-grow: 1
- margin: 0 0 2em 0
-
- section
- padding: 20px 0
-
- @media screen and (max-width: 980px)
- padding: 0
-
- a
- text-decoration-color: transparent
- transition: color 0.2s ease-in-out, text-decoration-color 0.25s linear
-
- &:hover
- text-decoration: underline
-
- h1
- font-size: 1.35em
- line-height: 1.75em
- margin: 0
- text-transform: uppercase
- color: $darkest-gray
-
- @media screen and (max-width: 1280px)
- font-size: 1.25em
-
- @media screen and (max-width: 980px)
- font-size: 1.75em
-
- p
- color: #d2d2d2
- position: relative
- margin: 0 0 1.5em 0
-
-
- // Recent posts list
-
- #posts ul
- list-style-type: none
-
- @media screen and (max-width: 980px)
- position: absolute
- bottom: 20px
- right: 20px
-
- .recent
- display: none
-
- li
- margin: 20px 0
- font-size: 0.9em
- line-height: 1.3em
-
- @media screen and (max-width: 980px)
- margin: 0.4em
-
- &.recent a
- background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 60%)
- display: inline-block
- width: 100%
- padding: 0.4em 0.5em 0.5em 2em
-
-
- // Identity links
-
- #identities
- position: absolute
- bottom: 20px
- left: 20px
- text-align: left
-
- ul
- margin-bottom: 0
-
- li
- font-size: 0.8em
- line-height: 1.4em
- margin: 0.4em 0
-
- &#pgp
- font-family: monospace
|