GNOME.org
 

[gtk-web/new-website: 116/180] changed the background classes

commit 09b30588d7a66520fe3866e45ecf87ac47547d4e
Author: ravgeetdhillon <ravgeetdhillon gmail com>
Date:   Sat Jul 27 13:12:00 2019 +0530

    changed the background classes

 CONTRIBUTING.md         |  11 +-----
 README.md               |   6 ++--
 assets/css/colorful.css |  11 +++++-
 assets/css/index.css    |  88 ++++++++++++++++++++++++++++++++----------------
 assets/css/markdown.css |   7 ++++
 assets/img/apple.png    | Bin 5846 -> 0 bytes
 assets/img/linux.png    | Bin 21115 -> 0 bytes
 assets/img/windows.png  | Bin 3782 -> 0 bytes
 docs.html               |   7 ++--
 index.html              |  13 +++----
 10 files changed, 92 insertions(+), 51 deletions(-)
---
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 00fa560..5ed938a 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -101,16 +101,7 @@ If you find yourself wishing for a something that doesn't exist in GTK.org, you
 2. Do the changes in your fork.
 3. Send us a pull request with appropriate information using our Pull Request Template.
 
-### Issue Template for GTK.org.
-> Subject of the issue
-> Describe your issue here.
-> Your environment
-> which browser and its version
-> Tell us how to reproduce this issue. Please provide a working demo, you can use this template as a base.
-> Expected behaviour. Tell us what should happen
-> Actual behaviour. Tell us what should happens instead
-
-# Community
+## Community
 You can chat with the core team on IRC. The core is available to discuss about the things that can make the 
website better.
 
 <!-- markdown variables -->
diff --git a/README.md b/README.md
index ca01a2e..cecc251 100644
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ The data used by the site is stored in the form of following files:
 
 We always welcome people who want to contribute towards our project. For suitable information on how can you 
contribute to the website, on how to report bugs, on how to request new features or anything that can make 
the website a better experience for the end users, please read on [how to contribute][contributing].
 
-## Develop the website locally
+## Setup the website locally
 
 To get the site up and running locally, follow the below steps:
 
@@ -72,7 +72,7 @@ To get the site up and running locally, follow the below steps:
 $ gem install jekyll bundler
 ```
 3. Create a local clone of the website:
-```shell
+```git
 $ git clone https://gitlab.gnome.org/ravgeetdhillon/gtk-web.git
 ```
 4. Change into the gtk-web directory
@@ -81,7 +81,7 @@ $ cd gtk-web
 ```
 5. Install the NPM and Gem dependencies by running the following commands:
 ```shell
-$ nshellpm install
+$ npm install
 $ bundle install
 ```
 6. Perform the following commands to structure the website properly:
diff --git a/assets/css/colorful.css b/assets/css/colorful.css
index fc8f29d..7a37b0e 100644
--- a/assets/css/colorful.css
+++ b/assets/css/colorful.css
@@ -1,3 +1,12 @@
+/*
+
+this file contains styling rules for the syntax highlighting used in the documentation pages.
+you can edit this file directly to change the appearance of certain code elements like variables, errors, 
comments etc.
+
+the purpose of each class has been documented below.
+
+*/
+
 .highlight .hll { background-color: transparent }
 .highlight  { background-color: transparent; }
 .highlight .c { color: #888888 } /* Comment */
@@ -66,4 +75,4 @@
 .highlight .vg { color: #dd7700; font-weight: bold } /* Name.Variable.Global */
 .highlight .vi { color: #3333BB } /* Name.Variable.Instance */
 .highlight .vm { color: #996633 } /* Name.Variable.Magic */
-.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
+.highlight .il { color: #0000DD; font-weight: bold } /* Literal.Number.Integer.Long */
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
index 394fe18..2db630e 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -1,3 +1,10 @@
+/*
+
+this file contains the user defined styling for the website.
+if you have want to add new styling for new content or the already existing one, please add the styling 
rules in this file.
+
+*/
+
 @media (max-width: 576px) {
     small,
     .small {
@@ -7,6 +14,8 @@
         font-size: 1rem;
     }
 }
+/* making responsive classes for height and width based the breakpoints */
+
 @media (min-width: 576px) {
     .w-sm-25 {
         width: 25% !important;
@@ -168,26 +177,15 @@ body {
     overflow-x: hidden;
     scroll-behavior: smooth;
 }
-.tab-pane::-webkit-scrollbar {
-    width: 0.4rem;
-}
-.tab-pane::-webkit-scrollbar:hover {
-    width: 0.6rem;
-}
-.tab-pane::-webkit-scrollbar-thumb {
-    background: var(--info);
-    border-radius: 1.6rem;
-}
-.tab-pane::-webkit-scrollbar-track {
-    background: transparent;
-    margin: 1rem;
-}
 .app-icon {
     max-width: 120px !important;
 }
 .op-7 {
     opacity: 0.75;
 }
+
+/* styling for the mouse events happening on the navbar links */
+
 .nav-item .nav-link {
     transition: 0.15s ease-in-out;
 }
@@ -195,12 +193,9 @@ body {
 .nav-item:focus .nav-link {
     color: var(--secondary) !important;
 }
-.top-0 {
-    top: 0px;
-}
-#apps {
-    background: linear-gradient(var(--light), var(--white));
-}
+
+/* styling for the app slider section on the index.html */
+
 .slider .slide:hover {
     cursor: pointer;
 }
@@ -296,6 +291,22 @@ body {
 .slick-arrow.slick-hidden {
     display: none;
 }
+.tab-pane::-webkit-scrollbar {
+    width: 0.4rem;
+}
+.tab-pane::-webkit-scrollbar:hover {
+    width: 0.6rem;
+}
+.tab-pane::-webkit-scrollbar-thumb {
+    background: var(--info);
+    border-radius: 1.6rem;
+}
+.tab-pane::-webkit-scrollbar-track {
+    background: transparent;
+    margin: 1rem;
+}
+/* styling for button groups in language bindings section on the index.html */
+
 .grp-btn {
     font-size: 80%;
 }
@@ -319,6 +330,9 @@ pre {
 .main-heading {
     z-index: 100;
 }
+
+/* styling for the main images that make up the wallpaper on index.html */
+
 .img-grp {
     position: relative;
 }
@@ -343,19 +357,15 @@ pre {
     width: 70%;
     height: auto;
 }
-#events {
-    background: url("/assets/img/wall-events-pattern.svg");
-}
-#development {
-    background: url("/assets/img/wall-symbolics.png");
+.bg-no-repeat {
     background-repeat: no-repeat;
-    background-size: cover;
 }
-#features-main {
-    background: url("/assets/img/features-hero-integrations-endpoints.svg");
-    background-repeat: no-repeat;
+.bg-center {
     background-position: center;
 }
+.bg-cover {
+    background-size: cover;
+}
 .shadow-hover:hover {
     transition: box-shadow 0.15s ease-in-out;
     box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
@@ -369,6 +379,9 @@ pre {
     transition: 0.15s ease-in-out;
     background-color: var(--light) !important;
 }
+
+/* styling for the go to top button */
+
 #btn-go-to-top {
     bottom: 32px;
     right: 32px;
@@ -383,4 +396,21 @@ pre {
 }
 .fa-halfx {
     font-size: 0.75em;
+}
+
+/* defining custom letter spacing for headings */
+
+h1, .h1 { letter-spacing: initial; }
+h2, .h2 { letter-spacing: initial; }
+h3, .h3 { letter-spacing: initial; }
+h4, .h4 { letter-spacing: initial; }
+h5, .h5 { letter-spacing: initial; }
+h6, .h6 { letter-spacing: 1px; }
+
+.font-underline {
+    text-shadow: -2px 0px var(--white), -2px 0px var(--white), 2px 0px var(--white), 2px 0px var(--white);
+    background-size: 1px 1em;
+    box-shadow: inset 0 -0.175em var(--white), inset 0 -0.2em #000;
+    display: inline;
+    box-shadow: inset 0 -0.175em var(--white), inset 0 -0.2em var(--secondary);
 }
\ No newline at end of file
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index bca8465..8f0670b 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -1,3 +1,10 @@
+/*
+
+this file contains styling rules for the markdown content which makes up the documentation pages.
+you can edit this file directly to change the appearance of certain elements that exist in markdown body.
+
+*/
+
 .markdown-body {
     font-size: 1rem;
     line-height: 1.5;
diff --git a/docs.html b/docs.html
index 8725cde..b1db9d3 100644
--- a/docs.html
+++ b/docs.html
@@ -1,6 +1,9 @@
 ---
 navbar_type: dark
 permalink: /docs/
+
+page_main_heading: GTK Docs
+page_main_heading_description: Find out all the things you need to work with GTK as a Developer.
 ---
 
 {%- include header.html -%}
@@ -9,8 +12,8 @@ permalink: /docs/
   <div class="container">
     <div class="row">
       <div class="col-md-5 d-flex justify-content-end flex-column main-heading">
-        <h1 class="display-4 pb-3">GTK Docs</h1>
-        <span class="lead text-info">Find out all the things you need to work with GTK as a Developer.</span>
+        <h1 class="display-3 pb-3">{{ page.page_main_heading }}</h1>
+        <span class="text-info lead">{{ page.page_main_heading_description }}</span>
       </div>
       <div class="col-md-7 d-none d-md-flex justify-content-center align-items-center flex-column">
         <img src="{{ '/assets/img/wall-docs.svg' | prepend: site.url }}" class="img-fluid w-75" />
diff --git a/index.html b/index.html
index cb00205..642173e 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@ development_section:
   - heading: Develop with GTK
     description: |-
       By taking the advantage of GTK being a cross-platform development tool and it's easy to use API, you 
can develop amazing apps using the GTK. If you are interested in developing an app, get started now by 
developing this [trivial app](https://developer.gnome.org/gtk3/stable/ch01s04.html#id-1.2.3.12.5).
-  - heading: Develop with GTK
+  - heading: Develop GTK
     description: |-
       GTK is a large project and relies on voluntary contributions from the developers around the world. To 
help us with the project development, hack away on the existing [bugs and feature 
requests](https://gitlab.gnome.org/GNOME/gtk/issues/).
   - heading: Looking for Help?
@@ -176,7 +176,7 @@ news_and_events_list:
 </section>
 
 {% assign apps = site.data.apps.apps_list %}
-<section class="py-4" id="apps">
+<section class="py-4" style="background: linear-gradient(var(--light), var(--white));">
   <div class="container py-3">
     <div class="row text-center d-flex justify-content-center">
       <div class="col-md-10 col-lg-7">
@@ -243,7 +243,7 @@ news_and_events_list:
       </div>
     </div>
   </div>
-  <section class="py-4" id="development">
+  <section class="py-4 bg-no-repeat bg-cover" id="development" style="background: url('{{ 
'/assets/img/wall-symbolics.png' | prepend: site.url }}')">
     <div class="container">
       <div class="row py-4">
         <div class="col-md-6 px-md-4 pb-4 pb-md-0">
@@ -284,7 +284,7 @@ news_and_events_list:
 </section>
 
 {% assign news_and_events = page.news_and_events_list %}
-<section class="py-4" id="events">
+<section class="py-4" id="events" style="background: url('{{ '/assets/img/wall-events-pattern.svg' | 
prepend: site.url }}')">
   <div class="container">
     <h2 class="text-center font-weight-light mb-3">News and Events</h2>
     <div class="row py-4">
@@ -301,7 +301,7 @@ news_and_events_list:
 </section>
 
 <script>
-  // implementing the "take me down" functionality
+  // implementing the functionality for "see more" button
   function slideDown() {
     location.assign("#usecases");
   }
@@ -340,6 +340,7 @@ news_and_events_list:
     });
   });
 
-  $('.dropdown-toggle').dropdown()
+  // used to implement the dropdown for the downloads
+  $(".dropdown-toggle").dropdown()
 </script>
 {%- include footer.html -%}
\ No newline at end of file
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]