Danielle McLean
c49e17db90
This is just an in-place upgrade to produce a roughly unchanged page design. Ideally I'm going to need to install Sass and use that, because Bootstrap 5 relies a bit more heavily on using its Sass sources if you want to customise things (which I do), but for now loading standard Bootstrap from the CDN is fine. I still prefer Stylus over both Sass and LESS, but the industry seem to have decided on using Sass, which probably means I'll be better off porting my customisations to Sass in the long run. Oh well.
140 lines
2.4 KiB
Stylus
140 lines
2.4 KiB
Stylus
$monokai_bg = #272822
|
|
|
|
html
|
|
background-color $base00
|
|
|
|
a
|
|
color $base0D
|
|
text-decoration none
|
|
&:hover
|
|
color $base0C
|
|
|
|
code, kbd, pre, samp, .code, .kbd, .pre, .samp
|
|
font-family SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
|
|
|
|
code, pre, .code, .pre
|
|
padding .2rem .4rem
|
|
font-size 90%
|
|
color $base0A
|
|
background-color $monokai_bg
|
|
border-radius .25rem
|
|
|
|
.form-control, .form-control:focus
|
|
background-color $base01
|
|
border-color $base00
|
|
color $base07
|
|
|
|
.list-group-item
|
|
background-color $base03
|
|
|
|
[class^="openwebicons-"], [class*=" openwebicons-"]
|
|
&::before
|
|
text-decoration none
|
|
line-height 1
|
|
|
|
for placement in top bottom left right
|
|
.tippy-popper[x-placement^={placement}] .tippy-tooltip.dark-theme .tippy-arrow
|
|
border-{placement}-color $base03
|
|
|
|
.tippy-tooltip.dark-theme
|
|
background-color $base03
|
|
color $base04
|
|
|
|
body
|
|
display flex
|
|
flex-direction column
|
|
min-height 100vh
|
|
background-color transparent
|
|
color $base07
|
|
> header
|
|
> .navbar
|
|
background-color $base01
|
|
#navbar
|
|
justify-content space-between
|
|
> .breadcrumbs
|
|
background-color $base02
|
|
> .breadcrumb
|
|
background-color transparent
|
|
border-radius 0
|
|
flex-wrap nowrap
|
|
.breadcrumb-item
|
|
white-space nowrap
|
|
&.active
|
|
overflow-x hidden
|
|
text-overflow ellipsis
|
|
|
|
|
|
> main
|
|
padding 2rem 1rem
|
|
width 100%
|
|
flex 1
|
|
display flex
|
|
|
|
> footer
|
|
display flex
|
|
justify-content space-evenly
|
|
align-items center
|
|
margin 1rem
|
|
margin-top 0
|
|
text-align center
|
|
> p, nav
|
|
margin 0 .5rem
|
|
&:last-child
|
|
margin 0
|
|
|
|
flex-wrap wrap
|
|
> nav
|
|
order -1
|
|
margin-bottom 1rem
|
|
width 100%
|
|
@media (min-width $md)
|
|
flex-wrap nowrap
|
|
> nav
|
|
order 0
|
|
margin-bottom 0
|
|
width unset
|
|
|
|
ul.pagination
|
|
margin 0
|
|
justify-content center
|
|
li.page-item
|
|
a.page-link
|
|
@extends a
|
|
.page-link
|
|
background-color $base02
|
|
border 1px solid rgba(0,0,0,.125)
|
|
|
|
.media
|
|
display flex
|
|
> .media-body
|
|
flex-grow 1
|
|
margin-left 3px
|
|
|
|
.card
|
|
background-color $base02
|
|
|
|
.card-footer
|
|
background-color $base01
|
|
&:nth-of-type(odd)
|
|
background-color $base02
|
|
|
|
&.h-card
|
|
max-width 25rem
|
|
position sticky
|
|
top 1rem
|
|
|
|
.p-note
|
|
color $base04
|
|
|
|
.profiles
|
|
list-style none
|
|
text-align center
|
|
margin 0
|
|
padding 0
|
|
> li
|
|
display inline-block
|
|
margin-right 7px
|
|
// Special handling for http://www.kevinmarks.com/distributed-verify.html
|
|
> svg
|
|
margin auto 5px
|