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

Add quick look section to reviews

Browse source
This commit is contained in:
Campbell Alden 2022-08-24 13:57:20 +09:00
parent 94bee36cfe
commit 8e789d68ab
10 changed files with 167 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

60
static/style.css
View file

@ -1,45 +1,46 @@
: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;
--color-primary: #FFFFFF;
@ -53,6 +54,8 @@
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body, p, section, header, article {
font-family: var(--body-font-family);
@ -60,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 {
@ -75,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);
@ -84,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);
@ -93,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);
@ -102,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);
@ -110,11 +118,16 @@ html, body {
font-size: var(--numbers-font-size);
letter-spacing: var(--numbers-font-letter-spacing);
}
.numbers-large {
font-family: var(--numbers-font-family);
font-weight: var(--numbers-font-weight);
line-height: var(--numbers-font-line-height);
font-size: var(--numbers-font-size-large);
letter-spacing: var(--numbers-font-letter-spacing);
}
button, .button {
border: none;
margin: 0;
padding: 0;
width: auto;
overflow: visible;
text-align: inherit;
@ -161,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;
@ -205,3 +211,7 @@ a:hover {
.p1 {
padding: 10px;
}
.review {
max-width: 800px;
}