Skip to content

Commit

Permalink
Image enhancements (#80)
Browse files Browse the repository at this point in the history 
+ Whenever the CSS does not define explicit width and height of an image, declare it inline. It's overwritten by the CSS but allows the browser position content correctly while it is loading and if that failed. In case variable width, browsers derive and respect the aspect ratio from inline width and height.
+ Fix a few docs links and add one for DietPi-Update
+ On the main page, the slider margin of 60 assures that it is not overlaid by the navigation bar. On the other pages, this was forgotten. Since all three pages use the navigation bar, simply add the margin to the whole body.
+ Remove obsolete image
+ Actions: Update Go to v1.16
  • Loading branch information
@MichaIng
MichaIng authored Feb 28, 2021
1 parent 8a5f55d commit 33deaef
Show file tree
Hide file tree
Showing 6 changed files with 248 additions and 242 deletions.
7 changes: 5 additions & 2 deletions .github/workflows/main.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ jobs:
# https://github.com/actions/setup-java/releases
uses: actions/setup-java@v1
with:
# http://static.azul.com/zulu/bin/
java-version: '15'
java-package: jre
- name: Download Nu Html Checker
Expand All @@ -26,6 +27,7 @@ jobs:
# https://github.com/actions/setup-python/releases
uses: actions/setup-python@v2
with:
# https://github.com/actions/python-versions/releases
python-version: '3.9'
- name: Install PySpelling
id: pyspelling
Expand All @@ -38,13 +40,14 @@ jobs:
- name: Run PySpelling to check HTML files
if: always() && steps.pyspelling.outcome == 'success'
run: pyspelling -vc .spellcheck.yml
- name: Setup Go 1.15 for liche
- name: Setup Go 1.16 for liche
id: go
if: always() && steps.deploy.outcome == 'success'
# https://github.com/actions/setup-go/releases
uses: actions/setup-go@v2
with:
go-version: '1.15'
# https://github.com/actions/go-versions/releases
go-version: '1.16'
- name: Install liche
id: liche
if: always() && steps.go.outcome == 'success'
Expand Down
52 changes: 26 additions & 26 deletions contribute.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,11 @@
<div class="section secondary-section" id="download">
<div class="container-xl software">
<svg class="triangle" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true"><path d="M0 0h100l-50 100"/></svg>
<div id="title-1" class="title">
<div class="title">
<h1>Contribute to DietPi</h1>
<p>Contributions are always welcome, no matter how small or large. You can do this in many ways and this page provides everything you need to get started!</p>
</div>
<div id="title-2" class="title">
<div class="title">
<h2>Grow in 2021</h2>
<p>
We are asking you to help the DietPi project. DietPi is an open-source product and it is free to use. We are sustained by donations and <b style="color:#0059ff"> even a small one (as little as the price of a cup of coffee)</b> would help the things move forward, covering the costs for hardware (new boards, micro SD cards etc.), web hosting and future development.
Expand All @@ -81,7 +81,7 @@ <h2>Grow in 2021</h2>
<a href="https://www.patreon.com/bePatron?u=12464530" class="button" target="_blank" rel="noopener">Become a Patron</a>
</p>
</div>
<div id="title-3" class="title">
<div class="title">
<h2>Why contribute to DietPi as an open-source project?</h2>
<p>You can improve the software you rely on. It's empowering to be able to make changes, even small ones: whether it's coding, documentation, testing, web design. If you're looking to help, there's something for you on here!</p>
</div>
Expand All @@ -93,7 +93,7 @@ <h2>Why contribute to DietPi as an open-source project?</h2>
</nav>
<!-- Start details for portfolio project 1 -->
<div id="slidingdiv1" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/diagnose2.jpg" alt="Bug report" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/diagnose.jpg" alt="Bug report" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -111,7 +111,7 @@ <h3>Create a new bug report / Report a security issue</h3>
<!-- End details for portfolio project 1 -->
<!-- Start details for portfolio project 2 -->
<div id="slidingdiv2" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/investigate.jpg" alt="Diagnose" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/investigate.jpg" alt="Diagnose" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -137,7 +137,7 @@ <h3>Investigate issues / Provide help</h3>
<!-- End details for portfolio project 2 -->
<!-- Start details for portfolio project 3 -->
<div id="slidingdiv3" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/question.jpg" alt="Question" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/question.jpg" alt="Question" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -152,7 +152,7 @@ <h3>Answer questions / Provide insights</h3>
<!-- End details for portfolio project 3 -->
<!-- Start details for portfolio project 4 -->
<div id="slidingdiv4" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/test-configurations.jpg" alt="GNUstep" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/test-configurations.jpg" alt="Test" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -174,7 +174,7 @@ <h3>Test configurations</h3>
<!-- End details for portfolio project 4 -->
<!-- Start details for portfolio project 5 -->
<div id="slidingdiv5" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/improve-website.jpg" alt="Chromium" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/improve-website.jpg" alt="Improve website" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -190,7 +190,7 @@ <h3>Improve DietPi website</h3>
<!-- End details for portfolio project 5 -->
<!-- Start details for portfolio project 6 -->
<div id="slidingdiv6" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/improve-docs.jpg" alt="VNC Server" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/improve-docs.jpg" alt="Improve docs" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -205,7 +205,7 @@ <h3>Expand DietPi Docs</h3>
<!-- End details for portfolio project 6 -->
<!-- Start details for portfolio project 7 -->
<div id="slidingdiv7" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/new-features.jpg" alt="NoMachine" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/new-features.jpg" alt="Suggest" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -223,7 +223,7 @@ <h3>New feature suggestions & Software titles</h3>
<!-- End details for portfolio project 7 -->
<!-- Start details for portfolio project 8 -->
<div id="slidingdiv8" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/expand-code.jpg" alt="XRDP" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/expand-code.jpg" alt="Code" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -246,7 +246,7 @@ <h3>Extend DietPi</h3>
<!-- End details for portfolio project 8 -->
<!-- Start details for portfolio project 9 -->
<div id="slidingdiv9" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/be-part-community.jpg" alt="RealVNC" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/be-part-community.jpg" alt="Community" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -267,7 +267,7 @@ <h3>Use DietPi Forum</h3>
<!-- End details for portfolio project 9 -->
<!-- Start details for portfolio project 10 -->
<div id="slidingdiv10" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/social-Twitter.jpg" alt="Kodi" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/social-Twitter.jpg" alt="Blog" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -285,7 +285,7 @@ <h3>Write about DietPi</h3>
<!-- End details for portfolio project 10 -->
<!-- Start details for portfolio project 11 -->
<div id="slidingdiv11" class="toggleDiv row single-project">
<div class="col-md-4"><img src="images/contribute/more-social.jpg" alt="ympd" loading="lazy"></div>
<div class="col-md-4"><img src="images/contribute/more-social.jpg" alt="Social" width="8" height="5" loading="lazy"></div>
<div class="col-md-8">
<div class="project-description">
<div class="project-title clearfix">
Expand All @@ -303,7 +303,7 @@ <h3>Social media</h3>
<!-- Desktops -->
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv1">
<img src="images/contribute/diagnose2.jpg" alt="Report an issue" loading="lazy">
<img src="images/contribute/diagnose.jpg" alt="Report an issue" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Report an issue</h3>
<p>Bugs or security issues</p>
Expand All @@ -312,7 +312,7 @@ <h3>Report an issue</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv2">
<img src="images/contribute/investigate.jpg" alt="Investigate / Help" loading="lazy">
<img src="images/contribute/investigate.jpg" alt="Investigate / Help" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Diagnose issues</h3>
<p>Investigate & Find reasons</p>
Expand All @@ -321,7 +321,7 @@ <h3>Diagnose issues</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv3">
<img src="images/contribute/question.jpg" alt="project 3" loading="lazy">
<img src="images/contribute/question.jpg" alt="Question" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Answer questions</h3>
<p>Share feedback and insights</p>
Expand All @@ -330,7 +330,7 @@ <h3>Answer questions</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Report">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv4">
<img src="images/contribute/test-configurations.jpg" alt="project 4" loading="lazy">
<img src="images/contribute/test-configurations.jpg" alt="Test" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Test configurations</h3>
<p>Run specific tests</p>
Expand All @@ -339,7 +339,7 @@ <h3>Test configurations</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv5">
<img src="images/contribute/improve-website.jpg" alt="project 5" loading="lazy">
<img src="images/contribute/improve-website.jpg" alt="Improve website" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Improve DietPi website</h3>
<p>Help to improve & extend</p>
Expand All @@ -349,7 +349,7 @@ <h3>Improve DietPi website</h3>
<!-- Remote desktop -->
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv6">
<img src="images/contribute/improve-docs.jpg" alt="project 6" loading="lazy">
<img src="images/contribute/improve-docs.jpg" alt="Improve docs" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Extend DietPi Docs</h3>
<p>Bring more details & samples</p>
Expand All @@ -358,7 +358,7 @@ <h3>Extend DietPi Docs</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Ideas">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv7">
<img src="images/contribute/new-features.jpg" alt="project 7" loading="lazy">
<img src="images/contribute/new-features.jpg" alt="Suggest" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>New software titles</h3>
<p>Suggest features & software</p>
Expand All @@ -367,7 +367,7 @@ <h3>New software titles</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Expand">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv8">
<img src="images/contribute/expand-code.jpg" alt="project 8" loading="lazy">
<img src="images/contribute/expand-code.jpg" alt="Code" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Extend DietPi</h3>
<p>Bring contributions in GitHub</p>
Expand All @@ -376,7 +376,7 @@ <h3>Extend DietPi</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv9">
<img src="images/contribute/be-part-community.jpg" alt="project 9" loading="lazy">
<img src="images/contribute/be-part-community.jpg" alt="Community" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Use DietPi Forum</h3>
<p>Share & Receive help</p>
Expand All @@ -385,7 +385,7 @@ <h3>Use DietPi Forum</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv10">
<img src="images/contribute/social-Twitter.jpg" alt="project 10" loading="lazy">
<img src="images/contribute/social-Twitter.jpg" alt="Blog" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Write about DietPi</h3>
<p>Spread the word</p>
Expand All @@ -394,7 +394,7 @@ <h3>Write about DietPi</h3>
</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-6 mix Community">
<a href="#downloadinfo" class="thumbnail show_hide" rel="#slidingdiv11">
<img src="images/contribute/more-social.jpg" alt="project 11" loading="lazy">
<img src="images/contribute/more-social.jpg" alt="Social" width="8" height="5" loading="lazy">
<i class="more"></i>
<h3>Social media</h3>
<p>Share info & love</p>
Expand Down Expand Up @@ -425,7 +425,7 @@ <h3>Social media</h3>
<p>&copy; 2021 DietPi created by <a href="https://dietpi.com/" target="_blank" rel="noopener">Daniel Knight</a></p>
<p>&copy; 2013 Website theme by <a href="https://www.graphberry.com/" target="_blank" rel="noopener">Graphberry</a></p>
<p>DietPi web hosting is powered by <a href="https://myvirtualserver.com" target="_blank" rel="noopener">myVirtualserver.com
<br><br><img src="images/myvirtualserver_logo.png" alt="myVirtualserver" width="200" loading="lazy"></a></p>
<br><br><img src="images/myvirtualserver_logo.png" alt="myVirtualserver" width="200" height="44" loading="lazy"></a></p>
</div>
</div>
<!-- Footer section end -->
Expand Down
3 changes: 2 additions & 1 deletion css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ body {
background-color: #181a1c;
font-size: 17px;
line-height: 20px;
margin-top: 60px;
}
h1 {
margin: 10px 10px 20px;
Expand Down Expand Up @@ -294,7 +295,7 @@ a:hover {
}
/* Slider: https://github.com/Le-Stagiaire/jquery.cslider */
.da-slider {
margin: 60px 0 0;
margin: 0;
height: 45vw;
max-height: 450px;
min-width: unset;
Expand Down
Loading

0 comments on commit 33deaef

Please sign in to comment.