fix icon stretch bug on mobile devices

This commit is contained in:
Lorenzo Palinuro Faletra 2019-04-01 15:24:27 +02:00
parent f0d1b3576b
commit 07b01d04f8
No known key found for this signature in database
GPG Key ID: 5EB6FE2B97B901AC
4 changed files with 36 additions and 16 deletions

View File

@ -210,8 +210,8 @@ nav ul li:hover, nav ul li.active {
}
.sectiondivider img {
width:300px;
height:300px;
width:240px;
height:240px;
position: static;
}
@ -336,8 +336,8 @@ nav ul li:hover, nav ul li.active {
margin-left:-100px;
}
.sectiondivider img {
width:150px;
height:180px;
width:170px;
height:170px;
}
.sectiondivider .fa-stack {
font-size: 100px;
@ -346,7 +346,12 @@ nav ul li:hover, nav ul li.active {
.sectiondivider h5 {
font-size:15px;
bottom:30px;
width:170px
width:240px
}
.section-icon {
width: 170px;
height: 170px;
}
.columned {
@ -372,6 +377,11 @@ button {
-moz-appearance: button;
}
.section-icon {
width: 240px;
height: 240px;
}
.link-button {
color: white;
margin: 20px 0 5px;

View File

@ -739,8 +739,8 @@ nav ul li:hover, nav ul li.active {
}
.sectiondivider img {
width:300px;
height:300px;
width:240px;
height:240px;
position: static;
}
@ -865,8 +865,8 @@ nav ul li:hover, nav ul li.active {
margin-left:-100px;
}
.sectiondivider img {
width:150px;
height:180px;
width:170px;
height:170px;
}
.sectiondivider .fa-stack {
font-size: 100px;
@ -875,7 +875,12 @@ nav ul li:hover, nav ul li.active {
.sectiondivider h5 {
font-size:15px;
bottom:30px;
width:170px
width:240px
}
.section-icon {
width: 170px;
height: 170px;
}
.columned {
@ -901,6 +906,11 @@ button {
-moz-appearance: button;
}
.section-icon {
width: 240px;
height: 240px;
}
.link-button {
color: white;
margin: 20px 0 5px;

View File

@ -74,7 +74,7 @@ VSCodium is a lightweight but powerful source code editor which runs on your des
<div id="platforms" class="section p-platforms">
<div class="subtlecircle sectiondivider imaged">
<img src="img/os-circle-logo.png" style="width: 240px;height: 240px" alt="section icon" />
<img src="img/os-circle-logo.png" alt="section icon section-icon" />
<h5 class="icon-title">Platforms</h5>
</div>
@ -105,7 +105,7 @@ VSCodium is a lightweight but powerful source code editor which runs on your des
<div id="features" class="section p-features">
<div class="subtlecircle sectiondivider imaged">
<img src="img/code.png" style="width: 240px;height: 240px" alt="section icon" />
<img src="img/code.png" alt="section icon section-icon" />
<h5 class="icon-title">Features</h5>
</div>
@ -200,7 +200,7 @@ Want even more features? Install extensions to add new languages, themes, debugg
<div id="why" class="section p-why">
<div class="subtlecircle sectiondivider imaged">
<img src="img/opensource.png" style="width: 240px;height: 240px" alt="section icon" />
<img src="img/opensource.png" alt="section icon section-icon" />
<h5 class="icon-title">Why</h5>
</div>
@ -236,7 +236,7 @@ Microsofts downloads of Visual Studio Code are licensed under <a href="https:
<div id="install" class="section p-install">
<div class="subtlecircle sectiondivider imaged">
<img src="img/install.png" style="width: 240px;height: 240px" alt="section icon" />
<img src="img/install.png" alt="section icon section-icon" />
<h5 class="icon-title">Install</h5>
</div>
@ -337,7 +337,7 @@ apt <span class="nb">install </span>vscodium
<div id="migrate" class="section p-migrate">
<div class="subtlecircle sectiondivider imaged">
<img src="img/migrate.png" style="width: 240px;height: 240px" alt="section icon" />
<img src="img/migrate.png" alt="section icon section-icon" />
<h5 class="icon-title">Migrate</h5>
</div>

View File

@ -30,7 +30,7 @@
<div id="{{id}}" class="section p-{{id}}">
{% if page.icon %}
<div class="subtlecircle sectiondivider imaged">
<img src="{{page.icon}}" style="width: 240px;height: 240px" alt="section icon" />
<img src="{{page.icon}}" alt="section icon section-icon" />
<h5 class="icon-title">{{ page.title }}</h5>
</div>
{% elsif page.fa-icon %}