initial 2
This commit is contained in:
OfficialDakari
parent
1afa850255
commit
baeca80cff
|
|
@ -0,0 +1 @@
|
|||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70.82 81.78"><defs><linearGradient id="a" x1="0" x2="0" y1="0" y2="1"><stop offset="0%" stop-color="#406FBF"/><stop offset="100%" stop-color="#23509D"/></linearGradient></defs><path fill-rule="evenodd" d="M70.82 44.98v16.36l-17.7 10.22-17.71 10.22-2.59-1.5L0 61.34V20.45l17.7-10.23L35.41 0l28.33 16.36 4.49 2.59 2.59 1.5v8.17L35.41 49.07l-7.08-4.09V36.8l21.25-12.27-14.17-8.17-21.25 12.26v24.54l21.25 12.26.03.02.02-.05z" style="fill:url(#a)"/></svg>
|
||||
|
After Width: | Height: | Size: 517 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 305 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
|
|
@ -0,0 +1,340 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
|
||||
|
||||
:root {
|
||||
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: #FFFFFF;
|
||||
--bg-surface-transparent: #FFFFFF00;
|
||||
--bg-surface-low: #F6F6F6;
|
||||
--bg-surface-low-transparent: #F6F6F600;
|
||||
--bg-surface-hover: rgba(0, 0, 0, 3%);
|
||||
--bg-surface-active: rgba(0, 0, 0, 5%);
|
||||
--bg-surface-border: rgba(0, 0, 0, 6%);
|
||||
|
||||
--bg-primary: rgb(83, 110, 234);
|
||||
--bg-primary-hover: rgba(83, 110, 234, 80%);
|
||||
--bg-primary-active: rgba(83, 110, 234, 70%);
|
||||
--bg-primary-border: rgba(83, 110, 234, 38%);
|
||||
|
||||
--bg-positive: rgb(69, 184, 59);
|
||||
--bg-positive-hover: rgba(69, 184, 59, 8%);
|
||||
--bg-positive-active: rgba(69, 184, 59, 15%);
|
||||
--bg-positive-border: rgba(69, 184, 59, 40%);
|
||||
|
||||
--bg-caution: rgb(255, 179, 0);
|
||||
--bg-caution-hover: rgba(255, 179, 0, 8%);
|
||||
--bg-caution-active: rgba(255, 179, 0, 15%);
|
||||
--bg-caution-border: rgba(255, 179, 0, 40%);
|
||||
|
||||
--bg-danger: rgb(240, 71, 71);
|
||||
--bg-danger-hover: rgba(240, 71, 71, 5%);
|
||||
--bg-danger-active: rgba(240, 71, 71, 10%);
|
||||
--bg-danger-border: rgba(240, 71, 71, 20%);
|
||||
|
||||
--bg-tooltip: #353535;
|
||||
--bg-badge: #989898;
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: #000000;
|
||||
--tc-surface-normal: rgba(0, 0, 0, 68%);
|
||||
--tc-surface-normal-low: rgba(0, 0, 0, 60%);
|
||||
--tc-surface-low: rgba(0, 0, 0, 38%);
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 68%);
|
||||
--tc-primary-low: rgba(255, 255, 255, 40%);
|
||||
|
||||
--tc-positive-high: var(--bg-positive);
|
||||
--tc-positive-normal: rgb(69, 184, 59, 80%);
|
||||
--tc-positive-low: rgb(69, 184, 59, 60%);
|
||||
|
||||
--tc-caution-high: var(--bg-caution);
|
||||
--tc-caution-normal: rgb(255, 179, 0, 80%);
|
||||
--tc-caution-low: rgb(255, 179, 0, 60%);
|
||||
|
||||
--tc-danger-high: var(--bg-danger);
|
||||
--tc-danger-normal: rgba(240, 71, 71, 88%);
|
||||
--tc-danger-low: rgba(240, 71, 71, 60%);
|
||||
|
||||
--tc-code: #e62498;
|
||||
--tc-link: hsl(213deg 76% 56%);
|
||||
--tc-tooltip: white;
|
||||
--tc-badge: white;
|
||||
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-normal: #626262;
|
||||
--ic-primary-normal: #ffffff;
|
||||
--ic-positive-normal: rgba(69, 184, 59, 80%);
|
||||
--ic-caution-normal: rgba(255, 179, 0, 80%);
|
||||
--ic-danger-normal: rgba(240, 71, 71, 0.7);
|
||||
|
||||
|
||||
/* system icon size | -ic-[size]: value */
|
||||
--ic-large: 38px;
|
||||
--ic-normal: 24px;
|
||||
--ic-small: 20px;
|
||||
--ic-extra-small: 18px;
|
||||
|
||||
/* avatar size */
|
||||
--av-large: 80px;
|
||||
--av-normal: 42px;
|
||||
--av-small: 36px;
|
||||
--av-extra-small: 24px;
|
||||
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 20%);
|
||||
|
||||
--bs-popup: 0 0 16px rgba(0, 0, 0, 10%);
|
||||
|
||||
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
||||
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
||||
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
|
||||
--bs-positive-border: inset 0 0 0 1px var(--bg-positive-border);
|
||||
--bs-positive-outline: 0 0 0 2px var(--bg-positive-border);
|
||||
|
||||
--bs-caution-border: inset 0 0 0 1px var(--bg-caution-border);
|
||||
--bs-caution-outline: 0 0 0 2px var(--bg-caution-border);
|
||||
|
||||
--bs-danger-border: inset 0 0 0 1px var(--bg-danger-border);
|
||||
--bs-danger-outline: 0 0 0 2px var(--bg-danger-border);
|
||||
|
||||
|
||||
/* border */
|
||||
--bo-radius: 8px;
|
||||
|
||||
|
||||
/* font syles */
|
||||
--fs-h1: 36px;
|
||||
--ls-h1: -1.5px;
|
||||
--lh-h1: 38px;
|
||||
|
||||
--fs-h2: 24px;
|
||||
--ls-h2: -0.5px;
|
||||
--lh-h2: 30px;
|
||||
|
||||
--fs-s1: 18px;
|
||||
--ls-s1: -0.2px;
|
||||
--lh-s1: 24px;
|
||||
|
||||
--fs-b1: 16px;
|
||||
--ls-b1: 0.1px;
|
||||
--lh-b1: 24px;
|
||||
|
||||
--fs-b2: 14px;
|
||||
--ls-b2: 0.2px;
|
||||
--lh-b2: 20px;
|
||||
|
||||
--fs-b3: 12px;
|
||||
--ls-b3: 0px;
|
||||
--lh-b3: 16px;
|
||||
|
||||
|
||||
/* spacing | --sp-[space]: value */
|
||||
--sp-none: 0px;
|
||||
--sp-ultra-tight: 4px;
|
||||
--sp-extra-tight: 8px;
|
||||
--sp-tight: 12px;
|
||||
--sp-normal: 16px;
|
||||
--sp-loose: 20px;
|
||||
--sp-extra-loose: 32px;
|
||||
|
||||
|
||||
/* other */
|
||||
--border-width: 1px;
|
||||
|
||||
--font-family: 'Roboto', 'Supreme', sans-serif;
|
||||
}
|
||||
|
||||
.silver-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(0, 0%, 95%);
|
||||
--bg-surface-transparent: hsla(0, 0%, 95%, 0);
|
||||
--bg-surface-low: hsl(0, 0%, 91%);
|
||||
--bg-surface-low-transparent: hsla(0, 0%, 91%, 0);
|
||||
}
|
||||
|
||||
.dark-theme,
|
||||
.monet-dark-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(208, 8%, 20%);
|
||||
--bg-surface-transparent: hsla(208, 8%, 20%, 0);
|
||||
--bg-surface-low: hsl(208, 8%, 16%);
|
||||
--bg-surface-low-transparent: hsla(208, 8%, 16%, 0);
|
||||
--bg-surface-hover: rgba(255, 255, 255, 3%);
|
||||
--bg-surface-active: rgba(255, 255, 255, 5%);
|
||||
--bg-surface-border: rgba(0, 0, 0, 20%);
|
||||
|
||||
--bg-primary: rgb(42, 98, 166);
|
||||
--bg-primary-hover: rgba(42, 98, 166, 80%);
|
||||
--bg-primary-active: rgba(42, 98, 166, 70%);
|
||||
--bg-primary-border: rgba(42, 98, 166, 38%);
|
||||
|
||||
--bg-tooltip: #000;
|
||||
--bg-badge: hsl(0, 0%, 75%);
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgba(255, 255, 255, 98%);
|
||||
--tc-surface-normal: rgba(255, 255, 255, 84%);
|
||||
--tc-surface-normal-low: rgba(255, 255, 255, 60%);
|
||||
--tc-surface-low: rgba(255, 255, 255, 48%);
|
||||
|
||||
--tc-primary-high: #ffffff;
|
||||
--tc-primary-normal: rgba(255, 255, 255, 0.68);
|
||||
--tc-primary-low: rgba(255, 255, 255, 0.4);
|
||||
|
||||
--tc-code: #e565b1;
|
||||
--tc-link: hsl(213deg 94% 73%);
|
||||
--tc-badge: black;
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-normal: rgba(255, 255, 255, 68%);
|
||||
--ic-primary-normal: #ffffff;
|
||||
|
||||
/* shadow and overlay */
|
||||
--bg-overlay: rgba(0, 0, 0, 50%);
|
||||
|
||||
--bs-popup: 0 0 16px rgba(0, 0, 0, 25%);
|
||||
|
||||
--bs-surface-border: inset 0 0 0 1px var(--bg-surface-border);
|
||||
--bs-surface-outline: 0 0 0 2px var(--bg-surface-border);
|
||||
|
||||
--bs-primary-border: inset 0 0 0 1px var(--bg-primary-border);
|
||||
--bs-primary-outline: 0 0 0 2px var(--bg-primary-border);
|
||||
|
||||
--font-family: 'Supreme', 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
.butter-theme {
|
||||
/* background color | --bg-[background type]: value */
|
||||
--bg-surface: hsl(64, 6%, 14%);
|
||||
--bg-surface-transparent: hsla(64, 6%, 14%, 0);
|
||||
--bg-surface-low: hsl(64, 6%, 10%);
|
||||
--bg-surface-low-transparent: hsla(64, 6%, 14%, 0);
|
||||
|
||||
--bg-badge: #c4c1ab;
|
||||
|
||||
|
||||
/* text color | --tc-[background type]-[priority]: value */
|
||||
--tc-surface-high: rgb(255, 251, 222, 94%);
|
||||
--tc-surface-normal: rgba(255, 251, 222, 74%);
|
||||
--tc-surface-normal-low: rgba(255, 251, 222, 60%);
|
||||
--tc-surface-low: rgba(255, 251, 222, 38%);
|
||||
|
||||
|
||||
/* system icons | --ic-[background type]-[priority]: value */
|
||||
--ic-surface-normal: rgb(255 251 222 / 68%);
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: var(--font-family);
|
||||
font-size: 16px;
|
||||
background-color: var(--bg-surface);
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
a {
|
||||
color: var(--tc-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
label {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
button,
|
||||
textarea {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
letter-spacing: inherit;
|
||||
border: none;
|
||||
}
|
||||
button {
|
||||
max-width: 100%;
|
||||
text-transform: none;
|
||||
text-align: inherit;
|
||||
overflow: visible;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
textarea {
|
||||
color: inherit;
|
||||
word-spacing: inherit;
|
||||
}
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Old versions of Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome, Edge, Opera and Firefox */
|
||||
}
|
||||
|
||||
.text-h1,
|
||||
.text-h2,
|
||||
.text-s1,
|
||||
.text-b1,
|
||||
.text-b2,
|
||||
.text-b3 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: var(--tc-surface-high);
|
||||
}
|
||||
|
||||
.text-h1 {
|
||||
font-size: var(--fs-h1);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-h1);
|
||||
line-height: var(--lh-h1);
|
||||
}
|
||||
.text-h2 {
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 500;
|
||||
letter-spacing: var(--ls-h2);
|
||||
line-height: var(--lh-h2);
|
||||
}
|
||||
.text-s1 {
|
||||
font-size: var(--fs-s1);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-s1);
|
||||
line-height: var(--lh-s1);
|
||||
}
|
||||
.text-b1 {
|
||||
color: var(--tc-surface-normal);
|
||||
font-size: var(--fs-b1);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-b1);
|
||||
line-height: var(--lh-b1);
|
||||
}
|
||||
.text-b2 {
|
||||
color: var(--tc-surface-normal);
|
||||
font-size: var(--fs-b2);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-b2);
|
||||
line-height: var(--lh-b2);
|
||||
}
|
||||
.text-b3 {
|
||||
color: var(--tc-surface-low);
|
||||
font-size: var(--fs-b3);
|
||||
font-weight: 400;
|
||||
letter-spacing: var(--ls-b3);
|
||||
line-height: var(--lh-b3);
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
/* --- branding --- */
|
||||
.branding-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
padding: var(--sp-normal);
|
||||
}
|
||||
|
||||
.branding-container img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.branding-container > div {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
.branding-container > div .text-h2 {
|
||||
margin: 0 var(--sp-normal);
|
||||
}
|
||||
.branding-container > div .text-s1 {
|
||||
padding-left: var(--sp-normal);
|
||||
border-left: 1px solid var(--bg-surface-border);
|
||||
}
|
||||
|
||||
/* --- grid --- */
|
||||
.base-grid-12 {
|
||||
display: grid;
|
||||
grid-column-gap: var(--sp-loose);
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
}
|
||||
|
||||
/* --- button --- */
|
||||
|
||||
a.btn-primary,
|
||||
a.btn-surface {
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-primary,
|
||||
.btn-surface {
|
||||
padding: var(--sp-extra-tight) var(--sp-normal);
|
||||
border-radius: var(--bo-radius);
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-large {
|
||||
padding: var(--sp-tight) calc(var(--sp-loose) + var(--sp-ultra-tight));
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
.btn-surface {
|
||||
box-shadow: var(--bs-surface-border);
|
||||
}
|
||||
.btn-primary [class^="text"] {
|
||||
color: var(--tc-primary-high)
|
||||
}
|
||||
.btn-primary:active {
|
||||
background-color: var(--bg-primary-active);
|
||||
}
|
||||
.btn-surface:active {
|
||||
background-color: var(--bg-surface-active);
|
||||
}
|
||||
@media(hover: hover) {
|
||||
.btn-primary:hover {
|
||||
background-color: var(--bg-primary-hover);
|
||||
}
|
||||
.btn-surface:hover {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,521 @@
|
|||
@import url(./base.css);
|
||||
@import url(./scrollbar.css);
|
||||
@import url(./components.css);
|
||||
|
||||
:root {
|
||||
--section-max-width: 1274px;
|
||||
--navbar-height: 61.6px;
|
||||
--section-side-padding: 60px;
|
||||
|
||||
--preview-width: 1920px;
|
||||
--preview-height: 1080px;
|
||||
}
|
||||
|
||||
#root section>.base-grid-12 {
|
||||
margin: auto;
|
||||
padding: 0 var(--section-side-padding);
|
||||
max-width: var(--section-max-width);
|
||||
}
|
||||
|
||||
|
||||
.nav {
|
||||
width: 100%;
|
||||
background-color: var(--bg-surface);
|
||||
border-bottom: 1px solid var(--bg-surface-border);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.nav__base {
|
||||
max-width: var(--section-max-width);
|
||||
margin: auto;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.nav__options {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
margin-right: var(--sp-normal);
|
||||
}
|
||||
|
||||
|
||||
/* -- hero -- */
|
||||
.hero {
|
||||
padding-top: var(--navbar-height);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero>.base-grid-12 {
|
||||
grid-template-rows: repeat(2, auto);
|
||||
}
|
||||
|
||||
.hero__preview {
|
||||
grid-column-start: 7;
|
||||
grid-row: 1 / 3;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero__preview__container {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.hero__preview__container>img {
|
||||
width: calc(var(--preview-width) / 1.8);
|
||||
height: calc(var(--preview-height) / 1.8);
|
||||
|
||||
border-radius: var(--bo-radius);
|
||||
box-shadow: var(--bs-popup);
|
||||
}
|
||||
|
||||
.hero__preview__container>.text-b3 {
|
||||
margin-top: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
|
||||
.hero__info {
|
||||
grid-column: 1 / 5;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hero__intro {
|
||||
margin-top: calc(4 * var(--sp-extra-loose));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero__intro>p {
|
||||
margin: var(--sp-extra-loose) 0;
|
||||
}
|
||||
|
||||
.hero__intro__btns>[class^=btn] {
|
||||
margin-top: var(--sp-normal);
|
||||
margin-right: var(--sp-normal);
|
||||
}
|
||||
|
||||
.themes {
|
||||
margin-top: calc(6 * var(--sp-extra-loose));
|
||||
margin-bottom: var(--sp-extra-loose);
|
||||
}
|
||||
|
||||
.themes .text-b3 {
|
||||
margin: var(--sp-extra-tight) 0;
|
||||
}
|
||||
|
||||
.themes__btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.themes__btn>.theme-btn {
|
||||
margin-right: var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
.theme-btn {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
border-radius: 50%;
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
cursor: pointer;
|
||||
transition: border-radius 200ms ease-in-out;
|
||||
}
|
||||
|
||||
.theme-btn--active {
|
||||
border-radius: var(--bo-radius);
|
||||
}
|
||||
|
||||
.theme-btn::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 35%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-surface-low);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
.theme-btn:hover {
|
||||
box-shadow: var(--bs-primary-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.theme-btn--light {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.theme-btn--light::before {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.theme-btn--silver {
|
||||
background-color: hsl(0, 0%, 95%);
|
||||
}
|
||||
|
||||
.theme-btn--silver::before {
|
||||
background-color: hsl(0, 0%, 91%);
|
||||
}
|
||||
|
||||
.theme-btn--dark {
|
||||
background-color: hsl(208, 8%, 20%);
|
||||
}
|
||||
|
||||
.theme-btn--dark::before {
|
||||
background-color: hsl(208, 8%, 16%);
|
||||
}
|
||||
|
||||
.theme-btn--monet-dark {
|
||||
background-color: #161c24;
|
||||
}
|
||||
|
||||
.theme-btn--monet-dark::before {
|
||||
background-color: #161c24;
|
||||
}
|
||||
|
||||
.theme-btn--butter {
|
||||
background-color: hsl(64, 6%, 14%);
|
||||
}
|
||||
|
||||
.theme-btn--butter::before {
|
||||
background-color: hsl(64, 6%, 10%);
|
||||
}
|
||||
|
||||
|
||||
/* -- features --- */
|
||||
.features {
|
||||
background-color: var(--bg-surface-low);
|
||||
border: 1px solid var(--bg-surface-border);
|
||||
border-width: 1px 0 1px 0;
|
||||
|
||||
background-image: radial-gradient(var(--bg-surface-border) 2px, transparent 2px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.features__info {
|
||||
grid-column: 1 / 5;
|
||||
|
||||
margin-top: 100px;
|
||||
margin-bottom: var(--sp-extra-loose);
|
||||
}
|
||||
|
||||
.features__info>.text-b1 {
|
||||
margin-top: var(--sp-extra-loose);
|
||||
background-color: var(--bg-surface-low);
|
||||
}
|
||||
|
||||
.features__list {
|
||||
--feat-left-space: calc((100% - var(--section-max-width)) / 2 + var(--section-side-padding));
|
||||
padding-bottom: var(--sp-extra-loose);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1274px) {
|
||||
.features__list {
|
||||
--feat-left-space: var(--section-side-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.features__list>.scrollbar {
|
||||
padding: var(--sp-extra-loose) var(--feat-left-space);
|
||||
margin-bottom: var(--sp-extra-loose);
|
||||
}
|
||||
|
||||
.feature__cards {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.feat-card {
|
||||
min-width: 300px;
|
||||
width: 300px;
|
||||
margin-right: var(--sp-loose);
|
||||
padding: var(--sp-normal);
|
||||
background-color: var(--bg-surface);
|
||||
border-radius: var(--bo-radius);
|
||||
/* border: 1px solid var(--bg-surface-border) */
|
||||
box-shadow: 0 3px 8px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
.feat-card__preview {
|
||||
height: 160px;
|
||||
margin-bottom: var(--sp-extra-loose);
|
||||
outline: 1px solid var(--bg-surface-border);
|
||||
overflow: hidden;
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.feat-card__preview>img {
|
||||
--preview-scale: 1.8;
|
||||
width: calc(var(--preview-width) / var(--preview-scale));
|
||||
height: calc(var(--preview-height) / var(--preview-scale));
|
||||
box-shadow: var(--bs-popup);
|
||||
border-radius: var(--bo-radius);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.feat-card:nth-child(3n + 1) .feat-card__preview {
|
||||
background-color: #b6fa8c46;
|
||||
}
|
||||
|
||||
.feat-card:nth-child(3n + 2) .feat-card__preview {
|
||||
background-color: #77eeee3d;
|
||||
}
|
||||
|
||||
.feat-card:nth-child(3n + 3) .feat-card__preview {
|
||||
background-color: #d07ef133;
|
||||
}
|
||||
|
||||
.feat-card__info .text-b1 {
|
||||
margin: var(--sp-loose) 0;
|
||||
}
|
||||
|
||||
/* -- about -- */
|
||||
.about {
|
||||
padding: calc(4.5 * var(--sp-extra-loose)) 0;
|
||||
}
|
||||
|
||||
.about>.base-grid-12 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.about__info {
|
||||
max-width: 412px;
|
||||
width: 100%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about__info img {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
}
|
||||
|
||||
.about__info>.text-h1 {
|
||||
margin: var(--sp-extra-loose) 0;
|
||||
}
|
||||
|
||||
.about__info__btns {
|
||||
margin-top: var(--sp-extra-loose);
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* support */
|
||||
.support {
|
||||
padding: 100px 0 50px;
|
||||
background-color: var(--bg-surface-low);
|
||||
border-top: 1px solid var(--bg-surface-border);
|
||||
|
||||
background-image: radial-gradient(var(--bg-surface-border) 2px, transparent 2px);
|
||||
background-size: 48px 48px;
|
||||
}
|
||||
|
||||
.support__info {
|
||||
grid-column: 1 / 5;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.support__info>.text-b1 {
|
||||
margin: var(--sp-extra-loose) 0 var(--sp-extra-tight);
|
||||
}
|
||||
|
||||
.support__info .btn-large {
|
||||
margin-top: var(--sp-tight);
|
||||
margin-right: var(--sp-tight);
|
||||
}
|
||||
|
||||
.support__list {
|
||||
grid-column: 7 / 13;
|
||||
}
|
||||
|
||||
.support__container {
|
||||
padding: var(--sp-loose) 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.support__label {
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.support__container a {
|
||||
margin: 0 var(--sp-normal) var(--sp-normal) 0;
|
||||
}
|
||||
|
||||
.support__container .supporterProfile {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: var(--bo-radius);
|
||||
background-color: var(--bg-positive-active);
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* footer */
|
||||
.footer {
|
||||
background-color: black;
|
||||
padding: var(--sp-loose) 0;
|
||||
}
|
||||
|
||||
.footer .base-grid-12 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer__branding {
|
||||
grid-column: 1 / 13;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__branding .branding-container {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.footer__branding .branding-container img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.footer__branding .branding-container [class^="text"] {
|
||||
color: white;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.footer__branding .branding-container .text-s1 {
|
||||
border-left-color: hsla(0, 0%, 100%, 20%);
|
||||
color: hsla(0, 0%, 100%, 90%)
|
||||
}
|
||||
|
||||
.footer__branding__options {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.footer__menu {
|
||||
margin-top: var(--sp-normal);
|
||||
max-width: 300px;
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer__menu-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: var(--sp-normal);
|
||||
padding-right: var(--sp-normal);
|
||||
}
|
||||
|
||||
.footer__menu-container .text-b3 {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer__menu-container>* {
|
||||
margin-bottom: var(--sp-tight);
|
||||
}
|
||||
|
||||
.footer__menu-container a {
|
||||
color: hsla(0, 0%, 100%, 68%);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer__creator {
|
||||
margin-top: var(--sp-extra-loose);
|
||||
color: hsla(0, 0%, 100%, 38%);
|
||||
}
|
||||
|
||||
.footer__creator a {
|
||||
color: rgb(140, 147, 184);
|
||||
}
|
||||
|
||||
/* -- tablet view -- */
|
||||
|
||||
@media screen and (max-width: 1112px) {
|
||||
|
||||
.hero>.base-grid-12,
|
||||
.features>.base-grid-12,
|
||||
.support>.base-grid-12 {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero__preview__container {
|
||||
position: relative;
|
||||
margin: calc(2 * var(--sp-extra-loose)) 0;
|
||||
}
|
||||
|
||||
.hero__preview__container>img {
|
||||
width: calc(var(--preview-width) / 2.5);
|
||||
height: calc(var(--preview-height) / 2.5);
|
||||
}
|
||||
|
||||
.hero__info,
|
||||
.features__info,
|
||||
.support__info {
|
||||
max-width: 412px;
|
||||
}
|
||||
|
||||
.hero__intro {
|
||||
margin-top: calc(2 * var(--sp-extra-loose));
|
||||
}
|
||||
|
||||
.hero__info .themes {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- mobile view -- */
|
||||
@media screen and (max-width: 586px) {
|
||||
:root {
|
||||
--section-side-padding: var(--sp-loose);
|
||||
--navbar-height: 86.6px;
|
||||
}
|
||||
|
||||
.branding-container>div {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.branding-container>div .text-s1 {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.hero__preview__container>img {
|
||||
width: calc(var(--preview-width) / 4);
|
||||
height: calc(var(--preview-height) / 4);
|
||||
}
|
||||
|
||||
.footer__branding .branding-container .text-s1 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 398px) {
|
||||
:root {
|
||||
--navbar-height: 61.6px;
|
||||
}
|
||||
|
||||
.branding-container>div .text-s1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
.scrollbar {
|
||||
/* firefox */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--bg-surface-hover) transparent;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
.scrollbar:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--bg-surface-hover);
|
||||
}
|
||||
|
||||
|
||||
.scrollbar__h {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.scrollbar__v {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.scrollbar--auto-hide {
|
||||
/* firefox */
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
|
||||
.scrollbar--auto-hide::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar--auto-hide:hover {
|
||||
scrollbar-color: var(--bg-surface-hover) transparent;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* invisible scrollbar but contain will scroll */
|
||||
.scrollbar--invisible {
|
||||
/* firefox */
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
|
||||
.scrollbar--invisible::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.scrollbar--invisible:hover::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<link href="https://api.fontshare.com/css?f[]=supreme@300,301,400,401,500,501,700,701&display=swap"
|
||||
rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
|
||||
<link rel="icon" type="image/png" sizes="48x48" href="assets/favicon.png">
|
||||
|
||||
<title>Extera Project</title>
|
||||
<meta name="name" content="Extera">
|
||||
<meta name="author" content="OfficialDakari">
|
||||
<meta name="description" content="A Matrix client with new cool features based on Cinny.">
|
||||
<meta name="keywords" content="cinny, cinnyapp, cinnychat, matrix, matrix client, matrix.org, element, extera">
|
||||
|
||||
<meta property="og:title" content="Extera">
|
||||
<meta property="og:url" content="https://extera.xyz">
|
||||
<meta property="og:image" content="https://extera.xyz/assets/favicon-48x48.png">
|
||||
<meta property="og:description" content="A Matrix client with new cool features based on Cinny.">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
<nav class="nav">
|
||||
<div class="nav__base">
|
||||
<div class="branding-container">
|
||||
<img src="assets/extera.svg" alt="Cinny logo">
|
||||
<div>
|
||||
<h2 class="text-h2">Extera</h2>
|
||||
<p class="text-s1">A new Matrix client</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav__options">
|
||||
<a class="btn-primary" href="https://app.extera.xyz">
|
||||
<span class="text-b1">Try it</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<section class="hero">
|
||||
<div class="base-grid-12">
|
||||
<div class="hero__info">
|
||||
<div class="hero__intro">
|
||||
<h1 class="text-h1">Imagine a <a href="https://matrix.org" target="_blank">Matrix</a> client...
|
||||
</h1>
|
||||
<p class="text-b1">Where you can enjoy conversation in Material-designed UI via protocol
|
||||
protected by power of the open-source.</p>
|
||||
<div class="hero__intro__btns">
|
||||
<a class="btn-primary btn-large"
|
||||
href="https://cloud.officialdakari.ru/index.php/apps/forms/s/arBS3eL4A8oDcHSnz7dgNQkf">
|
||||
<span class="text-s1">Register</span>
|
||||
</a>
|
||||
<a class="btn-secondary btn-large" href="https://app.extera.xyz">
|
||||
<span class="text-s1">Open Extera</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero__preview">
|
||||
<div class="hero__preview__container">
|
||||
<img id="previewImage" src="assets/preview-light.png" alt="Cinny preview image">
|
||||
<p class="text-b3">Preview from Firefox (desktop)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero__info">
|
||||
<div class="themes">
|
||||
<h4 class="text-s1">Themes</h4>
|
||||
<p id="themeStatus" class="text-b3">Selected: light</p>
|
||||
<div class="themes__btn">
|
||||
<button onclick="changeTheme(this)" themeName=""
|
||||
class="theme-btn theme-btn--light theme-btn--active" />
|
||||
<button onclick="changeTheme(this)" themeName="dark-theme"
|
||||
class="theme-btn theme-btn--dark" />
|
||||
<button onclick="changeTheme(this)" themeName="monet-dark-theme"
|
||||
class="theme-btn theme-btn--monet-dark" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="features" class="features">
|
||||
<div class="base-grid-12">
|
||||
<div class="features__info">
|
||||
<h1 class="text-h1">Features</h1>
|
||||
<p class="text-b1">Below is the list of features we added.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="features__list">
|
||||
<div class="scrollbar scrollbar__h scrollbar--auto-hide">
|
||||
<div class="feature__cards">
|
||||
|
||||
<div class="feat-card">
|
||||
<div class="feat-card__info">
|
||||
<h2 class="text-h2">Captions</h2>
|
||||
<p class="text-b1">Send captions with attachments in one message. Your group chat won't
|
||||
think that you are schizophrenic when a caption is sent, but the meme is
|
||||
still uploading.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-card">
|
||||
<div class="feat-card__info">
|
||||
<h2 class="text-h2">Presence status</h2>
|
||||
<p class="text-b1">Have full control over your presence status: from online status to
|
||||
ghost mode.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-card">
|
||||
<div class="feat-card__info">
|
||||
<h2 class="text-h2">Rich profile</h2>
|
||||
<p class="text-b1">If modifying your display name and profile picture is not enough for
|
||||
you, you can also set profile banner.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feat-card">
|
||||
<div class="feat-card__info">
|
||||
<h2 class="text-h2">Custom themes</h2>
|
||||
<p class="text-b1">Easily modify Extera's look by adding custom CSS themes. You can get
|
||||
some themes <a href="https://matrix.to/#/#themes:extera.xyz">here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<div class="base-grid-12">
|
||||
<div class="about__info">
|
||||
<img src="assets/extera.svg" alt="Extera logo" />
|
||||
<h1 class="text-h1">Extera is open-source</h1>
|
||||
<p class="text-b1">Extera uses <a href="https://matrix.org" target="_blank">Matrix</a> as it's
|
||||
communication protocol
|
||||
— An open
|
||||
network for secure, decentralized
|
||||
communication. We have also made the source code of Extera open to everyone, so you can enhance,
|
||||
modify and
|
||||
inspect it.</p>
|
||||
|
||||
<div class="about__info__btns">
|
||||
<a class="btn-surface btn-large" href="https://github.com/OfficialDakari/Extera"
|
||||
target="_blank">
|
||||
<span class="text-b1">Source code</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="sponsor" class="support">
|
||||
<div class="base-grid-12">
|
||||
<div class="support__info">
|
||||
<h1 class="text-h1">Financial contribution</h1>
|
||||
<p class="text-b1">Support this project by becoming a financial contributor.</p>
|
||||
<a class="btn-surface btn-large" href="https://officialdakari.ru/sponsor/" target="_blank">
|
||||
<span class="text-b1">Go to sponsor page</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="support__list">
|
||||
<p class="support__label text-b2">Organizations</p>
|
||||
<div id="supportOrg" class="support__container"></div>
|
||||
<p class="support__label text-b2">Individuals</p>
|
||||
<div id="supportInd" class="support__container">
|
||||
<ul>
|
||||
<li class="text-b1">konrad (@konrad:re128.org)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="footer">
|
||||
<div class="base-grid-12">
|
||||
<div class="footer__branding">
|
||||
<div class="branding-container">
|
||||
<img src="assets/extera.svg" alt="Cinny logo">
|
||||
<div>
|
||||
<h2 class="text-h2">Extera</h2>
|
||||
<p class="text-s1">A new cool Matrix client</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__branding__options">
|
||||
<a class="btn-primary" href="https://app.extera.xyz">
|
||||
<span class="text-b1">Get Started</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px;">
|
||||
<div class="footer__menu">
|
||||
<div class="footer__menu-container">
|
||||
<h4 class="text-b3">Menu</h4>
|
||||
<a href="/" class="text-b2">Home</a>
|
||||
<a href="#features" class="text-b2">Features</a>
|
||||
<a href="#about" class="text-b2">About</a>
|
||||
<a href="#sponsor" class="text-b2">Sponsor</a>
|
||||
</div>
|
||||
<div class="footer__menu-container">
|
||||
<h4 class="text-b3">Community</h4>
|
||||
<a class="text-b2" href="https://matrix.to/#/#extera:extera.xyz" target="_blank">Matrix
|
||||
(#extera:extera.xyz)</a>
|
||||
<a class="text-b2" href="https://matrix.to/#/#themes:extera.xyz" target="_blank">CSS
|
||||
(#themes:extera.xyz)</a>
|
||||
<!-- <a class="text-b2" rel="me" href="https://fosstodon.org/@cinnyapp" target="_blank">Mastodon</a> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="footer__creator text-b3">Copyright © 2024 <a href="https://officialdakari.ru"
|
||||
target="_blank">OfficialDakari</a> • <a href="https://github.com/cinnyapp/cinny-site"
|
||||
target="_blank">Based
|
||||
on Cinny's website</a> • <a href="https://git.extera.xyz/OfficialDakari/ExteraWebsite">Source
|
||||
code</a></p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
function changeTheme(that) {
|
||||
const themeName = that.getAttribute('themeName');
|
||||
const previewImage = document.getElementById('previewImage');
|
||||
const themeStatus = document.getElementById('themeStatus');
|
||||
|
||||
document.body.className = themeName;
|
||||
|
||||
that.parentElement.childNodes.forEach((child) => {
|
||||
if (child.classList?.contains('theme-btn--active')) {
|
||||
child.classList.remove('theme-btn--active');
|
||||
}
|
||||
});
|
||||
that.classList.add('theme-btn--active');
|
||||
|
||||
let previewImgSrc = null;
|
||||
switch (themeName) {
|
||||
case 'dark-theme':
|
||||
previewImage.src = 'assets/preview-dark.png';
|
||||
themeStatus.textContent = 'Selected: Dark'
|
||||
previewImgSrc = 'assets/preview-dark.png';
|
||||
break;
|
||||
case 'monet-dark-theme':
|
||||
previewImage.src = 'assets/preview-monet-dark.png';
|
||||
themeStatus.textContent = 'Selected: Monet Dark (Custom)'
|
||||
previewImgSrc = 'assets/preview-monet-dark.png';
|
||||
break;
|
||||
default:
|
||||
previewImage.src = 'assets/preview-light.png';
|
||||
themeStatus.textContent = 'Selected: Light'
|
||||
previewImgSrc = 'assets/preview-light.png';
|
||||
}
|
||||
|
||||
const featImgs = document.getElementsByClassName('feat-img');
|
||||
for (let featImg of featImgs) {
|
||||
featImg.src = previewImgSrc;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue