231 lines
4.8 KiB
Sass
231 lines
4.8 KiB
Sass
@import "variables"
|
|
|
|
// Some convenience class to manage resolution specific elements
|
|
@media only screen and (max-width:600px)
|
|
.on-pc-screen
|
|
display: none !important
|
|
@media only screen and (min-width:600px)
|
|
.on-mobile-screen
|
|
display: none !important
|
|
|
|
@media only screen and (max-width:1200px)
|
|
.on-largest-screen
|
|
display: none !important
|
|
@media only screen and (min-width:1200px)
|
|
.up-to-largest-screen
|
|
display: none !important
|
|
|
|
@media only screen and (max-width:1000px)
|
|
.on-large-screen
|
|
display: none !important
|
|
@media only screen and (min-width:1000px)
|
|
.up-to-large-screen
|
|
display: none !important
|
|
|
|
@media only screen and (max-width:800px)
|
|
.on-small-screen
|
|
display: none !important
|
|
@media only screen and (min-width:800px)
|
|
.up-to-small-screen
|
|
display: none !important
|
|
|
|
@media (prefers-color-scheme:dark)
|
|
.on-light-theme
|
|
display: none !important
|
|
@media (prefers-color-scheme:light)
|
|
.on-dark-theme
|
|
display: none !important
|
|
|
|
*
|
|
box-sizing: border-box
|
|
z-index: $foreground
|
|
|
|
html, body
|
|
width: 100%
|
|
height: 100%
|
|
min-width: $min-page-width
|
|
|
|
h1.page-title
|
|
text-align: left
|
|
font-size: $large-font-size
|
|
color: var(--title-text-color)
|
|
h1.page-title:first-letter
|
|
text-transform: capitalize
|
|
|
|
body
|
|
margin: 0
|
|
font-family: var(--body-font)
|
|
font-size: $body-font-size
|
|
line-height: $body-line-height
|
|
color: var(--foreground-color)
|
|
background-color: var(--background-color)
|
|
-webkit-text-size-adjust: 100%
|
|
-ms-text-size-adjust: 100%
|
|
|
|
a
|
|
color: var(--link-color)
|
|
|
|
// `:focus` is linked to `:hover` for basic accessibility
|
|
&:hover, &:focus
|
|
color: var(--link-hover-color)
|
|
|
|
strong
|
|
color: inherit
|
|
|
|
a:not(:hover)
|
|
text-decoration: none
|
|
|
|
.prose-link
|
|
color: var(--prose-link-color)
|
|
opacity: 0.8
|
|
text-decoration: none
|
|
font-weight: bold
|
|
transition: opacity 0.25s ease-in, color 0.25s ease-in, text-shadow 0.15s ease-in
|
|
|
|
&:hover, &:focus
|
|
opacity: 1.0
|
|
color: var(--prose-link-hover-color)
|
|
text-shadow: -0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px 0.5px 0 var(--prose-link-shadow-color), 0.5px -0.5px 0 var(--prose-link-shadow-color), -0.5px -0.5px 0 var(--prose-link-shadow-color)
|
|
|
|
|
|
&:focus
|
|
outline: 1px dotted
|
|
|
|
.container
|
|
margin: 0 auto
|
|
position: relative
|
|
max-width: $page-width
|
|
padding: 0 0.2em
|
|
|
|
.external-link-light:after
|
|
background-image: url(/external-link-dark.svg) !important
|
|
.external-link:after
|
|
content: ""
|
|
background-image: url(/external-link-light.svg)
|
|
background-size: 10px 10px
|
|
display: inline-block
|
|
width: 10px
|
|
height: 10px
|
|
margin-left: 5px
|
|
|
|
img
|
|
display: block
|
|
max-width: 100%
|
|
margin-bottom: $spacer
|
|
border-radius: $border-radius
|
|
|
|
table
|
|
margin-bottom: $spacer
|
|
width: 100%
|
|
border: 0 solid var(--border-color)
|
|
border-collapse: collapse
|
|
|
|
td, th
|
|
padding: .25rem .5rem
|
|
border:
|
|
color: inherit
|
|
style: solid
|
|
width: 0
|
|
bottom-width: 1px
|
|
|
|
th
|
|
text-align: left
|
|
|
|
thead th
|
|
border-bottom-color: currentColor
|
|
|
|
.header
|
|
display: flex
|
|
align-items: flex-end
|
|
|
|
.header-text
|
|
font-size: $large-font-size
|
|
color: var(--title-text-color)
|
|
font-weight: bold
|
|
display: inline-block
|
|
padding: 1em 0.5em 1em 0.5em
|
|
|
|
.header-image
|
|
background:
|
|
image: url(/doublefourteen-logo-dark.svg)
|
|
repeat: no-repeat
|
|
|
|
width: 330px
|
|
height: 180px
|
|
display: inline-block
|
|
margin: 0 0.5em 0 0.5em
|
|
|
|
.work-in-progress-content
|
|
display: flex
|
|
justify-content: space-between
|
|
|
|
.work-in-progress-text
|
|
position: relative
|
|
|
|
.work-in-progress-sign
|
|
width: 400px
|
|
height: 386px
|
|
background:
|
|
image: url(/work-in-progress.png)
|
|
position: bottom right
|
|
repeat: no-repeat
|
|
size: 400px 386px
|
|
|
|
.get-in-touch
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: right
|
|
gap: $large-spacer
|
|
margin: $large-spacer $huge-spacer $large-spacer auto
|
|
|
|
.button, .button:hover
|
|
background-color: transparent
|
|
border: 2px solid $gray-400
|
|
color: var(--heading-color)
|
|
padding: 7px 12px
|
|
display: block
|
|
margin: 10px 0
|
|
font-size: $body-font-size
|
|
font-weight: 700
|
|
text-decoration: none !important
|
|
a
|
|
display: inline
|
|
text-decoration: none !important
|
|
color: var(--heading-color)
|
|
&:hover
|
|
background-color: var(--highlight-color)
|
|
|
|
.twitter-button, .email-button
|
|
padding 0px
|
|
> img
|
|
min-width: 16px
|
|
min-height: 16px
|
|
margin-bottom: 0px
|
|
|
|
.footer-elements
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
align-items: stretch
|
|
justify-content: space-between
|
|
.footer
|
|
text-align: center
|
|
padding-top: $large-spacer
|
|
|
|
@media (prefers-color-scheme:dark)
|
|
.external-link:after
|
|
background-image: url(/external-link-dark.svg)
|
|
.header-image
|
|
background-image: url(/doublefourteen-logo-light.svg)
|
|
|
|
.external-prose-link
|
|
@extend .external-link
|
|
@extend .prose-link
|
|
|
|
@media only screen and (max-width:800px)
|
|
.work-in-progress-content
|
|
flex-direction: column
|
|
.work-in-progress-text
|
|
text-align: center
|