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

2
README.md
View File

@ -1,6 +1,6 @@
# 30 Seconds of CSS
<a href="https://30-seconds.github.io/30-seconds-of-css/" target="_blank">![logo](https://i.imgur.com/2L1bMyy.png)</a>
<a href="https://30-seconds.github.io/30-seconds-of-css/" target="_blank">![logo](https://i.imgur.com/kPMfyD4.jpg)</a>
[![License](https://img.shields.io/badge/license-CC0--1.0-blue.svg)](https://github.com/30-seconds/30-seconds-of-css/blob/master/LICENSE) [![Gitter chat](https://img.shields.io/badge/chat-on%20gitter-4FB999.svg)](https://gitter.im/30-seconds-of-css/Lobby) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](http://makeapullrequest.com) [![Insight.io](https://img.shields.io/badge/insight.io-Ready-brightgreen.svg)](https://insight.io/github.com/30-seconds/30-seconds-of-css/tree/master/?source=0)

1
snippets/not-selector.md
View File

@ -10,7 +10,6 @@ The `:not` psuedo selector is useful for styling a group of elements, while leav
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
```

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,

19
src/html/components/header.html
View File

@ -1,12 +1,17 @@
<header class="header">
<div class="container">
<img class="header__logo" draggable="false" src="./src/img/logo.png">
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
<p class="header__description">
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
</p>
<div class="header__github-button-wrapper">
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
<img class="header__leaves" draggable="false" id="header__leaves1" src="./src/img/leaves.svg" alt>
<img class="header__leaves" draggable="false" id="header__leaves2" src="./src/img/leaves.svg" alt>
<img id="header__blob" draggable="false" src="./src/img/blob.png" alt>
<div class="header__content">
<img class="header__logo" draggable="false" src="./src/img/logo.png">
<h1 class="header__heading">30 Seconds of <strong class="header__css">CSS</strong></h1>
<p class="header__description">
A curated collection of useful CSS snippets you can understand in 30 seconds or less.
</p>
<div class="header__github-button-wrapper">
<a class="github-button header__github-button" href="https://github.com/30-seconds/30-seconds-of-css" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star 30-seconds/30-seconds-of-css on GitHub">Star</a>
</div>
</div>
</div>
</header>

BIN
src/img/blob.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 255 KiB

1
src/img/leaves.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

4
src/js/deps/utils.js
View File

@ -36,6 +36,10 @@ if (/iPhone|iPad|iPod/.test(navigator.platform) && !window.MSStream) {
document.body.style.cursor = 'pointer'
}
if (/Mac/.test(navigator.platform)) {
document.documentElement.classList.add('macOS')
}
/*
* A small utility to fix the letter kerning on macOS Chrome and Firefox when using the system font
* (San Francisco). It is now fixed in the text rendering engine in FF 58 and Chrome 64.