Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a11195b

Browse files
committed
Style: with better highlight colors (shadows + backgrounds)
1 parent f1cab96 commit a11195b

File tree

1 file changed

+63
-15
lines changed

1 file changed

+63
-15
lines changed

‎_sass/_style.scss‎

Lines changed: 63 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -657,17 +657,12 @@ li > code,
657657
li> pre,
658658
h5 > code,
659659
.note > code {
660-
color: #cccccc;
661-
margin: 0 0.2em;
662660
max-width: 100%;
663661
overflow-x: auto;
664662
vertical-align: middle;
665-
@include border-radius(5px);
666-
@include box-shadow(inset 0 1px 10px rgba(0,0,0,.2),
667-
0 1px 0 rgba(255,255,255,.1),
668-
0 -1px 0 rgba(0,0,0,.5));
669663
}
670664

665+
671666
.language-sh code {
672667
color: #f0e68c;
673668
.sb {
@@ -688,10 +683,6 @@ h5 > code,
688683
code { background: none; }
689684
}
690685

691-
div.highlight,
692-
figure.highlight {
693-
background-color: rgba(0,0,0,.1);
694-
}
695686
.highlight {
696687
margin: 1em 0;
697688
width: 100%;
@@ -705,6 +696,31 @@ pre.highlight { padding: 10px 0.5em; }
705696
margin: 0;
706697
}
707698

699+
700+
div.highlight,
701+
figure.highlight {
702+
background-color: rgba(0,0,0,.1);
703+
@include border-radius(5px);
704+
@include box-shadow(inset 0 1px 10px rgba(0,0,0,.1),
705+
0 1px 0 rgba(255,255,255,.1),
706+
0 -1px 0 rgba(0,0,0,.4));
707+
}
708+
709+
pre.highlighter-rouge,
710+
code.highlighter-rouge {
711+
display: inline;
712+
padding: .15em .4em;
713+
margin: 0 .1em;
714+
715+
color: #cccccc;
716+
background-color: rgba(0,0,0,.03);
717+
@include border-radius(5px);
718+
@include box-shadow(inset 0 1px 5px rgba(0,0,0,.1),
719+
0 1px 0 rgba(255,255,255,.05),
720+
0 -1px 0 rgba(0,0,0,.2));
721+
}
722+
723+
708724
/* HTML Elements */
709725

710726
h1, h2, h3, h4, h5, h6 { margin: 0; }
@@ -872,6 +888,13 @@ code.output {
872888
background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
873889
background-image: linear-gradient(to bottom, #7e6d42 0%,#5c4e35 100%);
874890
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e6d42', endColorstr='#5c4e35',GradientType=0 );
891+
color: #ddd;
892+
a {
893+
color: #ddd;
894+
&:hover {
895+
color: #fff;
896+
}
897+
}
875898
}
876899

877900
@media (max-width: 568px) {
@@ -932,20 +955,33 @@ code.output {
932955
.unreleased {
933956
background-color: #cd9239;
934957
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
935-
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(205,146,57,1)), to(rgba(162,117,40,1)));
936-
background-image: -webkit-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
937-
background-image: -moz-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
938-
background-image: -o-linear-gradient(top, rgba(205,146,57,1) 0%, rgba(162,117,40,1) 100%);
939-
background-image: linear-gradient(to bottom, rgba(205,146,57,1) 0%,rgba(162,117,40,1) 100%);
958+
background-image: -webkit-gradient(linear, left top, left bottom, from(#cd9239), to(#a27528));
959+
background-image: -webkit-linear-gradient(top, #cd9239 0%, #a27528 100%);
960+
background-image: -moz-linear-gradient(top, #cd9239 0%, #a27528 100%);
961+
background-image: -o-linear-gradient(top, #cd9239 0%, #a27528 100%);
962+
background-image: linear-gradient(to bottom, #cd9239 0%,#a27528 100%);
940963
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cd9239', endColorstr='#a27528',GradientType=0 );
941964
}
942965

966+
.construction {
967+
background-color: #333;
968+
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
969+
background-image: -webkit-gradient(linear, left top, left bottom, from(#333), to(#222));
970+
background-image: -webkit-linear-gradient(top, #333 0%, #222 100%);
971+
background-image: -moz-linear-gradient(top, #333 0%, #222 100%);
972+
background-image: -o-linear-gradient(top, #333 0%, #222 100%);
973+
background-image: linear-gradient(to bottom, #333 0%,#222 100%);
974+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333', endColorstr='#222',GradientType=0 );
975+
}
976+
943977
.info:before { border-color: transparent #00617f #00617f transparent; }
944978

945979
.warning:before { border-color: transparent #6f0d0d #6f0d0d transparent; }
946980

947981
.unreleased:before { border-color: transparent #664719 #664719 transparent; }
948982

983+
.construction:before { border-color: transparent #222 #222 transparent; }
984+
949985
.info:after {
950986
content: '24円D8';
951987
position: absolute;
@@ -977,6 +1013,18 @@ code.output {
9771013
text-shadow: 0 1px 0 rgba(255,255,255,.25);
9781014
}
9791015

1016+
.construction:after {
1017+
// content: '1円F3D7';
1018+
content: '1円F6A7';
1019+
position: absolute;
1020+
top: 22px;
1021+
left: 10px;
1022+
font-size: 32px;
1023+
font-weight: 700;
1024+
// color: #2b2a12;
1025+
text-shadow: 0 1px 0 rgba(255,255,255,.25);
1026+
}
1027+
9801028
/* Version badge */
9811029

9821030
.version-badge {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /