Commit 7cb4a48f authored by Arjun Thekoot Harisankar's avatar Arjun Thekoot Harisankar 💻

Updated the Get-Involved Page for consistency with listing with suggestions from Web Team

parent 4ac5f110
......@@ -32,9 +32,9 @@
.button.FAQ.Button {
background-color: inherit;
color: #f67400;
color: #3daee9;
font-size: 18px;
border-color: #f67400;
border-color: #2980b9;
font-weight: bold;
}
......@@ -109,12 +109,12 @@
display: flex;
justify-content: space-between;
padding: 1em;
background: #f47750;
background: #3daee9;
font-weight: bold;
cursor: pointer;
}
.tab-label:hover {
background: #da4453;
background: #2980b9;
}
.tab-label::after {
content: "\276F";
......@@ -179,48 +179,9 @@ input:checked ~ .tab-content {
transition: all 0.4s;
margin-left: 40px;
}
.liblists-ul {
padding-left: 0;
padding-top: 0;
margin-top: 0;
list-style: none;
overflow: hidden;
text-align: right;
margin-bottom: 22px;
text-align: center;
transition: all 0.4s ease-out;
height: 100%;
}
.liblist {
border-radius: 2px;
position: relative;
display: inline-block;
line-height: 1.5;
width: 100%;
margin-bottom: 5px;
background: #3daee9;
transition: background 3s;
box-shadow: 2px 2px 10px -2px #95a5a6;
font-size: 18px;
text-align: center;
}
.liblist:hover {
background: #2980b9;
transition: background 0.45s;
}
.liblist a {
display: block;
color: white;
font-size: 18px;
font-weight: 200;
text-decoration: none;
transition: color 0.3s;
}
@media (prefers-color-scheme: dark) {
.tab-content {
color: white;
......@@ -231,67 +192,10 @@ input:checked ~ .tab-content {
color: white !important;
}
}
.tab-content.contribute button {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
margin-top: 20px;
margin-bottom: 20px;
}
button.learnmore {
font-weight: 600;
color: #382b22;
padding: 1.25em 2em;
background: #1abc9c;
border: 2px solid #003333;
border-radius: 0.75em;
transform-style: preserve-3d;
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
background 150ms cubic-bezier(0, 0, 0.58, 1);
width: 100%;
}
button.learnmore::before {
position: absolute;
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #16a085;
border-radius: inherit;
box-shadow: 0 0 0 2px #003333, 0 0.625em 0 0 #1cdc9a;
transform: translate3d(0, 0.75em, -1em);
transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
}
button.learnmore:hover {
background: #27ae60;
transform: translate(0, 0.25em);
}
button.learnmore:hover::before {
box-shadow: 0 0 0 2px #003333, 0 0.5em 0 0 #1cdc9a;
transform: translate3d(0, 0.5em, -1em);
}
button.learnmore:active {
background: #27ae60;
transform: translate(0em, 0.75em);
}
button.learnmore:active::before {
box-shadow: 0 0 0 2px #003333, 0 0 #1cdc9a;
transform: translate3d(0, 0, -1em);
}
@media screen and ( max-height: 846px ) and (orientation : landscape){
.fiximg{
max-width: 400px;
......@@ -315,4 +219,33 @@ button.learnmore:active::before {
font-size: 16px !important;
}
}
button.listblue{
border-radius: 8px;
line-height: 1.5;
width: 100%;
margin: 2px;
background:#3daee9;
padding:0px;
font-size: 18px;
text-align: center;
}
.listblue:hover {
background: #2980b9;
transition: background 0.45s;
}
.listblue a {
display: block;
color: white;
font-size: 18px;
font-weight: 200;
text-decoration: none;
transition: color 0.3s;
}
......@@ -44,28 +44,27 @@ sorted: 5
</p>
<h2 class="headinglink">List of chats</h2>
<ul class="liblist-ul">
<li class="liblist" class="liblist">
<a href="irc://irc.freenode.org/#kdeconnect">IRC:#kdeconnect on Freenode</a>
</li>
<li class="liblist">
<a href="https://t.me/joinchat/AOS6gA37orb2dZCLhqbZjg">KDE Connect Dev Telegram</a>
</li>
<li class="liblist">
<a href="https://webchat.kde.org/#/welcome">Welcome Matrix-Place to Start</a>
</li>
<li class="liblist">
<a href="https://mail.kde.org/mailman/listinfo/kdeconnect">KDE Connect Mailing List</a>
</li>
<li class="liblist">
<a href="https://community.kde.org/Telegram">Other Telegram Channels</a>
</li>
<li class="liblist">
<a href="https://userbase.kde.org/IRC_Channels">Other IRC</a>
</li>
</ul>
<div class="tab">
<input id="chatcontent" type="checkbox"/>
<label class="tab-label" for="chatcontent">List of Chats</label>
<div class="tab-content chatcontent">
<button class="listblue"><a href="irc://irc.freenode.org/#kdeconnect">IRC:#kdeconnect on Freenode</a></button>
<button class="listblue"><a href="https://t.me/joinchat/AOS6gA37orb2dZCLhqbZjg">KDE Connect Dev Telegram</a></button>
<button class="listblue"><a href="https://webchat.kde.org/#/welcome">Welcome Matrix-Place to Start</a></button>
<button class="listblue"><a href="https://mail.kde.org/mailman/listinfo/kdeconnect">KDE Connect Mailing List</a></button>
<button class="listblue"><a href="https://community.kde.org/Telegram">Other Telegram Channels</a></button>
<button class="listblue"><a href="https://userbase.kde.org/IRC_Channels">Other IRC</a></button>
</div>
</div>
<h4 class="letter-head">
......@@ -117,22 +116,12 @@ sorted: 5
We always get asked about the libraries that are used in KDE Connect Development, some of them are not packaged by some distros yet. You can build them from source. Some of the dependencies are some versions behind. Some of the most asked ones are listed below:
</p>
<div>
<ul class="liblist-ul">
<li class="liblist">
<a href="https://www.qt.io/download">Qt</a>
</li>
<li class="liblist">
<a href="https://github.com/KDE/pulseaudio-qt">KF5PulseAudioQt</a>
</li>
<li class="liblist">
<a href="https://github.com/KDE/kpeoplevcard">KF5PeopleVCard</a>
</li>
<li class="liblist">
<a href="https://api.kde.org/frameworks/kirigami/html/index.html">Kirigami2</a>
</li>
</ul>
</div>
<button class="listblue"><a href="https://www.qt.io/download">Qt</a></button>
<button class="listblue"><a href="https://github.com/KDE/pulseaudio-qt">KF5PulseAudioQt</a></button>
<button class="listblue"><a href="https://github.com/KDE/kpeoplevcard">KF5PeopleVCard</a></button>
<button class="listblue"><a href="https://api.kde.org/frameworks/kirigami/html/index.html">Kirigami2</a></button>
</div>
<p>
The full Libraries list can be found in the CMakeLists.txt file
and they are available at the
......@@ -194,96 +183,34 @@ sorted: 5
<input id="contribute" type="checkbox"/>
<label class="tab-label" for="contribute">Other Ways To Contribute</label>
<div class="tab-content contribute">
<p>
<a href="https://community.kde.org/Get_Involved/Issue_Reporting">
<button class="learnmore">
Issue Reporting : Found an issue or have an idea for
improvement? Tell us.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Guidelines_and_HOWTOs/Bug_triaging">
<button class="learnmore">
Bug Triaging: Help us find the bugs to fix on Bugzilla.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/translation">
<button class="learnmore">
Translation: Help us Translate projects to your language.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/design">
<button class="learnmore">
Visual and Human Interface Design: Help us learn how users
interact and improve.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/documentation">
<button class="learnmore">
Documentation: Help us improve our documentation to make users
comfortable.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/support">
<button class="learnmore">
User Support: Help other users by finding solutions to their
problems.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/promotion">
<button class="learnmore">
Promotion: Help us spread the word!
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/KDE.org">
<button class="learnmore">
Web Design: Help us improve the KDE Web Presence.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved/accessibility">
<button class="learnmore">
Accessibility:Make Projects easy to use for people with
visual,auditory and motor disabilities.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Incubator">
<button class="learnmore">
Your Project to KDE: Learn about our incubation program.
</button>
</a>
</p>
<p>
<a href="https://www.kde.org/community/donations/index.php">
<button class="learnmore">
Donate: All things don't come free. Help us run KDE.
</button>
</a>
</p>
<p>
<a href="https://community.kde.org/Get_Involved">
<button class="learnmore">
More: There are even more ways, more than what could be listed
out.
</button>
</a>
</p>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/Issue_Reporting">Issue Reporting : Found an issue or have an idea for improvement? Tell us.</a></button>
<button class="listblue"><a href="https://community.kde.org/Guidelines_and_HOWTOs/Bug_triaging"> Bug Triaging: Help us find the bugs to fix on Bugzilla.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/translation">Translation: Help us Translate projects to your language.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/design">Visual and Human Interface Design: Help us learn how users interact and improve.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/documentation">Documentation: Help us improve our documentation to make user comfortable.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/support">User Support: Help other users by finding solutions to their problems.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/promotion"> Promotion: Help us spread the word!</a></button>
<button class="listblue"><a href="https://community.kde.org/KDE.org">Web Design: Help us improve the KDE Web Presence.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved/accessibility">Accessibility:Make Projects easy to use for people with visual,auditory and motor disabilities.</a></button>
<button class="listblue"><a href="https://community.kde.org/Incubator">Your Project to KDE: Learn about our incubation program.</a></button>
<button class="listblue"><a href="https://www.kde.org/community/donations/index.php"> Donate: All things don't come free. Help us run KDE.</a></button>
<button class="listblue"><a href="https://community.kde.org/Get_Involved"> More: There are even more ways, more than what could be listed out.</a></button>
</div>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment