youtube-maze/public/style.css

478 lines
6.7 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* Font loading
*/
@font-face
{
font-family: 'Equity';
src: url('fonts/equity/equity_text_b_regular.woff2') format('woff2'),
url('fonts/equity/equity_text_b_regular.woff') format('woff');
}
@font-face
{
font-family: 'Equity';
font-style: italic;
src: url('fonts/equity/equity_text_b_italic.woff2') format('woff2'),
url('fonts/equity/equity_text_b_italic.woff') format('woff');
}
@font-face
{
font-family: 'Concourse';
src: url('fonts/concourse/concourse_c3_regular.woff2') format('woff2'),
url('fonts/concourse/concourse_c3_regular.woff') format('woff');
}
/**
* Common values
*/
:root
{
/* text and element colors */
--text-color: #333;
--text-accent-color: #675148;
--background-color: #f0f0f0;
--background-lighter-color: #fafafa;
/* grid base */
--base-unit: 30px;
/* fonts */
--size-m1: .8rem;
--size-0: 21px;
--size-1: 1.666rem;
--size-2: 3rem;
--font-display: 'Concourse';
--font-main: 'Equity';
}
/**
* Common elements
*/
body
{
font-family: var(--font-main);
font-size: var(--size-0);
line-height: var(--base-unit);
color: var(--text-color);
width: 15cm;
margin: calc(4 * var(--base-unit)) auto;
background: var(--background-color);
text-align: justify;
hyphens: auto;
}
@media screen and (max-width: 900px)
{
body
{
width: 100%;
padding: 0 calc(4 * var(--base-unit));
}
br.flexible
{
display: none;
}
}
@media screen and (max-width: 500px)
{
body
{
padding: 0 calc(2 * var(--base-unit));
}
}
h1, h2
{
font-family: var(--font-display);
text-transform: lowercase;
}
h3, h4, h5, h6
{
font-family: var(--font-main);
}
h1, h2, h3, h4, h5, h6
{
text-align: left;
hyphens: none;
font-weight: normal;
color: var(--text-accent-color);
}
h1
{
font-size: var(--size-2);
line-height: calc(2 * var(--base-unit));
margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}
h2
{
font-size: var(--size-1);
line-height: calc(1.5 * var(--base-unit));
margin: calc(2 * var(--base-unit)) 0 var(--base-unit) 0;
}
h3
{
font-size: var(--size-0);
line-height: var(--base-unit);
margin: var(--base-unit) 0 calc(.5 * var(--base-unit)) 0;
}
h4, h5, h6
{
margin: var(--base-unit) 0 0 0;
}
a
{
color: inherit;
text-underline-offset: 4px;
}
a:hover
{
color: var(--text-accent-color);
}
p, ul, ol
{
margin: 0 0 var(--base-unit) 0;
}
.note
{
font-size: var(--size-m1);
line-height: calc(var(--base-unit) * 0.7);
}
ul, ol
{
padding: 0;
list-style-position: outside;
}
ul
{
list-style: none;
}
input, textarea
{
display: block;
width: 100%;
font-family: var(--font-main);
font-size: var(--size-0);
line-height: var(--base-unit);
background: var(--background-lighter-color);
color: var(--text-color);
border: 1px solid currentColor;
padding:
calc(.25 * var(--base-unit))
calc(.5 * var(--base-unit));
margin:
calc(.25 * var(--base-unit))
0 0 0;
}
textarea
{
resize: vertical;
height: 8em;
}
input:focus, textarea:focus
{
outline: 1px solid currentColor;
}
input[type="submit"], button
{
cursor: pointer;
}
blockquote, .blockstrong
{
margin: calc(2 * var(--base-unit)) 0
calc(2 * var(--base-unit)) 0;
padding: var(--base-unit);
border-radius: 2px;
background: white;
position: relative;
}
@media screen and (min-width: 501px)
{
blockquote::before
{
content: "“";
display: inline-block;
position: absolute;
top: var(--base-unit);
left: calc(-2.5 * var(--base-unit));
font-size: var(--size-2);
}
blockquote:lang(fr)::before
{
content: "«";
}
blockquote::after
{
content: "”";
display: inline-block;
position: absolute;
bottom: var(--base-unit);
right: calc(-2.5 * var(--base-unit));
font-size: var(--size-2);
}
blockquote:lang(fr)::after
{
content: "»";
}
}
@media screen and (max-width: 500px)
{
blockquote p:first-of-type::before
{
content: "“";
}
blockquote:lang(fr) p:first-of-type::before
{
content: "« ";
}
blockquote p:last-of-type::after
{
content: "”";
}
blockquote:lang(fr) p:last-of-type::after
{
content: " »";
}
}
blockquote footer
{
margin-top: var(--base-unit);
}
.blockstrong :last-child
{
margin-bottom: 0;
}
*, *::before, *::after
{
box-sizing: border-box;
}
/**
* Language switcher
*/
.language-switcher
{
float: right;
padding-left: calc(2 * var(--base-unit));
margin-top: .8rem;
}
.language-switcher .active
{
color: var(--text-accent-color);
}
/**
* Name and avatar
*/
.avatar
{
width: calc(4 * var(--base-unit));
border-radius: 100%;
float: left;
margin:
.3rem /* to improve alignment with neighboring title */
0 0
calc(-6 * var(--base-unit));
}
@media screen and (max-width: 900px)
{
.avatar
{
display: block;
float: none;
margin: 0 0 var(--base-unit) 0;
}
}
/**
* Columns
*/
.columns
{
display: flex;
justify-content: space-between;
}
.column
{
width: 45%;
}
@media screen and (max-width: 500px)
{
.columns
{
display: block;
}
.column
{
width: 100%;
}
}
/* Workaround no margin collapsing for flex items */
@media screen and (min-width: 501px)
{
.column :first-child
{
margin-top: 0;
}
.column :last-child
{
margin-bottom: 0;
}
}
/**
* Boids
*/
#boids-canvas
{
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
/**
* Books
*/
.book
{
display: flex;
text-align: left;
align-items: top;
}
.book-cover
{
line-height: 0px;
margin: 0 var(--base-unit) 0 0;
flex: 0 0 calc(4 * var(--base-unit));
}
.book-cover img
{
width: 100%;
}
.book-details dt
{
font-family: "Concourse";
text-transform: lowercase;
}
.book-details dt, .book-details dd
{
display: block;
margin: 0;
float: left;
}
.book-details dt
{
width: 7ch;
clear: both;
}
.book-details dt:lang(en)::after
{
content: ":";
}
.book-details dt:lang(fr)::after
{
content: " :";
}
.book-details::after
{
content: "";
display: block;
clear: both;
}
.book-description h3
{
margin: 0;
}
.book-description address
{
margin-bottom: var(--base-unit);
}
@media screen and (max-width: 500px)
{
.book
{
flex-direction: column;
align-items: stretch;
}
.book-cover
{
margin: 0 0 var(--base-unit) 0;
}
}