Skip to content

Commit

Permalink
💄 switch to papercss style for home page
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidB
davidB committed Jul 30, 2023
1 parent fc20abc commit 0411041
Show file tree
Hide file tree
Showing 2 changed files with 181 additions and 153 deletions.
192 changes: 39 additions & 153 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,20 @@
<html lang="en-us">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta charset="UTF-8" />
<meta name="description" content="ffizer create or update files, folders, projects from templates."/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- <link rel="stylesheet" href="index.css" /> -->
<link rel="canonical" href="https://ffizer.github.io"/>
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
<link
rel="stylesheet"
href="https://unpkg.com/[email protected]/dist/paper.min.css"
/>
<title>ffizer</title>
<style>
/*https://fonts.google.com/specimen/Roboto*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;1,300&display=swap");

*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
#logo {
font-family: "Roboto", "Helvetica Neue", "Arial", "Helvetica", sans-serif;
font-size: 12pt;
/* background: linear-gradient(to bottom, #d1d1d1 0%, #f1f1f1 100%); */
Expand All @@ -34,129 +28,20 @@
/* color: whitesmoke; */
/* height: 100vh; */
}

.about blockquote {
font-style: italic;
font-weight: bold;
text-align: center;
}
nav {
/* background: #0076ff; */
padding: 0 1em;
}
nav ul {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end;
}

nav li {
list-style: none;
margin: 0.6em;
}

nav a {
text-decoration: none;
color: #e2edfe;
font-size: 12pt;
font-weight: bolder;
}
nav svg {
height: 14pt;
}
header {
/* background: #0076ff; */
text-align: center;
padding: 2em 0;
}
#logo {
max-width: 640px;
width: 95%;
}
main {
padding-top: 2em;
/* display: flex;
flex-direction: column;
justify-content: center; */
}

.demo {
text-align: center;
max-width: 900px;
margin: auto;
}

h2 {
text-align: center;
margin: 1em;
/* color: #556; */
font-size: 30pt;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 90%;
margin: auto;
/* max-width: 1300px; */
}

.card {
width: 40em;
background: #f3f3f1;
color: #333;
/* height: 100%; */
margin: 10px;
overflow: hidden;
border: 1px solid #40474e;
/* border-radius: 10px; */
box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.3);
}

.card-content {
padding: 1em;
line-height: 1.3;
}
.card-content ul {
padding-left: 1em;
}
h3 {
padding-top: 1em;
padding-bottom: 0.6em;
padding-left: 0.9em;
padding-right: 0.9em;
background-color:#56677b;
color: whitesmoke;
}

.btn {
display: inline-block;
background-color: #0076ff;
border: 2px rgba(138, 58, 212, 0.541);
color: rgb(238, 238, 255);
text-decoration: none;
font-weight: bold;
font-size: 1.2em;
border-radius: 6px;
padding: 5px 20px;
margin-top: 1.8em;
margin-bottom: 0.5em;
}

@media screen and (max-width: 1000px) {
nav ul {
display: flex;
flex-direction: row;
justify-content: center;
}
}

