Skip to content

Commit

Permalink
IMPORTANT: Replace all rem units to px
Browse files Browse the repository at this point in the history
  • Loading branch information
@picturepan2
picturepan2 committed Jul 1, 2017
1 parent ef49185 commit 78de8f1
Show file tree
Hide file tree
Showing 55 changed files with 1,039 additions and 1,024 deletions.
84 changes: 42 additions & 42 deletions docs/css/docs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,19 @@
/* Spectre docs style */
.section-header {
background: rgba(248, 249, 250, .9);
padding: 1rem .5rem;
padding: 10px 5px;
position: fixed;
top: 0;
width: 100%;
z-index: 200;
}
.section-hero {
padding: 1rem;
padding: 10px;
position: relative;
z-index: 300;
}
.grid-header .navbar {
height: 4rem;
height: 40px;
}
.grid-header .navbar-section {
padding: 0;
Expand All @@ -28,8 +28,8 @@
}
.grid-header .btn-link {
color: #5b657a;
padding-left: .6rem;
padding-right: .6rem;
padding-left: 6px;
padding-right: 6px;
}
.grid-header .btn-link:focus,
.grid-header .btn-link:hover,
Expand All @@ -38,40 +38,40 @@
opacity: .75;
}
.grid-hero {
margin-bottom: 4rem;
margin-top: 10rem;
margin-bottom: 40px;
margin-top: 100px;
}
.grid-hero h1 {
color: #454d5d;
font-size: 3.2rem;
font-size: 32px;
font-weight: 400;
}
.grid-hero h2 {
color: #50596c;
font-size: 1.8rem;
font-size: 18px;
font-weight: 400;
line-height: 3rem;
margin-bottom: 3rem;
line-height: 30px;
margin-bottom: 30px;
}
.grid-hero h2 u {
border-bottom: .2rem solid currentColor;
padding-bottom: .1rem;
border-bottom: 2px solid currentColor;
padding-bottom: 1px;
text-decoration: none;
}
.grid-hero .card {
background: none;
border: 0;
color: #5b657a;
padding: 1rem;
padding: 10px;
}
.grid-hero .card .card-title {
color: #5764c6;
font-size: 1.8rem;
font-size: 18px;
margin-bottom: 0;
}
.grid-footer {
color: #acb3c2;
padding: 2rem 0 1rem 0;
padding: 20px 0 10px 0;
}
.grid-footer a {
color: #727e96;
Expand All @@ -80,10 +80,10 @@
padding-top: 0;
}
.docs-content .container {
padding: 1rem;
padding: 10px;
}
.docs-content header {
padding-top: 5.5rem;
padding-top: 55px;
}
.docs-content .anchor {
height: 0;
Expand All @@ -99,31 +99,31 @@
width: auto;
}
.docs-content .notes {
margin: 4rem 0;
margin: 40px 0;
}
.docs-content .docs-block {
border-radius: .2rem;
padding: 1rem .5rem;
border-radius: 2px;
padding: 10px 5px;
}
.docs-content .docs-dot {
border-radius: 50%;
display: inline-block;
height: 1rem;
height: 10px;
padding: 0;
width: 1rem;
width: 10px;
}
.docs-content .docs-table th,
.docs-content .docs-table td {
padding: 1.5rem .5rem;
padding: 15px 5px;
}
.docs-content h1,
.docs-content h2,
.docs-content h3,
.docs-content h4,
.docs-content h5,
.docs-content h6 {
margin-bottom: 2rem;
margin-top: 2rem;
margin-bottom: 20px;
margin-top: 20px;
}
.docs-content h1:hover .anchor,
.docs-content h2:hover .anchor,
Expand All @@ -135,19 +135,19 @@
width: auto;
}
.docs-content .docs-color {
border-radius: .2rem;
margin: .5rem 0;
padding: 1rem;
border-radius: 2px;
margin: 5px 0;
padding: 10px;
}
.docs-content .docs-color .color-subtitle {
font-size: 1.2rem;
font-size: 12px;
opacity: .75;
}
.docs-content .panel {
height: 75vh;
}
.docs-content .panel .tile {
margin: 1.5rem 0;
margin: 15px 0;
}
.docs-content .code {
color: #5b657a;
Expand All @@ -165,7 +165,7 @@
color: #e06870;
}
.docs-content .empty .icon {
font-size: 4rem;
font-size: 40px;
}
.docs-content .form-autocomplete .menu {
position: static;
Expand All @@ -176,16 +176,16 @@
-webkit-align-items: center;
align-items: center;
background: #5764c6;
border-radius: .2rem;
border-radius: 2px;
color: #fff;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
-ms-flex-align: center;
-ms-flex-line-pack: distribute;
font-size: 2.4rem;
height: 4rem;
width: 4rem;
font-size: 24px;
height: 40px;
width: 40px;
}
.docs-content .example-tile-icon .icon {
margin: auto;
Expand All @@ -196,10 +196,10 @@
}
@media screen and (min-width: 601px) {
.section-header .navbar-section {
padding: 0 .5rem;
padding: 0 5px;
}
.docs-sidebar {
padding: 7rem 1rem 5rem 1rem;
padding: 70px 10px 50px 10px;
}
.docs-sidebar .docs-nav {
position: relative;
Expand All @@ -208,7 +208,7 @@
.docs-sidebar .docs-nav {
position: sticky;
position: -webkit-sticky;
top: 8rem;
top: 80px;
}
.docs-sidebar .docs-nav .nav-item a:focus {
box-shadow: none;
Expand All @@ -220,7 +220,7 @@
}
@media screen and (max-width: 600px) {
.grid-hero h2 {
font-size: 1.8rem;
font-size: 18px;
}
.grid-hero .card {
padding: 0;
Expand All @@ -230,7 +230,7 @@
height: 100%;
left: 0;
overflow-y: auto;
padding: 6rem 3rem;
padding: 60px 30px;
position: fixed;
top: 0;
-webkit-transform: translateX(-100%);
Expand All @@ -239,7 +239,7 @@
transition: transform .2s ease, -webkit-transform .2s ease;
transition: transform .2s ease;
transition: -webkit-transform .2s ease;
width: 24rem;
width: 240px;
z-index: 400;
}
.docs-sidebar:target {
Expand Down
Loading

3 comments on commit 78de8f1

@valorin
Copy link

@valorin valorin commented on 78de8f1 Aug 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you don't mind me asking, what is the reason for this change? I'm curious why you're going to px when most frameworks I've seen use em/rem?

@christophermh44
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using rem and em is much better for responsiveness and to propagate dimensions changes just by changing font size on body.

@picturepan2
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@valorin @christophermh44 The problem here is about the minimum font size in Chinese/Japanese/Korean Chrome is 12px, which breaks some rem sizes. You can read about it on https://bugs.chromium.org/p/chromium/issues/detail?id=36429 .

Another solution is just changing html font-size to 20px or any other larger than 12px. But Spectre.css is not using any rem-only feature. I think px is better. Any thought?

Please sign in to comment.