Merge pull request #55 from frkn-dev/feature/buttons

Simple button styles
frkn-dev · Sep 29, 2023 · a71400d · a71400d
2 parents 87293ad + fb97d57
commit a71400d
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 83 deletions.
diff --git a/index.html b/index.html
@@ -130,41 +130,27 @@ <h2 class="lng-welcome">Свободный VPN для свободных люд
  но у нас большой потенциал. Вы можете поддержать нас донатами или
  любым другим вкладом по улучшению сервиса. Даже заведение ишью в
  проекте сильно нам поможет.
-
- <br />
- <br />
- Присоединяйся к
- <a href="https://t.me/frkn_org">ТГ Каналу</a>
  </span>
+ </a>
  </p>
  </section>
  <section class="install-section">
- <div class="link-container">
- <div>
- <a
- class="lng-link-install main__links"
- href="instructions-ru.html"
- target="_blank"
- rel="noopener noreferrer"
- >
- Установить IPSec/IKeV2
- </a>
- </div>
- </div>
- </section>
- <section class="install-section">
- <div class="link-container">
- <div>
- <a
- class="lng-link-install main__links"
- href="installation-ru.html"
- target="_blank"
- rel="noopener noreferrer"
- >
- Установить WIREGUARD
- </a>
- </div>
- </div>
+ <a
+ class="lng-link-install2 btn btn-primary"
+ href="installation-ru.html"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Установить WIREGUARD
+ </a>
+ <a
+ class="lng-link-install btn btn-secondary"
+ href="instructions-ru.html"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ Установить IPSec/IKeV2
+ </a>
  </section>
  <img class="ptero-img" src="Images/Ptero.jpg" alt="Ptero" />
  <section class="card paddings two-columns-grid">
@@ -202,15 +188,11 @@ <h2 class="lng-welcome">Свободный VPN для свободных люд
  </ul>
  <div class="donation-box">
  <h5 class="lng-donation bold-text">
- Мы open source проект. Вы можете нас 
+ Мы open source проект. Вы можете нас
  </h5>
- <br />
-
- <a class="bold-text lng-donation2" href="donations.html">
- поддержать <-- ЭТО КНОПКА (ЖМИ)
- </a>
- </li>
- </ul>
+ <a class="btn btn-primary lng-donation2" href="donations.html">
+ поддержать
+ </a>
  </div>
  <div id="mc_embed_signup">
  <form