</style>
</head>
<body>
<nav>
<ul>
<nav class="fixed split-nav">
<div class="nav-brand"></div>
<div class="collapsible">
<input id="collapsible1" type="checkbox" name="collapsible1">
<label for="collapsible1">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</label>
<div class="collapsible-body">
<ul class="inline">
<li>
<a href="https://ffizer.github.io/ffizer/book/#install">Download</a>
</li>
Expand All @@ -165,8 +50,8 @@
</li>
<li><a href="#Templates">Templates</a></li>
<li>
<a href="https://github.com/ffizer/ffizer/" title="github">
<svg viewBox="0 0 128 128">
<a href="https://github.com/ffizer/ffizer/" title="github"> Github
<!--svg viewBox="0 0 128 128">
<g fill="#e2edfe">
<path
fill-rule="evenodd"
Expand All @@ -177,13 +62,14 @@
d="M26.484 91.806c-.133.3-.605.39-1.035.185-.44-.196-.685-.605-.543-.906.13-.31.603-.395 1.04-.188.44.197.69.61.537.91zm-.743-.55M28.93 94.535c-.287.267-.85.143-1.232-.28-.396-.42-.47-.983-.177-1.254.298-.266.844-.14 1.24.28.394.426.472.984.17 1.255zm-.575-.618M31.312 98.012c-.37.258-.976.017-1.35-.52-.37-.538-.37-1.183.01-1.44.373-.258.97-.025 1.35.507.368.545.368 1.19-.01 1.452zm0 0M34.573 101.373c-.33.365-1.036.267-1.552-.23-.527-.487-.674-1.18-.343-1.544.336-.366 1.045-.264 1.564.23.527.486.686 1.18.333 1.543zm0 0M39.073 103.324c-.147.473-.825.688-1.51.486-.683-.207-1.13-.76-.99-1.238.14-.477.823-.7 1.512-.485.683.206 1.13.756.988 1.237zm0 0M44.016 103.685c.017.498-.563.91-1.28.92-.723.017-1.308-.387-1.315-.877 0-.503.568-.91 1.29-.924.717-.013 1.306.387 1.306.88zm0 0M48.614 102.903c.086.485-.413.984-1.126 1.117-.7.13-1.35-.172-1.44-.653-.086-.498.422-.997 1.122-1.126.714-.123 1.354.17 1.444.663zm0 0"
></path>
</g>
</svg>
</svg-->
</a>
</li>
</ul>
</div></div>
</nav>
<header><h1><img id="logo" src="images/logo.svg" alt="ffizer" width="640"/></h1></header>
<main>
<header class="container"><h1><img id="logo" src="images/logo.svg" alt="ffizer" width="640"/></h1></header>
<main class="container">
<section>
<div class="about">
<blockquote>
Expand All @@ -205,9 +91,9 @@
<section>
<h2>Features</h2>
<div class="cards">
<div class="card">
<h3>User</h3>
<div class="card-content">
<div class="card"><div class="card-body">
<h3 class="card-title">User</h3>
<div class="card-text">
<ul>
<li>Create files, folders from readable template(s)</li>
<li>Update existing files</li>
Expand All @@ -217,10 +103,10 @@ <h3>User</h3>
<li>Command to self-upgrade of the executable</li>
</ul>
</div>
</div>
<div class="card">
<h3>Template Authoring</h3>
<div class="card-content">
</div></div>
<div class="card"><div class="card-body">
<h3 class="card-title">Template Authoring</h3>
<div class="card-text">
<ul>
<li>
Can be used for any file & folder generation (no
Expand Down Expand Up @@ -267,29 +153,29 @@ <h3>Template Authoring</h3>
>Get started</a
>
</div>
</div>
</div></div>
</div>
</section>
<section>
<h2><a name="Templates"></a>Templates</h2>
<div class="cards">
<div class="card">
<h3>on Github</h3>
<div class="card-content">
<div class="card"><div class="card-body">
<h3 class="card-title">on Github</h3>
<div class="card-text">
github repositories tagged <a href="https://github.com/topics/ffizer-template">ffizer-template</a>
</div>
</div>
<div class="card">
<h3>Samples</h3>
<div class="card-content">
</div></div>
<div class="card"><div class="card-body">
<h3 class="card-title">Samples</h3>
<div class="card-text">
<p>samples used for test, demo:
<ul>
<li><a href="https://github.com/ffizer/template_sample">ffizer/template_sample: a simple template for ffizer used for demo and test</a></li>
<li><a href="https://github.com/ffizer/ffizer/tree/master/tests/data">ffizer/tests/data at master · ffizer/ffizer</a></li>
</ul>
</p>
</div>
</div>
</div></div>
</div>
</section>
</main>
Expand Down
Loading

0 comments on commit 0411041

Please sign in to comment.