elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-21 02:28:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

make repl and doc styles more similar

Browse Source
This commit is contained in:
Felix Roos 2022-12-22 22:49:41 +01:00
parent 9aaaa755c7
commit f18a2a11fa
9 changed files with 42 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -9,6 +9,7 @@ out/**
postcss.config.js postcss.config.js
postcss.config.cjs postcss.config.cjs
tailwind.config.js tailwind.config.js
tailwind.config.cjs
vite.config.js vite.config.js
/**/dist/**/* /**/dist/**/*
!**/*.mjs !**/*.mjs

18
website/src/components/Header/Header.astro
View File

@ -5,6 +5,7 @@ import * as CONFIG from '../../config';
import SidebarToggle from './SidebarToggle'; import SidebarToggle from './SidebarToggle';
// import LanguageSelect from './LanguageSelect'; // import LanguageSelect from './LanguageSelect';
import Search from './Search'; import Search from './Search';
import CommandLineIcon from '@heroicons/react/20/solid/CommandLineIcon';
type Props = { type Props = {
currentPage: string; currentPage: string;
@ -14,21 +15,28 @@ const { currentPage } = Astro.props as Props;
// const lang = getLanguageFromURL(currentPage); // const lang = getLanguageFromURL(currentPage);
--- ---
<nav class="flex justify-between py-2 items-center h-full" title="Top Navigation"> <nav class="flex justify-between py-2 px-4 items-center h-25 bg-header" title="Top Navigation">
<!-- <div class="menu-toggle"> <!-- <div class="menu-toggle">
<SidebarToggle client:idle /> <SidebarToggle client:idle />
</div> --> </div> -->
<div class="flex overflow-visible items-center" style="overflow:visible"> <div class="flex overflow-visible items-center grow" style="overflow:visible">
<a href="/" class="flex items-center text-2xl space-x-2"> <a href="/" class="flex items-center text-2xl space-x-2">
<div>🌀</div> <h1 class="text-white font-bold flex space-x-2 items-baseline text-xl">
<h1>{CONFIG.SITE.title ?? 'Documentation'}</h1> <span>🌀</span>
<div class="flex space-x-1 items-baseline">
<span class="">strudel</span>
<span class="text-sm">DOCS</span>
</div>
</h1>
</a> </a>
</div> </div>
<div style="flex-grow: 1;"></div>
{/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */} {/* KNOWN_LANGUAGE_CODES.length > 1 && <LanguageSelect lang={lang} client:idle /> */}
<div class="search-item h-10"> <div class="search-item h-10">
<!-- <Search client:idle /> --> <!-- <Search client:idle /> -->
</div> </div>
<a href=".." class="cursor-pointer items-center flex space-x-1"
><CommandLineIcon className="w-5 h-5" /><span>go to REPL</span>
</a>
</nav> </nav>
<style> <style>

4
website/src/components/LeftSidebar/LeftSidebar.astro
View File

@ -25,8 +25,8 @@ const sidebar = SIDEBAR[langCode];
return ( return (
<li class=""> <li class="">
<a <a
class={`pl-4 py-0.5 w-full hover:bg-gray-900 block${ class={`pl-4 py-0.5 w-full hover:bg-header block${
currentPageMatch === child.link ? ' bg-gray-900' : '' currentPageMatch === child.link ? ' bg-header' : ''
}`} }`}
href={url} href={url}
aria-current={currentPageMatch === child.link ? 'page' : false} aria-current={currentPageMatch === child.link ? 'page' : false}

4
website/src/components/RightSidebar/TableOfContents.tsx
View File

@ -75,9 +75,9 @@ const TableOfContents: FunctionalComponent<{ headings: MarkdownHeading[] }> = ({
<a <a
href={`#${heading.slug}`} href={`#${heading.slug}`}
onClick={onLinkClick} onClick={onLinkClick}
className={`py-0.5 block cursor-pointer w-full border-l-4 border-gray-900 hover:bg-gray-900 ${ className={`py-0.5 block cursor-pointer w-full border-l-4 border-header hover:bg-header ${
['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth] ['pl-4', 'pl-9', 'pl-12'][heading.depth - minDepth]
} ${currentID === heading.slug ? 'bg-gray-900' : ''}`.trim()} } ${currentID === heading.slug ? 'bg-header' : ''}`.trim()}
> >
{unescape(heading.text)} {unescape(heading.text)}
</a> </a>

4
website/src/layouts/MainLayout.astro
View File

@ -30,9 +30,9 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
</title> </title>
</head> </head>
<body class="h-screen text-gray-50 bg-gray-800"> <body class="h-screen text-gray-50 ">
<div class="w-full h-full space-y-4 flex flex-col"> <div class="w-full h-full space-y-4 flex flex-col">
<header class="max-w-full px-4 fixed h-16 top-0 w-full z-[100]"> <header class="max-w-full fixed top-0 w-full z-[100]">
<Header currentPage={currentPage} /> <Header currentPage={currentPage} />
</header> </header>
<main class="relative pt-16"> <main class="relative pt-16">

4
website/src/repl/Header.jsx
View File

@ -36,7 +36,7 @@ export function Header({ context }) {
!isZen && 'bg-header', !isZen && 'bg-header',
)} )}
> >
<div className="px-4 flex items-center space-x-2 pt-2 md:pt-0 select-none"> <div className="px-4 flex space-x-2 pt-2 md:pt-0 select-none">
{/* <img {/* <img
src={logo} src={logo}
className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full' className={cx('Tidal-logo', isEmbedded ? 'w-8 h-8' : 'w-10 h-10', started && 'animate-pulse')} // 'bg-[#ffffff80] rounded-full'
@ -46,7 +46,7 @@ export function Header({ context }) {
className={cx( className={cx(
isEmbedded ? 'text-l' : 'text-xl', isEmbedded ? 'text-l' : 'text-xl',
// 'bg-clip-text bg-gradient-to-r from-primary to-secondary text-transparent font-bold', // 'bg-clip-text bg-gradient-to-r from-primary to-secondary text-transparent font-bold',
'text-white font-bold flex space-x-2', 'text-white font-bold flex space-x-2 items-center',
)} )}
> >
<div <div

4
website/src/repl/Repl.css
View File

@ -1,9 +1,5 @@
@import '@strudel.cycles/react/dist/style.css'; @import '@strudel.cycles/react/dist/style.css';
body {
background-color: #222;
}
.darken::before { .darken::before {
content: ' '; content: ' ';
position: fixed; position: fixed;

4
website/src/styles/index.css
View File

@ -1,5 +1,9 @@
@import '@strudel.cycles/react/dist/style.css'; @import '@strudel.cycles/react/dist/style.css';
body {
background-color: #222;
}
.cm-gutters { .cm-gutters {
display: none !important; display: none !important;
} }

17
website/tailwind.config.cjs
View File

@ -2,7 +2,22 @@
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: {}, extend: {
colors: {
primary: '#c792ea',
secondary: '#c3e88d',
tertiary: '#82aaff',
highlight: '#ffcc00',
linegray: '#8a91991a',
lineblack: '#00000095',
bg: '#222222',
// header: '#8a91991a',
// footer: '#8a91991a',
header: '#00000050',
// header: 'transparent',
footer: '#00000050',
},
},
}, },
plugins: [require('@tailwindcss/typography')], plugins: [require('@tailwindcss/typography')],
}; };