diff --git a/scripts/lang.js b/scripts/lang.js
@@ -24,16 +24,20 @@ const langArr = {
  'en' : 'Today, freedom of speech is especially vulnerable. Independent media are banned, people are brainwashed with propaganda, VPN services are blocked, and it is dangerous to express one\'s position and opinion. This is the reason why we took on this project. It is non-commercial, no profit is pursued either. We are rather small, but yet, we have a great potential. You can support us with donations or any other contribution to improve the service. Pulling requests and creating issues also helps us a lot.',
  },
  'link-install' : {
- 'ru' : 'Инструкция по установке',
- 'en' : 'Install Instructions',
+ 'ru' : 'Установить IPSec/IKeV2',
+ 'en' : 'Install IPSec/IKeV2',
+ },
+ 'link-install2' : {
+ 'ru' : 'Установить WIREGUARD',
+ 'en' : 'Install WIREGUARD',
  },
  'donation' : {
- 'ru' : 'Мы open source проект. Вы можете нас поддержать',
+ 'ru' : 'Мы open source проект. Вы можете нас поддержать.',
  'en' : 'We are OpenSource. You can support us.',
  },
  'donation2' : {
- 'ru' : 'Больше способов',
- 'en' : 'More options'
+ 'ru' : 'Поддержать проект',
+ 'en' : 'Donate'
  },
  'contacts' : {
  'ru' : 'Обратная связь - ',
@@ -43,4 +47,4 @@ const langArr = {
  'ru' : 'Обратно на главную',
  'en' : 'Back to main page'
  }
-}
+}
diff --git a/style.css b/style.css
@@ -24,16 +24,18 @@ ul {
  --text-color: #000000;
  --gray-color: #808080;
  --page-max-width: 1024px;
- --accent-color: #EF5018;
+ --accent-color: #ef5018;
  --footer-bg-color: #161616;
  --gap-size: 1.421rem;
- --card-bg-color: #EFEFEF;
+ --card-bg-color: #efefef;
+ --outline: #000000;
 }
 
 body {
  font-family: 'Inter', sans-serif;
  background-color: var(--main-bg-color);
  color: var(--text-color);
+ -webkit-tap-highlight-color: transparent;
 }
 
 .lng-welcome {
@@ -64,7 +66,6 @@ body {
  color: var(--gray-color);
 }
 
-
 .header-wrapper {
  margin-inline: auto;
  min-height: 60px;
@@ -83,10 +84,16 @@ body {
 }
 
 .install-section {
- display: flex;
- justify-content: center;
- align-items: start;
- flex-direction: column;
+ display: grid;
+ grid-template-columns: repeat(3, max-content);
+ gap: 16px;
+}
+
+@media (max-width: 540px) {
+ .install-section {
+ grid-template-columns: 1fr;
+ grid-template-rows: repeat(2, max-content);
+ }
 }
 
 .logo {
@@ -103,7 +110,6 @@ body {
  color: var(--header-text-color);
 }
 
-
 .main-content {
  display: flex;
  flex-direction: column;
@@ -128,7 +134,6 @@ body {
  bottom: 0;
 }
 
-
 .ptero-img {
  margin-top: 2em;
  max-width: var(--page-max-width);
@@ -194,7 +199,10 @@ body {
 }
 
 .donation-box {
- word-break: break-word;
+ display: grid;
+ grid-template-rows: repeat(2, max-content);
+ justify-items: start;
+ gap: 16px;
 }
 
 .links-list {
@@ -212,14 +220,47 @@ body {
  grid-gap: var(--gap-size);
 }
 
-
 .main__links {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-color);
  cursor: pointer;
 }
 
+.btn {
+ text-align: center;
+ padding: 16px 24px;
+ font-size: 16px;
+ border-radius: 8px;
+ font-weight: 600;
+}
+
+.btn:active {
+ filter: brightness(80%);
+}
+
+.btn:focus-visible {
+ outline: var(--outline) solid 2px;
+}
+
+.btn-primary {
+ background-color: var(--accent-color);
+ color: var(--header-text-color);
+}
+
+.btn-primary:hover {
+ filter: brightness(95%);
+}
+
+.btn-secondary {
+ color: var(--accent-color);
+ border: 1px solid var(--accent-color);
+}
+
+.btn-secondary:hover {
+ text-decoration: underline;
+}
+
 .lang-switch {
  border: 0;
  background-color: var(--header-bg-color);
@@ -249,7 +290,7 @@ body {
 }
 
 .icon-twitter {
- fill: var(--text-color)
+ fill: var(--text-color);
 }
 
 .main__links:hover {
@@ -261,40 +302,40 @@ li {
 }
 
 .copy-credits {
-  display: block;
-  position: relative;
+ display: block;
+ position: relative;
 }
 
 .copy-credits-tooltip {
-  visibility: hidden;
-  width: fit-content;
-  background-color: var(--header-bg-color);
-  color: var(--header-text-color);
-  text-align: center;
-  padding: 5px 10px;
-  border-radius: 6px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  right: 20%;
-  opacity: 0;
-  transition: opacity 0.3s;
+ visibility: hidden;
+ width: fit-content;
+ background-color: var(--header-bg-color);
+ color: var(--header-text-color);
+ text-align: center;
+ padding: 5px 10px;
+ border-radius: 6px;
+ position: absolute;
+ z-index: 1;
+ bottom: 125%;
+ right: 20%;
+ opacity: 0;
+ transition: opacity 0.3s;
 }
 
 .copy-credits-tooltip::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  border-width: 5px;
-  border-style: solid;
-  border-color: var(--header-bg-color) transparent transparent transparent;
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ border-width: 5px;
+ border-style: solid;
+ border-color: var(--header-bg-color) transparent transparent transparent;
 }
 
 .copy-credits:hover .copy-credits-tooltip {
-  visibility: visible;
-  opacity: 1;
+ visibility: visible;
+ opacity: 1;
 }
 
 /*.social-icon {*/
@@ -335,4 +376,4 @@ li {
  margin-top: 12px;
  margin-bottom: 12px;
  }
-}
+}