www.doublefourteen.io/themes/doublefourteen/assets/sass/style.sass

193 lines
3.8 KiB
Sass
Raw Normal View History

2021-07-19 16:05:53 +02:00
@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
*
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
.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
.button, .button:hover
background-color: transparent
border: 2px solid #737475
color: #333
padding: 7px 12px
display: block
margin: 10px 0
font-size: $body-font-size
font-weight: 700
text-decoration: none !important
.button a
display: inline
text-decoration: none !important
color: #666
.button:hover
background-color: #7f7f7f
.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)
// FIXME
.button, .button:hover
color: inherit
.button a
color: #ccc
.button:hover
background-color: #383838
@media only screen and (max-width:800px)
.work-in-progress-content
flex-direction: column
.work-in-progress-text
text-align: center