Switch to Noto font
This commit is contained in:
DrMint
parent
eed637c725
commit
4ed1e8910b
|
|
@ -151,7 +151,6 @@ A parallax effect is applied on the webpages' background image. This effect can
|
|||
- `high-contrast-text`: add a shadow around the text to increase perceived contrast.
|
||||
- `prose`: apply typography rules. Useful for main text content
|
||||
- `error-message`: make the element flash with a red background.
|
||||
- `DEV_TODO`: completely hide the element. Useful if some element should remain in the codebase but shouldn't be visible on the page, such as WIP feature.
|
||||
|
||||
## CSS Component classes
|
||||
|
||||
|
|
|
|||
|
|
@ -1,93 +0,0 @@
|
|||
Copyright 2021 The Murecho Project Authors (https://github.com/positype/Murecho-Project)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -1,93 +0,0 @@
|
|||
Copyright 2017 The Vollkorn Project Authors (https://github.com/FAlthausen/Vollkorn-Typeface)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
https://openfontlicense.org
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
|
|
@ -27,7 +27,7 @@ const style = `
|
|||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<div>
|
||||
<div inert>
|
||||
<img
|
||||
id={uniqueId}
|
||||
src={url}
|
||||
|
|
@ -80,8 +80,6 @@ const style = `
|
|||
transparent 100%
|
||||
);
|
||||
|
||||
user-select: none;
|
||||
|
||||
animation: fadeIn 3s forwards;
|
||||
|
||||
@media (min-width: 650.5px) {
|
||||
|
|
|
|||
|
|
@ -32,11 +32,11 @@ const { title, subtitle, pretitle } = Astro.props;
|
|||
|
||||
<style>
|
||||
h1 {
|
||||
line-height: 0.8;
|
||||
line-height: 0.9;
|
||||
|
||||
& > #pretitle {
|
||||
font-variation-settings: "wght" 430;
|
||||
margin-bottom: 0.8em;
|
||||
font-weight: 450;
|
||||
margin-bottom: 0.4em;
|
||||
}
|
||||
|
||||
& > #subtitle {
|
||||
|
|
|
|||
|
|
@ -119,7 +119,7 @@ const contactLabel = `${t("footer.socials.contact.title")} - ${t(
|
|||
display: flex;
|
||||
|
||||
& > p {
|
||||
font-variation-settings: "wght" 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,21 +51,28 @@ const { currentTheme } = Astro.locals;
|
|||
"light-theme": currentTheme === "light",
|
||||
"dark-theme": currentTheme === "dark",
|
||||
"texture-dots": !isIOS,
|
||||
"font-m": true,
|
||||
}}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
|
||||
<link rel="stylesheet" href="/css/tippy.css" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="preload"
|
||||
href="/css/tippy.css"
|
||||
as="style"
|
||||
onload="this.onload=null;this.rel='stylesheet'"
|
||||
href=`https://fonts.googleapis.com/css2\
|
||||
?family=Noto+Sans:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900\
|
||||
&family=Noto+Sans+JP:wght@100..900\
|
||||
&family=Noto+Sans+SC:wght@100..900\
|
||||
&family=Noto+Serif:ital,wdth,wght@0,62.5..100,100..900;1,62.5..100,100..900\
|
||||
&family=Noto+Serif+JP:wght@200..900\
|
||||
&family=Noto+Serif+SC:wght@200..900\
|
||||
&display=swap`
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<noscript>
|
||||
<link rel="stylesheet" href="/css/tippy.css" />
|
||||
</noscript>
|
||||
|
||||
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdebd4" />
|
||||
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#27231e" />
|
||||
|
|
@ -355,59 +362,58 @@ const { currentTheme } = Astro.locals;
|
|||
|
||||
/* FONTS */
|
||||
|
||||
@font-face {
|
||||
font-family: "Vollkorn Variable";
|
||||
src: url("/fonts/Vollkorn-VariableFont_wght.woff2") format("woff2-variations");
|
||||
src: url("/fonts/Vollkorn-VariableFont_wght.woff2") format("woff2") tech("variations");
|
||||
font-weight: 400 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Murecho Variable";
|
||||
src: url("/fonts/Murecho-VariableFont_wght.woff2") format("woff2-variations");
|
||||
src: url("/fonts/Murecho-VariableFont_wght.woff2") format("woff2") tech("variations");
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: "Murecho Variable", sans-serif;
|
||||
font-variation-settings: "wght" 430;
|
||||
html {
|
||||
font-family: "Noto Sans", "Noto Sans JP", sans-serif;
|
||||
font-variant-numeric: tabular-nums;
|
||||
line-height: 1;
|
||||
text-size-adjust: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-variation-settings: "wght" 600;
|
||||
}
|
||||
|
||||
b {
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
.font-serif {
|
||||
font-family: "Vollkorn Variable", serif;
|
||||
font-family: "Noto Serif", "Noto Serif JP", serif;
|
||||
font-stretch: 100%;
|
||||
font-weight: 430;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-size-increase: 4px + min(0.2vw, 3px);
|
||||
[lang] {
|
||||
.font-serif [lang="zh"] {
|
||||
font-family: "Noto Serif", "Noto Serif SC", serif;
|
||||
}
|
||||
|
||||
--font-size-xs: 0.75rem;
|
||||
--font-size-s: 0.875rem;
|
||||
--font-size-m: 1rem;
|
||||
--font-size-l: calc(1rem + var(--font-size-increase) * 1);
|
||||
--font-size-xl: calc(1rem + var(--font-size-increase) * 2);
|
||||
--font-size-2xl: calc(1rem + var(--font-size-increase) * 3);
|
||||
--font-size-3xl: calc(1rem + var(--font-size-increase) * 4);
|
||||
--font-size-4xl: calc(1rem + var(--font-size-increase) * 6);
|
||||
--font-size-5xl: calc(1rem + var(--font-size-increase) * 16);
|
||||
[lang="zh"] {
|
||||
font-family: "Noto Sans", "Noto Sans SC", sans-serif;
|
||||
&.font-serif,
|
||||
.font-serif {
|
||||
font-family: "Noto Serif", "Noto Serif SC", serif;
|
||||
}
|
||||
}
|
||||
|
||||
.font-serif [lang="ja"] {
|
||||
font-family: "Noto Serif", "Noto Serif JP", serif;
|
||||
}
|
||||
|
||||
[lang="ja"] {
|
||||
font-family: "Noto Sans", "Noto Sans JP", sans-serif;
|
||||
&.font-serif,
|
||||
.font-serif {
|
||||
font-family: "Noto Serif", "Noto Serif JP", serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root {
|
||||
--font-size-increase: (2px + min(0.4vw, 5px));
|
||||
|
||||
--font-size-xs: 12px;
|
||||
--font-size-s: 14px;
|
||||
--font-size-m: 16px;
|
||||
--font-size-l: calc(16px + var(--font-size-increase) * 0.4);
|
||||
--font-size-xl: calc(16px + var(--font-size-increase) * 0.9);
|
||||
--font-size-2xl: calc(16px + var(--font-size-increase) * 1.6);
|
||||
--font-size-3xl: calc(16px + var(--font-size-increase) * 2.5);
|
||||
--font-size-4xl: calc(16px + var(--font-size-increase) * 3.5);
|
||||
--font-size-5xl: calc(16px + var(--font-size-increase) * 7.5);
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -421,75 +427,118 @@ const { currentTheme } = Astro.locals;
|
|||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
strong,
|
||||
b {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: var(--font-size-xs);
|
||||
font-variation-settings: "wght" 430;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 85%;
|
||||
font-weight: 500;
|
||||
|
||||
&.font-serif {
|
||||
font-stretch: 74%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-s {
|
||||
font-size: var(--font-size-s);
|
||||
font-variation-settings: "wght" 400;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 92%;
|
||||
font-weight: 450;
|
||||
|
||||
&.font-serif {
|
||||
font-stretch: 84%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-m {
|
||||
font-size: var(--font-size-m);
|
||||
font-variation-settings: "wght" 400;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 93%;
|
||||
font-weight: 450;
|
||||
|
||||
&.font-serif {
|
||||
letter-spacing: -0.015em;
|
||||
font-stretch: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-l {
|
||||
.font-l,
|
||||
.prose > h6 {
|
||||
font-size: var(--font-size-l);
|
||||
font-variation-settings: "wght" 500;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 600;
|
||||
|
||||
&.font-serif {
|
||||
letter-spacing: -0.015em;
|
||||
font-stretch: 87%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
.font-xl,
|
||||
.prose > h5 {
|
||||
font-size: var(--font-size-xl);
|
||||
font-variation-settings: "wght" 600;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 700;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 700;
|
||||
letter-spacing: -0.04em;
|
||||
font-stretch: 87%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
.font-2xl,
|
||||
.prose > h4 {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-variation-settings: "wght" 700;
|
||||
letter-spacing: -0.02em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 750;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 750;
|
||||
letter-spacing: -0.04em;
|
||||
letter-spacing: -0.03em;
|
||||
font-stretch: 89%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
.font-3xl,
|
||||
.prose > h3 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-variation-settings: "wght" 750;
|
||||
letter-spacing: -0.025em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 800;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 800;
|
||||
letter-spacing: -0.045em;
|
||||
letter-spacing: -0.03em;
|
||||
font-stretch: 87%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
.font-4xl,
|
||||
.prose > h2 {
|
||||
font-size: var(--font-size-4xl);
|
||||
font-variation-settings: "wght" 800;
|
||||
letter-spacing: -0.03em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 900;
|
||||
|
||||
&.font-serif {
|
||||
font-variation-settings: "wght" 850;
|
||||
letter-spacing: -0.05em;
|
||||
letter-spacing: -0.04em;
|
||||
font-stretch: 89%;
|
||||
}
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
.font-5xl,
|
||||
.prose > h1 {
|
||||
font-size: var(--font-size-5xl);
|
||||
font-variation-settings: "wght" 900;
|
||||
letter-spacing: -0.03em;
|
||||
font-stretch: 95%;
|
||||
font-weight: 900;
|
||||
|
||||
&.font-serif {
|
||||
letter-spacing: -0.04em;
|
||||
font-stretch: 89%;
|
||||
}
|
||||
}
|
||||
|
||||
/* THEMING */
|
||||
|
|
@ -701,46 +750,12 @@ const { currentTheme } = Astro.locals;
|
|||
> h5 + h6 {
|
||||
margin-top: -0.75em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-4xl);
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-3xl);
|
||||
font-variation-settings: "wght" 750;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: var(--font-size-2xl);
|
||||
font-variation-settings: "wght" 700;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: var(--font-size-xl);
|
||||
font-variation-settings: "wght" 600;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: var(--font-size-l);
|
||||
font-variation-settings: "wght" 500;
|
||||
}
|
||||
}
|
||||
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
.DEV_TODO {
|
||||
display: none !important;
|
||||
visibility: none !important;
|
||||
opacity: 0 !important;
|
||||
height: 0 !important;
|
||||
width: 0 !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
@keyframes flashingRed {
|
||||
from {
|
||||
background-color: #ff000022;
|
||||
|
|
|
|||
|
|
@ -35,13 +35,10 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
}
|
||||
|
||||
<div id="toolbar" class="hide-scrollbar">
|
||||
<a
|
||||
href={getLocalizedUrl("/search")}
|
||||
aria-label={t("header.topbar.search.tooltip")}
|
||||
class="DEV_TODO">
|
||||
<a href={getLocalizedUrl("/search")} aria-label={t("header.topbar.search.tooltip")} hidden>
|
||||
<Button icon="material-symbols:search" />
|
||||
</a>
|
||||
<div class="separator DEV_TODO"></div>
|
||||
<div class="separator" hidden></div>
|
||||
|
||||
<div class="when-no-js">
|
||||
<a href="/settings">
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ const { block } = Astro.props;
|
|||
|
||||
p {
|
||||
color: var(--color-base-650);
|
||||
font-variation-settings: "wght" 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
|
|||
gap: 1em;
|
||||
white-space: nowrap;
|
||||
|
||||
font-variation-settings: "wght" 700;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
|
||||
transition-duration: 250ms;
|
||||
|
|
|
|||
|
|
@ -200,10 +200,10 @@ for (const attribute of attributes) {
|
|||
|
||||
& > p {
|
||||
transition: 150ms color;
|
||||
line-height: 0.8;
|
||||
line-height: 0.9;
|
||||
|
||||
& > #pretitle {
|
||||
margin-bottom: 0.8em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
& > #subtitle {
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const { node, context } = Astro.props;
|
|||
<style>
|
||||
span {
|
||||
color: var(--color-base-650);
|
||||
font-variation-settings: "wght" 500;
|
||||
font-weight: 500;
|
||||
font-size: 75%; /* Using % on purpose */
|
||||
place-self: start;
|
||||
margin-top: 0.33em;
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@ const title = (() => {
|
|||
|
||||
<style>
|
||||
a {
|
||||
font-variation-settings: "wght" 500;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -5,14 +5,15 @@ interface Props {
|
|||
icon: string;
|
||||
subtitle: string;
|
||||
href: string;
|
||||
hidden?: boolean;
|
||||
}
|
||||
|
||||
const { icon, subtitle, title, href } = Astro.props;
|
||||
const { icon, subtitle, title, href, hidden } = Astro.props;
|
||||
---
|
||||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<a href={href} class="pressable">
|
||||
<a href={href} class="pressable" hidden={hidden}>
|
||||
<Icon name={icon} />
|
||||
<div id="right">
|
||||
<p class="font-xl">{title}</p>
|
||||
|
|
@ -23,7 +24,7 @@ const { icon, subtitle, title, href } = Astro.props;
|
|||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
a {
|
||||
a:not([hidden]) {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
gap: 1em;
|
||||
|
|
|
|||
|
|
@ -136,7 +136,7 @@ const href = (() => {
|
|||
}
|
||||
|
||||
& > #title {
|
||||
font-variation-settings: "wght" 600;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
& > #dots {
|
||||
|
|
|
|||
|
|
@ -172,31 +172,33 @@ if (price) {
|
|||
)
|
||||
}
|
||||
|
||||
<div id="gallery-scans" class="when-no-print">
|
||||
{
|
||||
gallery && (
|
||||
<ImageTile
|
||||
class="collectibles_id-image_tile"
|
||||
image={gallery.thumbnail}
|
||||
title={t("collectibles.gallery.title")}
|
||||
subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
|
||||
href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
{
|
||||
(gallery || scans) && (
|
||||
<div
|
||||
id="gallery-scans"
|
||||
class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
|
||||
{gallery && (
|
||||
<ImageTile
|
||||
class="collectibles_id-image_tile"
|
||||
image={gallery.thumbnail}
|
||||
title={t("collectibles.gallery.title")}
|
||||
subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
|
||||
href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{
|
||||
scans && (
|
||||
<ImageTile
|
||||
class="collectibles_id-image_tile"
|
||||
image={scans.thumbnail}
|
||||
title={t("collectibles.scans.title")}
|
||||
subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
|
||||
href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
{scans && (
|
||||
<ImageTile
|
||||
class="collectibles_id-image_tile"
|
||||
image={scans.thumbnail}
|
||||
title={t("collectibles.scans.title")}
|
||||
subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
|
||||
href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
</Fragment>
|
||||
|
||||
|
|
@ -273,25 +275,36 @@ if (price) {
|
|||
}
|
||||
|
||||
& > #gallery-scans {
|
||||
display: flex;
|
||||
max-width: 35rem;
|
||||
flex-direction: column;
|
||||
gap: 2.5em;
|
||||
width: 100%;
|
||||
|
||||
@media (max-width: 23rem) {
|
||||
> .collectibles_id-image_tile {
|
||||
aspect-ratio: 2 / 1;
|
||||
&:not(.with-two) {
|
||||
@media (max-width: 52rem) {
|
||||
> .collectibles_id-image_tile {
|
||||
aspect-ratio: 2 / 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 23rem) {
|
||||
gap: clamp(1em, 0.5em + 3vw, 2em);
|
||||
flex-direction: row;
|
||||
&.with-two {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2.5em;
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
max-width: 15rem;
|
||||
flex-direction: column;
|
||||
@media (max-width: 23rem) {
|
||||
> .collectibles_id-image_tile {
|
||||
aspect-ratio: 2 / 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 23rem) {
|
||||
gap: clamp(1em, 0.5em + 3vw, 2em);
|
||||
flex-direction: row;
|
||||
|
||||
@media (min-width: 52rem) {
|
||||
max-width: 15rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,109 @@
|
|||
---
|
||||
import AppLayout from "components/AppLayout/AppLayout.astro";
|
||||
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
||||
---
|
||||
|
||||
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
||||
|
||||
<AppLayout>
|
||||
<AppLayoutTitle pretitle="CJK font" title="Testing Ground" />
|
||||
<div id="cjk">
|
||||
<div lang="en">
|
||||
<p class="title">lang="en"</p>
|
||||
|
||||
<p>今 込 空</p>
|
||||
|
||||
<div class="font-serif">
|
||||
<p class="title">class="font-serif"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div lang="ja">
|
||||
<p class="title">lang="ja"</p>
|
||||
|
||||
<p>今 込 空</p>
|
||||
|
||||
<div class="font-serif">
|
||||
<p class="title">class="font-serif"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div lang="zh">
|
||||
<p class="title">lang="zh"</p>
|
||||
|
||||
<p>今 込 空</p>
|
||||
|
||||
<div class="font-serif">
|
||||
<p class="title">class="font-serif"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div lang="en" class="font-serif">
|
||||
<p class="title">lang="en" class="font-serif"</p>
|
||||
今 込 空
|
||||
</div>
|
||||
|
||||
<div lang="ja" class="font-serif">
|
||||
<p class="title">lang="ja" class="font-serif"</p>
|
||||
今 込 空
|
||||
</div>
|
||||
|
||||
<div lang="zh" class="font-serif">
|
||||
<p class="title">lang="zh" class="font-serif"</p>
|
||||
今 込 空
|
||||
</div>
|
||||
|
||||
<div class="font-serif">
|
||||
<p class="title">class="font-serif"</p>
|
||||
|
||||
<div lang="en">
|
||||
<p class="title">lang="en"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
|
||||
<div lang="ja">
|
||||
<p class="title">lang="ja"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
|
||||
<div lang="zh">
|
||||
<p class="title">lang="zh"</p>
|
||||
<p>今 込 空</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
||||
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
||||
|
||||
<style>
|
||||
p {
|
||||
margin-block: 0.5em;
|
||||
}
|
||||
|
||||
#cjk {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1em;
|
||||
margin-top: 4em;
|
||||
place-items: start;
|
||||
|
||||
div {
|
||||
border: 1px solid var(--color-base-650);
|
||||
width: fit-content;
|
||||
padding: 1em;
|
||||
|
||||
& > .title {
|
||||
margin: -1em;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em;
|
||||
border-bottom: 1px solid var(--color-base-650);
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -33,25 +33,48 @@ import ColorShowcase from "./_components/ColorShowcase.astro";
|
|||
<h2 class="font-3xl">Fonts</h2>
|
||||
|
||||
<div>
|
||||
<p class="font-5xl">Murencho Variable 5XL</p>
|
||||
<p class="font-4xl">Murencho Variable 4XL</p>
|
||||
<p class="font-3xl">Murencho Variable 3XL</p>
|
||||
<p class="font-2xl">Murencho Variable 2XL</p>
|
||||
<p class="font-xl">Murencho Variable XL</p>
|
||||
<p class="font-l">Murencho Variable L</p>
|
||||
<p class="font-m">Murencho Variable M</p>
|
||||
<p class="font-s">Murencho Variable S</p>
|
||||
<p class="font-xs">Murencho Variable XS</p>
|
||||
<p class="font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-l">Lorem Ipsum L</p>
|
||||
<p class="font-m">Lorem Ipsum M</p>
|
||||
<p class="font-s">Lorem Ipsum S</p>
|
||||
<p class="font-xs">Lorem Ipsum XS</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-serif font-5xl">Vollkorn Variable 5XL</p>
|
||||
<p class="font-serif font-4xl">Vollkorn Variable 4XL</p>
|
||||
<p class="font-serif font-3xl">Vollkorn Variable 3XL</p>
|
||||
<p class="font-serif font-2xl">Vollkorn Variable 2XL</p>
|
||||
<p class="font-serif font-xl">Vollkorn Variable XL</p>
|
||||
<p class="font-serif font-l">Vollkorn Variable L</p>
|
||||
<p class="font-serif font-m">Vollkorn Variable M</p>
|
||||
<p class="font-serif font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-serif font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-serif font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-serif font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-serif font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-serif font-l">Lorem Ipsum L</p>
|
||||
<p class="font-serif font-m">Lorem Ipsum M</p>
|
||||
<p class="font-serif font-s">Lorem Ipsum S</p>
|
||||
<p class="font-serif font-xs">Lorem Ipsum XS</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-serif font-5xl">Lorem Ipsum 5XL</p>
|
||||
<p class="font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-serif font-4xl">Lorem Ipsum 4XL</p>
|
||||
<p class="font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-serif font-3xl">Lorem Ipsum 3XL</p>
|
||||
<p class="font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-serif font-2xl">Lorem Ipsum 2XL</p>
|
||||
<p class="font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-serif font-xl">Lorem Ipsum XL</p>
|
||||
<p class="font-l">Lorem Ipsum L</p>
|
||||
<p class="font-serif font-l">Lorem Ipsum L</p>
|
||||
<p class="font-m">Lorem Ipsum M</p>
|
||||
<p class="font-serif font-m">Lorem Ipsum M</p>
|
||||
<p class="font-s">Lorem Ipsum S</p>
|
||||
<p class="font-serif font-s">Lorem Ipsum S</p>
|
||||
<p class="font-xs">Lorem Ipsum XS</p>
|
||||
<p class="font-serif font-xs">Lorem Ipsum XS</p>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,9 @@ const { getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
Guide to the Rich Text Editor
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href={getLocalizedUrl("/dev/cjk")} class="pressable-link">CJK fonts Testing Ground</a>
|
||||
</li>
|
||||
</ul>
|
||||
</AppLayout>
|
||||
|
||||
|
|
|
|||
|
|
@ -44,6 +44,8 @@ const { icon = "material-symbols:folder", title, href } = Astro.props;
|
|||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 2px;
|
||||
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<div id="title">
|
||||
<Icon name="accords" />
|
||||
<div>
|
||||
<h1 class="font-serif">{t("global.siteName")}</h1>
|
||||
<h1 class="font-serif font-5xl">{t("global.siteName")}</h1>
|
||||
<p>{t("global.siteSubtitle")}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AppLayoutDescription description={t("home.description")} />
|
||||
|
||||
<a href={getLocalizedUrl("/about")} class="DEV_TODO">
|
||||
<a href={getLocalizedUrl("/about")} hidden>
|
||||
<Button title={t("home.aboutUsButton")} icon="material-symbols:left-click" />
|
||||
</a>
|
||||
|
||||
|
|
@ -36,7 +36,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<section id="library" class="high-contrast-text">
|
||||
<h2 class="font-serif font-3xl">{t("home.librarySection.title")}</h2>
|
||||
<p set:html={t("home.librarySection.description")} />
|
||||
<a href={getLocalizedUrl("/search")} class="DEV_TODO">
|
||||
<a href={getLocalizedUrl("/search")} hidden>
|
||||
<Button
|
||||
class="section-button"
|
||||
title={t("home.librarySection.button")}
|
||||
|
|
@ -48,7 +48,7 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="DEV_TODO">
|
||||
<section hidden>
|
||||
<h2 class="font-serif font-3xl">{t("home.changesSection.title")}</h2>
|
||||
<p set:html={t("home.changesSection.description")} />
|
||||
<a href={getLocalizedUrl("/changelog")}>
|
||||
|
|
@ -64,20 +64,21 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
<h2 class="font-serif font-3xl">{t("home.moreSection.title")}</h2>
|
||||
<p set:html={t("home.moreSection.description")} />
|
||||
<div class="grid">
|
||||
<div class="DEV_TODO">
|
||||
<LinkCard
|
||||
icon="material-symbols:movie"
|
||||
title={t("footer.links.videos.title")}
|
||||
subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
|
||||
href={getLocalizedUrl("/videos")}
|
||||
/>
|
||||
<LinkCard
|
||||
icon="material-symbols:folder-zip"
|
||||
title={t("footer.links.webArchives.title")}
|
||||
subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
|
||||
href={getLocalizedUrl("/archives")}
|
||||
/>
|
||||
</div>
|
||||
<LinkCard
|
||||
icon="material-symbols:movie"
|
||||
title={t("footer.links.videos.title")}
|
||||
subtitle={t("footer.links.videos.subtitle", { count: 2115 })}
|
||||
href={getLocalizedUrl("/videos")}
|
||||
hidden
|
||||
/>
|
||||
|
||||
<LinkCard
|
||||
icon="material-symbols:folder-zip"
|
||||
title={t("footer.links.webArchives.title")}
|
||||
subtitle={t("footer.links.webArchives.subtitle", { count: 20 })}
|
||||
href={getLocalizedUrl("/archives")}
|
||||
hidden
|
||||
/>
|
||||
|
||||
<LinkCard
|
||||
icon="material-symbols:calendar-month"
|
||||
|
|
@ -143,18 +144,14 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
|
||||
& > svg {
|
||||
width: calc(var(--font-size-5xl) * 1.2);
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
& > div {
|
||||
& > h1 {
|
||||
font-size: var(--font-size-5xl);
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin-top: -0.5em;
|
||||
font-size: calc(var(--font-size-5xl) * 0.365);
|
||||
font-variation-settings: "wght" 600;
|
||||
margin-top: -0.15em;
|
||||
font-size: calc(var(--font-size-5xl) * 0.39);
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -171,16 +168,12 @@ const { t, getLocalizedUrl } = await getI18n(Astro.locals.currentLocale);
|
|||
|
||||
& > div {
|
||||
& > h1 {
|
||||
margin: 0;
|
||||
font-size: calc(var(--container-width) / 9);
|
||||
font-variation-settings: "wght" 800;
|
||||
}
|
||||
|
||||
& > p {
|
||||
margin: 0;
|
||||
margin-top: -0.5em;
|
||||
font-size: calc(var(--container-width) / 25);
|
||||
font-variation-settings: "wght" 700;
|
||||
margin-top: -0.1em;
|
||||
font-size: calc(var(--container-width) / 23);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue