namespace css to get debugger to look right

This commit is contained in:
Torsten Ruger 2018-08-20 10:07:10 +03:00
parent 7c4b084a1f
commit 43c87ce231
4 changed files with 257 additions and 261 deletions

View File

@ -7,7 +7,7 @@ GIT
GIT GIT
remote: https://github.com/ruby-x/rubyx remote: https://github.com/ruby-x/rubyx
revision: db459fcd3d9c90a882871a0f5b3832d65bdfc3f7 revision: 9687d6611f2d03612774bb4539a430ad898161d2
specs: specs:
rubyx (0.6.0) rubyx (0.6.0)
parser (~> 2.3.0) parser (~> 2.3.0)

View File

@ -11,31 +11,17 @@ $blockquote-border: $dove-grey !default
body body
margin: 0 margin: 0
padding: 0 padding: 0
background: $body-background url("bkg.png") 0 0 background: $body-background 0 0
color: $body-foreground color: $body-foreground
font-size: 16px font-size: 16px
line-height: 1.4 line-height: 1.4
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
/* General & 'Reset' Stuff */ // Header, <header>
// header - container
// h1 - project name
section // h2 - project description
display: block
margin: 0 0 20px 0
li
line-height: 1.4
// Header, <header>
// header - container
// h1 - project name
// h2 - project description
header header
@ -64,154 +50,167 @@ header
color: #666 color: #666
#downloads .btn /* General & 'Reset' Stuff */
display: inline-block
text-align: center main , header , footer
margin: 0
section
display: block
margin: 0 0 20px 0
section img
max-width: 100% li
line-height: 1.4
#downloads .btn
display: inline-block
text-align: center
margin: 0
h1, h2, h3, h4, h5, h6 section img
font-weight: normal max-width: 100%
font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
color: $header
letter-spacing: -0.03em
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(181, 232, 83, 0.1), 0 0 10px rgba(181, 232, 83, 0.1)
h1
font-size: 30px
h2
font-size: 24px
h3
font-size: 18px
h4
font-size: 14px
h5
font-size: 12px
text-transform: uppercase
margin: 0 0 5px 0
h6
font-size: 12px
text-transform: uppercase
color: #999
margin: 0 0 5px 0
dt h1, h2, h3, h4, h5, h6
font-style: italic font-weight: normal
font-weight: bold font-family: Monaco, "Bitstream Vera Sans Mono", "Lucida Console", Terminal, monospace
color: $header
letter-spacing: -0.03em
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(181, 232, 83, 0.1), 0 0 10px rgba(181, 232, 83, 0.1)
ul li h1
list-style: none font-size: 30px
margin-left: -30px h2
&:before font-size: 24px
h3
font-size: 18px
h4
font-size: 14px
h5
font-size: 12px
text-transform: uppercase
margin: 0 0 5px 0
h6
font-size: 12px
text-transform: uppercase
color: #999
margin: 0 0 5px 0
dt
font-style: italic
font-weight: bold
ul li
list-style: none
margin-left: -30px
&:before
color: #b5e853
content: ">> "
blockquote
color: $blockquote-color
padding-left: 10px
border-left: 1px dotted $blockquote-border
pre
background: rgba(0, 0, 0, 0.9)
border: 1px solid rgba(255, 255, 255, 0.15)
padding: 10px
font-size: 16px
color: #b5e853 color: #b5e853
content: ">> " border-radius: 2px
word-wrap: normal
blockquote overflow: auto
color: $blockquote-color overflow-y: hidden
padding-left: 10px
border-left: 1px dotted $blockquote-border
pre code.highlighter-rouge
background: rgba(0, 0, 0, 0.9) background: rgba(0,0,0,0.9)
border: 1px solid rgba(255, 255, 255, 0.15) border: 1px solid rgba(255, 255, 255, 0.15)
padding: 10px padding: 0px 3px
font-size: 16px margin: 0px -3px
color: #b5e853 color: #aa759f
border-radius: 2px border-radius: 2px
word-wrap: normal
overflow: auto
overflow-y: hidden
code.highlighter-rouge table
background: rgba(0,0,0,0.9) width: 100%
border: 1px solid rgba(255, 255, 255, 0.15) margin: 0 0 20px 0
padding: 0px 3px
margin: 0px -3px
color: #aa759f
border-radius: 2px
table th
width: 100% text-align: left
margin: 0 0 20px 0 border-bottom: 1px dashed #b5e853
padding: 5px 10px
th td
text-align: left padding: 5px 10px
border-bottom: 1px dashed #b5e853
padding: 5px 10px
td hr
padding: 5px 10px height: 0
border: 0
border-bottom: 1px dashed #b5e853
color: #b5e853
hr /* Buttons*/
height: 0
border: 0 .btn
border-bottom: 1px dashed #b5e853 display: inline-block
color: #b5e853 background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3))
padding: 8px 18px
border-radius: 50px
border: 2px solid rgba(0, 0, 0, 0.7)
border-bottom: 2px solid rgba(0, 0, 0, 0.7)
border-top: 2px solid rgba(0, 0, 0, 1)
color: rgba(255, 255, 255, 0.8)
font-family: Helvetica, Arial, sans-serif
font-weight: bold
font-size: 13px
text-decoration: none
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05)
.btn:hover
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8))
/* Buttons*/ .btn .icon
display: inline-block
.btn width: 16px
display: inline-block height: 16px
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.3), rgba(35, 35, 35, 0.3) 50%, rgba(10, 10, 10, 0.3) 50%, rgba(0, 0, 0, 0.3)) margin: 1px 8px 0 0
padding: 8px 18px float: left
border-radius: 50px
border: 2px solid rgba(0, 0, 0, 0.7)
border-bottom: 2px solid rgba(0, 0, 0, 0.7)
border-top: 2px solid rgba(0, 0, 0, 1)
color: rgba(255, 255, 255, 0.8)
font-family: Helvetica, Arial, sans-serif
font-weight: bold
font-size: 13px
text-decoration: none
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.75)
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05)
.btn:hover
background: -webkit-linear-gradient(top, rgba(40, 40, 40, 0.6), rgba(35, 35, 35, 0.6) 50%, rgba(10, 10, 10, 0.8) 50%, rgba(0, 0, 0, 0.8))
.btn .icon .btn-github .icon
display: inline-block opacity: 0.6
width: 16px background: url("../images/blacktocat.png") 0 0 no-repeat
height: 16px
margin: 1px 8px 0 0
float: left
.btn-github .icon /* Links a, a:hover, a:visited */
opacity: 0.6
background: url("../images/blacktocat.png") 0 0 no-repeat a
color: #63c0f5
text-shadow: 0 0 5px rgba(104, 182, 255, 0.5)
/* Links a, a:hover, a:visited */ /* Clearfix */
a .cf:before, .cf:after
color: #63c0f5 content: ""
text-shadow: 0 0 5px rgba(104, 182, 255, 0.5) display: table
/* Clearfix */ .cf:after
clear: both
.cf:before, .cf:after
content: ""
display: table
.cf:after .cf
clear: both zoom: 1
.cf
zoom: 1

