Basmaca 1.2 sürümü çıktı

data-deveb · Jul 9, 2023 · eece475 · eece475
1 parent d89aa16
commit eece475
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 18 deletions.
diff --git a/_site/LICENSE b/_site/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 data-deveb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/_site/README.md b/_site/README.md
@@ -0,0 +1,84 @@
+# BASMACA
+<details>
+    <summary>Türkçe Oku</summary>
+
+Basmaca, arı html-css ile oluşturulmuş açma kapama işini yapan bir düğmedir. 
+
+Basmacaya basınca kapalı olan yeri açacaksınız, açık olan yeri kapayacaksınız. Bu işi ise javascript olmadan yapabileceksiniz. Böylece javascriptin yavaşlatıcı etkisinden sıyrılabileceksiniz. Tasarladığınız ağ sayfasına bakan kişinin bilgisayarını yormayacaksınız.
+
+- Javascript yok
+- Ağ tarayıcılarının hepsinde işler.
+
+[Örneği görmek için tıklayınız.](https://data-deveb.github.io/basmaca/)
+
+## Kullanma Kılavuzu
+
+- Aşağıdaki basmacanın html kaynak kodlarını kapın.
+
+```html
+<input id="????-basmacayı-aç" type="radio" name="????-tr">
+<label for="????-basmacayı-aç">AÇ</label>
+<label for="????-basmacayı-yum">YUM</label>
+
+<input id="????-basmacayı-yum" type="radio" name="????-tr" checked="">
+<div>
+  <!-- Başucu -->
+  Başucu ayakucu arasındaki bu alana dilediğini yazabilirsin, koyabilirsin, katabilirsin.
+  <!-- Ayakucu -->
+</div>
+```
+
+- Basmacanın css kodlarını kapın.
+
+```css
+/************************************************************************
+╔═══════════════════════════════════════════════════════════════════════╗
+║ BASMACA 1.1                                                           ║
+║ https://data-deveb.github.io/basmaca                                  ║
+║ https://github.com/data-deveb/basmaca                                 ║
+╚═══════════════════════════════════════════════════════════════════════╝
+************************************************************************/
+
+input[id*="-basmacayı-"],
+input[id*="-basmacayı-"][type="radio"]:checked + *,
+input[id*="-basmacayı-"]:not(:checked) + label + [for$="-basmacayı-yum"]{
+  /* <input> hep görünmez tutulur. */
+  display: none;
+}
+
+[for*="-basmacayı-"] {
+  /* Tıklar iken yazılar seçilmemeli */
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+[for*="-basmacayı-"] button{
+  /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
+  pointer-events: none;
+}
+```
+
+- Tasarım belgelerinizde kullanacağınız yerlere katın.
+
+- ???? yazılı yerlere eşsiz bir değer yazın. Örnek: A0A1 > id="A0A1-basmacayı-aç", id="A0A1-basmacayı-yum" gibi.
+
+- Bitti. Deneyebilirsiniz.
+
+- [Bir sızı durumunda buradan bir başlık oluşturabilirsiniz.](https://github.com/data-deveb/basmaca/issues)
+</details>
+<details>
+    <summary>Read English</summary>
+
+Basmaca is a button that does the job of turning it on and off, created with pure html-css.
+
+By pressing the pressure, you will open the closed place, you will close the open place. You can do this job without javascript. Thus, you will be able to avoid the slowing effect of javascript. You will not tire the computer of the person looking at the web page you have designed.
+
+- No javascript
+- It works in all web browsers.
+
+[Click to see the example.](https://data-deveb.github.io/basmaca/)
+
+</details>
diff --git a/_site/basmaca.html b/_site/basmaca.html
@@ -0,0 +1,39 @@
+<!-- Basmaca 1.1 sürümü -->
+<!-- https://data-deveb.github.io/basmaca -->
+
+<!DOCTYPE html>
+<html lang="tr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="basmaca/basmaca.en.css">
+    <link rel="stylesheet" href="basmaca/basmaca.tr.css">
+    <title>Basmaca 1.1</title>
+</head>
+
+<body>
+    <!-- Türkçe için Basmaca 1.1 -->
+    <input id="0001-basmacayı-aç" type="radio" name="0001-tr">
+    <label for="0001-basmacayı-aç">AÇ</label>
+    <label for="0001-basmacayı-yum">YUM</label>
+
+    <input id="0001-basmacayı-yum" type="radio" name="0001-tr" checked>
+    <!-- Senin alanın, herhangi birini koy... div, ul, aside veya ötekileri -->
+    <div>SENİN ALANIN</div>
+    <!------------------------------------------------------------------------>
+
+<hr>
+
+    <!-- Basmaca 1.1 For English -->
+    <input id="open-basmaca-0002" type="radio" name="0002-en">
+    <label for="open-basmaca-0002">OPEN</label>
+    <label for="close-basmaca-0002">CLOSE</label>
+
+    <input id="close-basmaca-0002" type="radio" name="0002-en" checked>
+    <!-- Your side, put anything... div, ul, aside or others -->
+    <div>YOUR SIDE</div>
+    <!--------------------------------------------------------->
+</body>
+
+</html>
diff --git a/_site/basmaca/basmaca.en.css b/_site/basmaca/basmaca.en.css
@@ -0,0 +1,37 @@
+/************************************************************************
+╔═══════════════════════════════════════════════════════════════════════╗
+║ BASMACA 1.2                                                           ║
+║ https://data-deveb.github.io/basmaca                                  ║
+║ https://github.com/data-deveb/basmaca                                 ║
+╚═══════════════════════════════════════════════════════════════════════╝
+************************************************************************/
+
+input[id*="-basmaca-"],
+input[id*="-basmaca-"][type="radio"]:checked + *,
+input[id*="-basmaca-"][type="checkbox"]:not(:checked) + label:not([modal]) + *,
+input[id*="-basmaca-"]:not(:checked) + label + [for^="close-basmaca-"]{
+  display: none; /* <input> hep görünmez tutulur. */
+}
+
+[for*="-basmaca-"] {
+  /* Tıklıyor iken yazılar seçilememeli */
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+[for*="-basmaca-"] button{  
+  pointer-events: none; /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
+}
+
+input[id*="-basmaca-"][type="checkbox"]:checked + label[modal]::after{
+  content: "";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left: 0;
+  right: 0;
+  background-color: rgba(244,244,244, 0.8);  
+}
diff --git a/_site/basmaca/basmaca.tr.css b/_site/basmaca/basmaca.tr.css
@@ -0,0 +1,37 @@
+/************************************************************************
+╔═══════════════════════════════════════════════════════════════════════╗
+║ BASMACA 1.2                                                           ║
+║ https://data-deveb.github.io/basmaca                                  ║
+║ https://github.com/data-deveb/basmaca                                 ║
+╚═══════════════════════════════════════════════════════════════════════╝
+************************************************************************/
+
+input[id*="-basmacasını-"],
+input[id*="-basmacasını-"][type="radio"]:checked + *,
+input[id*="-basmacasını-"][type="checkbox"]:not(:checked) + label:not([modal]) + *,
+input[id*="-basmacasını-"]:not(:checked) + label + [for$="-basmacasını-yum"]{
+  display: none; /* <input> hep görünmez tutulur. */
+}
+
+[for*="-basmacasını-"] {
+  /* Tıklıyor iken yazılar seçilememeli */
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+[for*="-basmacasını-"] button{  
+  pointer-events: none; /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
+}
+
+input[id*="-basmacasını-"][type="checkbox"]:checked + label[modal]::after{
+  content: "";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left: 0;
+  right: 0;
+  background-color: rgba(244,244,244, 0.8);  
+}
diff --git a/basmaca/basmaca.en.css b/basmaca/basmaca.en.css
@@ -1,29 +1,37 @@
 /************************************************************************
 ╔═══════════════════════════════════════════════════════════════════════╗
-║ BASMACA 1.0                                                           ║
+║ BASMACA 1.2                                                           ║
 ║ https://data-deveb.github.io/basmaca                                  ║
 ║ https://github.com/data-deveb/basmaca                                 ║
 ╚═══════════════════════════════════════════════════════════════════════╝
 ************************************************************************/
 
 input[id*="-basmaca-"],
 input[id*="-basmaca-"][type="radio"]:checked + *,
+input[id*="-basmaca-"][type="checkbox"]:not(:checked) + label:not([modal]) + *,
 input[id*="-basmaca-"]:not(:checked) + label + [for^="close-basmaca-"]{
-  /* <input> hep görünmez tutulur. */
-  display: none;
+  display: none; /* <input> hep görünmez tutulur. */
 }
 
 [for*="-basmaca-"] {
-  /* Tıklar iken yazılar seçilmemeli */
+  /* Tıklıyor iken yazılar seçilememeli */
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 
-[for*="-basmaca-"] button{
-  /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
-  pointer-events: none;
+[for*="-basmaca-"] button{  
+  pointer-events: none; /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
 }
 
+input[id*="-basmaca-"][type="checkbox"]:checked + label[modal]::after{
+  content: "";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left: 0;
+  right: 0;
+  background-color: rgba(244,244,244, 0.8);  
+}
diff --git a/basmaca/basmaca.tr.css b/basmaca/basmaca.tr.css
@@ -1,29 +1,37 @@
 /************************************************************************
 ╔═══════════════════════════════════════════════════════════════════════╗
-║ BASMACA 1.1                                                           ║
+║ BASMACA 1.2                                                           ║
 ║ https://data-deveb.github.io/basmaca                                  ║
 ║ https://github.com/data-deveb/basmaca                                 ║
 ╚═══════════════════════════════════════════════════════════════════════╝
 ************************************************************************/
 
-input[id*="-basmacayı-"],
-input[id*="-basmacayı-"][type="radio"]:checked + *,
-input[id*="-basmacayı-"]:not(:checked) + label + [for$="-basmacayı-yum"]{
-  /* <input> hep görünmez tutulur. */
-  display: none;
+input[id*="-basmacasını-"],
+input[id*="-basmacasını-"][type="radio"]:checked + *,
+input[id*="-basmacasını-"][type="checkbox"]:not(:checked) + label:not([modal]) + *,
+input[id*="-basmacasını-"]:not(:checked) + label + [for$="-basmacasını-yum"]{
+  display: none; /* <input> hep görünmez tutulur. */
 }
 
-[for*="-basmacayı-"] {
-  /* Tıklar iken yazılar seçilmemeli */
+[for*="-basmacasını-"] {
+  /* Tıklıyor iken yazılar seçilememeli */
   cursor: pointer;
   user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
 }
 
-[for*="-basmacayı-"] button{
-  /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
-  pointer-events: none;
+[for*="-basmacasını-"] button{  
+  pointer-events: none; /* Kolanlar bir düğme barındırır iken işlemesi için tanımlandı. */
 }
 
+input[id*="-basmacasını-"][type="checkbox"]:checked + label[modal]::after{
+  content: "";
+  position:absolute;
+  top:0;
+  bottom:0;
+  left: 0;
+  right: 0;
+  background-color: rgba(244,244,244, 0.8);  
+}