godotengine/godot-website
1
0
Fork 0
mirror of https://github.com/godotengine/godot-website.git synced 2026-01-05 10:10:00 +03:00
Code Issues Packages Projects Releases Wiki Activity

Add a download card for use in articles

Browse Source
This commit is contained in:
Yuri Sizov
2023-10-25 17:58:01 +02:00
parent 6a43e5ce7b
commit 9863552ad6
12 changed files with 255 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
assets/css/article-cards.css Normal file
View File

@@ -0,0 +1,135 @@
.card-warning {
background: var(--warning-background-color);
border-radius: 4px 4px;
color: var(--warning-color);
font-size: 90%;
padding: 0 12px;
}
.card-download {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
background: var(--head-background-color);
border-radius: 4px 4px;
padding: 10px 16px;
}
.card-download-link {
color: var(--dark-color-text-title);
font-size: 135%;
font-weight: 700;
text-decoration-color: var(--dark-color-text);
}
.card-download-sublinks {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 12px;
width: 100%;
}
@media (max-width: 768px) {
.card-download-sublinks {
flex-direction: column;
width: auto;
}
}
.card-download-sublinks .card-download-other,
.card-download-sublinks .card-download-donate {
color: var(--dark-color-text-hl);
font-size: 95%;
text-decoration-color: var(--dark-color-text);
text-decoration-thickness: 1px;
}
.card-download-sublinks .card-download-donate {
color: var(--fund-color-faint);
font-weight: 600;
text-decoration-color: var(--fund-color-faint);
}
.card-download-details {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 12px;
width: 100%;
}
@media (max-width: 768px) {
.card-download-details {
flex-direction: column;
align-items: center;
gap: 20px;
}
}
.card-download-details img, article .content .card-download-details img {
background-color: transparent;
display: inline-block;
margin: 0;
max-width: 200px;
}
@media (max-width: 768px) {
.card-download-details img, article .content .card-download-details img {
max-height: 220px;
max-width: inherit;
}
}
.card-download-platforms {
display: flex;
flex-direction: row;
gap: 4px;
}
.card-download-platforms {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.card-download-platforms .download-platform {
color: var(--primary-color-text-title);
display: flex;
align-items: center;
gap: 12px;
font-weight: 700;
}
.download-platform img {
filter: invert(100%);
}
.card-download-platforms .btn-download-primary {
margin-bottom: 0;
text-align: left;
}
.card-download-platforms .btn-download-primary.btn-download-primary--mono {
background-color: var(--download-mono-background-color);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.card-download-platforms .btn-download-primary.btn-download-primary--mono .download-title {
color: #f7f7f7;
}
.card-download-platforms .btn-download-primary.btn-download-primary--mono .download-hint {
background-color: var(--primary-color-subdued);
color: var(--text-color);
}
.card-download-platforms .btn.btn-download-primary .download-title {
font-size: 18px;
line-height: 24px;
padding: 10px 16px;
white-space: nowrap;
}
@media (max-width: 900px) {
.card-download-platforms .btn.btn-download-primary .download-title {
line-height: 28px;
padding: 12px 20px;
}
}

27
assets/css/main.css
View File

@@ -37,6 +37,7 @@
--fund-color: #ef6767;
--fund-color-hl: #e53e3e;
--fund-color-faint: #ff9d9d;
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
@@ -69,6 +70,7 @@
--download-table-color: rgba(160, 160, 160, 0.05);
--platform-note-background-color: rgb(48 86 210 / 9%);
--platform-code-background-color: #e5ebf1;
--download-mono-background-color: rgb(43 58 76 / 82%);
--feature-heading-color: #2d76ad;
--feature-note-color: #e53e3e;
@@ -128,6 +130,7 @@
--fund-color: #ef6767;
--fund-color-hl: #e53e3e;
--fund-color-faint: #ef6767;
--base-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
--more-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
@@ -157,6 +160,7 @@
--download-table-color: rgba(0, 0, 0, 0.2);
--platform-note-background-color: rgb(255 255 255 / 9%);
--platform-code-background-color: #282b2e;
--download-mono-background-color: rgb(132 151 174 / 68%);
--feature-heading-color: #57b3f8;
--feature-note-color: #ef6767;
@@ -815,26 +819,15 @@ p.small {
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2), 0 0 2px rgba(0, 0, 0, 0.1);
}
a.card {
display: block;
text-decoration: none;
}
.card .footer {
background-color: var(--card-footer-color);
}
.card-warning {
background: var(--warning-background-color);
border-radius: 4px 4px;
color: var(--warning-color);
font-size: 90%;
padding: 0 12px;
}
a.card {
text-decoration: none;
display: flex;
}
.steam-download:hover {
color: hsla(0, 0%, 100%);
}
.tabs {
display: flex;
align-items: flex-end;
@@ -1474,4 +1467,4 @@ section.sponsors .grid {
.sponsor-empty:hover {
background-color: #8484841c;
}
}