Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 04:39:58 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/changelog: use same stylesheet for skeleton and loaded entry

Browse source
This commit is contained in:
dumbmoron 2024-07-21 10:06:43 +00:00
parent 20320c1935
commit 8366a9d9b6
No known key found for this signature in database
3 changed files with 96 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
web/src/components/changelog/ChangelogEntry.css Normal file
View file

@ -0,0 +1,94 @@
main {
overflow-x: hidden;
}
#changelog-header {
display: flex;
flex-direction: column;
align-items: start;
gap: calc(var(--padding) / 2);
padding-bottom: 1em; /* match default <p> padding */
}
:global(#changelog-header.no-padding) {
padding-bottom: 0;
}
.changelog-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
}
.changelog-version {
padding: 3px 8px;
border-radius: 6px;
background-color: var(--secondary);
color: var(--primary);
font-size: 18px;
font-weight: 500;
}
.changelog-date {
font-size: 13px;
font-weight: 500;
color: var(--gray);
}
.changelog-title {
padding: 0;
line-height: 1.2;
font-size: 23px;
user-select: text;
-webkit-user-select: text
}
:global(.changelog-banner) {
display: block;
object-fit: cover;
max-height: 320pt;
min-height: 210pt;
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--padding);
}
:global(.changelog-banner.loading) {
display: none;
}
.changelog-content {
display: flex;
flex-direction: column;
align-items: center;
}
.contents {
width: 100%;
}
.contents,
.contents :global(*) {
line-height: 1.7;
font-size: 14.5px;
font-weight: 410;
font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
user-select: text;
-webkit-user-select: text;
}
:global(ul) {
padding-inline-start: 30px;
}
:global(li) {
padding-left: 3px;
}
@media screen and (max-width: 535px) {
.contents,
.contents :global(*) {
font-size: 14px;
}
}

98
web/src/components/changelog/ChangelogEntry.svelte
View file

@ -54,100 +54,4 @@
</div>
</main>
<style>
main {
overflow-x: hidden;
}
#changelog-header {
display: flex;
flex-direction: column;
align-items: start;
gap: calc(var(--padding) / 2);
padding-bottom: 1em; /* match default <p> padding */
}
#changelog-header.no-padding {
padding-bottom: 0;
}
.changelog-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
}
.changelog-version {
padding: 3px 8px;
border-radius: 6px;
background-color: var(--secondary);
color: var(--primary);
font-size: 18px;
font-weight: 500;
}
.changelog-date {
font-size: 13px;
font-weight: 500;
color: var(--gray);
}
.changelog-title {
padding: 0;
line-height: 1.2;
font-size: 23px;
user-select: text;
-webkit-user-select: text
}
:global(.changelog-banner) {
display: block;
object-fit: cover;
max-height: 320pt;
min-height: 210pt;
width: 100%;
max-width: 100;
aspect-ratio: 16/9;
border-radius: var(--padding);
}
:global(.changelog-banner.loading) {
display: none;
}
.changelog-content {
display: flex;
flex-direction: column;
align-items: center;
}
.contents {
max-width: 100%;
}
.contents,
.contents :global(*) {
line-height: 1.7;
font-size: 14.5px;
font-weight: 410;
font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
user-select: text;
-webkit-user-select: text;
}
:global(ul) {
padding-inline-start: 30px;
}
:global(li) {
padding-left: 3px;
}
@media screen and (max-width: 535px) {
.contents,
.contents :global(*) {
font-size: 14px;
}
}
</style>
<style src="./ChangelogEntry.css"></style>

88
web/src/components/changelog/ChangelogSkeleton.svelte
View file

@ -39,90 +39,4 @@
</div>
</main>
<style>
main {
overflow-x: hidden;
}
#changelog-header {
display: flex;
flex-direction: column;
align-items: start;
gap: calc(var(--padding) / 2);
padding-bottom: 1em; /* match default <p> padding */
}
.changelog-info {
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
}
.changelog-version {
padding: 3px 8px;
border-radius: 6px;
background-color: var(--secondary);
color: var(--primary);
font-size: 18px;
font-weight: 500;
}
.changelog-date {
font-size: 13px;
font-weight: 500;
color: var(--gray);
}
.changelog-title {
padding: 0;
line-height: 1.2;
font-size: 23px;
user-select: text;
-webkit-user-select: text
}
:global(#banner-skeleton) {
display: block;
max-height: 320pt;
min-height: 210pt;
width: 100%;
aspect-ratio: 16/9;
border-radius: var(--padding);
}
.changelog-content {
display: flex;
flex-direction: column;
align-items: center;
}
.contents {
width: 100%;
}
.contents,
.contents :global(*) {
line-height: 1.7;
font-size: 14.5px;
font-weight: 410;
font-family: "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
user-select: text;
-webkit-user-select: text;
}
:global(ul) {
padding-inline-start: 30px;
}
:global(li) {
padding-left: 3px;
}
@media screen and (max-width: 535px) {
.contents,
.contents :global(*) {
font-size: 14px;
}
}
</style>
<style src="./ChangelogEntry.css"></style>