mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-26 00:11:13 +02:00
website style improvements
This commit is contained in:
packages/website
@@ -26,6 +26,12 @@
|
||||
name="google-site-verification"
|
||||
content="sxb2giqZFrc7gTuzfJfXh0ePuE-fWoFiyBe1J18Q3vA"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Raleway:wght@500;900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="chrome-webstore-item"
|
||||
@@ -33,9 +39,12 @@
|
||||
/>
|
||||
<style type="text/css">
|
||||
:root {
|
||||
--layout-max-width: 1200px;
|
||||
--layout-max-width: 90ch;
|
||||
--base-font-size: 1em;
|
||||
}
|
||||
*,*:after,*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
font-size: var(--base-font-size);
|
||||
@@ -52,6 +61,10 @@
|
||||
color: #3a3a3a;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
body.docs {
|
||||
max-width: 70ch;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
@@ -92,11 +105,11 @@
|
||||
margin: 0;
|
||||
padding: 0.25em 0 0;
|
||||
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Arial', cursive;
|
||||
color:white;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 0.7em;
|
||||
padding: 1rem;
|
||||
max-width: var(--layout-max-width);
|
||||
margin: 0 auto;
|
||||
min-height: 55vh;
|
||||
@@ -121,10 +134,9 @@
|
||||
color: #1a5a7a;
|
||||
}
|
||||
|
||||
.hero a {
|
||||
color: white;
|
||||
h1,h2,h3 {
|
||||
font-family: 'Raleway', sans-serif;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@@ -135,6 +147,17 @@
|
||||
color: #a7a1bd;
|
||||
padding: 2em 1em;
|
||||
margin-bottom: 2em;
|
||||
min-height: 97vh;
|
||||
}
|
||||
.hero a {
|
||||
color: white;
|
||||
}
|
||||
.header {
|
||||
min-width: 45ch;
|
||||
}
|
||||
.hero-img {
|
||||
margin-top: 30px;
|
||||
perspective: 400px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -189,13 +212,14 @@
|
||||
transform: rotateX(4deg) rotateY(-2deg);
|
||||
border: 1px solid black;
|
||||
border-radius: 10px;
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.5em;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.site-header__logo {
|
||||
@@ -205,17 +229,18 @@
|
||||
|
||||
.site-footer {
|
||||
max-width: var(--layout-max-width);
|
||||
margin: 2em auto 0;
|
||||
margin: 4rem auto 0;
|
||||
}
|
||||
|
||||
.site-footer__col {
|
||||
flex: 1;
|
||||
/* flex-shrink: 0; */
|
||||
.site-footer__links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap : 1rem;
|
||||
}
|
||||
|
||||
.site-footer ul {
|
||||
list-style: none;
|
||||
padding: 0 0.5em;
|
||||
padding: 0 0.5em;/
|
||||
}
|
||||
|
||||
a svg {
|
||||
@@ -315,6 +340,15 @@
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2em;
|
||||
padding: 3em;
|
||||
}
|
||||
}
|
||||
@media (min-width: 751px) {
|
||||
:root {
|
||||
--base-font-size: 1.2em;
|
||||
@@ -324,16 +358,8 @@
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 2em;
|
||||
padding: 3em;
|
||||
}
|
||||
|
||||
.site-header {
|
||||
padding: 1.5em;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -341,11 +367,6 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
height: 55vh;
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
.web-app-btn:after {
|
||||
right: -50px;
|
||||
}
|
||||
@@ -409,21 +430,19 @@
|
||||
|
||||
@media screen and (min-width: 2000px) {
|
||||
:root {
|
||||
--layout-max-width: 1800px;
|
||||
--base-font-size: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 3000px) {
|
||||
:root {
|
||||
--layout-max-width: 2500px;
|
||||
--base-font-size: 2.1em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="{% if page.url contains '/docs/' %}docs{% endif %}">
|
||||
{% if page.fileSlug == '' %}
|
||||
<div class="hero">
|
||||
<header class="header">
|
||||
@@ -476,7 +495,7 @@
|
||||
>
|
||||
</div>
|
||||
</header>
|
||||
<div style="margin-top: 30px; perspective: 400px">
|
||||
<div class="hero-img">
|
||||
<img
|
||||
class="screenshot"
|
||||
src="images/ss1.png?v4"
|
||||
@@ -489,7 +508,7 @@
|
||||
<header class="site-header">
|
||||
<div>
|
||||
<h2 style="display: inline">
|
||||
<a href="/">
|
||||
<a href="/" style="text-decoration: none">
|
||||
<svg class="site-header__logo">
|
||||
<use xlink:href="#logo"></use>
|
||||
</svg>
|
||||
|
@@ -1,19 +1,11 @@
|
||||
<footer class="site-footer">
|
||||
<div class="d-f">
|
||||
<div class="site-footer__col">
|
||||
<ul>
|
||||
<ul class="site-footer__links">
|
||||
<li><a href="/docs/">Documentation</a></li>
|
||||
<li><a href="https://medium.com/web-maker" rel="external">Blog</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="site-footer__col">
|
||||
<ul>
|
||||
|
||||
<li><a href="/about">About</a></li>
|
||||
<li><a href="/privacy-policy/">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="site-footer__col">
|
||||
<ul>
|
||||
|
||||
<li>
|
||||
<a href="https://twitter.com/webmakerApp" rel="external">
|
||||
<svg
|
||||
@@ -43,8 +35,6 @@
|
||||
<a href="https://spectrum.chat/web-maker" rel="external">Community</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="ta-c" style="position: relative">
|
||||
<img
|
||||
|
@@ -26,5 +26,5 @@ title: 'Documentation'
|
||||
Want to send in some suggestions, comments, feature requests or just have a question? Here are your options:
|
||||
|
||||
- Twitter — [ @webmakerApp](https://twitter.com/webmakerapp)
|
||||
- [Community forum](https://spectrum.chat/web-maker)
|
||||
- [Community forum](https://github.com/chinchang/web-maker/discussions)
|
||||
- [Github repository](https://github.com/chinchang/web-maker/issues)
|
||||
|
Reference in New Issue
Block a user