selfdefined/_site/css/base.css
2019-11-02 00:46:10 -07:00

281 lines
5.0 KiB
CSS

@charset "UTF-8";
@import url("https://use.typekit.net/qlo3dpu.css");
:root {
--auto-grid-min-size: 17rem;
}
body {
border-top: 1rem solid red;
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 20px;
padding: 2rem;
margin: 0;
}
h1 {
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
font-weight: 700;
}
.subtitle {
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
font-weight: 400;
letter-spacing: 0.1;
grid-column: span 2;
}
.summary {
grid-column: span 2;
}
.small {
font-size: 0.75em;
}
.title__thicc {
font-size: 8vh;
line-height: 0.75;
padding: 0;
margin: 0.5rem 0rem;
grid-column: span 2;
}
.help {
margin: 1rem 0;
}
.help li {
margin: 0.75rem 0;
}
.grid {
display: grid;
grid-template-columns: repeat(4, [col] 1fr [col]);
grid-template-rows: fit-content, fit-content, auto;
grid-row-gap: 10rem;
grid-column-gap: 4rem;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
.box {
background: black;
color: white;
padding: 1rem;
margin: 1rem 0.5rem;
height: auto;
}
.box a {
color: white;
}
.list ul {
padding: 0 0 0 1em;
margin: 0;
}
.list li {
list-style: none;
padding-bottom: 0.5em;
}
.list li.subterm {
padding-left: 10px;
}
.list li:last-child {
padding: 0;
}
.list li.subterm:before {
content: "↳";
padding-right: 5px;
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.block__word {
display: flex;
flex-direction: column;
margin: 1rem;
}
p {
margin: 0.75rem 0;
font-size: 1.25rem;
}
.style__italics {
font-style: italic;
}
.word__title {
font-family: orpheuspro, Palatino, Times, serif;
font-weight: 900;
font-size: 2.5rem;
line-height: 1.25;
}
.word__definition {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 1.5rem;
}
.word__speech {
font-size: 0.5em;
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
}
.word__signal {
border-top: 1px solid currentcolor;
display: inline-block;
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.15rem;
padding: 0.5rem 0.75rem;
}
.word__signal__avoid {
color: red;
}
.word__signal__avoid:before {
content: "🚨";
margin-left: -2.15rem;
}
.word__signal__better {
color: green;
}
.word__signal__better:before {
content: "🚨";
margin-left: -2.15rem;
}
.word__signal__tool {
color: black;
}
.word__signal__tool:before {
content: "🧰";
margin-left: -2.15rem;
}
.word__link {
text-decoration: none;
color: black;
border-bottom: darkgrey solid 0.1em;
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
margin: 1rem 0;
}
.word__link:hover {
border-bottom: red solid 0.1rem;
}
.block__dictionary {
max-width: 50rem;
margin-left: auto;
margin-right: auto;
padding: 0 1rem;
}
.auto-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
grid-gap: 1rem;
}
.block__word {
grid-column: span 2;
display: flex;
flex-direction: column;
margin: 1rem;
}
p {
margin: 0.75rem 0;
font-size: 1.25rem;
line-height: 1.25;
}
.style__italics {
font-style: italic;
}
.word__title {
font-family: orpheuspro, Palatino, Times, serif;
font-weight: 900;
font-size: 2.5rem;
line-height: 1.25;
}
.word__definition {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
font-size: 1.5rem;
}
.word__speech {
font-size: 0.5em;
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
}
.word__signal {
border-top: 1px solid currentcolor;
display: inline-block;
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.15rem;
padding: 0.5rem 0.75rem;
}
.word__signal__avoid {
color: red;
}
.word__signal__avoid:before {
content: "🚨";
margin-left: -2.15rem;
}
.word__signal__better {
color: green;
}
.word__signal__better:before {
content: "👍";
margin-left: -2.15rem;
}
.block__type {
display: grid;
grid-template-columns: 1fr 4fr;
align-items: flex-start;
}
.word__type {
text-align: right;
padding-right: 1rem;
font-family: monotype-grotesque-condensed, Arial Narrow, sans-serif;
font-size: 0.85rem;
text-transform: uppercase;
}
.word__link {
text-decoration: none;
color: black;
border-bottom: darkgrey solid 0.1em;
font-family: monotype-grotesque-extended, Arial Black, sans-serif;
}
.word__breakdown {
font-family: monotype-grotesque, "Lucida Sans", sans-serif;
border-left: 0.1rem solid lightgrey;
padding-left: 1rem;
}
.flag__red {
background-color: pink;
font-size: 0.9rem;
font-weight: bold;
border-radius: 1rem;
padding: 0.45rem 0.65rem;
margin: 0.25rem 0.75rem;
text-transform: lowercase;
}
.flag__red:before {
content: "🚨";
margin-right: 0.35rem;
}
/*# sourceMappingURL=base.css.map */