Created a basic set of tools for making my sites.
This commit is contained in:
Zed A. Shaw
parent
3ab3103e84
commit
01fcb964be
6 changed files with 356 additions and 52 deletions
154
pages/copy/sample.html
Normal file
154
pages/copy/sample.html
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
<main class="!p-4">
|
||||
<h1>Sample Components</h1>
|
||||
<p>This is a list of components I've made for making websites quicker. They're just pre-styled things you commonly need to do HTML first layouts and designs.</p>
|
||||
|
||||
<h2>Shapes</h2>
|
||||
|
||||
<shape class="xs">
|
||||
I'm a placeholder.
|
||||
</shape>
|
||||
|
||||
<h2>Grids</h2>
|
||||
|
||||
<grid class="grid-cols-2">
|
||||
<shape class="xxs">0,0</shape>
|
||||
<shape class="xxs">1,0</shape>
|
||||
<shape class="xxs">0,1</shape>
|
||||
<shape class="xxs">1,1</shape>
|
||||
</grid>
|
||||
|
||||
<h2>Blocks & Bars</h2>
|
||||
|
||||
<block>
|
||||
<p>Use a block to automatically flex content vertically.</p>
|
||||
<p>Like these two lines are done.</p>
|
||||
<bar class="rounded-lg border-1 border-gray-300">
|
||||
<shape class="xxs">Image</shape>
|
||||
<p>Use a bar to flex things horizontally.</p>
|
||||
</bar>
|
||||
|
||||
<bar class="flex-end rounded-lg border-1 border-gray-300">
|
||||
<shape class="xxs">Image</shape>
|
||||
<block>
|
||||
<span>You can also combine them in arbitrary ways to layout your content.</span>
|
||||
</block>
|
||||
<grid class="grid-cols-2">
|
||||
<shape class="tiny">1</shape>
|
||||
<shape class="tiny">2</shape>
|
||||
<shape class="tiny">3</shape>
|
||||
</grid>
|
||||
</bar>
|
||||
</block>
|
||||
|
||||
<h2>Stack</h2>
|
||||
|
||||
<p>A stack lets you place multiple elements on top of eachother, like with layers in nearly every single layout composition system in existence for the last 500 years.</p>
|
||||
|
||||
<stack>
|
||||
<shape class="xs">I'm on bottom</shape>
|
||||
<h1 class="text-red-500">Hello</h1>
|
||||
<h2 class="text-orange-500">There</h2>
|
||||
</stack>
|
||||
|
||||
<h2>Code</h2>
|
||||
|
||||
<pre><code>if(var != 'string') {
|
||||
console.log("test");
|
||||
}
|
||||
</code></pre>
|
||||
|
||||
<p>You should type <code>ls -l</code> to list the directory.</p>
|
||||
|
||||
<code>if(var != 'string')</code>
|
||||
|
||||
<h2>Highlight/Marking</h2>
|
||||
|
||||
<aside>
|
||||
<mark>Default</mark>
|
||||
<span>This is an aside. You use it to call out something specific.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="info">Info</mark>
|
||||
<span>This is an aside. You use it to call out something specific.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="warning">Warning</mark>
|
||||
<span>A warning aside.</span>
|
||||
</aside>
|
||||
|
||||
<aside>
|
||||
<mark class="alert">Alert</mark>
|
||||
<span>An alert aside.</span>
|
||||
</aside>
|
||||
|
||||
<p>This is some <mark>marked</mark> text.</p>
|
||||
|
||||
<h2>Details</h2>
|
||||
|
||||
<details aria-label="Sample">
|
||||
<summary>Details Test</summary>
|
||||
A test of the details thing.
|
||||
</details>
|
||||
|
||||
<h2>Forms</h2>
|
||||
|
||||
<form>
|
||||
<card>
|
||||
<top>Test Form</top>
|
||||
|
||||
<middle>
|
||||
<label for="fruit">What Fruit?</label>
|
||||
<select id="fruit">
|
||||
<option>Apples</option>
|
||||
<option>Oranges</option>
|
||||
</select>
|
||||
|
||||
<label for="name">Name</label>
|
||||
<input id="name" placeholder="Your Name?" />
|
||||
</middle>
|
||||
|
||||
<bottom>
|
||||
<button>Submit</button>
|
||||
</bottom>
|
||||
</card>
|
||||
</form>
|
||||
|
||||
|
||||
<h2>Cards</h2>
|
||||
|
||||
<p>Cards organize information vertically.</p>
|
||||
|
||||
<card>
|
||||
<top><shape class="video">Image</shape></top>
|
||||
<middle>This shows a top large image with
|
||||
some text in the middle.</middle>
|
||||
<bottom><button type="button">An Action</button></bottom>
|
||||
</card>
|
||||
|
||||
<h2>Header/Nav</h2>
|
||||
|
||||
<p>If you put nav inside header it "just works".</p>
|
||||
|
||||
<header>
|
||||
<nav>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="#">Live</a>
|
||||
<a id="stream" href="#">Streams</a>
|
||||
<a id="game" href="#">Games</a>
|
||||
<a id="register" href="#">Register</a>
|
||||
<a id="login" href="#">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<p>That's an example of a header with a nav bar in it.</p>
|
||||
|
||||
</main>
|
||||
|
|
@ -6,13 +6,10 @@
|
|||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<meta name="author" content="Zed A. Shaw" />
|
||||
<meta name="description" content="My Go learning project, which is a Twitch support thing." />
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
<link rel="stylesheet" href="/style.css">
|
||||
<script defer src="/js/alpine.js"></script>
|
||||
<script src="/js/code.js"></script>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
<title>ZedShaw.games</title>
|
||||
</head>
|
||||
<body data-testid="{{.PageId}}">
|
||||
<body>
|
||||
{{embed}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -14,19 +14,21 @@
|
|||
</head>
|
||||
<body data-testid="{{.PageId}}">
|
||||
<header>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="/live/">Live</a>
|
||||
<a id="stream" href="/stream/">Streams</a>
|
||||
<a id="game" href="/game/">Games</a>
|
||||
<a id="register" href="/register/">Register</a>
|
||||
<a id="login" href="/login/">Login</a>
|
||||
<nav>
|
||||
<a id="home" href="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
viewBox="0 0 2rem 2rem">
|
||||
<use href="/icons/home.svg#home" />
|
||||
</svg>
|
||||
</a>
|
||||
<a id="live" href="/live/">Live</a>
|
||||
<a id="stream" href="/stream/">Streams</a>
|
||||
<a id="game" href="/game/">Games</a>
|
||||
<a id="register" href="/register/">Register</a>
|
||||
<a id="login" href="/login/">Login</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue