1
0
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:
Kushagra Gour
2023-08-06 07:36:56 +05:30
parent b7078c89b0
commit f8585ae149
3 changed files with 446 additions and 437 deletions
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)