View File

@ -4,82 +4,83 @@
// //
@import "colors" @import "colors"
.highlight main , header , footer
$plaintext: $alto !default .highlight
$string: $chelsea-cucumber !default $plaintext: $alto !default
$literal: $chelsea-cucumber !default $string: $chelsea-cucumber !default
$keyword: $bouquet !default $literal: $chelsea-cucumber !default
$error-foreground: $cod-grey !default $keyword: $bouquet !default
$error-background: $apple-blossom !default $error-foreground: $cod-grey !default
$comment: $grey !default $error-background: $apple-blossom !default
$preprocessor: $rajah !default $comment: $grey !default
$name-space: $rajah !default $preprocessor: $rajah !default
$name-attribute: $hippie-blue !default $name-space: $rajah !default
$operator: $rajah !default $name-attribute: $hippie-blue !default
$keyword-type: $raw-sienna !default $operator: $rajah !default
$regex: $gulf-stream !default $keyword-type: $raw-sienna !default
$string-escape: $potters-clay !default $regex: $gulf-stream !default
$deleted: $apple-blossom !default $string-escape: $potters-clay !default
$header: $hippie-blue !default $deleted: $apple-blossom !default
$header: $hippie-blue !default
color: $plaintext
table td
padding: 5px
table pre
margin: 0
.w
color: $plaintext color: $plaintext
.err table td
color: $error-foreground padding: 5px
background-color: $error-background table pre
margin: 0
.w
color: $plaintext
.c, .cd, .cm, .c1, .cs .err
color: $comment color: $error-foreground
background-color: $error-background
.cp .c, .cd, .cm, .c1, .cs
color: $preprocessor color: $comment
.o, .ow .cp
color: $operator color: $preprocessor
.p, .pi .o, .ow
color: $plaintext color: $operator
.gi .p, .pi
color: $string color: $plaintext
.gd .gi
color: $deleted color: $string
.gh .gd
color: $header color: $deleted
font-weight: bold
.k, .kn, .kp, .kr, .kv .gh
color: $keyword color: $header
font-weight: bold
.kc, .kt, .kd .k, .kn, .kp, .kr, .kv
color: $keyword-type color: $keyword
.s, .sb, .sc, .sd, .s2, .sh, .sx, .s1 .kc, .kt, .kd
color: $string color: $keyword-type
.sr .s, .sb, .sc, .sd, .s2, .sh, .sx, .s1
color: $regex color: $string
.si, .se .sr
color: $string-escape color: $regex
.nt, .nn, .nc, .no .si, .se
color: $name-space color: $string-escape
.na .nt, .nn, .nc, .no
color: $name-attribute color: $name-space
.m, .mf, .mh, .mi, .il, .mo, .mb, .mx .na
color: $literal color: $name-attribute
.ss .m, .mf, .mh, .mi, .il, .mo, .mb, .mx
color: $string color: $literal
.ss
color: $string

