andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Website styling improvements (#105)

Browse Source 
* Website styling improvements

* not-selector.md causing overflow on 320px displays

* Tweaks

* Extra padding-right for sidebar link

* New logo
This commit is contained in:
atomiks
2018-10-05 14:10:57 +10:00
committed by GitHub
parent d5f0644d7a
commit a9234afee0
11 changed files with 115 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/css/components/base.scss
View File

@ -12,7 +12,7 @@ html {
body {
font-family: -apple-system, BlinkMacSystemFont, Roboto, Segoe UI, 'Helvetica Neue', Helvetica,
Arial, sans-serif;
background: #f6f7fd;
background: #f2f3f8;
color: rgb(50, 75, 100);
line-height: 1.5;
}
@ -62,6 +62,12 @@ ol {
@media (min-width: 992px) {
.content-wrapper {
margin-left: 200px;
margin-left: 20%;
}
}
@media (min-width: 1400px) {
.content-wrapper {
margin-left: 275px;
}
}

54
src/css/components/header.scss
View File

File diff suppressed because one or more lines are too long

45
src/css/components/sidebar.scss
View File

@ -1,5 +1,5 @@
.sidebar {
background: #202e4e;
background: #273149;
position: fixed;
z-index: 2;
width: 100%;
@ -23,7 +23,7 @@
}
&__links {
background: #202e4e;
background: #273149;
overflow-y: auto;
transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-origin: 0% 0%;
@ -47,10 +47,11 @@
&__link {
display: block;
color: #e3f5ff;
padding: 0.5rem 0.75rem;
padding: 0.75rem;
padding-right: 1.5rem;
margin-right: -0.75rem;
transition: all 0.1s ease-out;
border-left: 2px solid #576a85;
margin: 0.5rem;
font-weight: 500;
font-size: 0.95rem;
@ -77,26 +78,15 @@
left: 0;
top: 0;
bottom: 0;
width: 15%;
max-width: 250px;
min-width: 200px;
width: 20%;
height: 100%;
background: linear-gradient(-30deg, #2a3d67, #14264e);
background: linear-gradient(-30deg, #273149, #1c273f);
box-shadow: 0.4rem 0.4rem 0.8rem rgba(0, 32, 64, 0.1);
overflow-y: auto;
color: white;
&::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.6);
}
&::-webkit-scrollbar {
width: 10px;
background-color: #4b6191;
}
&::-webkit-scrollbar-thumb {
background-color: #4b6191;
@media (min-width: 1400px) {
width: 275px;
}
&__links {
@ -114,3 +104,20 @@
}
}
}
html:not(.macOS) {
.sidebar {
&::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0.6);
}
&::-webkit-scrollbar {
width: 10px;
background-color: #505b76;
}
&::-webkit-scrollbar-thumb {
background-color: #505b76;
}
}
}

3
src/css/components/tags.scss
View File

@ -5,6 +5,7 @@
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
padding: 0 1rem;
&__tag {
display: inline-block;
@ -20,7 +21,7 @@
vertical-align: middle;
line-height: 2;
padding: 0 0.5rem;
margin-right: 0.5rem;
margin: 0 0.1rem;
transition: all 0.1s ease-out;
outline: 0;

23
src/css/deps/prism.css
View File

@ -1,8 +1,9 @@
code[class*='language-'],
pre[class*='language-'] {
color: rgb(50, 75, 100);
color: rgb(215, 236, 255);
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-family: 'Operator Mono', 'Roboto Mono', Menlo, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono',
monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
@ -59,7 +60,7 @@ pre.is-option {
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: #f5f6f9;
background: linear-gradient(-30deg, #273149, #1c273f);
border-radius: 0.25rem;
}
@ -79,11 +80,11 @@ pre[class*='language-'] {
.token.selector,
.token.attr-name {
color: #da7800;
color: #c7f683;
}
.token.punctuation {
color: #93a0c7;
color: #5ac8e3;
}
.namespace {
@ -91,7 +92,7 @@ pre[class*='language-'] {
}
.token.tag {
color: #e22f70;
color: #2cefd8;
}
.token.property,
@ -100,7 +101,7 @@ pre[class*='language-'] {
.token.constant,
.token.symbol,
.token.deleted {
color: #0087ca;
color: #85b4ff;
}
.token.string,
@ -110,23 +111,23 @@ pre[class*='language-'] {
.token.char,
.token.builtin,
.token.inserted {
color: #008a7e;
color: #ffd694;
}
.token.operator,
.token.entity,
.style .token.string {
color: #f53737;
color: #ff9bbe;
}
.token.important,
.token.atrule,
.token.keyword {
color: #7552ff;
color: #b7adff;
}
.token.function {
color: #396dff;
color: #25d0e5;
}
.token.regex,