diff options
-rw-r--r-- | dist/css/aplaylist.css | 4 | ||||
-rw-r--r-- | dist/css/aplaylist.min.css | 2 | ||||
-rw-r--r-- | dist/css/style.css | 150 | ||||
-rw-r--r-- | dist/css/style.min.css | 4 | ||||
-rw-r--r-- | src/scss/aplaylist/aplaylist.scss | 4 | ||||
-rw-r--r-- | src/scss/custom/_button.scss | 4 | ||||
-rw-r--r-- | src/scss/custom/_comments.scss | 32 | ||||
-rw-r--r-- | src/scss/custom/_elements.scss | 9 | ||||
-rw-r--r-- | src/scss/custom/_footer.scss | 14 | ||||
-rw-r--r-- | src/scss/custom/_header.scss | 8 | ||||
-rw-r--r-- | src/scss/custom/_hilite.scss | 1 | ||||
-rw-r--r-- | src/scss/custom/_links.scss | 16 | ||||
-rw-r--r-- | src/scss/custom/_main.scss | 30 | ||||
-rw-r--r-- | src/scss/custom/_toc.scss | 36 | ||||
-rw-r--r-- | src/scss/custom/_variables.scss | 26 | ||||
-rw-r--r-- | src/scss/custom/style.scss | 5 |
16 files changed, 249 insertions, 96 deletions
diff --git a/dist/css/aplaylist.css b/dist/css/aplaylist.css index ec66e61..2564d0c 100644 --- a/dist/css/aplaylist.css +++ b/dist/css/aplaylist.css @@ -13,6 +13,6 @@ } .is-active-play { - color: #dd7325; - background-color: #dd7325; + color: #3273dc; + background-color: #3273dc; } diff --git a/dist/css/aplaylist.min.css b/dist/css/aplaylist.min.css index af6aef6..eb7db37 100644 --- a/dist/css/aplaylist.min.css +++ b/dist/css/aplaylist.min.css @@ -1 +1 @@ -.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.play-menu a:hover{background-color:#484848;color:#fff}.is-active-play{color:#dd7325;background-color:#dd7325} +.play-menu{height:200px;overflow-y:auto}.play-menu a{color:white}.play-menu a:hover{background-color:#484848;color:#fff}.is-active-play{color:#3273dc;background-color:#3273dc} diff --git a/dist/css/style.css b/dist/css/style.css index b0b67ab..0903dfd 100644 --- a/dist/css/style.css +++ b/dist/css/style.css @@ -2,7 +2,7 @@ * bulma css framework (github.com/jgthms | bulma.io) * Author: jeremy thomas * Author: jesus e. - * Version: 1.0.4 + * Version: 2.0.0 * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE) */ /* basic formatting changes (mostly to cater for darker colours) */ @@ -22,6 +22,7 @@ body, input, textarea, .button { } /* Colores */ +/* main */ /* ------------- Menu Mobile sin JS ---------------- */ /* input hidden */ #navbar-toggle-cbox { @@ -39,7 +40,7 @@ label[for=navbar-toggle-cbox] { /*- ----------- End Menu Mobile sin JS ------------- */ /* navigation */ .navbar { - background-color: #0c0f0f; + background-color: #0a0a0a; } .navbar a { @@ -72,7 +73,7 @@ label[for=navbar-toggle-cbox] { } .navbar.is-social-center > a.navbar-item:hover { - color: #dd7325; + color: #209cee; } /* main-header */ @@ -85,11 +86,11 @@ label[for=navbar-toggle-cbox] { } .main-header .subtitle { - color: #dd7325; + color: #fff; } .main-header .hero { - background-color: #161c1c; + background-color: #1a1a1a; } code { @@ -103,7 +104,14 @@ li { pre { background-color: #000; - color: #78dcfa; + color: #f9f9f9; + margin: 10px 0; + border: 1px solid #3273dc; + border-left: 10px solid #3273dc; + background-size: 1px 40px; + text-align: left; + direction: ltr; + tab-size: 2; } strong { @@ -130,7 +138,6 @@ video { /* Colors Code */ .highlight { - background: #000000; color: #cccccc; } @@ -337,7 +344,7 @@ video { } .soumaicon:hover svg { - fill: #dd7325; + fill: #3273dc; } /* main content styling */ @@ -348,7 +355,7 @@ video { /* card changes */ .card { - background-color: #161c1c; + background-color: #1a1a1a; } .card .card-content-footer { @@ -360,14 +367,20 @@ video { padding-top: 2px; } -.card-content-header, .comments-header { - background-color: #dd7325; +.card-content-header, +.comments-header { + background-color: #3273dc; padding: 10px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); } +.card-content-header:hover { + background-color: #209cee; +} + .card-content-header .title, .card-content-header a { color: whitesmoke; + text-shadow: 0px 1px 2px #000; } .card-inner-wrapper { @@ -376,7 +389,7 @@ video { .card-content-text { padding-bottom: 30px; - border-bottom: 1px solid #dd7325; + border-bottom: 1px solid #3273dc; } .card-content-text p { @@ -424,15 +437,6 @@ video { display: contents; } -.content blockquote:before { - opacity: 0.5; - content: open-quote; - font-size: 4rem; - line-height: .1em; - margin-right: .25em; - vertical-align: -0.4em; -} - * { box-sizing: border-box; } @@ -453,14 +457,8 @@ legend { margin-bottom: 0rem; } -.hidden-more { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} - a { - color: #0099e5; + color: #3273dc; } a:hover { @@ -469,24 +467,24 @@ a:hover { } a.navbar-item.is-tab.is-active { - border-bottom-color: #dd7325; + border-bottom-color: #209cee; border-width: 2px; color: whitesmoke; } a.navbar-item.is-tab:hover { - border-bottom-color: #dd7325; + border-bottom-color: #209cee; border-width: 2px; - color: #dd7325; + color: #209cee; } a.navbar-item:hover { - color: #dd7325; + color: #209cee; background-color: transparent; } a.pagination-previous.disabled, a.pagination-next.disabled { - background: #0c0f0f; + background: #000; color: white; cursor: not-allowed; border-color: #dbdbdb; @@ -497,13 +495,13 @@ a.pagination-previous.disabled, a.pagination-next.disabled { h2 > a:hover { color: white; - text-shadow: 1px 2px 0px #161C1C; + text-shadow: 0px 1px 2px #000; } .is-button-grey, .pagination-link { background-color: #7a7a7a; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: #1b1b1b; } .button { @@ -511,7 +509,7 @@ h2 > a:hover { } .button:hover, .pagination .is-current, .pagination-link:hover { - background-color: #dd7325; + background-color: #3273dc; border-color: transparent; color: whitesmoke; } @@ -526,20 +524,35 @@ h2 > a:hover { } .footer { - background-color: #0c0f0f; + background-color: #0a0a0a; color: whitesmoke; } .footer a { - color: #dd7325; + color: #3273dc; +} + +.footer a:hover { + color: #ffc20e; } .footer-top-shadow { box-shadow: 0 1px 3px rgba(10, 10, 10, 0.1); } +.hidden-more { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #fff; +} + +.warning-sp { + display: none; +} + .comments-content { - background-color: #161c1c; + background-color: #1a1a1a; padding-bottom: 10px; margin-top: 20px; } @@ -556,21 +569,70 @@ h2 > a:hover { color: whitesmoke; } +.comments-wrapper p > a { + color: #f0e68c; +} + +.comments-wrapper a { + color: #f0e68c; +} + +.comments-wrapper a:hover { + color: #ffc20e; +} + .comments-wrapper small { color: #7a7a7a; } -.comments-wrapper strong { - color: whitesmoke; +.comments-wrapper strong > a { + color: #00d1b2; font-weight: 100; } -.comments-wrapper a { - color: #dd7325; +.comments-wrapper time > small > a { + color: grey; } .comments-wrapper .media .media, .comments-wrapper .media + .media { - border-top: 1px solid #dd7325; + border-top: 1px solid #209cee; +} + +/* table of contents */ +.toc { + font-size: 0.85rem; +} + +.toctitle { + display: block; + text-align: center; + font-size: 1rem; + color: white; + text-decoration: underline; +} + +nav.toc { + background-color: #0c0f0f; + border: 1px solid #3273dc; + margin: 1rem 0px; +} + +div.toc { + margin: 1rem; +} + +a.headerlink { + color: grey; + padding-left: .5em; + visibility: hidden; +} + +h1:hover > a.headerlink, h2:hover > a.headerlink, +h3:hover > a.headerlink, h4:hover > a.headerlink, +h5:hover > a.headerlink, h6:hover > a.headerlink, +dt:hover > a.headerlink { + text-decoration: none; + visibility: visible; } @media screen and (max-width: 1087px) { diff --git a/dist/css/style.min.css b/dist/css/style.min.css index 4c511c1..d307dcd 100644 --- a/dist/css/style.min.css +++ b/dist/css/style.min.css @@ -2,6 +2,6 @@ * bulma css framework (github.com/jgthms | bulma.io) * Author: jeremy thomas * Author: jesus e. - * Version: 1.0.4 + * Version: 2.0.0 * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE) - */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0c0f0f}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#dd7325}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#dd7325}.main-header .hero{background-color:#161c1c}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#000;color:#78dcfa}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.input::-moz-placeholder,.textarea::-moz-placeholder{color:black}.highlight{background:#000000;color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#ffc400}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#FFEA00}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#dd7325}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#161c1c}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#dd7325;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header .title,.card-content-header a{color:whitesmoke}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #dd7325}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:#0a0e0e;color:white;border-left:4px solid #dbdbdb;margin:1rem 1rem;padding:1rem 1rem}.content blockquote p{display:contents}.content blockquote:before{opacity:0.5;content:open-quote;font-size:4rem;line-height:.1em;margin-right:.25em;vertical-align:-0.4em}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}.hidden-more{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}a{color:#0099e5}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#dd7325;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#dd7325;border-width:2px;color:#dd7325}a.navbar-item:hover{color:#dd7325;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#0c0f0f;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}h2>a:hover{color:white;text-shadow:1px 2px 0px #161C1C}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:rgba(0,0,0,0.7)}.button{vertical-align:unset}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#dd7325;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.pagination-style-custom{margin-top:50px}.footer{background-color:#0c0f0f;color:whitesmoke}.footer a{color:#dd7325}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.comments-content{background-color:#161c1c;padding-bottom:10px;margin-top:20px}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong{color:whitesmoke;font-weight:100}.comments-wrapper a{color:#dd7325}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #dd7325}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}} + */@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;font-display:swap;src:local("Roboto Condensed"),local("RobotoCondensed-Regular"),url(../fonts/roboto/roboto-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}body,input,textarea,.button{font-family:'Roboto Condensed', Nimbus Sans, sans-serif}#navbar-toggle-cbox{display:none}label[for=navbar-toggle-cbox]{cursor:pointer}#navbar-toggle-cbox:checked ~ .navbar-menu{display:block}.navbar{background-color:#0a0a0a}.navbar a{color:whitesmoke}.navbar.is-social-center{align-items:stretch;background-color:transparent;display:-webkit-box;display:-ms-flexbox;display:flex;flex-grow:0;flex-shrink:0;justify-content:center;margin-left:auto;margin-right:auto;-webkit-box-align:stretch;-webkit-box-pack:center;-webkit-box-flex:0;-ms-flex-pack:center;-ms-flex-align:stretch;-ms-flex-negative:0;-ms-flex-positive:0}.navbar.is-social-center>a.navbar-item{color:#4a4a4a;background-color:transparent}.navbar.is-social-center>a.navbar-item:hover{color:#209cee}.main-header{box-shadow:0 2px 3px rgba(10,10,10,0.1)}.main-header .title{color:whitesmoke}.main-header .subtitle{color:#fff}.main-header .hero{background-color:#1a1a1a}code{background-color:#282828;color:#73d1ed}li{color:white}pre{background-color:#000;color:#f9f9f9;margin:10px 0;border:1px solid #3273dc;border-left:10px solid #3273dc;background-size:1px 40px;text-align:left;direction:ltr;tab-size:2}strong{color:white}video{width:100%;height:auto}.is-cyan{color:#0dd3ff}.is-table{display:table}.input::-moz-placeholder,.textarea::-moz-placeholder{color:black}.highlight{color:#cccccc}.highlight pre{font-size:75%}.highlight .hll{background-color:#222222}.highlight .c{color:#4E4F8E}.highlight .err{color:#cccccc;border:1px solid #FF0000}.highlight .esc,.highlight .g{color:#cccccc}.highlight .k{color:#cdcd00}.highlight .l,.highlight .n{color:#cccccc}.highlight .o{color:#3399cc}.highlight .x{color:#cccccc}.highlight .p{color:#fac0ba}.highlight .ch,.highlight .cm,.highlight .cp,.highlight .cpf,.highlight .c1{color:#4E4F8E}.highlight .cs{color:#cd0000;font-weight:bold}.highlight .gd{color:#cd0000}.highlight .ge{color:#cccccc;font-style:italic}.highlight .gr{color:#FF0000}.highlight .gh{color:#4E4F8E;font-weight:bold}.highlight .gi{color:#00cd00}.highlight .go{color:#888888}.highlight .gp{color:#4E4F8E;font-weight:bold}.highlight .gs{color:#cccccc;font-weight:bold}.highlight .gu{color:#800080;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#cdcd00}.highlight .kd{color:#00cd00}.highlight .kn{color:#cd00cd}.highlight .kp,.highlight .kr{color:#cdcd00}.highlight .kt{color:#00cd00}.highlight .ld{color:#cccccc}.highlight .m{color:#cd00cd}.highlight .s{color:#ffc400}.highlight .na{color:#cccccc}.highlight .nb{color:#cd00cd}.highlight .nc{color:#00cdcd}.highlight .no,.highlight .nd,.highlight .ni{color:#cccccc}.highlight .ne{color:#666699;font-weight:bold}.highlight .nf,.highlight .nl,.highlight .nn,.highlight .nx,.highlight .py{color:#cccccc}.highlight .nt{color:orange}.highlight .nv{color:#00cdcd}.highlight .ow{color:#cdcd00}.highlight .w{color:#cccccc}.highlight .mb,.highlight .mf,.highlight .mh,.highlight .mi,.highlight .mo{color:#cd00cd}.highlight .sb,.highlight .sc,.highlight .sd,.highlight .s2,.highlight .se,.highlight .sh,.highlight .si,.highlight .sx,.highlight .sr,.highlight .s1,.highlight .ss{color:#FFEA00}.highlight .bp{color:#cd00cd}.highlight .vc,.highlight .vg,.highlight .vi{color:#00cdcd}.highlight .il{color:#cd00cd}.soumaicon{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-line-pack:center;align-content:center}.soumaicon svg{width:.8rem;height:.8rem;fill:currentcolor}.soumaicon:hover svg{fill:#3273dc}.main-content{background-color:#363636;padding:1rem 1.5rem}.card{background-color:#1a1a1a}.card .card-content-footer{color:#7a7a7a}.card-content-footer i{padding-right:10px;padding-top:2px}.card-content-header,.comments-header{background-color:#3273dc;padding:10px;box-shadow:0 2px 3px rgba(10,10,10,0.1)}.card-content-header:hover{background-color:#209cee}.card-content-header .title,.card-content-header a{color:whitesmoke;text-shadow:0px 1px 2px #000}.card-inner-wrapper{padding:25px}.card-content-text{padding-bottom:30px;border-bottom:1px solid #3273dc}.card-content-text p{color:whitesmoke;font-size:1em}.card-content-text label{color:whitesmoke;font-weight:100}.card-content-nav{padding-top:10px}.card-content-footer{padding-top:15px;padding-bottom:15px}.card-content-footer-small{padding-top:20px;margin-bottom:-25px}.card-content-footer-cols{padding-top:20px;margin-bottom:-20px}.card-content-form{padding-top:20px}.content blockquote{background:#0a0e0e;color:white;border-left:4px solid #dbdbdb;margin:1rem 1rem;padding:1rem 1rem}.content blockquote p{display:contents}*{box-sizing:border-box}*:after,*:before{box-sizing:border-box}legend{box-sizing:border-box}.content dl,.content dt,.content dd,.content h2,.content h3,.content h4,.content h5,.content h6{color:white}.content.social{margin-bottom:0rem}a{color:#3273dc}a:hover{text-decoration:none;color:#ffc20e}a.navbar-item.is-tab.is-active{border-bottom-color:#209cee;border-width:2px;color:whitesmoke}a.navbar-item.is-tab:hover{border-bottom-color:#209cee;border-width:2px;color:#209cee}a.navbar-item:hover{color:#209cee;background-color:transparent}a.pagination-previous.disabled,a.pagination-next.disabled{background:#000;color:white;cursor:not-allowed;border-color:#dbdbdb;box-shadow:none;color:#7a7a7a;opacity:.5}h2>a:hover{color:white;text-shadow:0px 1px 2px #000}.is-button-grey,.pagination-link{background-color:#7a7a7a;border-color:transparent;color:#1b1b1b}.button{vertical-align:unset}.button:hover,.pagination .is-current,.pagination-link:hover{background-color:#3273dc;border-color:transparent;color:whitesmoke}.button:focus{box-shadow:none;border-color:transparent}.pagination-style-custom{margin-top:50px}.footer{background-color:#0a0a0a;color:whitesmoke}.footer a{color:#3273dc}.footer a:hover{color:#ffc20e}.footer-top-shadow{box-shadow:0 1px 3px rgba(10,10,10,0.1)}.hidden-more{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#fff}.warning-sp{display:none}.comments-content{background-color:#1a1a1a;padding-bottom:10px;margin-top:20px}.comments-wrapper{padding:25px}.comments-header .title{color:whitesmoke}.comments-wrapper p{color:whitesmoke}.comments-wrapper p>a{color:khaki}.comments-wrapper a{color:khaki}.comments-wrapper a:hover{color:#ffc20e}.comments-wrapper small{color:#7a7a7a}.comments-wrapper strong>a{color:#00d1b2;font-weight:100}.comments-wrapper time>small>a{color:grey}.comments-wrapper .media .media,.comments-wrapper .media+.media{border-top:1px solid #209cee}.toc{font-size:0.85rem}.toctitle{display:block;text-align:center;font-size:1rem;color:white;text-decoration:underline}nav.toc{background-color:#0c0f0f;border:1px solid #3273dc;margin:1rem 0px}div.toc{margin:1rem}a.headerlink{color:grey;padding-left:.5em;visibility:hidden}h1:hover>a.headerlink,h2:hover>a.headerlink,h3:hover>a.headerlink,h4:hover>a.headerlink,h5:hover>a.headerlink,h6:hover>a.headerlink,dt:hover>a.headerlink{text-decoration:none;visibility:visible}@media screen and (max-width: 1087px){.navbar-menu{background-color:transparent}}@media screen and (max-width: 600px){.main-content{padding:0rem}} diff --git a/src/scss/aplaylist/aplaylist.scss b/src/scss/aplaylist/aplaylist.scss index b0bb571..d179667 100644 --- a/src/scss/aplaylist/aplaylist.scss +++ b/src/scss/aplaylist/aplaylist.scss @@ -13,6 +13,6 @@ } .is-active-play { - color: #dd7325; - background-color: #dd7325; + color: #3273dc; + background-color: #3273dc; } diff --git a/src/scss/custom/_button.scss b/src/scss/custom/_button.scss index 0a11b2c..270ce48 100644 --- a/src/scss/custom/_button.scss +++ b/src/scss/custom/_button.scss @@ -1,7 +1,7 @@ .is-button-grey, .pagination-link { background-color: #7a7a7a; border-color: transparent; - color: rgba(0, 0, 0, 0.7); + color: #1b1b1b; } .button { @@ -9,7 +9,7 @@ } .button:hover, .pagination .is-current, .pagination-link:hover { - background-color: #dd7325; + background-color: $boton; border-color: transparent; color: whitesmoke; } diff --git a/src/scss/custom/_comments.scss b/src/scss/custom/_comments.scss index ed77528..8a79bfb 100644 --- a/src/scss/custom/_comments.scss +++ b/src/scss/custom/_comments.scss @@ -1,5 +1,9 @@ +.warning-sp { + display: none; +} + .comments-content { - background-color: #161c1c; + background-color: $card; padding-bottom: 10px; margin-top: 20px; } @@ -12,23 +16,39 @@ color: whitesmoke; } + .comments-wrapper { p { color: whitesmoke; + >a { + color: $clinks; + } + } + a { + color: $clinks; + &:hover { + color: $hlinks; + } } small { color: #7a7a7a; } strong { - color: whitesmoke; - font-weight: 100; + >a { + color: $author; + font-weight: 100; + } } - a { - color: #dd7325; + time { + >small { + >a { + color: grey; + } + } } .media { .media, + .media { - border-top: 1px solid #dd7325; + border-top: 1px solid $slinks; } } } diff --git a/src/scss/custom/_elements.scss b/src/scss/custom/_elements.scss index f184b45..7fbd19e 100644 --- a/src/scss/custom/_elements.scss +++ b/src/scss/custom/_elements.scss @@ -9,7 +9,14 @@ li { pre { background-color: #000; - color: #78dcfa; + color: #f9f9f9; + margin: 10px 0; + border: 1px solid $code; + border-left: 10px solid $code; + background-size: 1px 40px; + text-align: left; + direction: ltr; + tab-size: 2; } strong { diff --git a/src/scss/custom/_footer.scss b/src/scss/custom/_footer.scss index a92637d..f0c2cf7 100644 --- a/src/scss/custom/_footer.scss +++ b/src/scss/custom/_footer.scss @@ -1,11 +1,21 @@ .footer { - background-color: #0c0f0f; + background-color: $footerheader; color: whitesmoke; a { - color: #dd7325; + color: $links; + &:hover { + color: $hlinks; + } } } .footer-top-shadow { box-shadow: 0 1px 3px rgba(10, 10, 10, 0.1); } + +.hidden-more { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: $txfooter; +} diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss index 1377035..5b1e012 100644 --- a/src/scss/custom/_header.scss +++ b/src/scss/custom/_header.scss @@ -17,7 +17,7 @@ label[for=navbar-toggle-cbox] { /* navigation */ .navbar { - background-color: #0c0f0f; + background-color: $footerheader; a { color: whitesmoke; } @@ -43,7 +43,7 @@ label[for=navbar-toggle-cbox] { color: #4a4a4a; background-color: transparent; &:hover { - color: #dd7325; + color: $slinks; } } } @@ -56,10 +56,10 @@ label[for=navbar-toggle-cbox] { color: whitesmoke; } .subtitle { - color: #dd7325; + color: $subtitle; } box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); .hero { - background-color: #161c1c; + background-color: $card; } } diff --git a/src/scss/custom/_hilite.scss b/src/scss/custom/_hilite.scss index 0dd5dd7..a53a74f 100644 --- a/src/scss/custom/_hilite.scss +++ b/src/scss/custom/_hilite.scss @@ -7,7 +7,6 @@ .hll { background-color: #222222; } - background: #000000; color: #cccccc; // Comments .c { diff --git a/src/scss/custom/_links.scss b/src/scss/custom/_links.scss index d5449a8..c813caa 100644 --- a/src/scss/custom/_links.scss +++ b/src/scss/custom/_links.scss @@ -1,29 +1,29 @@ a { - color: #0099e5; + color: $links; &:hover { text-decoration: none; - color: #ffc20e; + color: $hlinks; } &.navbar-item { &.is-tab { &.is-active { - border-bottom-color: #dd7325; + border-bottom-color: $slinks; border-width: 2px; color: whitesmoke; } &:hover { - border-bottom-color: #dd7325; + border-bottom-color: $slinks; border-width: 2px; - color: #dd7325; + color: $slinks; } } &:hover { - color: #dd7325; + color: $slinks; background-color: transparent; } } &.pagination-previous.disabled, &.pagination-next.disabled { - background: #0c0f0f; + background: $plinks; color: white; cursor: not-allowed; border-color: #dbdbdb; @@ -35,5 +35,5 @@ a { h2 > a:hover { color: white; - text-shadow: 1px 2px 0px #161C1C; + text-shadow: 0px 1px 2px #000; } diff --git a/src/scss/custom/_main.scss b/src/scss/custom/_main.scss index 9a7b866..7b39b2a 100644 --- a/src/scss/custom/_main.scss +++ b/src/scss/custom/_main.scss @@ -1,12 +1,12 @@ /* main content styling */ .main-content { - background-color: #363636; + background-color: $fondo; padding: 1rem 1.5rem; } /* card changes */ .card { - background-color: #161c1c; + background-color: $card; .card-content-footer { color: #7a7a7a; } @@ -17,15 +17,21 @@ padding-top: 2px; } -.card-content-header, .comments-header { - background-color: #dd7325; +.card-content-header, +.comments-header { + background-color: $barra; padding: 10px; box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1); } +.card-content-header:hover { + background-color: $hbarra; +} + .card-content-header { .title, a { color: whitesmoke; + text-shadow: 0px 1px 2px #000; } } @@ -35,7 +41,7 @@ .card-content-text { padding-bottom: 30px; - border-bottom: 1px solid #dd7325; + border-bottom: 1px solid $barra; p { color: whitesmoke; font-size: 1em; @@ -78,14 +84,6 @@ p { display: contents; } - &:before { - opacity: 0.5; - content: open-quote; - font-size: 4rem; - line-height: .1em; - margin-right: .25em; - vertical-align: -0.4em; - } } * { @@ -107,9 +105,3 @@ legend { margin-bottom: 0rem; } } - -.hidden-more { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} diff --git a/src/scss/custom/_toc.scss b/src/scss/custom/_toc.scss new file mode 100644 index 0000000..64c0fe0 --- /dev/null +++ b/src/scss/custom/_toc.scss @@ -0,0 +1,36 @@ +/* table of contents */ +.toc { + font-size: 0.85rem; +} + +.toctitle { + display: block; + text-align: center; + font-size: 1rem; + color: white; + text-decoration: underline; +} + +nav.toc { + background-color: #0c0f0f; + border: 1px solid $toc; + margin: 1rem 0px; +} + +div.toc { + margin: 1rem; +} + +a.headerlink { + color: grey; + padding-left: .5em; + visibility: hidden; +} + +h1:hover > a.headerlink, h2:hover > a.headerlink, +h3:hover > a.headerlink, h4:hover > a.headerlink, +h5:hover > a.headerlink, h6:hover > a.headerlink, +dt:hover > a.headerlink { + text-decoration: none; + visibility: visible; +} diff --git a/src/scss/custom/_variables.scss b/src/scss/custom/_variables.scss index 062ba27..eee098c 100644 --- a/src/scss/custom/_variables.scss +++ b/src/scss/custom/_variables.scss @@ -1,3 +1,27 @@ /* Colores */ -$secundario: #dd7325; +$secundario: hsl(217, 71%, 53%); + +/* main */ +$fondo: hsl(0, 0%, 21%); +$subtitle: #fff; + +$barra: hsl(217, 71%, 53%); +$hbarra: hsl(204, 86%, 53%); + +$links: hsl(217, 71%, 53%); +$slinks: hsl(204, 86%, 53%); +$plinks: #000; +$card: #1a1a1a; +$footerheader: hsl(0, 0%, 4%); +$boton: hsl(217, 71%, 53%); +$hlinks: #ffc20e; +$code: hsl(217, 71%, 53%); +$toc: hsl(217, 71%, 53%); + +// footer +$txfooter: #fff; + +// comments +$clinks: #f0e68c; +$author: hsl(171, 100%, 41%); diff --git a/src/scss/custom/style.scss b/src/scss/custom/style.scss index 7f820b8..0323dd3 100644 --- a/src/scss/custom/style.scss +++ b/src/scss/custom/style.scss @@ -3,7 +3,7 @@ * bulma css framework (github.com/jgthms | bulma.io) * Author: jeremy thomas * Author: jesus e. - * Version: 1.0.4 + * Version: 2.0.0 * Licensed under MIT (https://github.com/jgthms/bulma/blob/master/LICENSE) */ @@ -45,5 +45,8 @@ // Comentarios @import "comments"; +// Extras +@import "toc"; + // Mediaqueries @import "mediaqueries"; |