View File

@ -1,10 +1,6 @@
@import "susy" @import "susy"
$susy: ( columns: 12, gutters: 1/4, gutter-position: inside ) $susy: ( columns: 12, gutters: 1/4, gutter-position: inside )
a
color: #53a5ff
text-decoration: none
.container .container
width: 90% width: 90%
max-width: 1000px max-width: 1000px
@ -25,66 +21,66 @@ a
@media only screen and (max-width: 880px) @media only screen and (max-width: 880px)
@include span(12) @include span(12)
ul.nav main , header , footer
text-align: center a
li color: #53a5ff
display: inline text-decoration: none
margin-left: 5px
&:before
color: #b5e853
content: ">> "
width: 30px
height: 30px
left: -30px
a
border-bottom: 1px dashed #53a5ff
&:hover
border-bottom: 0px
small
color: lightgrey
.center
text-align: center
.row ul.nav
clear: both text-align: center
width: 100% li
display: inline
margin-left: 5px
&:before
color: #b5e853
content: ">> "
width: 30px
height: 30px
left: -30px
a
border-bottom: 1px dashed #53a5ff
&:hover
border-bottom: 0px
small
color: lightgrey
.center
text-align: center
.tripple .row
@include span(4) clear: both
@media only screen and (max-width: 880px)
@include span(12)
.main
width: 78%
.menu
width: 20%
.full_width
img
width: 100%
.debug_pic
border-color: white
border-width: 8px
border-style: solid
border-radius: 6px
img
width: 100% width: 100%
.blog_nav .tripple
.next_post , .prev_post @include span(4)
width: 20% @media only screen and (max-width: 880px)
.next_post @include span(12)
float: right
.prev_post .full_width
float: left img
.blog_post width: 100%
h1 .debug_pic
span border-color: white
font-size: 18px border-width: 8px
.blog_index border-style: solid
h1 border-radius: 6px
font-size: 20px img
h2 width: 100%
font-size: 16px
span .blog_nav
font-size: 14px .next_post , .prev_post
width: 20%
.next_post
float: right
.prev_post
float: left
.blog_post
h1
span
font-size: 18px
.blog_index
h1
font-size: 20px
h2
font-size: 16px
span
font-size: 14px