About - - This is a blog that I’ve wanted to start for a long time! I create it with two goals in mind. diff --git a/docs/index.html b/docs/index.html index ac87914..8a37e75 100644 --- a/docs/index.html +++ b/docs/index.html @@ -17,17 +17,18 @@ + - CaAlden: Films + CaAlden: Films about - + home diff --git a/docs/quick_look.css b/docs/quick_look.css new file mode 100644 index 0000000..33e2dd3 --- /dev/null +++ b/docs/quick_look.css @@ -0,0 +1,38 @@ +.quicklook { + max-width: 600px; + flex-basis: 600px; + border-radius: 16px; + background: #F4C2CD; + color: #702E2E; + padding: 20px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.quicklook-emphasized-color { + color: #3D292D !important ; +} + +.quicklook-details { + display: flex; + gap: 30px; +} + +.quicklook-rating { + display: flex; + flex-direction: column; + flex-grow: 0; +} + +.quicklook-genre-section { + display: flex; + flex-direction: column; + align-items: flex-start; + flex-grow: 1; +} + +.quicklook-genre { + text-transform: uppercase; + font-weight: bold; +} diff --git a/docs/reviews/index.html b/docs/reviews/index.html index 77ff23e..815c1f0 100644 --- a/docs/reviews/index.html +++ b/docs/reviews/index.html @@ -22,17 +22,18 @@ + - CaAlden: Films + CaAlden: Films about - + home diff --git a/docs/reviews/the-french-dispatch/index.html b/docs/reviews/the-french-dispatch/index.html index 5d73b1b..e238618 100644 --- a/docs/reviews/the-french-dispatch/index.html +++ b/docs/reviews/the-french-dispatch/index.html @@ -16,7 +16,7 @@ - + @@ -25,29 +25,61 @@ + - CaAlden: Films + CaAlden: Films about - + home - + The French Dispatch + + + + Quick Look + + + + + Rating + 4/5 + + + Genre + + + Comedy + + Drama + + Romance + + + + + + Charming and highly stylized, this movie has immediately joined my shelf of favorites. Great if you are a Wes Anderson fan or just someone looking for absurdist humor. + + + + + Rating @@ -59,25 +91,29 @@ â - â + + â + - Synopsis -The french dispatch follows several different stories and perspectives surrounding the authors of a magazine based in kansas, but about -a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is -stylistically different from the last to reflect the style of the author. -Review -I found this movie very charming. I am a sucker for Wes Anderson films and this, like The Grand Budapest Hotel, strikes a perfect cord with -me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard -Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things -together just well enough that the movie as a whole feels coherent. -Recommendation -I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. -It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. -As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about -style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! + Recommendation +The French Dispatch follows several different stories and perspectives surrounding the authors of a magazine based in Kansas, but about a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is stylistically different from the last to reflect the style of the author. +I found this movie very charming. I am a sucker for Wes Anderson films and this. For example, The Grand Budapest Hotel strikes a perfect cord with me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things together just well enough that the movie as a whole feels coherent. +I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! +Thoughts +Spoilers ahead, but if you’ve seen the movie or if you choose to watch it I’d love to spark some thoughts/discussion! +The Artist +I really enjoyed how the dynamic between the artist prisoner character (Benicio Del Toro) and the female prison guard (LĂ©a Seydoux) is played with when their characters are first introduced. I think that first scene is the platonic idea of what it means to “subvert expectations” in a pleasing way. We’ve all seen the setting before, a rich asshole artist uses his position of power to take liberties with a young female assistant. In this scenario, however, the scene ends with a complete power dynamic reversal with him entering a straightjacket and being carted away back to a cell. Something about that was not overtly funny but struck my funny bone all the same. +The Art +Another moment I enjoyed was the discussion about modern art. There’s a funny commentary on the idea that “a third grader could have made this”, wherein they discuss his arts validity and make the claim that because he has techinical prowess (the ability to draw a realistic picture of a bird) his more modern style is somehow valid. The sort of mental gymnastics that the art collectors go through to justify why the art is the next best thing works as a commentary on art in general in a way I liked. +The Revolutionary Students +I have quite a soft spot for chess, so the sections of the magazine following the student revolutionary movement that centered around a chess game were very entertaining to me. I appreciate how that portion of the movie puts you in the shoes of a student. The parents are all concerned about how much of a bother the revolution is but for the students it’s life or death. +The Dinner Party Kidnapping +I felt the storyline where the author recounts the dinner party kidnapping was honestly the weakest part of the film. For me it’s a combination of not really liking that cartoon style (and this is partially why I haven’t made it through Isle of Dogs yet dispite that on the surface seeming like a perfect fit for me.) The other issue I have with it was pointed out in a review I read, which I will paraphrase as being too many layers deep. +The story is told in the setting of a section of the magazine, but in retrospective as spoken by the author on the set of a talk show. Then we have the actual story which has aspects of live action and cartoon. The cartoon scenes feel nested within the live action for a total depth 4 levels removed from the viewer. It just makes things a little difficult to follow. That style of storytelling can work: I loved If on a Winter’s Night a Traveler by Italio Calvino which relies heavily on this nesting of view points, but the first chapter of that book is incredibly jarring as you get accustomed to the style. +I think because this section stands alone and is tonally different from the rest of the movie, you don’t have time to get over that jarring feeling to orient yourself. I think as a stand alone short it might work, and it’s just it’s presence in this larger narrative that makes it feel especially awkard tonally. For me, this discordance is the main reason I feel this movie is more of a 4/5 than a perfect 5/7. diff --git a/docs/style.css b/docs/style.css index df2e940..27d210a 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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; +}
+ The French Dispatch + + + + Quick Look + + + + + Rating + 4/5 + + + Genre + + + Comedy + + Drama + + Romance + + + + + + Charming and highly stylized, this movie has immediately joined my shelf of favorites. Great if you are a Wes Anderson fan or just someone looking for absurdist humor. + + + + + Rating @@ -59,25 +91,29 @@ â - â + + â + - Synopsis -The french dispatch follows several different stories and perspectives surrounding the authors of a magazine based in kansas, but about -a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is -stylistically different from the last to reflect the style of the author. -Review -I found this movie very charming. I am a sucker for Wes Anderson films and this, like The Grand Budapest Hotel, strikes a perfect cord with -me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard -Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things -together just well enough that the movie as a whole feels coherent. -Recommendation -I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. -It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. -As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about -style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! + Recommendation +The French Dispatch follows several different stories and perspectives surrounding the authors of a magazine based in Kansas, but about a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is stylistically different from the last to reflect the style of the author. +I found this movie very charming. I am a sucker for Wes Anderson films and this. For example, The Grand Budapest Hotel strikes a perfect cord with me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things together just well enough that the movie as a whole feels coherent. +I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! +Thoughts +Spoilers ahead, but if you’ve seen the movie or if you choose to watch it I’d love to spark some thoughts/discussion! +The Artist +I really enjoyed how the dynamic between the artist prisoner character (Benicio Del Toro) and the female prison guard (LĂ©a Seydoux) is played with when their characters are first introduced. I think that first scene is the platonic idea of what it means to “subvert expectations” in a pleasing way. We’ve all seen the setting before, a rich asshole artist uses his position of power to take liberties with a young female assistant. In this scenario, however, the scene ends with a complete power dynamic reversal with him entering a straightjacket and being carted away back to a cell. Something about that was not overtly funny but struck my funny bone all the same. +The Art +Another moment I enjoyed was the discussion about modern art. There’s a funny commentary on the idea that “a third grader could have made this”, wherein they discuss his arts validity and make the claim that because he has techinical prowess (the ability to draw a realistic picture of a bird) his more modern style is somehow valid. The sort of mental gymnastics that the art collectors go through to justify why the art is the next best thing works as a commentary on art in general in a way I liked. +The Revolutionary Students +I have quite a soft spot for chess, so the sections of the magazine following the student revolutionary movement that centered around a chess game were very entertaining to me. I appreciate how that portion of the movie puts you in the shoes of a student. The parents are all concerned about how much of a bother the revolution is but for the students it’s life or death. +The Dinner Party Kidnapping +I felt the storyline where the author recounts the dinner party kidnapping was honestly the weakest part of the film. For me it’s a combination of not really liking that cartoon style (and this is partially why I haven’t made it through Isle of Dogs yet dispite that on the surface seeming like a perfect fit for me.) The other issue I have with it was pointed out in a review I read, which I will paraphrase as being too many layers deep. +The story is told in the setting of a section of the magazine, but in retrospective as spoken by the author on the set of a talk show. Then we have the actual story which has aspects of live action and cartoon. The cartoon scenes feel nested within the live action for a total depth 4 levels removed from the viewer. It just makes things a little difficult to follow. That style of storytelling can work: I loved If on a Winter’s Night a Traveler by Italio Calvino which relies heavily on this nesting of view points, but the first chapter of that book is incredibly jarring as you get accustomed to the style. +I think because this section stands alone and is tonally different from the rest of the movie, you don’t have time to get over that jarring feeling to orient yourself. I think as a stand alone short it might work, and it’s just it’s presence in this larger narrative that makes it feel especially awkard tonally. For me, this discordance is the main reason I feel this movie is more of a 4/5 than a perfect 5/7. diff --git a/docs/style.css b/docs/style.css index df2e940..27d210a 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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; +}
The French Dispatch + + + + Quick Look + + + + + Rating + 4/5 + + + Genre + + + Comedy + + Drama + + Romance + + + + + + Charming and highly stylized, this movie has immediately joined my shelf of favorites. Great if you are a Wes Anderson fan or just someone looking for absurdist humor. + + + + + Rating @@ -59,25 +91,29 @@ â - â + + â + - Synopsis -The french dispatch follows several different stories and perspectives surrounding the authors of a magazine based in kansas, but about -a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is -stylistically different from the last to reflect the style of the author. -Review -I found this movie very charming. I am a sucker for Wes Anderson films and this, like The Grand Budapest Hotel, strikes a perfect cord with -me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard -Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things -together just well enough that the movie as a whole feels coherent. -Recommendation -I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. -It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. -As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about -style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! + Recommendation +The French Dispatch follows several different stories and perspectives surrounding the authors of a magazine based in Kansas, but about a small town in France. The film is framed in sections similar to how a magazine like The New Yorker is divided and each section is stylistically different from the last to reflect the style of the author. +I found this movie very charming. I am a sucker for Wes Anderson films and this. For example, The Grand Budapest Hotel strikes a perfect cord with me both stylistically and substantively. The movie is very funny without many outright spoken jokes. It is visually pleasing in the standard Wes Anderson way. Each individual story is also engaging and the binding narrative about the death of the magazine’s editor pulls things together just well enough that the movie as a whole feels coherent. +I would recommend this to anyone who is already a Wes Anderson fan, but I wouldn’t necessarily suggest this if you are new to Wes Anderson. It is very stylized and if you don’t like the style you would hate the film. It also has a lot of absurdist humor which is not for everyone. As my rating reflects, I really enjoyed this film so it gets a general recommendation from me as long as you consider my hesitations about style. I think I might recommend watching another Wes Anderson film first and then, if you liked that, watch this one next! +Thoughts +Spoilers ahead, but if you’ve seen the movie or if you choose to watch it I’d love to spark some thoughts/discussion! +The Artist +I really enjoyed how the dynamic between the artist prisoner character (Benicio Del Toro) and the female prison guard (LĂ©a Seydoux) is played with when their characters are first introduced. I think that first scene is the platonic idea of what it means to “subvert expectations” in a pleasing way. We’ve all seen the setting before, a rich asshole artist uses his position of power to take liberties with a young female assistant. In this scenario, however, the scene ends with a complete power dynamic reversal with him entering a straightjacket and being carted away back to a cell. Something about that was not overtly funny but struck my funny bone all the same. +The Art +Another moment I enjoyed was the discussion about modern art. There’s a funny commentary on the idea that “a third grader could have made this”, wherein they discuss his arts validity and make the claim that because he has techinical prowess (the ability to draw a realistic picture of a bird) his more modern style is somehow valid. The sort of mental gymnastics that the art collectors go through to justify why the art is the next best thing works as a commentary on art in general in a way I liked. +The Revolutionary Students +I have quite a soft spot for chess, so the sections of the magazine following the student revolutionary movement that centered around a chess game were very entertaining to me. I appreciate how that portion of the movie puts you in the shoes of a student. The parents are all concerned about how much of a bother the revolution is but for the students it’s life or death. +The Dinner Party Kidnapping +I felt the storyline where the author recounts the dinner party kidnapping was honestly the weakest part of the film. For me it’s a combination of not really liking that cartoon style (and this is partially why I haven’t made it through Isle of Dogs yet dispite that on the surface seeming like a perfect fit for me.) The other issue I have with it was pointed out in a review I read, which I will paraphrase as being too many layers deep. +The story is told in the setting of a section of the magazine, but in retrospective as spoken by the author on the set of a talk show. Then we have the actual story which has aspects of live action and cartoon. The cartoon scenes feel nested within the live action for a total depth 4 levels removed from the viewer. It just makes things a little difficult to follow. That style of storytelling can work: I loved If on a Winter’s Night a Traveler by Italio Calvino which relies heavily on this nesting of view points, but the first chapter of that book is incredibly jarring as you get accustomed to the style. +I think because this section stands alone and is tonally different from the rest of the movie, you don’t have time to get over that jarring feeling to orient yourself. I think as a stand alone short it might work, and it’s just it’s presence in this larger narrative that makes it feel especially awkard tonally. For me, this discordance is the main reason I feel this movie is more of a 4/5 than a perfect 5/7. diff --git a/docs/style.css b/docs/style.css index df2e940..27d210a 100644 --- a/docs/style.css +++ b/docs/style.css @@ -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; +}