From d47a05ed9e2a80cbe2e529a267826119f56bbc11 Mon Sep 17 00:00:00 2001 From: github-actions <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 20 May 2025 01:22:16 +0000 Subject: [PATCH] [automated] update diyhrt.wiki --- diyhrt.wiki/apps.html | 4 +- diyhrt.wiki/bloodtests.html | 4 +- diyhrt.wiki/cdn-cgi/l/email-protection.html | 4 +- diyhrt.wiki/cdn-cgi/l/email-protection.orig | 4 +- diyhrt.wiki/contact.html | 2 +- diyhrt.wiki/css/main.css | 809 +++++++++++++++++++- diyhrt.wiki/css/main.css.orig | 809 +++++++++++++++++++- diyhrt.wiki/index.html | 4 +- diyhrt.wiki/injectionsupplies.html | 4 +- diyhrt.wiki/nav.js | 9 +- diyhrt.wiki/transfem.html | 4 +- diyhrt.wiki/transmasc.html | 2 +- 12 files changed, 1640 insertions(+), 19 deletions(-) diff --git a/diyhrt.wiki/apps.html b/diyhrt.wiki/apps.html index 0e893ef4..1d81a7b3 100644 --- a/diyhrt.wiki/apps.html +++ b/diyhrt.wiki/apps.html @@ -140,8 +140,8 @@

diff --git a/diyhrt.wiki/bloodtests.html b/diyhrt.wiki/bloodtests.html index e9f2ef83..eb605107 100644 --- a/diyhrt.wiki/bloodtests.html +++ b/diyhrt.wiki/bloodtests.html @@ -109,8 +109,8 @@

diff --git a/diyhrt.wiki/cdn-cgi/l/email-protection.html b/diyhrt.wiki/cdn-cgi/l/email-protection.html index 589fa1c7..20ea3348 100644 --- a/diyhrt.wiki/cdn-cgi/l/email-protection.html +++ b/diyhrt.wiki/cdn-cgi/l/email-protection.html @@ -61,12 +61,12 @@

- Cloudflare Ray ID: 93ee56b55a9a5c21 + Cloudflare Ray ID: 942805898b28254e • Performance & security by Cloudflare diff --git a/diyhrt.wiki/cdn-cgi/l/email-protection.orig b/diyhrt.wiki/cdn-cgi/l/email-protection.orig index 84961973..7ec70828 100644 --- a/diyhrt.wiki/cdn-cgi/l/email-protection.orig +++ b/diyhrt.wiki/cdn-cgi/l/email-protection.orig @@ -61,12 +61,12 @@

- Cloudflare Ray ID: 93ee56b55a9a5c21 + Cloudflare Ray ID: 942805898b28254e • Performance & security by Cloudflare diff --git a/diyhrt.wiki/contact.html b/diyhrt.wiki/contact.html index a560953d..818b8981 100644 --- a/diyhrt.wiki/contact.html +++ b/diyhrt.wiki/contact.html @@ -58,7 +58,7 @@

Get in touch:

-

There is NO official contact as of the moment. The former [email protected] email is no longer associated with us. We have a new contact coming soon. +

There is NO official contact as of the moment. The former [email protected] email is no longer associated with us. We have a new contact coming soon.

