Skip to content

GitLab

K
KDE Connect Website
Commit 7dcd1708 authored by Arjun Thekoot Harisankar's avatar Arjun Thekoot Harisankar 💻
Browse files
Options

Improved CSS on all pages using Bootstrap instead of Hard Coding

parent 35d17734
Hide whitespace changes
Inline Side-by-side
Showing with 109 additions and 164 deletions
_config.yml
View file @ 7dcd1708
......@@ -22,7 +22,26 @@ defaults:
path: "assets/img"
values:
image: true
- scope:
path: "dev/"
values:
itemref: dev
navitem: News
- scope:
path: "official/"
values:
itemref: official
navitem: News
- scope:
path: "_posts/"
values:
itemref: dev
navitem: News
- scope:
path: "_posts/official/"
values:
itemref: official
navitem: News
collections:
changelogs:
output: true
......@@ -38,11 +57,14 @@ navigation:
url: /get-involved.html
- title: News
url: /official
nav_item: News
subnav:
- title: Official Announcement
url: /official
subnav-item: official
- title: Developer Blogs
url: /dev
subnav-item: dev
- title: Donate
url: https://www.kde.org/donate
bottom:
......
_includes/blog.html
View file @ 7dcd1708
......@@ -6,7 +6,7 @@
endif %}
</h2>
{% for post in paginator.posts %}
<div class="card announcements">
<div class="card announcements m-4">
<div class="card-body">
<h4 class="card-title">
{{ post.title }}<small class="float-right">{{ post.date | date_to_string }}</small>
......
_sass/styles.scss
View file @ 7dcd1708
.feature {
padding-top: 100px;
text-align: center;
margin-bottom: 10px;
h1 {
font-size: 35px;
font-weight: bold;
margin-right: 10px;
margin-left: 10px;
}
h2 {
font-size: 18px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
}
}
......@@ -22,8 +20,7 @@
.feature h1 {
font-size: 56px;
font-weight: bold;
margin-right: 10px;
margin-left: 10px;
}
}
......@@ -31,20 +28,18 @@
.feature h2 {
font-size: 20px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
}
}
.button {
&.download {
margin-right: 40px;
margin-top: 20px;
font-size: 24px;
}
&.donate {
margin-top: 20px;
font-size: 24px;
}
}
......@@ -54,7 +49,7 @@
}
.button.learn-more {
margin-top: 20px;
font-size: 20px;
}
......@@ -72,49 +67,40 @@
color: white;
}
.downloadagainsec {
padding-top: 40px;
}
.button {
&.getinvolved {
margin-top: 20px;
margin-bottom: 30px;
font-size: 24px;
}
&.download2 {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 30px;
font-size: 24px;
}
&.download,
&.donate {
margin-bottom: 30px;
font-size: 24px;
}
}
.product-in {
height: 550px;
padding-top: 40px;
margin: 0 0 10px 10px;
text-align: center;
h3 {
font-size: 20px;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
}
h4 {
font-size: 16px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
}
}
......@@ -122,8 +108,7 @@
.product-in h3 {
font-size: 32px;
font-weight: bold;
margin-right: 20px;
margin-left: 20px;
}
}
......@@ -131,14 +116,10 @@
.product-in h4 {
font-size: 20px;
font-weight: 400;
margin-right: 10px;
margin-left: 10px;
}
}
.prodim {
margin-top: 15px;
}
.product-in {
&.plasma {
......@@ -154,10 +135,6 @@
}
}
.grid {
padding-right: 10px;
padding-bottom: 60px;
}
.feature {
&.music,
......
css/download_change.css
View file @ 7dcd1708
.down-head {
font-weight: bold;
font-size: 25px;
margin-top: 20px;
}
@media (min-width: 992px) {
.down-head {
font-weight: bold;
font-size: 35px;
margin-top: 20px;
}
}
......@@ -27,7 +27,7 @@
}
.button.getbutton {
margin-bottom: 20px;
font-size: 18px;
}
......@@ -44,12 +44,7 @@
font-weight: 400;
}
.card-deck.text-center.downloadgroup {
margin-bottom: 20px;
margin-right: 50px;
margin-left: 50px;
margin-top: 50px;
}
@media (max-width: 768px) {
.card-title.titlecard {
......@@ -73,49 +68,18 @@
.topkonqi h3 {
font-weight: bold;
font-size: 32px;
padding-left: 10px;
padding-right: 10px;
padding-top: 35px;
color: white;
}
.topkonqi h4 {
font-size: 28px;
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
color: white;
}
.topkonqi {
background-color: #31363b;
}
.imagecol {
background-color: transparent;
padding-top: 20px;
}
@media (min-width: 768px) {
.OSBlock.alt {
display: none;
}
}
@media (max-width: 767px) {
.OSBlock.main {
display: none;
}
}
.card.announcements {
margin-top: 50px;
margin-bottom: 25px;
}
.divheadannoun {
font-weight: bold;
margin-top: 50px;
}
#videosection {
text-align: center;
}
......@@ -123,19 +87,17 @@
#videosection iframe {
width: 90%;
height: 453px;
margin-top: 50px;
}
@media (min-width: 992px) {
#videosection iframe {
width: 896px;
height: 504px;
margin-top: 50px;
}
}
.fixpad {
margin: 30px;
}
@media screen and ( max-width: 1494px ){
.prodim{
......
css/get-involved_change.css
View file @ 7dcd1708
.letter-head {
margin-top: 50px;
}
.letter p {
font-size: 20px;
margin-top: 10px;
}
.card-title.cardheading {
......@@ -17,9 +15,7 @@
font-size: 16px;
}
.row.Junior {
margin-top: 20px;
}
.card-body.Junior {
text-align: center;
......@@ -52,9 +48,7 @@
font-weight: bold;
}
.lib {
margin-top: 10px;
}
.topsec {
text-align: center;
......@@ -63,17 +57,13 @@
.topsec h4 {
font-size: 28px;
padding-top: 35px;
padding-left: 10px;
padding-right: 10px;
color: white !important;
}
.topsec h3 {
font-weight: bold;
font-size: 32px;
padding-left: 10px;
padding-right: 10px;
color: white !important;
}
......@@ -86,9 +76,8 @@
border-color: black;
}
.letter-article {
margin-top: 50px;
}
.tab input {
position: absolute;
opacity: 0;
......@@ -96,7 +85,7 @@
}
.tabs {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
}
......@@ -177,7 +166,6 @@ input:checked ~ .tab-content {
align-items: center;
box-shadow: 4px 4px 20px -2px #95a5a6;
transition: all 0.4s;
margin-left: 40px;
}
......@@ -222,7 +210,7 @@ input:checked ~ .tab-content {
button.listblue{
border-radius: 8px;
line-height: 1.5;
width: 100%;
margin: 2px;
......@@ -248,7 +236,3 @@ button.listblue{
text-decoration: none;
transition: color 0.3s;
}
.listblue.in{
padding: 15px;
margin: 10px;
}
download.html
View file @ 7dcd1708
......@@ -85,7 +85,7 @@ plateforms:
---
<section class="topkonqi">
<h3>KDE Connect is on all major platforms.</h3>
<h3 class="p-4">KDE Connect is on all major platforms.</h3>
<picture>
<source srcset="assets/img/downloadskonqi.webp" type="image/webp" />
<source srcset="assets/img/downloadskonqi.png" type="image/png" />
......@@ -102,12 +102,12 @@ plateforms:
<div class="block pt-4 pb-4 OSBlock">
<div class="kAppInfo">
<div class="kAppInfo-content">
<h2 class="down-head">{{ plateform.name }}</h2>
<h2 class="down-head mt-2">{{ plateform.name }}</h2>
<p class="down-par">
{{ plateform.description }}
</p>
<a
class="button learn-more getbutton"
class="button learn-more getbutton mb-2"
href="{{ plateform.learn-more.link }}"
>
{{ plateform.learn-more.text }}
......@@ -154,7 +154,7 @@ plateforms:
{% endfor %}
</section>
<div class="card-deck text-center downloadgroup">
<div class="card-deck text-center downloadgroup m-5">
<div class="card">
<div class="card-body">
<h4 class="card-title titlecard">Pairing Two Devices</h4>
......
get-involved.html
View file @ 7dcd1708
......@@ -6,8 +6,8 @@ sorted: 5
---
<section class="topsec">
<h4>Made By You.</h4>
<h3>Get Involved.</h3>
<h4 class="p-2">Made By You.</h4>
<h3 class="p-2">Get Involved.</h3>
<picture>
<source srcset="assets/img/Header.webp" type="image/webp"/>
......@@ -16,7 +16,7 @@ sorted: 5
</picture>
</section>
<article class="letter-article">
<article class="letter-article mt-3">
<div class="container">
<div class="row">
<div class="col col-md-10 col-lg-8 mx-auto letter">
......@@ -28,7 +28,7 @@ sorted: 5
<img alt="Not a Programmer" class="img-fluid" src="assets/img/involved-header.png"/>
</picture>
</section>
<h4 class="letter-head">
<h4 class="letter-head mt-3">
<strong>Hello,</strong>
</h4>
<p>
......@@ -67,7 +67,7 @@ sorted: 5
</div>
<h4 class="letter-head">
<h4 class="letter-head mt-3">
<strong>Hey, Developer. Help Develop KDE Connect.&nbsp;&nbsp;</strong>
</h4>
<section class="notprogrammer">
......@@ -84,7 +84,7 @@ sorted: 5
also have a mailing list.&nbsp;
</p>
<div class="row Junior">
<div class="row Junior mt-3">
<div class="col">
<div class="card">
......@@ -168,7 +168,7 @@ sorted: 5
</div>
<div class="dropdowndiv"></div>
<h4 class="letter-head">
<h4 class="letter-head mt-3">
<strong>Not a Programmer?</strong>
</h4>
......@@ -184,33 +184,33 @@ sorted: 5
<label class="tab-label" for="contribute">Other Ways To Contribute</label>
<div class="tab-content contribute">
<button class="listblue in"><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 in m-2 p-2"><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 in"><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 in m-2 p-2"><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 in"><a href="https://community.kde.org/Get_Involved/translation">Translation: Help us Translate projects to your language.</a></button>
<button class="listblue in m-2 p-2"><a href="https://community.kde.org/Get_Involved/translation">Translation: Help us Translate projects to your language.</a></button>
<button class="listblue in"><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 in m-2 p-2"><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 in"><a href="https://community.kde.org/Get_Involved/documentation">Documentation: Help us improve our documentation to make user comfortable.</a></button>
<button class="listblue in m-2 p-2"><a href="https://community.kde.org/Get_Involved/documentation">Documentation: Help us improve our documentation to make user comfortable.</a></button>
<button class="listblue in"><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 in m-2 p-2"><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 in"><a href="https://community.kde.org/Get_Involved/promotion"> Promotion: Help us spread the word!</a></button>
<button class="listblue in m-2 p-2"><a href="https://community.kde.org/Get_Involved/promotion"> Promotion: Help us spread the word!</a></button>
<button class="listblue in"><a href="https://community.kde.org/KDE.org">Web Design: Help us improve the KDE Web Presence.</a></button>
<button class="listblue in m-2 p-2 "><a href="https://community.kde.org/KDE.org">Web Design: Help us improve the KDE Web Presence.</a></button>
<button class="listblue in"><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 in m-2 p-2"><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 in"><a href="https://community.kde.org/Incubator">Your Project to KDE: Learn about our incubation program.</a></button>
<button class="listblue in m-2 p-2"><a href="https://community.kde.org/Incubator">Your Project to KDE: Learn about our incubation program.</a></button>
<button class="listblue in"><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 in m-2 p-2"><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 in"><a href="https://community.kde.org/Get_Involved"> More: There are even more ways, more than what could be listed out.</a></button>
<button class="listblue in m-2 p-2"><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>
......
index.html
View file @ 7dcd1708
......@@ -107,19 +107,19 @@ Boxes:
<!--HTML-->
<!-- Hero of the page. -->
<section class="feature main dark">
<h1 class="connect">KDE Connect</h1>
<h2 class="connect-desc">
<section class="feature main dark mb-0 pt-5">
<h1 class="connect mx-3">KDE Connect</h1>
<h2 class="connect-desc mx-3">
Enabling communication between all your devices. Made for people like you.
</h2>
<div>
<a href="download.html">
<button class="button download " type="button">
<button class="button download m-3" type="button">
Download
</button>
</a>
<a href="https://www.kde.org/donate">
<button class="button donate" type="button">
<button class="button donate m-3" type="button">
Donate
</button>
</a>
......@@ -131,20 +131,20 @@ Boxes:
<img class="img-fluid fiximg" src="assets/img/hero_main.png" alt="Alt Text!" />
</picture>
</section>
<section id="videosection">
<iframe width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.mastodon.host/videos/embed/f8ffd8de-3df5-46b5-bbe3-114393be4b44" frameborder="0" allowfullscreen></iframe>
<section class ="mt-3 mb-0" id="videosection">
<iframe class="m-0" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.mastodon.host/videos/embed/f8ffd8de-3df5-46b5-bbe3-114393be4b44" frameborder="0" allowfullscreen></iframe>
</section>
<!-- Loop that loops through features.-->
{% for feature in page.features %}
<section class="{{feature.class_name}}">
<h1 class="{{feature.h1_class}}">{{feature.h1_content}}</h1>
<h2 class="{{feature.h2_class}}">
<section class="{{feature.class_name}} my-3 pt-5">
<h1 class="{{feature.h1_class}} mx-3">{{feature.h1_content}}</h1>
<h2 class="{{feature.h2_class}} mx-3">
{{feature.h2_content}}
</h2>
<div>
<a href="{{feature.linkref}}">
<button class="button learn-more" type="button">
<button class="button learn-more mt-4" type="button">
Learn More
</button>
</a>
......@@ -158,19 +158,19 @@ Boxes:
{% endfor %}
<!-- Bottom Header-->
<section class="feature download bottom dark">
<h1 class="madebyyou">Made for people like you.</h1>
<h2 class="madebyyou-desc">
<section class="feature download bottom dark my-3 pt-5">
<h1 class="madebyyou mx-3">Made for people like you.</h1>
<h2 class="madebyyou-desc mx-3">
Open Source. Free to use. For any purpose. Forever.
</h2>
<div>
<a href="download.html">
<button class="button download2" type="button">
<button class="button download2 m-3" type="button">
Download
</button>
</a>
<a href="get-involved.html">
<button class="button getinvolved" type="button">
<button class="button getinvolved m-3" type="button">
Get Involved
</button>
</a>
......@@ -183,16 +183,16 @@ Boxes:
</picture>
</section>
<div class="row no-gutters grid">
<div class="row no-gutters grid pr-2 pb-3">
<!-- Loop for Boxes. They can be added on the top. -->
{% for box in page.Boxes %}
<div class="col-md-6">
<div class="{{box.class_name}}">
<h3>{{box.h3_content}}</h3>
<h4>{{box.h4_content}}</h4>
<div class="{{box.class_name}} m-2 pt-4">
<h3 class="mx-3">{{box.h3_content}}</h3>
<h4 class="mx-2">{{box.h4_content}}</h4>
<div>
<a href="{{box.linkref}}">
<button class="button learn learn-more" type="button">
<button class="button learn learn-more mt-2" type="button">
Learn more
</button>
</a>
......@@ -201,7 +201,7 @@ Boxes: