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
|
|
@ -1,36 +0,0 @@
|
|||
---
|
||||
|
||||
---
|
||||
|
||||
<script>
|
||||
// setTimeout(() => {
|
||||
// // code copy
|
||||
// let blocks = document.querySelectorAll("pre");
|
||||
// if (blocks.length > 0) {
|
||||
// blocks.forEach((block) => {
|
||||
// let button = document.createElement("button");
|
||||
// button.className = "copy-button";
|
||||
// button.innerHTML = `<svg
|
||||
// xmlns="http://www.w3.org/2000/svg"
|
||||
// width="1em"
|
||||
// height="1em"
|
||||
// viewBox="0 0 256 256"
|
||||
// >
|
||||
// <path
|
||||
// fill="currentColor"
|
||||
// d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
|
||||
// />
|
||||
// </svg>
|
||||
// `;
|
||||
// button.onclick = () => {
|
||||
// let snippet = block.innerText ?? "";
|
||||
// navigator.clipboard.writeText(snippet);
|
||||
// button.classList.toggle("copied");
|
||||
// setTimeout(() => button.classList.remove("copied"), 1000);
|
||||
// };
|
||||
// block.appendChild(button);
|
||||
// });
|
||||
// }
|
||||
// }, 3001)
|
||||
|
||||
</script>
|
||||
|
|
@ -46,8 +46,8 @@ const videos = [
|
|||
</div>
|
||||
</div>
|
||||
<div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
|
||||
{videos.map(({ author, source, installable, path }, index) => <div class="marquee-item">
|
||||
<div>
|
||||
{videos.map(({ author, source, installable, path }, index) =>
|
||||
<div class="marquee-item">
|
||||
<video
|
||||
data-media-index={index}
|
||||
data-media-author={author}
|
||||
|
|
@ -65,18 +65,17 @@ const videos = [
|
|||
{source && !installable && <>(<a href={source}>source code</a>)</>}
|
||||
{source && installable && <>(<a href={source}>install</a>)</>}
|
||||
</p>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const videoCount = 6; // last array index
|
||||
const marquee = document.getElementById("marquee-content")!;
|
||||
marquee.style.setProperty("--scroll", "0")
|
||||
|
||||
window.addEventListener("load", autoplayInit, false);
|
||||
const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
|
||||
const videoCount = videos.length;
|
||||
let currentVideoIndex = 0;
|
||||
let currentVideo: HTMLVideoElement | null = null;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
import { Breadcrumbs } from "astro-breadcrumbs";
|
||||
import "astro-breadcrumbs/breadcrumbs.css";
|
||||
|
||||
import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
|
||||
import PreTheme from "@config/PreTheme.astro";
|
||||
import Header from "@components/Header.astro";
|
||||
import Head from "@config/Head.astro";
|
||||
|
|
@ -52,7 +51,6 @@ for (const segment of url) {
|
|||
<head>
|
||||
<Head description={description} title={title} />
|
||||
<PreTheme />
|
||||
<CreateCopyButtons />
|
||||
</head>
|
||||
<body class="docslayout">
|
||||
<Header title={title} headings={headings} type={type}/>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -140,6 +142,7 @@ html:not(.dark) .feature-showcase .shiki span {
|
|||
&>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;
|
||||
|
|
@ -95,10 +104,12 @@
|
|||
justify-content: center;
|
||||
opacity: 0.5;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(var(--2xs));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
||||
&>div {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
@ -132,9 +143,10 @@
|
|||
@media not (min-width: 83rem) {
|
||||
.marquee-scroll-arrow {
|
||||
height: unset;
|
||||
|
||||
&>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,
|
||||
background: linear-gradient(30deg,
|
||||
hsl(var(--green) 80% 42%),
|
||||
hsl(var(--blue) 80% 49%)
|
||||
);
|
||||
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