www.doublefourteen.io/themes/doublefourteen/assets/sass/style.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