vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Cosmetics on Template pages

pull/5806/head
Cagatay Civici 2024-05-30 13:13:07 +03:00
parent 203d20b6ce
commit fd3b2197bc
2 changed files with 48 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/styles/layout/layout.scss
View File

@ -15,13 +15,4 @@
@import './_responsive'; @import './_responsive';
@import './_animation'; @import './_animation';
@import './landing/_landing'; @import './landing/_landing';
@import './templates/_apollo';
@import './templates/_atlantis';
@import './templates/_avalon';
@import './templates/_diamond';
@import './templates/_freya';
@import './templates/_poseidon';
@import './templates/_sakai';
@import './templates/_ultima';
@import './templates/_verona';
@import './templates/_templates'; @import './templates/_templates';

100
assets/styles/layout/templates/_templates.scss
View File

@ -1,7 +1,17 @@
@import './_apollo';
@import './_atlantis';
@import './_avalon';
@import './_diamond';
@import './_freya';
@import './_poseidon';
@import './_sakai';
@import './_ultima';
@import './_verona';
.template { .template {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2.19rem; gap: 2rem;
} }
// TEMPLATE YOUTUBE // TEMPLATE YOUTUBE
@ -211,10 +221,9 @@
} }
&-description { &-description {
color: var(--p-surface-600); color: var(--text-secondary-color);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
line-height: 1.3125rem; line-height: 1.5;
margin: 0; margin: 0;
} }
} }
@ -304,18 +313,17 @@
h2 { h2 {
margin: 1.25rem 0 0; margin: 1.25rem 0 0;
color: var(--p-surface-900, var(--p-surface-900, #212121)); color: var(--p-surface-900);
font-size: 1.09375rem; font-size: 1rem;
font-weight: 600; font-weight: 600;
line-height: 1.3125rem; line-height: 1.3125rem;
} }
p { p {
margin: 0.75rem 0 0; margin: 0.75rem 0 0;
color: var(--p-surface-600, #757575); color: var(--text-secondary-color);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
line-height: 1.3125rem; line-height: 1.5;
} }
} }
} }
@ -626,9 +634,8 @@
&-description { &-description {
color: var(--p-surface-600, #757575); color: var(--p-surface-600, #757575);
font-size: 1.09375rem;
font-weight: 400; font-weight: 400;
line-height: 1.64375rem; line-height: 1.5;
margin: 0.75rem 0 0; margin: 0.75rem 0 0;
} }
@ -770,7 +777,6 @@
h2 { h2 {
margin: 0; margin: 0;
color: var(--p-surface-900);
text-align: center; text-align: center;
font-size: 3rem; font-size: 3rem;
font-weight: 600; font-weight: 600;
@ -877,22 +883,19 @@
flex: 1; flex: 1;
h5 { h5 {
color: var(--p-surface-900, var(--color-surface-900, #212121)); font-size: 1.25rem;
font-size: 1.09375rem;
font-weight: 600; font-weight: 600;
line-height: 1.3125rem;
margin: 0; margin: 0;
} }
p { p {
color: var(--p-surface-600, #757575); color: var(--text-secondary-color);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
line-height: 1.3125rem; line-height: 1.5;
margin: 0.38rem 0 0; margin: 0.38rem 0 0;
a { a {
color: var(--p-primary-400); color: var(--primary-text-color);
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
@ -1107,12 +1110,12 @@
.template { .template {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2.19rem; gap: 2rem;
&-hero { &-hero {
width: 100%; width: 100%;
height: 36.25rem; height: 36.25rem;
background: var(--p-primary-500); background: var(--primary-color);
border-radius: 2rem; border-radius: 2rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
@ -1141,11 +1144,10 @@
} }
p { p {
font-size: 0.875rem; line-height: 1.5;
font-weight: 400; font-size: 1rem;
line-height: normal;
margin: 1rem 0 0; margin: 1rem 0 0;
color: var(--p-primary-inverse-color); color: var(--primary-contrast-color);
} }
&-buttons { &-buttons {
@ -1160,10 +1162,8 @@
height: 2.5rem; height: 2.5rem;
flex: 1; flex: 1;
border-radius: 3rem; border-radius: 3rem;
font-size: 0.875rem;
font-weight: 700; font-weight: 700;
line-height: 1.0625rem; line-height: 1;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
@ -1171,20 +1171,20 @@
} }
&-btn1 { &-btn1 {
border: 1px solid #212121; border: 1px solid var(--p-surface-900);
background: #212121; background: var(--p-surface-900);
color: white; color: white;
&:hover { &:hover {
border-color: #444444; border-color: var(--p-surface-700);
background-color: #444444; background-color: var(--p-surface-700);
} }
} }
&-btn2 { &-btn2 {
background-color: var(--p-primary-600); background-color: var(--p-primary-600);
border-color: var(--p-primary-600); border-color: var(--p-primary-600);
color: var(--p-primary-inverse-color); color: white;
&:hover { &:hover {
background-color: var(--p-primary-700); background-color: var(--p-primary-700);
@ -1195,7 +1195,7 @@
} }
&-links { &-links {
margin-top: 1rem; margin-top: 1.5rem;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
@ -1204,13 +1204,14 @@
display: flex; display: flex;
align-items: flex-end; align-items: flex-end;
gap: 0.5rem; gap: 0.5rem;
color: var(--p-primary-inverse-color); color: var(--primary-contrast-color);
span { span {
font-size: 0.75rem;
font-weight: 300;
line-height: normal; line-height: normal;
text-decoration-line: underline;
&:hover {
text-decoration: underline;
}
} }
} }
} }
@ -1367,7 +1368,7 @@
h2 { h2 {
color: var(--p-surface-900); color: var(--p-surface-900);
text-align: center; text-align: center;
font-size: 3.42857rem; font-size: 3.5rem;
font-weight: 600; font-weight: 600;
line-height: 4rem; line-height: 4rem;
margin: 0; margin: 0;
@ -1509,7 +1510,7 @@
&-title { &-title {
color: var(--p-surface-900); color: var(--p-surface-900);
font-weight: 600; font-weight: 600;
line-height: 1.5rem; line-height: 1.5;
} }
&-pricing { &-pricing {
@ -1528,7 +1529,6 @@
} }
button { button {
padding: 0.25rem 0.75rem;
border-radius: 0.375rem; border-radius: 0.375rem;
background: var(--p-surface-900); background: var(--p-surface-900);
text-align: center; text-align: center;
@ -1536,6 +1536,7 @@
outline: none; outline: none;
border: none; border: none;
min-height: 2rem; min-height: 2rem;
padding: 0.5rem 0.75rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
@ -1545,7 +1546,6 @@
color: var(--p-surface-0); color: var(--p-surface-0);
text-align: center; text-align: center;
font-size: 0.875rem;
font-weight: 500; font-weight: 500;
line-height: 1.5rem; line-height: 1.5rem;
letter-spacing: -0.00875rem; letter-spacing: -0.00875rem;
@ -1559,27 +1559,24 @@
p { p {
color: var(--p-surface-500); color: var(--p-surface-500);
font-size: 0.875rem;
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5;
letter-spacing: -0.00875rem;
margin: 0; margin: 0;
} }
} }
} }
&-description { &-description {
color: var(--p-surface-500); color: var(--text-secondary-color);
text-align: center; text-align: center;
font-size: 0.875rem; line-height: 1.5;
line-height: 1.5rem;
letter-spacing: -0.00875rem; letter-spacing: -0.00875rem;
max-width: 46.75rem; max-width: 46.75rem;
margin: 1.5rem auto 0; margin: 1.5rem auto 0;
} }
&-visit { &-visit {
font-size: 0.875rem; color: var(--text-secondary-color);
font-weight: 400; font-weight: 400;
line-height: 1.5rem; line-height: 1.5rem;
letter-spacing: -0.00875rem; letter-spacing: -0.00875rem;
@ -1587,13 +1584,12 @@
margin: 1.5rem auto 0; margin: 1.5rem auto 0;
a { a {
color: var(--p-primary-500); color: var(--primary-text-color);
text-decoration-line: underline;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
&:hover { &:hover {
color: var(--p-primary-300); text-decoration: underline;
} }
} }
} }