Gulp system
Needs adding to the automation pipeline but manual will do for now...
This commit is contained in:
@@ -1,219 +1 @@
|
||||
*, *::before, *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/** Reset some basic elements */
|
||||
body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
|
||||
|
||||
/** Set `margin-bottom` to maintain vertical rhythm */
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
|
||||
|
||||
/** `main` element */
|
||||
main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
|
||||
|
||||
/** Images */
|
||||
img { max-width: 100%; vertical-align: middle; }
|
||||
|
||||
/** Figures */
|
||||
figure > img { display: block; }
|
||||
|
||||
figcaption { font-size: 14px; }
|
||||
|
||||
/** Lists */
|
||||
ul, ol { margin-left: 30px; }
|
||||
|
||||
li > ul, li > ol { margin-bottom: 0; }
|
||||
|
||||
/** Links */
|
||||
a { color: #2a7ae2; text-decoration: none; }
|
||||
|
||||
a:visited { color: #1756a9; }
|
||||
|
||||
a:hover { color: #111; text-decoration: underline; }
|
||||
|
||||
/** Blockquotes */
|
||||
blockquote { color: #828282; border-left: 4px solid #e8e8e8; padding-left: 15px; font-size: 18px; letter-spacing: -1px; font-style: italic; }
|
||||
|
||||
blockquote > :last-child { margin-bottom: 0; }
|
||||
|
||||
/** Code formatting */
|
||||
pre, code { font-size: 15px; border: 1px solid #e8e8e8; border-radius: 3px; background-color: #eef; }
|
||||
|
||||
code { padding: 1px 5px; }
|
||||
|
||||
pre { padding: 8px 12px; overflow-x: auto; }
|
||||
|
||||
pre > code { border: 0; padding-right: 0; padding-left: 0; }
|
||||
|
||||
/** Tables */
|
||||
table { margin-bottom: 30px; width: 100%; text-align: left; color: #3f3f3f; border-collapse: collapse; border: 1px solid #e8e8e8; }
|
||||
|
||||
table tr:nth-child(even) { background-color: #f7f7f7; }
|
||||
|
||||
table th, table td { padding: 10px 15px; }
|
||||
|
||||
table th { background-color: #f0f0f0; border: 1px solid #dedede; border-bottom-color: #c9c9c9; }
|
||||
|
||||
table td { border: 1px solid #e8e8e8; }
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
font-family: helvetica, arial;
|
||||
font-size: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
header, footer {
|
||||
background: #202226;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
header > * {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
header {
|
||||
box-shadow: 0 0 25px 0 black;
|
||||
}
|
||||
footer {
|
||||
color: white;
|
||||
}
|
||||
figcaption {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
}
|
||||
footer > a {
|
||||
font-size: x-large;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
h1 {
|
||||
color: #00ADFF;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
p, figure {
|
||||
margin: 15px 0;
|
||||
}
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
article, .contained {
|
||||
width: 70vw;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.container {
|
||||
min-height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
.bigimage {
|
||||
transform: skew(-10deg);
|
||||
color: white;
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
/*My kingdom for a 'backdrop-filter'!*/
|
||||
img.background {
|
||||
object-fit: cover;
|
||||
color: black;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: -1;
|
||||
-webkit-filter: blur(2px);
|
||||
filter: blur(2px);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.bigimage:hover img {
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
a.button {
|
||||
/* Counteract skew of image */
|
||||
transform: skew(10deg);
|
||||
color: white;
|
||||
touch-callout: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
padding: 0.8em;
|
||||
background: rgba(32, 34, 38, 0.7);
|
||||
}
|
||||
.badge {
|
||||
/* Center the content */
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
|
||||
/* Rounded border */
|
||||
border-radius: 0.5em;
|
||||
|
||||
/* Spacing */
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.bg-green {
|
||||
background: green;
|
||||
}
|
||||
.full-width {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
right: 50%;
|
||||
margin-left: -50vw;
|
||||
margin-right: -50vw;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
/* Looks crap, but better than broken nav */
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 70%;
|
||||
}
|
||||
nav > * {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
nav :first-child {
|
||||
padding-left: 0;
|
||||
border-left: none;
|
||||
}
|
||||
nav a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
nav {
|
||||
flex-direction: column;
|
||||
}
|
||||
nav > * {
|
||||
margin-right: auto;
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
nav :first-child {
|
||||
padding-left: 2em;
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
#homepage-container {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.bigimage {
|
||||
max-height: 20vh;
|
||||
transform: skew(0deg);
|
||||
}
|
||||
a.button {
|
||||
transform: skew(0deg);
|
||||
}
|
||||
}
|
||||
*,::after,::before{box-sizing:inherit}body,dd,hr{margin:0;padding:0}blockquote,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,ul{padding:0}blockquote,dl,h1,h2,h3,h4,h5,h6,ol,pre,ul{margin:0 0 15px}.highlight{margin-bottom:15px}figure>img,main{display:block}img{vertical-align:middle;max-width:100%}figcaption{font-size:14px;text-align:center;color:#999}ol,ul{margin-left:30px}li>ol,li>ul{margin-bottom:0}a{color:#2a7ae2;text-decoration:none}a:visited{color:#1756a9}a:hover{color:#111;text-decoration:underline}blockquote{color:#828282;border-left:4px solid #e8e8e8;padding-left:15px;font-size:18px;letter-spacing:-1px;font-style:italic}blockquote>:last-child{margin-bottom:0}code,pre,table{border:1px solid #e8e8e8}code,pre{font-size:15px;border-radius:3px;background-color:#eef}code{padding:1px 5px}pre{padding:8px 12px;overflow-x:auto}pre>code{border:0;padding-right:0;padding-left:0}table{margin-bottom:30px;width:100%;text-align:left;color:#3f3f3f;border-collapse:collapse}table tr:nth-child(even){background-color:#f7f7f7}table td,table th{padding:10px 15px}table th{background-color:#f0f0f0;border:1px solid #dedede;border-bottom-color:#c9c9c9}table td{border:1px solid #e8e8e8}body,html{width:100%;height:100%;overflow-x:hidden;font-family:helvetica,arial;font-size:100%;box-sizing:border-box}footer,header{background:#202226;padding:1rem;text-align:center}header>*{padding-top:.5em}header{box-shadow:0 0 25px 0 #000}a.button,footer,footer>a,h3,nav a:hover{color:#fff}footer>a{font-size:x-large;padding:.5rem}h1{color:#00adff}figure,p{margin:15px 0}.contained,article{width:70vw;margin-left:auto;margin-right:auto}.container{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%}.bigimage{transform:skew(-10deg);color:#fff;padding:2em;width:100%;height:100%;text-align:center}img.background{-o-object-fit:cover;object-fit:cover;color:#000;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;-webkit-filter:blur(2px);filter:blur(2px);transition:.3s ease-in-out}.bigimage:hover img{-webkit-filter:blur(0);filter:blur(0)}a.button{transform:skew(10deg);touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;position:relative;cursor:pointer;overflow:hidden;padding:.8em;background:rgba(32,34,38,.7)}.badge,nav{align-items:center}.badge,a.button{border-radius:.5em}.badge{display:inline-flex;justify-content:center;padding:4px 8px}.bg-green{background:green}.full-width{width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw}nav{display:flex;flex-wrap:wrap;width:70%}nav>*{padding-left:2em;padding-right:2em;border-left:2px solid #000}nav :first-child{padding-left:0;border-left:none}@media only screen and (max-width:800px){nav{flex-direction:column}nav>*{margin-right:auto;padding-bottom:.5em}nav :first-child{padding-left:2em;border-left:2px solid #000}#homepage-container{flex-wrap:wrap}.bigimage{max-height:20vh}.bigimage,a.button{transform:skew(0deg)}}
|
||||
Reference in New Issue
Block a user