diff --git a/diyhrt.wiki/css/main.css b/diyhrt.wiki/css/main.css index 51f1b415..8a06d655 100644 --- a/diyhrt.wiki/css/main.css +++ b/diyhrt.wiki/css/main.css @@ -1 +1,808 @@ -body{font-family:poppins,sans-serif;color:#3f3f3f;min-height:100vh;margin:0;padding:0;position:relative}a{text-decoration:none}p2{color:red}h2{color:#3f3f3f;line-height:1}h4{padding:0;margin-top:0;padding-bottom:20px}h5{padding:0;margin-bottom:0}h6{font-size:25px;padding:0;padding-top:30px;margin:0}h7{font-size:20px;padding:0;margin:0}li{margin-left:25px;padding-left:10px;padding-bottom:5px}.ul-marginless{padding-left:0}.sidenav{width:20rem;height:100%;position:absolute;z-index:1;top:0;left:0;background:linear-gradient(to bottom right,#0f59d1,#630d4e);overflow-x:hidden;padding-top:20px;font-family:comfortaa;box-shadow:0 0 10px #000}.sidenav a{text-decoration:none;color:#fff;display:block;opacity:.8;transition:opacity .3s ease-out}.sidenav a:hover{opacity:1}.logo{height:auto}#language{color:#32399b;opacity:1;background:rgba(255,255,255,.85);top:10px;float:right;text-decoration:none;font-family:comfortaa;border-width:0;width:auto;border-radius:10px;border-color:#fff;margin-right:18px}#language option{background-color:#fff;color:#32399b;border-width:0;border-color:#fff;margin-left:340px;font-family:comfortaa}.dropbtn{background:rgba(255,255,255,.85);color:#32399b;border-radius:0 0 8px 8px;text-decoration:none;font-family:poppins,sans-serif;width:auto;margin-right:18px;padding:16px;font-size:16px;border:none;cursor:pointer;transition:background-color .1s ease-out,border-radius .1s ease-out}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;margin-right:18px;right:0;background-color:#f9f9f9;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#fff;border-radius:8px 8px 0 0}@media screen and (max-width:600px){.sidenav{width:5rem;height:100%;text-align:center}.main,.banner,footer{margin-left:5rem}.logo{width:4rem;padding:6px 8px 6px 7px}.sidenav a{font-size:7px;padding:6px 8px 12px 5px}.dropbtn{font-size:10px;padding:9px 11px;text-align:left;-ms-transform:translateY(-212%);transform:translateY(-212%);width:90px}.dropdown-content{width:90px;font-size:8px;text-align:left;-ms-transform:translateY(-96%);transform:translateY(-96%)}.linkGroup{padding-top:18px}.linkGroupNote{padding:13px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:12px;margin-top:12px}.navSymbol{height:30px;display:block;padding-bottom:6px;margin:auto}p,li{font-size:10px;color:#3f3f3f;font-family:Comfortaa}h7{font-size:12px}h5{font-size:20px}h6{font-size:15px}h2{font-weight:500px;font-size:32px;color:#3f3f3f;margin-bottom:20px}.main{padding:10px 20px}.banner{height:100px}.banner h1{font-size:32px;-ms-transform:translateY(60%);transform:translateY(60%)}.custom-shape-divider-bottom-1645502261{display:none}footer{padding-top:10px}footer a{font-size:10px}footer img{height:10px}.notes h1{font-size:20px}}@media screen and (min-width:601px){.sidenav{width:10rem;height:100%;text-align:center}.main,.banner,footer{margin-left:10rem}.logo{width:7.5rem;padding:6px 8px 6px 9px}.sidenav a{font-size:15px;padding:6px 8px 12px 9px}#language{font-size:15px;padding:9px 8px 9px 11px;text-align:left;-ms-transform:translateY(-210%);transform:translateY(-210%)}.dropbtn{font-size:17px;padding:9px 8px 9px 11px;text-align:left;-ms-transform:translateY(-254%);transform:translateY(-254%);width:140px}.dropdown-content{width:140px;font-size:13px;text-align:left;-ms-transform:translateY(-130%);transform:translateY(-130%)}.linkGroup{padding-top:18px}.linkGroupNote{padding:13px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:12px;margin-top:12px}.navSymbol{height:30px;display:block;padding-bottom:6px;margin:auto}p,li{font-size:15px;color:#3f3f3f;font-family:Comfortaa}h5{font-size:30px;margin-top:50px}h6{font-size:20px}h7{font-size:17px}h2{font-weight:500px;font-size:40px}.main{padding:10px 70px}.banner{height:400px}.banner h1{font-size:60px;-ms-transform:translateY(110%);transform:translateY(110%)}footer{padding-top:27px}footer a{font-size:15px}footer img{height:14px}.notes h1{font-size:25px}}@media screen and (min-width:1000px){.sidenav{width:20rem;height:100%}.main,.banner,footer,.custom-shape-divider-bottom-1645502261{margin-left:20rem}.logo{width:17.5rem;padding:6px 8px 6px 20px}.sidenav a{font-size:23px;padding:6px 8px 12px 20px;text-align:left}#language{font-size:23px;padding:12px 8px 12px 20px;text-align:left;-ms-transform:translateY(-250%);transform:translateY(-250%)}.dropbtn{font-size:23px;padding:12px 0 12px 18px;text-align:left;-ms-transform:translateY(-265%);transform:translateY(-265%);width:180px}.dropdown-content{width:180px;font-size:18px;text-align:left;-ms-transform:translateY(-159%);transform:translateY(-159%)}.linkGroup{padding-top:20px}.linkGroupNote{padding:15px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:14px;margin-top:12px}.navSymbol{height:23px;display:initial;padding-bottom:0}p,li{font-size:20px;color:#3f3f3f;font-family:Comfortaa}h7{font-size:22px}h5{font-size:35px;margin-top:100px}h6{font-size:25px}h2{font-weight:500px;font-size:60px;color:#3f3f3f;margin-bottom:0}.main{padding:10px 100px}.banner{height:400px}.banner h1{font-size:87px;-ms-transform:translateY(60%);transform:translateY(60%)}footer{padding-top:27px}footer a{font-size:15px}footer img{height:14px}.notes h1{font-size:30px}}.banner{background-image:url(../images/banner2.png);background-position:bottom;background-size:cover}.banner h1{color:#fff;text-align:center;padding:0;margin:0;text-shadow:0 0 0 #000}.custom-shape-divider-bottom-1645502261{position:absolute;top:227px;left:-20rem;overflow:hidden;line-height:0;width:100%;transform:rotate(180deg);margin-left:20rem}.custom-shape-divider-bottom-1645502261 svg{position:relative;display:block;width:calc(100% + 1.3px);height:174px}.custom-shape-divider-bottom-1645502261 .shape-fill{fill:#fff}.main{height:100%}.boxArea{text-align:center;padding-bottom:60px}.column{float:left}.column2{float:left}.card img{width:100%}.row{padding-top:40px;margin:0 -5px;width:100%}.row:after{content:"";display:table;clear:both}@media screen and (max-width:1200px){.column{width:100%;display:block;margin-bottom:20px;padding:0 2%}.column2{width:100%;display:block;margin-bottom:20px;padding:0 2%}}@media screen and (min-width:1200px){.column{width:31%;padding:0 1%}.column2{width:45%;display:block;margin-bottom:20px;padding:0 2%}}.card{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);background-color:#e9eef7;text-align:left;color:#3f3f3f;padding-bottom:10px;transition:all .2s ease-out;border-radius:5px}.card img{border-radius:5px 5px 0 0}.card p{padding-left:25px;padding-right:25px;font-size:17px;font-family:comfortaa}.card h3{padding-left:25px;font-size:30px;margin:10px 0 0}.card:hover{transform:scale(1.02);box-shadow:0 4px 12px 0 rgba(0,0,0,.2)}footer{text-decoration:none;text-align:center;color:grey}footer a{text-decoration:none;color:grey}footer img{opacity:80%}.notes{background-color:#e9eef7;margin-bottom:20px;padding:1px 30px;border-radius:30px;box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}.notes h1{color:#3f3f3f}.notes p{margin-top:0}.notes li a{text-decoration:none;color:#1f66cc}.contentImage{padding-top:20px;padding-bottom:20px;width:50%;display:block;min-width:250px}.video-container{position:relative;padding-bottom:30.25%;height:0}.video-container iframe{position:absolute;top:0;left:0;width:55%;height:100%}.contact{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);background-color:#e9eef7;text-align:left;color:#3f3f3f;padding-bottom:10px;transition:all .2s ease-out;border-radius:5px;flex:1}.contactBanner{border-radius:5px 5px 0 0;width:100%;height:200px;object-fit:cover}.contact p{padding-left:25px;padding-right:25px;padding-top:0;margin-top:0;font-size:17px;font-family:comfortaa}.contact h3{padding-left:25px;padding-bottom:0;font-size:30px;margin:10px 0 0}.contact:hover{transform:scale(1.02);box-shadow:0 4px 12px 0 rgba(0,0,0,.2)}.contactLogo{padding-top:10px;height:20px}#myImg{border-radius:5px;cursor:pointer;transition:.3s}#myImg:hover{opacity:.7}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.modal-content{margin:auto;display:block;width:80%;max-width:700px}#caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,#caption{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width:700px){.modal-content{width:100%}} \ No newline at end of file +body { + /*font-family: "Lato", sans-serif;*/ +font-family: 'Poppins', sans-serif; + color:#3f3f3f; + min-height: 100vh; + margin: 0; + padding: 0; + position: relative; +} + +a { + text-decoration: none; +} +p2 { + color:red; +} +h2{ + color:#3f3f3f; + line-height: 1; +} + +h4{ + padding:0; + margin-top:0; + padding-bottom:20px; +} + +h5{ + padding:0; + margin-bottom: 0; +} + +h6{ + font-size: 25px; + padding:0; + padding-top:30px; + margin:0; +} + +h7{ + font-size: 20px; + padding:0; + margin:0; +} + +li{ + margin-left:25px; + padding-left:10px; + padding-bottom: 5px; +} + +.ul-marginless{ + padding-left:0; +} + +/* Navbar */ +.sidenav { + width: 20rem; + height: 100%; + position: absolute; + z-index: 1; + top: 0; + left: 0; + background: linear-gradient(to bottom right, #0f59d1, #630d4e); + overflow-x: hidden; + padding-top: 20px; + font-family: 'Comfortaa'; + box-shadow: 0px 0px 10px black; +} + +.sidenav a { + + text-decoration: none; + color: #fff; + display: block; + opacity: 0.8; + transition: opacity .3s ease-out; +} + +.sidenav a:hover { + opacity: 1; +} + +.logo{ + height:auto; +} + +#language{ + color:#32399b; + /* color: rgba(255, 255, 255, 0.85); */ + opacity: 1; + background: rgba(255, 255, 255, 0.85); + /* background: rgba(255, 255, 255, 0.0); */ + top:10px; + float:right; + text-decoration: none; + font-family: 'Comfortaa'; + border-width: 0px; + width:auto; + border-radius: 10px; + border-color: #fff; + margin-right:18px; + +} +#language option{ + background-color: rgba(255, 255, 255, 1); + color:#32399b; + border-width: 0px; + border-color: #fff; + margin-left:340px; + font-family: 'Comfortaa'; +} + + +.dropbtn { + background: rgba(255, 255, 255, 0.85); + color:#32399b; + /* border-radius: 10px; */ + border-radius: 0px 0px 8px 8px; + text-decoration: none; + /* font-family: 'Comfortaa'; */ + font-family: 'Poppins', sans-serif; + width:auto; + margin-right:18px; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + transition: background-color .1s ease-out, border-radius .1s ease-out; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + margin-right:18px; + right: 0; + background-color: #f9f9f9; + /* min-width: 160px; */ + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover {background-color: #f1f1f1;} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown:hover .dropbtn { + background-color: #fff; + border-radius: 8px 8px 0px 0px; +} + + +/* Responsive columns for the navbar */ +@media screen and (max-width: 600px) { + .sidenav { + width: 5rem; + height: 100%; + text-align: center; + } + .main, .banner, footer{ + margin-left: 5rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:4rem; + padding: 6px 8px 6px 7px; + } + .sidenav a{ + font-size: 7px; + padding: 6px 8px 12px 5px; + } + .dropbtn{ + font-size: 10px; + padding: 9px 11px 9px 11px; + text-align: left; + -ms-transform: translateY(-212%); + transform: translateY(-212%); + width:90px + } + + .dropdown-content{ + width:90px; + font-size: 8px; + text-align: left; + -ms-transform: translateY(-96%); + transform: translateY(-96%); + } + .linkGroup{ + padding-top:18px; + } + .linkGroupNote { + padding: 13px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 12px; + margin-top: 12px; + } + .navSymbol{ + height:30px; + display:block; + padding-bottom: 6px; + margin: auto; + } + p, li{ + font-size: 10px; + color:#3f3f3f; + font-family: Comfortaa; + } + h7{ + font-size: 12px; + } + h5{ + font-size: 20px; + } + h6{ + font-size: 15px; + } + h2{ + font-weight: 500px; + font-size: 32px; + color:#3f3f3f; + margin-bottom: 20px; + } + .main{ + padding: 10px 20px 10px; + } + .banner{ + height:100px; + } + .banner h1{ + font-size: 32px; + -ms-transform: translateY(60%); + transform: translateY(60%); + } + .custom-shape-divider-bottom-1645502261 { + display: none; + } + footer{ + padding-top:10px; + } + footer a{ + font-size: 10px; + } + footer img{ + height:10px; + } + .notes h1{ + font-size:20px; + } +} + +@media screen and (min-width: 601px) { + .sidenav { + width: 10rem; + height: 100%; + text-align: center; + } + .main, .banner, footer { + margin-left: 10rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:7.5rem; + padding: 6px 8px 6px 9px; + } + .sidenav a { + font-size: 15px; + padding: 6px 8px 12px 9px; + } + #language { + font-size: 15px; + padding: 9px 8px 9px 11px; + text-align: left; + -ms-transform: translateY(-210%); + transform: translateY(-210%); + } + .dropbtn{ + font-size: 17px; + padding: 9px 8px 9px 11px; + text-align: left; + -ms-transform: translateY(-254%); + transform: translateY(-254%); + width:140px + } + + .dropdown-content{ + width:140px; + font-size: 13px; + text-align: left; + -ms-transform: translateY(-130%); + transform: translateY(-130%); + } + .linkGroup{ + padding-top:18px; + } + .linkGroupNote { + padding: 13px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 12px; + margin-top: 12px; + } + .navSymbol{ + height:30px; + display:block; + padding-bottom: 6px; + margin: auto; + } + p, li{ + font-size: 15px; + color:#3f3f3f; + font-family: Comfortaa; + } + h5{ + font-size: 30px; + margin-top:50px; + } + h6{ + font-size: 20px; + } + h7{ + font-size: 17px; + } + h2{ + font-weight: 500px; + font-size: 40px; + } + .main{ + padding: 10px 70px 10px; + } + .banner{ + height:400px; + } + .banner h1{ + font-size: 60px; + -ms-transform: translateY(110%); + transform: translateY(110%); + } + footer{ + padding-top:27px; + } + footer a{ + font-size: 15px; + } + footer img{ + height:14px; + } + .notes h1{ + font-size:25px; + } +} +@media screen and (min-width: 1000px) { + .sidenav { + width: 20rem; + height: 100%; + } + .main, .banner, footer, .custom-shape-divider-bottom-1645502261 { + margin-left: 20rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:17.5rem; + padding: 6px 8px 6px 20px; + } + .sidenav a{ + font-size: 23px; + padding: 6px 8px 12px 20px; + text-align: left; + } + #language { + font-size: 23px; + padding: 12px 8px 12px 20px; + text-align: left; + -ms-transform: translateY(-250%); + transform: translateY(-250%); + } + .dropbtn{ + font-size: 23px; + padding: 12px 0 12px 18px; + text-align: left; + -ms-transform: translateY(-265%); + transform: translateY(-265%); + width:180px; + } + .dropdown-content{ + width:180px; + font-size: 18px; + text-align: left; + -ms-transform: translateY(-159%); + transform: translateY(-159%); + } + .linkGroup{ + padding-top:20px; + } + .linkGroupNote { + padding: 15px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 14px; + margin-top: 12px; + } + .navSymbol{ + height:23px; + display:initial; + padding-bottom: 0; + + } + p, li{ + font-size: 20px; + color:#3f3f3f; + font-family: Comfortaa; + } + h7{ + font-size: 22px; + } + h5{ + font-size: 35px; + margin-top:100px; + } + h6{ + font-size: 25px; + } + h2{ + font-weight: 500px; + font-size: 60px; + color:#3f3f3f; + margin-bottom: 0; + } + .main{ + padding: 10px 100px 10px; + } + .banner{ + height:400px; + } + .banner h1{ + font-size: 87px; + -ms-transform: translateY(60%); + transform: translateY(60%); + } + footer{ + padding-top:27px; + } + footer a{ + font-size: 15px; + } + footer img{ + height:14px; + } + .notes h1{ + font-size:30px; + } +} + + +/* Banner */ +.banner{ + background-image: url(../images/banner2.png); + background-position: bottom; + background-size: cover; +} + +.banner h1{ + color:white; + text-align: center; + padding:0; + margin:0; + text-shadow: 0px 0px 0px black; +} + +.custom-shape-divider-bottom-1645502261 { + position: absolute; + top:227px; + left: -20rem; + overflow: hidden; + line-height: 0; + width: 100%; + transform: rotate(180deg); + margin-left: 20rem; /* Must be same as the width of the sidenav */ +} + +.custom-shape-divider-bottom-1645502261 svg { + position: relative; + display: block; + width: calc(100% + 1.3px); + height: 174px; +} + +.custom-shape-divider-bottom-1645502261 .shape-fill { + fill: #FFFFFF; +} + +/* Content */ + +.main { + height: 100%; +} + + +.boxArea{ + text-align: center; + padding-bottom: 60px; +} + +/* Float four columns side by side */ +.column { + float: left; +} +.column2 { + float: left; +} + +.card img{ + width:100%; +} + +/* Remove extra left and right margins, due to padding */ +.row { + padding-top: 40px; + margin: 0 -5px; + width:100%; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Responsive columns for the cards */ +@media screen and (max-width: 1200px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } + .column2 { + width: 100%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } +} +@media screen and (min-width: 1200px) { + .column { + width: 31%; + padding: 0 1%; + } + .column2 { + width: 45%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } +} + +/* Style the counter cards */ +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + background-color: #e9eef7; + text-align: left; + color:#3f3f3f; + padding-bottom:10px; + transition: all .2s ease-out; + border-radius: 5px; +} + +.card img{ + border-radius: 5px 5px 0 0; +} + +.card p{ + padding-left:25px; + padding-right:25px; + font-size: 17px; + font-family: 'Comfortaa'; +} + +.card h3{ + padding-left:25px; + + font-size: 30px; + margin:10px 0 0 0; +} + +.card:hover{ + transform: scale(1.02); + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); +} + +/* Footer */ + +footer{ + text-decoration:none; + text-align: center; + color:grey; +} + +footer a{ + text-decoration:none; + color: grey; +} + +footer img{ + opacity:80%; +} + + +/* Doc Content */ + +.notes{ + background-color: #e9eef7; + margin-bottom: 20px; + padding: 1px 30px 1px 30px; + border-radius: 30px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); +} + +.notes h1{ + color: #3f3f3f; +} + +.notes p{ + margin-top: 0; +} + +.notes li a{ + text-decoration:none; + color:#1f66cc; +} + +.contentImage{ + padding-top:20px; + padding-bottom:20px; + width:50%; + display: block; + min-width: 250px; +} + +.video-container { + position: relative; + padding-bottom: 30.25%; /* 16:9 */ + height: 0; +} +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 55%; + height: 100%; +} + + +/* contact */ + +.contact { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + background-color: #e9eef7; + text-align: left; + color:#3f3f3f; + padding-bottom:10px; + transition: all .2s ease-out; + border-radius: 5px; + flex: 1; +} + +.contactBanner{ + border-radius: 5px 5px 0 0; + width:100%; + height:200px; + object-fit: cover; + +} + +.contact p{ + padding-left:25px; + padding-right:25px; + padding-top: 0; + margin-top: 0; + font-size: 17px; + font-family: 'Comfortaa'; +} + +.contact h3{ + padding-left:25px; + padding-bottom: 0; + font-size: 30px; + margin:10px 0 0 0; +} + +.contact:hover{ + transform: scale(1.02); + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); +} + +.contactLogo{ + padding-top:10px; + height:20px; +} + +/* Image expand */ + +#myImg { + border-radius: 5px; + cursor: pointer; + transition: 0.3s; +} + +#myImg:hover {opacity: 0.7;} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ +} + +/* Modal Content (image) */ +.modal-content { + margin: auto; + display: block; + width: 80%; + max-width: 700px; +} + +/* Caption of Modal Image */ +#caption { + margin: auto; + display: block; + width: 80%; + max-width: 700px; + text-align: center; + color: #ccc; + padding: 10px 0; + height: 150px; +} + +/* Add Animation */ +.modal-content, #caption { + -webkit-animation-name: zoom; + -webkit-animation-duration: 0.6s; + animation-name: zoom; + animation-duration: 0.6s; +} + +@-webkit-keyframes zoom { + from {-webkit-transform:scale(0)} + to {-webkit-transform:scale(1)} +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} + +/* The Close Button */ +.close { + position: absolute; + top: 15px; + right: 35px; + color: #f1f1f1; + font-size: 40px; + font-weight: bold; + transition: 0.3s; +} + +.close:hover, +.close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + +/* 100% Image Width on Smaller Screens */ +@media only screen and (max-width: 700px){ + .modal-content { + width: 100%; + } +} diff --git a/diyhrt.wiki/css/main.css.orig b/diyhrt.wiki/css/main.css.orig index 51f1b415..8a06d655 100644 --- a/diyhrt.wiki/css/main.css.orig +++ b/diyhrt.wiki/css/main.css.orig @@ -1 +1,808 @@ -body{font-family:poppins,sans-serif;color:#3f3f3f;min-height:100vh;margin:0;padding:0;position:relative}a{text-decoration:none}p2{color:red}h2{color:#3f3f3f;line-height:1}h4{padding:0;margin-top:0;padding-bottom:20px}h5{padding:0;margin-bottom:0}h6{font-size:25px;padding:0;padding-top:30px;margin:0}h7{font-size:20px;padding:0;margin:0}li{margin-left:25px;padding-left:10px;padding-bottom:5px}.ul-marginless{padding-left:0}.sidenav{width:20rem;height:100%;position:absolute;z-index:1;top:0;left:0;background:linear-gradient(to bottom right,#0f59d1,#630d4e);overflow-x:hidden;padding-top:20px;font-family:comfortaa;box-shadow:0 0 10px #000}.sidenav a{text-decoration:none;color:#fff;display:block;opacity:.8;transition:opacity .3s ease-out}.sidenav a:hover{opacity:1}.logo{height:auto}#language{color:#32399b;opacity:1;background:rgba(255,255,255,.85);top:10px;float:right;text-decoration:none;font-family:comfortaa;border-width:0;width:auto;border-radius:10px;border-color:#fff;margin-right:18px}#language option{background-color:#fff;color:#32399b;border-width:0;border-color:#fff;margin-left:340px;font-family:comfortaa}.dropbtn{background:rgba(255,255,255,.85);color:#32399b;border-radius:0 0 8px 8px;text-decoration:none;font-family:poppins,sans-serif;width:auto;margin-right:18px;padding:16px;font-size:16px;border:none;cursor:pointer;transition:background-color .1s ease-out,border-radius .1s ease-out}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;margin-right:18px;right:0;background-color:#f9f9f9;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#f1f1f1}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#fff;border-radius:8px 8px 0 0}@media screen and (max-width:600px){.sidenav{width:5rem;height:100%;text-align:center}.main,.banner,footer{margin-left:5rem}.logo{width:4rem;padding:6px 8px 6px 7px}.sidenav a{font-size:7px;padding:6px 8px 12px 5px}.dropbtn{font-size:10px;padding:9px 11px;text-align:left;-ms-transform:translateY(-212%);transform:translateY(-212%);width:90px}.dropdown-content{width:90px;font-size:8px;text-align:left;-ms-transform:translateY(-96%);transform:translateY(-96%)}.linkGroup{padding-top:18px}.linkGroupNote{padding:13px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:12px;margin-top:12px}.navSymbol{height:30px;display:block;padding-bottom:6px;margin:auto}p,li{font-size:10px;color:#3f3f3f;font-family:Comfortaa}h7{font-size:12px}h5{font-size:20px}h6{font-size:15px}h2{font-weight:500px;font-size:32px;color:#3f3f3f;margin-bottom:20px}.main{padding:10px 20px}.banner{height:100px}.banner h1{font-size:32px;-ms-transform:translateY(60%);transform:translateY(60%)}.custom-shape-divider-bottom-1645502261{display:none}footer{padding-top:10px}footer a{font-size:10px}footer img{height:10px}.notes h1{font-size:20px}}@media screen and (min-width:601px){.sidenav{width:10rem;height:100%;text-align:center}.main,.banner,footer{margin-left:10rem}.logo{width:7.5rem;padding:6px 8px 6px 9px}.sidenav a{font-size:15px;padding:6px 8px 12px 9px}#language{font-size:15px;padding:9px 8px 9px 11px;text-align:left;-ms-transform:translateY(-210%);transform:translateY(-210%)}.dropbtn{font-size:17px;padding:9px 8px 9px 11px;text-align:left;-ms-transform:translateY(-254%);transform:translateY(-254%);width:140px}.dropdown-content{width:140px;font-size:13px;text-align:left;-ms-transform:translateY(-130%);transform:translateY(-130%)}.linkGroup{padding-top:18px}.linkGroupNote{padding:13px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:12px;margin-top:12px}.navSymbol{height:30px;display:block;padding-bottom:6px;margin:auto}p,li{font-size:15px;color:#3f3f3f;font-family:Comfortaa}h5{font-size:30px;margin-top:50px}h6{font-size:20px}h7{font-size:17px}h2{font-weight:500px;font-size:40px}.main{padding:10px 70px}.banner{height:400px}.banner h1{font-size:60px;-ms-transform:translateY(110%);transform:translateY(110%)}footer{padding-top:27px}footer a{font-size:15px}footer img{height:14px}.notes h1{font-size:25px}}@media screen and (min-width:1000px){.sidenav{width:20rem;height:100%}.main,.banner,footer,.custom-shape-divider-bottom-1645502261{margin-left:20rem}.logo{width:17.5rem;padding:6px 8px 6px 20px}.sidenav a{font-size:23px;padding:6px 8px 12px 20px;text-align:left}#language{font-size:23px;padding:12px 8px 12px 20px;text-align:left;-ms-transform:translateY(-250%);transform:translateY(-250%)}.dropbtn{font-size:23px;padding:12px 0 12px 18px;text-align:left;-ms-transform:translateY(-265%);transform:translateY(-265%);width:180px}.dropdown-content{width:180px;font-size:18px;text-align:left;-ms-transform:translateY(-159%);transform:translateY(-159%)}.linkGroup{padding-top:20px}.linkGroupNote{padding:15px}.linkGroup>.notes{padding:1px 5px}.linkGroup>.notes p{font-size:14px;margin-top:12px}.navSymbol{height:23px;display:initial;padding-bottom:0}p,li{font-size:20px;color:#3f3f3f;font-family:Comfortaa}h7{font-size:22px}h5{font-size:35px;margin-top:100px}h6{font-size:25px}h2{font-weight:500px;font-size:60px;color:#3f3f3f;margin-bottom:0}.main{padding:10px 100px}.banner{height:400px}.banner h1{font-size:87px;-ms-transform:translateY(60%);transform:translateY(60%)}footer{padding-top:27px}footer a{font-size:15px}footer img{height:14px}.notes h1{font-size:30px}}.banner{background-image:url(../images/banner2.png);background-position:bottom;background-size:cover}.banner h1{color:#fff;text-align:center;padding:0;margin:0;text-shadow:0 0 0 #000}.custom-shape-divider-bottom-1645502261{position:absolute;top:227px;left:-20rem;overflow:hidden;line-height:0;width:100%;transform:rotate(180deg);margin-left:20rem}.custom-shape-divider-bottom-1645502261 svg{position:relative;display:block;width:calc(100% + 1.3px);height:174px}.custom-shape-divider-bottom-1645502261 .shape-fill{fill:#fff}.main{height:100%}.boxArea{text-align:center;padding-bottom:60px}.column{float:left}.column2{float:left}.card img{width:100%}.row{padding-top:40px;margin:0 -5px;width:100%}.row:after{content:"";display:table;clear:both}@media screen and (max-width:1200px){.column{width:100%;display:block;margin-bottom:20px;padding:0 2%}.column2{width:100%;display:block;margin-bottom:20px;padding:0 2%}}@media screen and (min-width:1200px){.column{width:31%;padding:0 1%}.column2{width:45%;display:block;margin-bottom:20px;padding:0 2%}}.card{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);background-color:#e9eef7;text-align:left;color:#3f3f3f;padding-bottom:10px;transition:all .2s ease-out;border-radius:5px}.card img{border-radius:5px 5px 0 0}.card p{padding-left:25px;padding-right:25px;font-size:17px;font-family:comfortaa}.card h3{padding-left:25px;font-size:30px;margin:10px 0 0}.card:hover{transform:scale(1.02);box-shadow:0 4px 12px 0 rgba(0,0,0,.2)}footer{text-decoration:none;text-align:center;color:grey}footer a{text-decoration:none;color:grey}footer img{opacity:80%}.notes{background-color:#e9eef7;margin-bottom:20px;padding:1px 30px;border-radius:30px;box-shadow:0 4px 8px 0 rgba(0,0,0,.1)}.notes h1{color:#3f3f3f}.notes p{margin-top:0}.notes li a{text-decoration:none;color:#1f66cc}.contentImage{padding-top:20px;padding-bottom:20px;width:50%;display:block;min-width:250px}.video-container{position:relative;padding-bottom:30.25%;height:0}.video-container iframe{position:absolute;top:0;left:0;width:55%;height:100%}.contact{box-shadow:0 4px 8px 0 rgba(0,0,0,.2);background-color:#e9eef7;text-align:left;color:#3f3f3f;padding-bottom:10px;transition:all .2s ease-out;border-radius:5px;flex:1}.contactBanner{border-radius:5px 5px 0 0;width:100%;height:200px;object-fit:cover}.contact p{padding-left:25px;padding-right:25px;padding-top:0;margin-top:0;font-size:17px;font-family:comfortaa}.contact h3{padding-left:25px;padding-bottom:0;font-size:30px;margin:10px 0 0}.contact:hover{transform:scale(1.02);box-shadow:0 4px 12px 0 rgba(0,0,0,.2)}.contactLogo{padding-top:10px;height:20px}#myImg{border-radius:5px;cursor:pointer;transition:.3s}#myImg:hover{opacity:.7}.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#000;background-color:rgba(0,0,0,.9)}.modal-content{margin:auto;display:block;width:80%;max-width:700px}#caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}.modal-content,#caption{-webkit-animation-name:zoom;-webkit-animation-duration:.6s;animation-name:zoom;animation-duration:.6s}@-webkit-keyframes zoom{from{-webkit-transform:scale(0)}to{-webkit-transform:scale(1)}}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s}.close:hover,.close:focus{color:#bbb;text-decoration:none;cursor:pointer}@media only screen and (max-width:700px){.modal-content{width:100%}} \ No newline at end of file +body { + /*font-family: "Lato", sans-serif;*/ +font-family: 'Poppins', sans-serif; + color:#3f3f3f; + min-height: 100vh; + margin: 0; + padding: 0; + position: relative; +} + +a { + text-decoration: none; +} +p2 { + color:red; +} +h2{ + color:#3f3f3f; + line-height: 1; +} + +h4{ + padding:0; + margin-top:0; + padding-bottom:20px; +} + +h5{ + padding:0; + margin-bottom: 0; +} + +h6{ + font-size: 25px; + padding:0; + padding-top:30px; + margin:0; +} + +h7{ + font-size: 20px; + padding:0; + margin:0; +} + +li{ + margin-left:25px; + padding-left:10px; + padding-bottom: 5px; +} + +.ul-marginless{ + padding-left:0; +} + +/* Navbar */ +.sidenav { + width: 20rem; + height: 100%; + position: absolute; + z-index: 1; + top: 0; + left: 0; + background: linear-gradient(to bottom right, #0f59d1, #630d4e); + overflow-x: hidden; + padding-top: 20px; + font-family: 'Comfortaa'; + box-shadow: 0px 0px 10px black; +} + +.sidenav a { + + text-decoration: none; + color: #fff; + display: block; + opacity: 0.8; + transition: opacity .3s ease-out; +} + +.sidenav a:hover { + opacity: 1; +} + +.logo{ + height:auto; +} + +#language{ + color:#32399b; + /* color: rgba(255, 255, 255, 0.85); */ + opacity: 1; + background: rgba(255, 255, 255, 0.85); + /* background: rgba(255, 255, 255, 0.0); */ + top:10px; + float:right; + text-decoration: none; + font-family: 'Comfortaa'; + border-width: 0px; + width:auto; + border-radius: 10px; + border-color: #fff; + margin-right:18px; + +} +#language option{ + background-color: rgba(255, 255, 255, 1); + color:#32399b; + border-width: 0px; + border-color: #fff; + margin-left:340px; + font-family: 'Comfortaa'; +} + + +.dropbtn { + background: rgba(255, 255, 255, 0.85); + color:#32399b; + /* border-radius: 10px; */ + border-radius: 0px 0px 8px 8px; + text-decoration: none; + /* font-family: 'Comfortaa'; */ + font-family: 'Poppins', sans-serif; + width:auto; + margin-right:18px; + padding: 16px; + font-size: 16px; + border: none; + cursor: pointer; + transition: background-color .1s ease-out, border-radius .1s ease-out; +} + +.dropdown { + position: relative; + display: inline-block; +} + +.dropdown-content { + display: none; + position: absolute; + margin-right:18px; + right: 0; + background-color: #f9f9f9; + /* min-width: 160px; */ + box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); + z-index: 1; +} + +.dropdown-content a { + color: black; + padding: 12px 16px; + text-decoration: none; + display: block; +} + +.dropdown-content a:hover {background-color: #f1f1f1;} + +.dropdown:hover .dropdown-content { + display: block; +} + +.dropdown:hover .dropbtn { + background-color: #fff; + border-radius: 8px 8px 0px 0px; +} + + +/* Responsive columns for the navbar */ +@media screen and (max-width: 600px) { + .sidenav { + width: 5rem; + height: 100%; + text-align: center; + } + .main, .banner, footer{ + margin-left: 5rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:4rem; + padding: 6px 8px 6px 7px; + } + .sidenav a{ + font-size: 7px; + padding: 6px 8px 12px 5px; + } + .dropbtn{ + font-size: 10px; + padding: 9px 11px 9px 11px; + text-align: left; + -ms-transform: translateY(-212%); + transform: translateY(-212%); + width:90px + } + + .dropdown-content{ + width:90px; + font-size: 8px; + text-align: left; + -ms-transform: translateY(-96%); + transform: translateY(-96%); + } + .linkGroup{ + padding-top:18px; + } + .linkGroupNote { + padding: 13px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 12px; + margin-top: 12px; + } + .navSymbol{ + height:30px; + display:block; + padding-bottom: 6px; + margin: auto; + } + p, li{ + font-size: 10px; + color:#3f3f3f; + font-family: Comfortaa; + } + h7{ + font-size: 12px; + } + h5{ + font-size: 20px; + } + h6{ + font-size: 15px; + } + h2{ + font-weight: 500px; + font-size: 32px; + color:#3f3f3f; + margin-bottom: 20px; + } + .main{ + padding: 10px 20px 10px; + } + .banner{ + height:100px; + } + .banner h1{ + font-size: 32px; + -ms-transform: translateY(60%); + transform: translateY(60%); + } + .custom-shape-divider-bottom-1645502261 { + display: none; + } + footer{ + padding-top:10px; + } + footer a{ + font-size: 10px; + } + footer img{ + height:10px; + } + .notes h1{ + font-size:20px; + } +} + +@media screen and (min-width: 601px) { + .sidenav { + width: 10rem; + height: 100%; + text-align: center; + } + .main, .banner, footer { + margin-left: 10rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:7.5rem; + padding: 6px 8px 6px 9px; + } + .sidenav a { + font-size: 15px; + padding: 6px 8px 12px 9px; + } + #language { + font-size: 15px; + padding: 9px 8px 9px 11px; + text-align: left; + -ms-transform: translateY(-210%); + transform: translateY(-210%); + } + .dropbtn{ + font-size: 17px; + padding: 9px 8px 9px 11px; + text-align: left; + -ms-transform: translateY(-254%); + transform: translateY(-254%); + width:140px + } + + .dropdown-content{ + width:140px; + font-size: 13px; + text-align: left; + -ms-transform: translateY(-130%); + transform: translateY(-130%); + } + .linkGroup{ + padding-top:18px; + } + .linkGroupNote { + padding: 13px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 12px; + margin-top: 12px; + } + .navSymbol{ + height:30px; + display:block; + padding-bottom: 6px; + margin: auto; + } + p, li{ + font-size: 15px; + color:#3f3f3f; + font-family: Comfortaa; + } + h5{ + font-size: 30px; + margin-top:50px; + } + h6{ + font-size: 20px; + } + h7{ + font-size: 17px; + } + h2{ + font-weight: 500px; + font-size: 40px; + } + .main{ + padding: 10px 70px 10px; + } + .banner{ + height:400px; + } + .banner h1{ + font-size: 60px; + -ms-transform: translateY(110%); + transform: translateY(110%); + } + footer{ + padding-top:27px; + } + footer a{ + font-size: 15px; + } + footer img{ + height:14px; + } + .notes h1{ + font-size:25px; + } +} +@media screen and (min-width: 1000px) { + .sidenav { + width: 20rem; + height: 100%; + } + .main, .banner, footer, .custom-shape-divider-bottom-1645502261 { + margin-left: 20rem; /* Must be same as the width of the sidenav */ + } + .logo{ + width:17.5rem; + padding: 6px 8px 6px 20px; + } + .sidenav a{ + font-size: 23px; + padding: 6px 8px 12px 20px; + text-align: left; + } + #language { + font-size: 23px; + padding: 12px 8px 12px 20px; + text-align: left; + -ms-transform: translateY(-250%); + transform: translateY(-250%); + } + .dropbtn{ + font-size: 23px; + padding: 12px 0 12px 18px; + text-align: left; + -ms-transform: translateY(-265%); + transform: translateY(-265%); + width:180px; + } + .dropdown-content{ + width:180px; + font-size: 18px; + text-align: left; + -ms-transform: translateY(-159%); + transform: translateY(-159%); + } + .linkGroup{ + padding-top:20px; + } + .linkGroupNote { + padding: 15px; + } + .linkGroup > .notes { + padding: 1px 5px; + } + .linkGroup > .notes p { + font-size: 14px; + margin-top: 12px; + } + .navSymbol{ + height:23px; + display:initial; + padding-bottom: 0; + + } + p, li{ + font-size: 20px; + color:#3f3f3f; + font-family: Comfortaa; + } + h7{ + font-size: 22px; + } + h5{ + font-size: 35px; + margin-top:100px; + } + h6{ + font-size: 25px; + } + h2{ + font-weight: 500px; + font-size: 60px; + color:#3f3f3f; + margin-bottom: 0; + } + .main{ + padding: 10px 100px 10px; + } + .banner{ + height:400px; + } + .banner h1{ + font-size: 87px; + -ms-transform: translateY(60%); + transform: translateY(60%); + } + footer{ + padding-top:27px; + } + footer a{ + font-size: 15px; + } + footer img{ + height:14px; + } + .notes h1{ + font-size:30px; + } +} + + +/* Banner */ +.banner{ + background-image: url(../images/banner2.png); + background-position: bottom; + background-size: cover; +} + +.banner h1{ + color:white; + text-align: center; + padding:0; + margin:0; + text-shadow: 0px 0px 0px black; +} + +.custom-shape-divider-bottom-1645502261 { + position: absolute; + top:227px; + left: -20rem; + overflow: hidden; + line-height: 0; + width: 100%; + transform: rotate(180deg); + margin-left: 20rem; /* Must be same as the width of the sidenav */ +} + +.custom-shape-divider-bottom-1645502261 svg { + position: relative; + display: block; + width: calc(100% + 1.3px); + height: 174px; +} + +.custom-shape-divider-bottom-1645502261 .shape-fill { + fill: #FFFFFF; +} + +/* Content */ + +.main { + height: 100%; +} + + +.boxArea{ + text-align: center; + padding-bottom: 60px; +} + +/* Float four columns side by side */ +.column { + float: left; +} +.column2 { + float: left; +} + +.card img{ + width:100%; +} + +/* Remove extra left and right margins, due to padding */ +.row { + padding-top: 40px; + margin: 0 -5px; + width:100%; +} + +/* Clear floats after the columns */ +.row:after { + content: ""; + display: table; + clear: both; +} + +/* Responsive columns for the cards */ +@media screen and (max-width: 1200px) { + .column { + width: 100%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } + .column2 { + width: 100%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } +} +@media screen and (min-width: 1200px) { + .column { + width: 31%; + padding: 0 1%; + } + .column2 { + width: 45%; + display: block; + margin-bottom: 20px; + padding: 0 2%; + } +} + +/* Style the counter cards */ +.card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + background-color: #e9eef7; + text-align: left; + color:#3f3f3f; + padding-bottom:10px; + transition: all .2s ease-out; + border-radius: 5px; +} + +.card img{ + border-radius: 5px 5px 0 0; +} + +.card p{ + padding-left:25px; + padding-right:25px; + font-size: 17px; + font-family: 'Comfortaa'; +} + +.card h3{ + padding-left:25px; + + font-size: 30px; + margin:10px 0 0 0; +} + +.card:hover{ + transform: scale(1.02); + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); +} + +/* Footer */ + +footer{ + text-decoration:none; + text-align: center; + color:grey; +} + +footer a{ + text-decoration:none; + color: grey; +} + +footer img{ + opacity:80%; +} + + +/* Doc Content */ + +.notes{ + background-color: #e9eef7; + margin-bottom: 20px; + padding: 1px 30px 1px 30px; + border-radius: 30px; + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1); +} + +.notes h1{ + color: #3f3f3f; +} + +.notes p{ + margin-top: 0; +} + +.notes li a{ + text-decoration:none; + color:#1f66cc; +} + +.contentImage{ + padding-top:20px; + padding-bottom:20px; + width:50%; + display: block; + min-width: 250px; +} + +.video-container { + position: relative; + padding-bottom: 30.25%; /* 16:9 */ + height: 0; +} +.video-container iframe { + position: absolute; + top: 0; + left: 0; + width: 55%; + height: 100%; +} + + +/* contact */ + +.contact { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + background-color: #e9eef7; + text-align: left; + color:#3f3f3f; + padding-bottom:10px; + transition: all .2s ease-out; + border-radius: 5px; + flex: 1; +} + +.contactBanner{ + border-radius: 5px 5px 0 0; + width:100%; + height:200px; + object-fit: cover; + +} + +.contact p{ + padding-left:25px; + padding-right:25px; + padding-top: 0; + margin-top: 0; + font-size: 17px; + font-family: 'Comfortaa'; +} + +.contact h3{ + padding-left:25px; + padding-bottom: 0; + font-size: 30px; + margin:10px 0 0 0; +} + +.contact:hover{ + transform: scale(1.02); + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); +} + +.contactLogo{ + padding-top:10px; + height:20px; +} + +/* Image expand */ + +#myImg { + border-radius: 5px; + cursor: pointer; + transition: 0.3s; +} + +#myImg:hover {opacity: 0.7;} + +/* The Modal (background) */ +.modal { + display: none; /* Hidden by default */ + position: fixed; /* Stay in place */ + z-index: 1; /* Sit on top */ + padding-top: 100px; /* Location of the box */ + left: 0; + top: 0; + width: 100%; /* Full width */ + height: 100%; /* Full height */ + overflow: auto; /* Enable scroll if needed */ + background-color: rgb(0,0,0); /* Fallback color */ + background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ +} + +/* Modal Content (image) */ +.modal-content { + margin: auto; + display: block; + width: 80%; + max-width: 700px; +} + +/* Caption of Modal Image */ +#caption { + margin: auto; + display: block; + width: 80%; + max-width: 700px; + text-align: center; + color: #ccc; + padding: 10px 0; + height: 150px; +} + +/* Add Animation */ +.modal-content, #caption { + -webkit-animation-name: zoom; + -webkit-animation-duration: 0.6s; + animation-name: zoom; + animation-duration: 0.6s; +} + +@-webkit-keyframes zoom { + from {-webkit-transform:scale(0)} + to {-webkit-transform:scale(1)} +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} + +/* The Close Button */ +.close { + position: absolute; + top: 15px; + right: 35px; + color: #f1f1f1; + font-size: 40px; + font-weight: bold; + transition: 0.3s; +} + +.close:hover, +.close:focus { + color: #bbb; + text-decoration: none; + cursor: pointer; +} + +/* 100% Image Width on Smaller Screens */ +@media only screen and (max-width: 700px){ + .modal-content { + width: 100%; + } +} diff --git a/diyhrt.wiki/index.html b/diyhrt.wiki/index.html index 95862baf..fa2425a4 100644 --- a/diyhrt.wiki/index.html +++ b/diyhrt.wiki/index.html @@ -126,8 +126,8 @@

diff --git a/diyhrt.wiki/injectionsupplies.html b/diyhrt.wiki/injectionsupplies.html index dc623a79..8d42e7fa 100644 --- a/diyhrt.wiki/injectionsupplies.html +++ b/diyhrt.wiki/injectionsupplies.html @@ -210,12 +210,12 @@ https://safe.asso.fr/index.php/rdr-a-distance for help with finding supplies. This service was established for harm reduction by providing safe and sterile drug use equipment, but their services overlap with HRT injections - meaning they will provide supplies free of - charge.

Reach out at [email protected] or 01 4009 0445 + charge.

Reach out at [email protected] or 01 4009 0445

diff --git a/diyhrt.wiki/nav.js b/diyhrt.wiki/nav.js index 76fa6571..6cf29e44 100644 --- a/diyhrt.wiki/nav.js +++ b/diyhrt.wiki/nav.js @@ -1 +1,8 @@ -fetch('nav.html').then(res=>res.text()).then(text=>{let oldElem=document.querySelector("script#replace_with_navbar");let newElem=document.createElement("div");newElem.innerHTML=text;oldElem.parentNode.replaceChild(newElem,oldElem);}) \ No newline at end of file +fetch('nav.html') + .then(res => res.text()) + .then(text => { + let oldElem = document.querySelector("script#replace_with_navbar"); + let newElem = document.createElement("div"); + newElem.innerHTML = text; + oldElem.parentNode.replaceChild(newElem, oldElem); + }) diff --git a/diyhrt.wiki/transfem.html b/diyhrt.wiki/transfem.html index 7b70ce85..d86ede49 100644 --- a/diyhrt.wiki/transfem.html +++ b/diyhrt.wiki/transfem.html @@ -1105,8 +1105,8 @@

diff --git a/diyhrt.wiki/transmasc.html b/diyhrt.wiki/transmasc.html index 9bc51e6d..2d48d9ff 100644 --- a/diyhrt.wiki/transmasc.html +++ b/diyhrt.wiki/transmasc.html @@ -502,7 +502,7 @@