begin styling standardization
This commit is contained in:
parent
b9accda035
commit
c5578f3dfe
GPG key ID:
821EEC32761AC17C
9 changed files with 130 additions and 99 deletions
|
|
@ -12,22 +12,21 @@
|
|||
.featurelist-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: 0.618rem;
|
||||
gap: var(--xs);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-block: 0.618rem;
|
||||
border-radius: 9px;
|
||||
margin-block: var(--xs);
|
||||
border-radius: var(--radius-md);
|
||||
background-color: hsl(var(--blue) 60% 98%);
|
||||
padding: 0.618rem;
|
||||
border: 1px solid hsl(var(--blue) 9% 75%);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0.618rem;
|
||||
background-image: radial-gradient(
|
||||
hsl(var(--blue) 9% 75%) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
inset: var(--xs);
|
||||
background-image: radial-gradient(hsl(var(--blue) 9% 75%) 1px,
|
||||
transparent 1px);
|
||||
background-position: 50% 50%;
|
||||
background-size: 1.1rem 1.1rem;
|
||||
}
|
||||
|
|
@ -38,20 +37,20 @@ html.dark .featurelist-item {
|
|||
border-color: hsl(0deg 0% 100% / 0.05);
|
||||
|
||||
&::before {
|
||||
background-image: radial-gradient(
|
||||
hsl(0deg 0% 100% / 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-image: radial-gradient(hsl(0deg 0% 100% / 0.1) 1px,
|
||||
transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
margin: 1rem 0;
|
||||
margin: var(--sm) 0;
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.2em;
|
||||
|
||||
& .feature-title {
|
||||
margin-bottom: 0.517rem;
|
||||
}
|
||||
|
||||
& .feature-subtitle {
|
||||
color: #303030;
|
||||
}
|
||||
|
|
@ -72,7 +71,8 @@ html.dark .feature-text {
|
|||
& video {
|
||||
width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
border-radius: 0.681rem;
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
& .shiki {
|
||||
|
|
@ -80,6 +80,7 @@ html.dark .feature-text {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
/*font-size: 0.55rem;*/
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
& .showcase-desktop {
|
||||
|
|
@ -118,6 +119,7 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
& .cloud-center img {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
@ -137,9 +139,10 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
transform-origin: center bottom;
|
||||
transform: translateX(-50%);
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
transform: rotate(0deg);
|
||||
animation: counter-spin 40s linear infinite;
|
||||
|
||||
& .feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
|
|
@ -149,26 +152,34 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
&.wayland {
|
||||
transform: translate(-50%, 0) rotate(0deg);
|
||||
}
|
||||
|
||||
&.hyprland {
|
||||
transform: translate(-50%, 0) rotate(72deg);
|
||||
|
||||
& .feature-icon {
|
||||
transform: rotate(-72deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.pipewire {
|
||||
transform: translate(-50%, 0) rotate(144deg);
|
||||
|
||||
& .feature-icon {
|
||||
transform: rotate(-144deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.x-org {
|
||||
transform: translate(-50%, 0) rotate(216deg);
|
||||
|
||||
& .feature-icon {
|
||||
transform: rotate(-216deg);
|
||||
}
|
||||
}
|
||||
|
||||
&.sway {
|
||||
transform: translate(-50%, 0) rotate(288deg);
|
||||
|
||||
& .feature-icon {
|
||||
transform: rotate(-288deg);
|
||||
}
|
||||
|
|
@ -180,6 +191,7 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
|
@ -189,6 +201,7 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(-360deg);
|
||||
}
|
||||
|
|
@ -213,33 +226,42 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
width: auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
margin: 0 2.218rem;
|
||||
}
|
||||
|
||||
.featurelist-item {
|
||||
width: 100%;
|
||||
padding: 1.217rem;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.featurelist-item.right {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.feature-showcase {
|
||||
height: 22rem;
|
||||
}
|
||||
|
||||
.feature-text {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.feature-showcase {
|
||||
width: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
|
||||
& video {
|
||||
scale: 1;
|
||||
}
|
||||
|
||||
& .shiki {
|
||||
font-size: 0.93rem;
|
||||
}
|
||||
|
||||
.feature-cloud {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 2.217rem;
|
||||
font-size: 1.874rem;
|
||||
gap: var(--xl);
|
||||
font-size: var(--lg);
|
||||
font-weight: 600;
|
||||
margin-inline: 0.618rem;
|
||||
margin-inline: var(--sm);
|
||||
}
|
||||
|
||||
.marquee-button {
|
||||
|
|
@ -20,15 +20,16 @@
|
|||
left: 2px;
|
||||
right: 2px;
|
||||
height: 3px;
|
||||
background-color: hsl(var(--accent-400) / 0.3);
|
||||
background-color: hsla(var(--accent-400) / 0.3);
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.marquee {
|
||||
position: relative;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin-block: 1.618rem;
|
||||
margin-block: var(--lg);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
|
@ -40,16 +41,25 @@
|
|||
}
|
||||
|
||||
.marquee-item {
|
||||
position: relative;
|
||||
flex: 1 0 100%;
|
||||
transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
|
||||
transform: translateX(var(--scroll));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--md);
|
||||
padding-inline: 0.5rem;
|
||||
|
||||
& > div {
|
||||
&>* {
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
& video {
|
||||
position: relative;
|
||||
max-width: 75rem;
|
||||
width: 100%;
|
||||
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,7 +68,7 @@
|
|||
}
|
||||
|
||||
.marquee-item-content {
|
||||
border-radius: 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.marquee-scroll {
|
||||
|
|
@ -68,7 +78,6 @@
|
|||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
opacity 0.3s;
|
||||
|
|
@ -87,7 +96,7 @@
|
|||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
&>div {
|
||||
width: 2.5rem;
|
||||
aspect-ratio: 1 / 1;
|
||||
display: flex;
|
||||
|
|
@ -95,11 +104,13 @@
|
|||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(var(--2xs));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
& > div {
|
||||
|
||||
&>div {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
|
@ -132,9 +143,10 @@
|
|||
@media not (min-width: 83rem) {
|
||||
.marquee-scroll-arrow {
|
||||
height: unset;
|
||||
& > div {
|
||||
|
||||
&>div {
|
||||
background-color: #55555580;
|
||||
border-radius: 0.2rem;
|
||||
border-radius: var(--radius-xs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
html {
|
||||
font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
|
||||
font-family:
|
||||
"Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
|
||||
sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.272;
|
||||
|
|
@ -112,7 +113,6 @@ html.dark {
|
|||
--var-link-color: 190deg 85% 60%;
|
||||
--inner-param-color: 215deg 60% 70%;
|
||||
--inner-param-border-color: 215deg 26% 46%;
|
||||
--inner-param-color: 215deg 60% 70%;
|
||||
--nav-hovered-bkg: var(--blue) 40% 10%;
|
||||
--nav-hovered-weak-bkg: var(--blue) 35% 8%;
|
||||
--nav-selected-bkg: var(--blue) 40% 13%;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@import "normalize.css";
|
||||
@import "animations.css";
|
||||
@import "vars.css";
|
||||
@import "animations.css";
|
||||
@import "base.css";
|
||||
@import "code.css";
|
||||
@import "colors.css";
|
||||
|
|
|
|||
|
|
@ -37,11 +37,37 @@
|
|||
--radius-lg: var(--lg);
|
||||
--radius-xl: var(--xl);
|
||||
|
||||
--shadow-sm: var(--shadow-sm);
|
||||
--shadow-md: var(--shadow-md);
|
||||
--shadow-lg: var(--shadow-lg);
|
||||
--shadow-xl: var(--shadow-xl);
|
||||
--shadow-2xl: var(--shadow-2xl);
|
||||
--shadow-sm-units: 0 0 1px 0;
|
||||
--shadow-md-units-1: 0 4px 6px;
|
||||
--shadow-md-units-2: 0 2px 4px;
|
||||
--shadow-md-units-3: 0 0 1px;
|
||||
--shadow-lg-units-1: 0 11px 15px -3px;
|
||||
--shadow-lg-units-2: 0 2px 6px;
|
||||
--shadow-lg-units-3: 0 0 1px;
|
||||
--shadow-xl-units-1: 0 20px 25px;
|
||||
--shadow-xl-units-2: 0 5px 11px;
|
||||
--shadow-xl-units-3: 0 5px 11px;
|
||||
--shadow-2xl-units-1: 0 25px 50px;
|
||||
--shadow-2xl-units-2: 0 9px 18px;
|
||||
--shadow-2xl-units-3: 0 0 1px;
|
||||
|
||||
--shadow-sm: var(--shadow-sm-units) rgba(0, 0, 0, 0.11);
|
||||
--shadow-md:
|
||||
var(--shadow-md-units-1) rgba(0, 0, 0, 0.08),
|
||||
var(--shadow-md-units-2) rgba(0, 0, 0, 0.11),
|
||||
var(--shadow-md-units-3) rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg:
|
||||
var(--shadow-lg-units-1) rgba(0, 0, 0, 0.11),
|
||||
var(--shadow-lg-units-2) rgba(0, 0, 0, 0.07),
|
||||
var(--shadow-lg-units-3) rgba(0, 0, 0, 0.4);
|
||||
--shadow-xl:
|
||||
var(--shadow-xl-units-1) rgba(0, 0, 0, 0.09),
|
||||
var(--shadow-xl-units-2) rgba(0, 0, 0, 0.12),
|
||||
var(--shadow-xl-units-3) rgba(0, 0, 0, 0.4);
|
||||
--shadow-2xl:
|
||||
var(--shadow-2xl-units-1) rgba(0, 0, 0, 0.23),
|
||||
var(--shadow-2xl-units-2) rgba(0, 0, 0, 0.1),
|
||||
var(--shadow-2xl-units-3) rgba(0, 0, 0, 0.4);
|
||||
|
||||
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
|
|
|
|||
|
|
@ -40,21 +40,15 @@
|
|||
}
|
||||
|
||||
h1.gradient-text {
|
||||
background: linear-gradient(
|
||||
30deg,
|
||||
hsl(var(--green) 80% 42%),
|
||||
hsl(var(--blue) 80% 49%)
|
||||
);
|
||||
background: linear-gradient(30deg,
|
||||
hsl(var(--green) 80% 42%),
|
||||
hsl(var(--blue) 80% 49%));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
html.dark h1.gradient-text {
|
||||
background: linear-gradient(
|
||||
30deg,
|
||||
#42b96b,
|
||||
#4281b9
|
||||
);
|
||||
background: linear-gradient(30deg, #42b96b, #4281b9);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
|
@ -95,7 +89,9 @@ html.dark .main-page_hero-text {
|
|||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.about-break { display: none }
|
||||
.about-break {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
display: flex;
|
||||
|
|
@ -130,11 +126,12 @@ html.dark .main-page_hero-text {
|
|||
align-items: center;
|
||||
width: 100%;
|
||||
height: 3.67rem;
|
||||
border-radius: 9px;
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
border: 1px solid hsl(var(--green) 10% 10%);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition:
|
||||
background-color 0.3s,
|
||||
box-shadow 0.3s,
|
||||
border-color 0.3s;
|
||||
|
||||
background-color: hsl(var(--green) 38% 30%);
|
||||
|
|
@ -143,17 +140,22 @@ html.dark .main-page_hero-text {
|
|||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
border-color: hsl(var(--green) 20% 20%);
|
||||
background-color: hsl(var(--green) 48% 40%);
|
||||
box-shadow:
|
||||
var(--shadow-md-units-1) hsla(var(--green) 48 45 / 0.08),
|
||||
var(--shadow-md-units-2) hsla(var(--green) 48 45 / 0.11),
|
||||
var(--shadow-md-units-3) hsla(var(--green) 48 45 / 0.4);
|
||||
}
|
||||
|
||||
&.main-page_bluecard {
|
||||
border-color: hsl(var(--blue) 10% 10%);
|
||||
background-color: hsl(var(--blue) 38% 30%);
|
||||
|
||||
&:hover {
|
||||
border-color: hsl(var(--blue) 20% 20%);
|
||||
background-color: hsl(var(--blue) 48% 40%);
|
||||
box-shadow:
|
||||
var(--shadow-md-units-1) hsla(var(--blue) 48 45 / 0.08),
|
||||
var(--shadow-md-units-2) hsla(var(--blue) 48 45 / 0.11),
|
||||
var(--shadow-md-units-3) hsla(var(--blue) 48 45 / 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -226,7 +228,15 @@ html.dark .main-page_link-card {
|
|||
flex-direction: row;
|
||||
}
|
||||
|
||||
.about-txt { max-width: 70% }
|
||||
.about-break { display: unset }
|
||||
.about-buttons { flex-direction: column }
|
||||
.about-txt {
|
||||
max-width: 70%;
|
||||
}
|
||||
|
||||
.about-break {
|
||||
display: unset;
|
||||
}
|
||||
|
||||
.about-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue