141 lines
3.0 KiB
CSS
141 lines
3.0 KiB
CSS
|
|
:root {
|
|
--color-bg: #FFFFF5;
|
|
--color-text: #000;
|
|
--gap-l: 2.5rem;
|
|
}
|
|
|
|
body {
|
|
margin: var(--gap-l) auto;
|
|
max-width: 610px;
|
|
line-height: 1.6;
|
|
background: var(--color-bg);
|
|
color: var(--color-text);
|
|
padding: 0 10px;
|
|
line-height: 28px;
|
|
font-family: "Lora";
|
|
font-weight: 500;
|
|
box-sizing: border-box;
|
|
/* Smooth the font a little bit, it's a
|
|
bit too bold on retina screens */
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
}
|
|
|
|
/* --------------------------------------------------- */
|
|
/* Make a nice input form with rounded corners and hover
|
|
animations*/
|
|
/* --------------------------------------------------- */
|
|
input {
|
|
padding: 10px 16px;
|
|
margin: 2px 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid #dabebe;
|
|
border-radius: 6px;
|
|
background: #fffff4;
|
|
color: #3a1616;
|
|
font-size: 16px;
|
|
-webkit-transition: 0.5s;
|
|
transition: 0.5s;
|
|
outline: none;
|
|
}
|
|
input:focus {
|
|
border: 2px solid #3a1616;
|
|
}
|
|
|
|
/* --------------------------------------- */
|
|
/* The button is very similar to the input */
|
|
/* --------------------------------------- */
|
|
.button {
|
|
background-color: #fffff4;
|
|
border: none;
|
|
color: black;
|
|
padding: 6px 14px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
font-size: 16px;
|
|
margin: 4px 2px;
|
|
transition-duration: 0.4s;
|
|
cursor: pointer;
|
|
border: 2px solid #3a1616;
|
|
border-radius: 6px;
|
|
}
|
|
.button:hover {
|
|
background-color: #3a1616;
|
|
color: white;
|
|
}
|
|
|
|
/* ----------------------------------------------- */
|
|
/* Various classes for messages of different kinds */
|
|
/* ----------------------------------------------- */
|
|
.isa_info,
|
|
.isa_success,
|
|
.isa_warning,
|
|
.isa_error {
|
|
width: 90%;
|
|
margin: 10px 0px;
|
|
padding: 12px;
|
|
}
|
|
.isa_info {
|
|
color: #00529b;
|
|
background-color: #bde5f8;
|
|
}
|
|
.isa_success {
|
|
color: #4f8a10;
|
|
background-color: #dff2bf;
|
|
}
|
|
.isa_warning {
|
|
color: #9f6000;
|
|
background-color: #feefb3;
|
|
}
|
|
.isa_error {
|
|
color: #d8000c;
|
|
background-color: #ffd2d2;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3 {
|
|
line-height: 1.2;
|
|
font-family: "Lora";
|
|
}
|
|
|
|
img {
|
|
width: 500px;
|
|
max-width: 100%;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* --------------------------------------------- */
|
|
/* Bold hover animations on links and clickables */
|
|
/* --------------------------------------------- */
|
|
a {
|
|
cursor: pointer;
|
|
color: #217ab7;
|
|
line-height: inherit;
|
|
transition: .14s;
|
|
}
|
|
a:hover {
|
|
color: white;
|
|
background-color: #3297d3;
|
|
}
|
|
a:visited {
|
|
color: #43458b;
|
|
border-color: #43458b;
|
|
}
|
|
a:visited:hover {
|
|
color: white;
|
|
background-color: #9251ac;
|
|
}
|
|
|
|
pre {
|
|
font-family: "Inconsolata", monospace;
|
|
}
|
|
|
|
::selection {
|
|
color: white;
|
|
background: #ff4081;
|
|
}
|