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