CSSing, baseof stuff
This commit is contained in:
207
static/css/screen.css
Normal file
207
static/css/screen.css
Normal file
@@ -0,0 +1,207 @@
|
||||
*, *::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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user