CaAlden/film
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

PUBLISH

Browse source
This commit is contained in:
Campbell Alden 2022-08-24 13:57:33 +09:00
parent 8e789d68ab
commit d3e70ced2d
6 changed files with 131 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

55
docs/style.css
View file

@ -1,44 +1,44 @@
:root {
--title-font-family: 'Merriweather', serif;
--title-font-weight: 700;
--title-font-line-height: 80px;
--title-font-line-height: 1.25;
--title-font-size: 64px;
--title-font-letter-spacing: -0.04em;
--h2-font-family: 'Merriweather', serif;
--h2-font-weight: 700;
--h2-font-line-height: 50px;
--h2-font-line-height: 1.2;
--h2-font-size: 40px;
--h2-font-letter-spacing: -0.02em;
--subtitle-font-family: 'Rufina', serif;
--subtitle-font-weight: 700;
--subtitle-font-line-height: 30px;
--subtitle-font-line-height: 1.25;
--subtitle-font-size: 24px;
--subtitle-font-letter-spacing: -0.02em;
--body-font-family: 'Inika', serif;
--body-font-weight: 400;
--body-font-line-height: 26px;
--body-font-line-height: 1.625;
--body-font-size: 16px;
--body-font-letter-spacing: 0.04em;
--caption-font-family: 'Inika', serif;
--caption-font-weight: 400;
--caption-font-line-height: 12px;
--caption-font-line-height: 1.2;
--caption-font-size: 10px;
--caption-font-letter-spacing: 0.05em;
--button-font-family: 'Inika', serif;
--button-font-weight: 700;
--button-font-line-height: 26px;
--button-font-line-height: 1.625;
--button-primary-font-size: 16px;
--button-large-font-size: 24px;
--button-font-letter-spacing: 0.1em;
--numbers-font-family: 'Monaco', sans-serif;
--numbers-font-weight: 400;
--numbers-font-line-height: 12px;
--numbers-font-line-height: 1;
--numbers-font-size: 16px;
--numbers-font-size-large: 40px;
--numbers-font-letter-spacing: -0.02em;
@ -54,6 +54,8 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body, p, section, header, article {
font-family: var(--body-font-family);
@ -61,13 +63,23 @@ html, body, p, section, header, article {
line-height: var(--body-font-line-height);
letter-spacing: var(--body-font-letter-spacing);
}
p {
text-align: justify;
}
html, body {
background: var(--color-light-background);
color: var(--color-secondary);
width: 100vw;
min-height: 100vh;
padding: 0;
margin: 0;
}
main {
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
max-width: calc(70ch + 60px);
}
.title, h1 {
@ -76,8 +88,6 @@ html, body {
line-height: var(--title-font-line-height);
font-size: var(--title-font-size);
letter-spacing: var(--title-font-letter-spacing);
margin: 0;
padding: 0;
}
.h2, h2 {
font-family: var(--h2-font-family);
@ -85,8 +95,6 @@ html, body {
line-height: var(--h2-font-line-height);
font-size: var(--h2-font-size);
letter-spacing: var(--h2-font-letter-spacing);
margin: 0;
padding: 0;
}
.subtitle, h3, h4, h5, h6 {
font-family: var(--subtitle-font-family);
@ -94,8 +102,6 @@ html, body {
line-height: var(--subtitle-font-line-height);
font-size: var(--subtitle-font-size);
letter-spacing: var(--subtitle-font-letter-spacing);
margin: 0;
padding: 0;
}
.caption {
font-family: var(--caption-font-family);
@ -103,6 +109,7 @@ html, body {
line-height: var(--caption-font-line-height);
font-size: var(--caption-font-size);
letter-spacing: var(--caption-font-letter-spacing);
text-transform: uppercase;
}
.numbers {
font-family: var(--numbers-font-family);
@ -121,8 +128,6 @@ html, body {
button, .button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
text-align: inherit;
@ -169,16 +174,9 @@ a:hover {
}
.navbar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 30px;
}
.navbar-item {
padding: 0;
margin: 0;
}
.header {
display: flex;
flex-wrap: wrap;
@ -211,4 +209,9 @@ a:hover {
}
.p1 {
padding: 10px;2}
padding: 10px;
}
.review {
max-width: 800px;
}