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

View File

@@ -26,404 +26,423 @@
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"
href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh" href="https://chrome.google.com/webstore/detail/lkfkkhfhhdkiemehlpkgjeojomhpccnh"
/> />
<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 {
html { box-sizing: border-box;
font-size: var(--base-font-size); }
}
html {
body { font-size: var(--base-font-size);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, }
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background: white; body {
min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
line-height: 1.4; Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
padding: 0; background: white;
margin: 0; min-height: 100vh;
color: #3a3a3a; line-height: 1.4;
-webkit-font-smoothing: antialiased; padding: 0;
} margin: 0;
color: #3a3a3a;
.ml-1 { -webkit-font-smoothing: antialiased;
margin-left: 1rem; }
} body.docs {
max-width: 70ch;
.ml-2 { margin: 0 auto;
margin-left: 2rem; }
}
.ml-1 {
.mb-1 { margin-left: 1rem;
margin-bottom: 1rem; }
}
.ml-2 {
.mb-2 { margin-left: 2rem;
margin-bottom: 2rem; }
}
.mb-1 {
.ta-c { margin-bottom: 1rem;
text-align: center; }
}
.mb-2 {
.d-f { margin-bottom: 2rem;
display: flex; }
}
.ta-c {
.logo { text-align: center;
vertical-align: middle; }
position: relative;
top: -10px; .d-f {
margin-right: 10px; display: flex;
} }
button { .logo {
font-size: inherit; vertical-align: middle;
} position: relative;
.homepage-title { top: -10px;
font-size: 3.1em; margin-right: 10px;
margin: 0; }
padding: 0.25em 0 0;
text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1); button {
font-family: 'Arial', cursive; font-size: inherit;
} }
.homepage-title {
.main-content { font-size: 3.1em;
padding: 0.7em; margin: 0;
max-width: var(--layout-max-width); padding: 0.25em 0 0;
margin: 0 auto; text-shadow: 0 6px 1px rgba(0, 0, 0, 0.1);
min-height: 55vh; color:white;
} }
@media screen and (max-width: 700px) { .main-content {
.logo { padding: 1rem;
display: block; max-width: var(--layout-max-width);
margin: 0 auto; margin: 0 auto;
} min-height: 55vh;
}
h2 {
padding: 0 10px; @media screen and (max-width: 700px) {
} .logo {
} display: block;
margin: 0 auto;
img { }
max-width: 90%;
} h2 {
padding: 0 10px;
a { }
color: #1a5a7a; }
}
img {
.hero a { max-width: 90%;
color: white; }
}
a {
.flex { color: #1a5a7a;
display: flex; }
}
h1,h2,h3 {
.hero { font-family: 'Raleway', sans-serif;
text-align: center; }
background: linear-gradient(45deg, #000001, #65487d); .flex {
color: #a7a1bd; display: flex;
padding: 2em 1em; }
margin-bottom: 2em;
} .hero {
text-align: center;
.btn { background: linear-gradient(45deg, #000001, #65487d);
background: rgba(0, 0, 0, 0.2); color: #a7a1bd;
padding: 10px 2em; padding: 2em 1em;
display: inline-block; margin-bottom: 2em;
border-radius: 8px; min-height: 97vh;
text-transform: uppercase; }
transition: 0.25s ease; .hero a {
color: rgba(0, 0, 0, 0.7); color: white;
} }
.header {
.btn:not(.disabled):hover { min-width: 45ch;
transform: scale(1.1); }
} .hero-img {
margin-top: 30px;
.download-btn { perspective: 400px;
color: white; }
background: linear-gradient(to bottom, #4d7bd6, #3c5d9e);
border: 2px solid #32508b; .btn {
border-bottom-color: #4870b3; background: rgba(0, 0, 0, 0.2);
line-height: 2.5rem; padding: 10px 2em;
margin: 1rem 0 0; display: inline-block;
/* width: 80%; */ border-radius: 8px;
text-decoration: none; text-transform: uppercase;
} transition: 0.25s ease;
color: rgba(0, 0, 0, 0.7);
.download-btn.disabled { }
filter: grayscale(50);
cursor: not-allowed; .btn:not(.disabled):hover {
} transform: scale(1.1);
}
.web-app-btn {
position: relative; .download-btn {
} color: white;
background: linear-gradient(to bottom, #4d7bd6, #3c5d9e);
.web-app-btn:hover:after { border: 2px solid #32508b;
transform: rotate(0deg); border-bottom-color: #4870b3;
} line-height: 2.5rem;
margin: 1rem 0 0;
.web-app-btn:hover:before { /* width: 80%; */
transform: rotate(-10deg); text-decoration: none;
} }
.btn > img { .download-btn.disabled {
vertical-align: middle; filter: grayscale(50);
margin-right: 10px; cursor: not-allowed;
} }
.screenshot { .web-app-btn {
box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6); position: relative;
transform: rotateX(4deg) rotateY(-2deg); }
border: 1px solid black;
border-radius: 10px; .web-app-btn:hover:after {
} transform: rotate(0deg);
}
.site-header {
display: flex; .web-app-btn:hover:before {
align-items: center; transform: rotate(-10deg);
justify-content: space-between; }
padding: 0.5em;
} .btn > img {
vertical-align: middle;
.site-header__logo { margin-right: 10px;
width: 50px; }
height: 20px;
} .screenshot {
box-shadow: 0 51px 33px -40px rgba(0, 0, 0, 0.6);
.site-footer { transform: rotateX(4deg) rotateY(-2deg);
max-width: var(--layout-max-width); border: 1px solid black;
margin: 2em auto 0; border-radius: 10px;
} max-width: 90%;
}
.site-footer__col {
flex: 1; .site-header {
/* flex-shrink: 0; */ display: flex;
} align-items: center;
justify-content: space-between;
.site-footer ul { padding: 0.5rem 1rem;
list-style: none; }
padding: 0 0.5em;
} .site-header__logo {
width: 50px;
a svg { height: 20px;
fill: rgba(255, 255, 255, 0.6); }
}
.site-footer {
a:hover svg { max-width: var(--layout-max-width);
fill: white; margin: 4rem auto 0;
} }
.social-bar { .site-footer__links {
display: none; display: flex;
} justify-content: center;
flex-wrap: wrap;
.feature-box { gap : 1rem;
flex-wrap: wrap; }
margin-top: 2em; .site-footer ul {
justify-content: center; list-style: none;
} padding: 0 0.5em;/
}
.feature {
flex-basis: 100%; a svg {
max-width: 100%; fill: rgba(255, 255, 255, 0.6);
margin: 0.5em; }
/* padding: 0.5em 1em; */
box-sizing: border-box; a:hover svg {
} fill: white;
}
.feature__title {
border-bottom: 7px solid; .social-bar {
padding-bottom: 0.4em; display: none;
white-space: nowrap; }
}
.feature-box {
.feature svg { flex-wrap: wrap;
width: 32px; margin-top: 2em;
height: 32px; justify-content: center;
fill: #444; }
}
.feature {
.info { flex-basis: 100%;
display: none; max-width: 100%;
visibility: hidden; margin: 0.5em;
} /* padding: 0.5em 1em; */
box-sizing: border-box;
.people-say { }
margin: 4em 0 4em;
/* width: 100vw; */ .feature__title {
overflow-x: hidden; border-bottom: 7px solid;
} padding-bottom: 0.4em;
white-space: nowrap;
.people-say-top { }
align-items: flex-end;
} .feature svg {
width: 32px;
.people-say-bottom { height: 32px;
align-items: flex-start; fill: #444;
} }
.say { .info {
color: inherit; display: none;
padding: 10px 20px; visibility: hidden;
margin: 10px 10px; }
display: block;
flex-shrink: 0; .people-say {
border-radius: 5px; margin: 4em 0 4em;
font-size: 0.95rem; /* width: 100vw; */
background: #f8f8f8; overflow-x: hidden;
text-align: left; }
border: 1px solid rgba(0, 0, 0, 0.05);
text-decoration: none; .people-say-top {
} align-items: flex-end;
}
.say:hover {
border-color: rgba(0, 0, 0, 0.2); .people-say-bottom {
} align-items: flex-start;
}
.say p {
margin: 10px 0 0 0; .say {
} color: inherit;
padding: 10px 20px;
.say__name { margin: 10px 10px;
font-weight: bold; display: block;
color: #555; flex-shrink: 0;
display: flex; border-radius: 5px;
align-items: center; font-size: 0.95rem;
} background: #f8f8f8;
text-align: left;
.say__name img { border: 1px solid rgba(0, 0, 0, 0.05);
height: 40px; text-decoration: none;
border-radius: 50%; }
margin-right: 10px;
} .say:hover {
border-color: rgba(0, 0, 0, 0.2);
.say__handle { }
color: #515151;
font-weight: 400; .say p {
} margin: 10px 0 0 0;
}
@media (min-width: 751px) {
:root { .say__name {
--base-font-size: 1.2em; font-weight: bold;
} color: #555;
display: flex;
.homepage-title { align-items: center;
font-size: 4em; }
}
.say__name img {
.hero { height: 40px;
display: flex; border-radius: 50%;
justify-content: center; margin-right: 10px;
align-items: center; }
margin-bottom: 2em;
padding: 3em; .say__handle {
} color: #515151;
font-weight: 400;
.site-header { }
padding: 1.5em;
} @media (min-width: 1200px) {
.hero {
.logo { display: flex;
width: 6em; justify-content: center;
height: auto; align-items: center;
} margin-bottom: 2em;
padding: 3em;
.screenshot { }
height: 55vh; }
max-width: initial; @media (min-width: 751px) {
} :root {
--base-font-size: 1.2em;
.web-app-btn:after { }
right: -50px;
} .homepage-title {
font-size: 4em;
.web-app-btn:before { }
right: -22px;
} .site-header {
padding: 0.5rem 1rem;
.feature-box { }
min-width: 400px;
/* width: 80vw; */ .logo {
margin: 0 auto; width: 6em;
} height: auto;
}
.feature {
padding: 0.5em 2em; .web-app-btn:after {
flex: 1; right: -50px;
flex-basis: 16vw; }
padding: 0.5em 2em;
margin: 1em; .web-app-btn:before {
} right: -22px;
}
.info {
background: white; .feature-box {
box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15); min-width: 400px;
padding: 2rem; /* width: 80vw; */
position: fixed; margin: 0 auto;
will-change: transform; }
bottom: 0;
transform: translateY(101%); .feature {
width: 70vw; padding: 0.5em 2em;
margin-left: -35vw; flex: 1;
left: 50%; flex-basis: 16vw;
text-align: left; padding: 0.5em 2em;
font-size: 0.9em; margin: 1em;
transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9); }
}
.info {
.info.show { background: white;
display: block; box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.15);
visibility: visible; padding: 2rem;
transform: translateY(0); position: fixed;
} will-change: transform;
bottom: 0;
.people-say-top, transform: translateY(101%);
.people-say-bottom { width: 70vw;
display: flex; margin-left: -35vw;
overflow: scroll; left: 50%;
} text-align: left;
font-size: 0.9em;
.say { transition: 0.4s cubic-bezier(0.77, -0.1, 0.13, 0.9);
width: 18vw; }
flex-shrink: 0;
padding: 20px; .info.show {
} display: block;
visibility: visible;
.say p { transform: translateY(0);
margin: 20px 0 0 0; }
}
} .people-say-top,
.people-say-bottom {
@media screen and (min-width: 2000px) { display: flex;
:root { overflow: scroll;
--layout-max-width: 1800px; }
--base-font-size: 1.7em;
} .say {
} width: 18vw;
flex-shrink: 0;
@media screen and (min-width: 3000px) { padding: 20px;
:root { }
--layout-max-width: 2500px;
--base-font-size: 2.1em; .say p {
} margin: 20px 0 0 0;
} }
}
@media screen and (min-width: 2000px) {
:root {
--base-font-size: 1.7em;
}
}
@media screen and (min-width: 3000px) {
:root {
--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>

View File

@@ -1,50 +1,40 @@
<footer class="site-footer"> <footer class="site-footer">
<div class="d-f"> <ul class="site-footer__links">
<div class="site-footer__col"> <li><a href="/docs/">Documentation</a></li>
<ul> <li><a href="https://medium.com/web-maker" rel="external">Blog</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="/about">About</a></li>
</ul> <li><a href="/privacy-policy/">Privacy Policy</a></li>
</div>
<div class="site-footer__col"> <li>
<ul> <a href="https://twitter.com/webmakerApp" rel="external">
<li><a href="/about">About</a></li> <svg
<li><a href="/privacy-policy/">Privacy Policy</a></li> viewBox="0 0 16 16"
</ul> style="width: 1em; height: 1em; margin-right: 8px; fill: #55acee"
</div> >
<div class="site-footer__col"> <path
<ul> d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
<li>
<a href="https://twitter.com/webmakerApp" rel="external">
<svg
viewBox="0 0 16 16"
style="width: 1em; height: 1em; margin-right: 8px; fill: #55acee"
>
<path
d="M15.969,3.058c-0.586,0.26-1.217,0.436-1.878,0.515c0.675-0.405,1.194-1.045,1.438-1.809
c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z" c-0.632,0.375-1.332,0.647-2.076,0.793c-0.596-0.636-1.446-1.033-2.387-1.033c-1.806,0-3.27,1.464-3.27,3.27 c0,0.256,0.029,0.506,0.085,0.745C5.163,5.404,2.753,4.102,1.14,2.124C0.859,2.607,0.698,3.168,0.698,3.767 c0,1.134,0.577,2.135,1.455,2.722C1.616,6.472,1.112,6.325,0.671,6.08c0,0.014,0,0.027,0,0.041c0,1.584,1.127,2.906,2.623,3.206 C3.02,9.402,2.731,9.442,2.433,9.442c-0.211,0-0.416-0.021-0.615-0.059c0.416,1.299,1.624,2.245,3.055,2.271 c-1.119,0.877-2.529,1.4-4.061,1.4c-0.264,0-0.524-0.015-0.78-0.046c1.447,0.928,3.166,1.469,5.013,1.469 c6.015,0,9.304-4.983,9.304-9.304c0-0.142-0.003-0.283-0.009-0.423C14.976,4.29,15.531,3.714,15.969,3.058z"
/></svg /></svg
>Twitter</a >Twitter</a
> >
</li> </li>
<li> <li>
<a href="https://github.com/chinchang/web-maker" rel="external"> <a href="https://github.com/chinchang/web-maker" rel="external">
<svg <svg
viewBox="0 0 16 16" viewBox="0 0 16 16"
style="width: 1em; height: 1em; margin-right: 8px; fill: #666" style="width: 1em; height: 1em; margin-right: 8px; fill: #666"
> >
<path <path
d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z" d="M7.999,0.431c-4.285,0-7.76,3.474-7.76,7.761 c0,3.428,2.223,6.337,5.307,7.363c0.388,0.071,0.53-0.168,0.53-0.374c0-0.184-0.007-0.672-0.01-1.32 c-2.159,0.469-2.614-1.04-2.614-1.04c-0.353-0.896-0.862-1.135-0.862-1.135c-0.705-0.481,0.053-0.472,0.053-0.472 c0.779,0.055,1.189,0.8,1.189,0.8c0.692,1.186,1.816,0.843,2.258,0.645c0.071-0.502,0.271-0.843,0.493-1.037 C4.86,11.425,3.049,10.76,3.049,7.786c0-0.847,0.302-1.54,0.799-2.082C3.768,5.507,3.501,4.718,3.924,3.65 c0,0,0.652-0.209,2.134,0.796C6.677,4.273,7.34,4.187,8,4.184c0.659,0.003,1.323,0.089,1.943,0.261 c1.482-1.004,2.132-0.796,2.132-0.796c0.423,1.068,0.157,1.857,0.077,2.054c0.497,0.542,0.798,1.235,0.798,2.082 c0,2.981-1.814,3.637-3.543,3.829c0.279,0.24,0.527,0.713,0.527,1.437c0,1.037-0.01,1.874-0.01,2.129 c0,0.208,0.14,0.449,0.534,0.373c3.081-1.028,5.302-3.935,5.302-7.362C15.76,3.906,12.285,0.431,7.999,0.431z"
></path></svg ></path></svg
>Github</a >Github</a
> >
</li> </li>
<li> <li>
<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

View File

@@ -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)