mirror_css/pixel-borders
1
0
Fork 0
mirror of https://github.com/NigelOToole/pixel-borders.git synced 2025-09-01 09:53:41 +02:00
Code Issues Releases Wiki Activity

Small fixes to demo site styles

Browse Source
This commit is contained in:
Nigel O'Toole
2019-06-05 11:57:44 +01:00
parent c9fb91fa15
commit d110914ed1
6 changed files with 194 additions and 555 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.html
View File

@@ -6,10 +6,9 @@
<title>Pixel borders - Sass mixin to add pixelated borders to HTML elements</title>
<link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Open+Sans:300,400|Press+Start+2P&display=swap">
<link rel="stylesheet" href="styles/pixel-borders.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
</head>
@@ -122,6 +121,7 @@
<h3>pixel-borders</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
@@ -154,9 +154,11 @@
<td>Add a inset border to the bottom right in this colour.</td>
</tr>
</table>
</div>
<h3>pixel-box</h3>
<div class="table-wrapper">
<table class="table">
<tr>
<th>Property</th>
@@ -227,6 +229,7 @@
<td>Top left inset border colour.</td>
</tr>
</table>
</div>
<h3>Classes</h3>

32
src/styles/site/_site.scss
View File

@@ -7,7 +7,7 @@
}
body {
font-family: "Lato", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
font-family: "Open Sans", -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
@@ -26,8 +26,9 @@ a {
}
}
// Type
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
font-weight: 300;
small {
@@ -35,12 +36,13 @@ h1, h2, h3, h4, h5, h6 {
}
}
h1, h2 {
margin: 0 0 1rem 0;
h1, h2, h3 {
margin: 0 0 1.5rem 0;
}
h3, h4, h5, h6 {
margin: 0 0 .5rem 0;
h4, h5, h6 {
margin: 0 0 1rem 0;
font-weight: 400;
}
h1 { font-size: 2.5rem; }
@@ -75,9 +77,16 @@ pre {
border-radius: 4px;
}
.table-wrapper {
display: block;
width: 100%;
overflow-x: auto;
}
.table {
width: 100%;
margin: 0 0 1rem 0;
margin: 0 0 1.5rem 0;
border-collapse: collapse;
th, td {
@@ -140,15 +149,14 @@ pre {
padding: 1rem 0;
}
.container {
display: flex;
@media (max-width: 767px) {
@media (max-width: 575px) {
flex-flow: column;
}
@media (min-width: 768px) {
@media (min-width: 576px) {
align-items: center;
}
}
@@ -173,7 +181,7 @@ pre {
}
}
@media (min-width: 768px) {
@media (min-width: 576px) {
margin-left: auto;
}
}