[CSS][Icons] Icons width and height wasn't consistent, problem lied within the SVGs themselves.

This commit is contained in:
Eliseu Amaro 2021-08-22 16:26:19 +01:00 committed by Hugo Sales
parent b8bb845e24
commit 6e6b2ea87b
Signed by: someonewithpc
GPG Key ID: 7D0C7EAFC9D835A0
6 changed files with 188 additions and 42 deletions

View File

@ -45,7 +45,6 @@
z-index: 1;
height: 3rem;
font-size: var(--main-size);
display: flex;
position: fixed;
top: 0;
@ -71,20 +70,18 @@
margin-right: auto;
}
#instance h1 {
margin-left: 4px;
}
#instance:focus svg,
#instance:hover svg {
fill: var(--bg1);
transition: var(--cubic-transition);
}
.icon-logo {
margin-right: var(--small-size);
fill: var(--white);
}
.panel aside {
font-size: var(--medium-size);
display: block;
position: absolute;
top: 100%;
@ -93,22 +90,15 @@
padding: var(--unit-size);
}
.panel aside .footer {
bottom: var(--unit-size);
left: var(--unit-size);
font-size: var(--small-size);
}
#header:above-level.panel[open] ~ * {
display: none;
}
.icon {
fill: var(--white);
width: 1em;
height: 1em;
}
/* CURRENT PAGE LINK */
.active {
border-radius: var(--unit-size);
border-radius: 4px;
background: var(--white);
color: var(--bg1) !important;
transition: var(--cubic-transition);
@ -284,16 +274,6 @@
max-width: 100%;
}
/* we need to control panel's view at this size */
.icon-left,
.icon-right {
display: flex;
align-self: center;
align-items: center;
width: 1em;
height: 1em;
}
/* by default they are hidden */
.panel aside {
display: none;
@ -306,7 +286,6 @@
.panel[open] {
display: flex;
flex-direction: column;
font-size: var(--main-size);
}
.panel[open] aside {
padding: var(--unit-size);
@ -320,7 +299,6 @@
background-repeat: no-repeat;
background-size: 100% 100%;
min-height: 100%;
}
.panel[open] aside .footer {

View File

@ -95,4 +95,10 @@
display: flex;
flex-direction: column;
}
.sec-nav {
padding-left: var(--unit-size);
}
.footer * {
font-size: var(--small-size);
}

View File

@ -150,7 +150,7 @@ li {
a {
text-decoration: none;
color: var(--white);
border-radius: var(--unit-size);
border-radius: 4px;
padding-left: var(--unit-size);
padding-right: var(--unit-size);
@ -180,10 +180,9 @@ figcaption a:link {
summary:hover > svg,
summary:focus > svg {
border-radius: var(--unit-size);
border-radius: 4px;
background-color: var(--white);
fill: var(--bg1);
border: 2px solid var(--white);
transition: var(--cubic-transition);
}

View File

@ -1,6 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="{{ iconClass|default('') }}">
<title>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg6"
sodipodi:docname="logo.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs10" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
width="16px"
inkscape:zoom="7.2107905"
inkscape:cx="-29.955107"
inkscape:cy="30.232469"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<title
id="title2">
{{ config('site', 'name') }}
</title>
<path d="M14.225 29.263c1.48-.748 2.909-2.155 3.451-3.398.827-1.893 1.068-1.818-5.781-1.818-6.744 0-7.349-.115-8.593-1.628-.61-.742-.633-1.086-.633-9.456 0-8.422.02-8.713.651-9.562 1.2-1.613 1.699-1.679 12.7-1.679 11.005 0 11.456.062 12.71 1.748.566.761.6 1.3.6 9.493 0 8.37-.023 8.715-.633 9.456-.909 1.105-2.149 1.628-3.864 1.628-1.331 0-1.517.078-1.681.703-.249.95-1.56 2.395-2.912 3.212-1.363.823-4.873 1.889-6.166 1.871l-.953-.013zm5.475-8.691c1.193-.547 2.345-2.309 2.627-4.017.135-.818.175-1.554.09-1.636-.308-.294-5.508-.153-5.508.15 0 .165-.186 1.211.05 1.752.31.711 1.031.333 1.608.408.496.065.767.336.352.875-.364.472-.79.578-2.292.57-1.599-.009-2.145-.173-2.784-.735-.708-.623-.728-1.11-.826-3.188-.133-2.808.201-3.318 2.359-3.602 1.79-.236 3.638.109 4.14 1.164.299.628.194.74 1.31.74 1.54 0 1.643-.426 1.047-1.992-.385-1.013-.726-.77-.284-1.661.764-1.541.606-2.617-.564-3.839-1.151-1.202-1.664-1.118-1.102.18.202.466.322 1.221.268 1.676-.077.645-.273.848-.882.916-.436.049-.956-.112-1.173-.362-.449-.518-1.263-.587-1.724-.146-.221.212-.56.198-1.12-.046-.676-.295-.894-.27-1.384.154-.32.277-.9.461-1.289.408-.624-.085-.705-.249-.69-1.4.009-.718.126-1.533.26-1.812.413-.864-.597-.598-1.462.385-.91 1.034-1.07 2.938-.332 3.946.407.556.083.645-.145 1.877-1.099 5.937.04 8.144 3.019 9.304 1.949.759 4.694.73 6.434-.068z"/>
<path
d="M 6.9900123,15.675447 C 7.83238,15.249709 8.6457213,14.448891 8.9542101,13.741415 9.4249113,12.663981 9.562081,12.706668 5.6638515,12.706668 c -3.8384667,0 -4.1828131,-0.06545 -4.89085768,-0.926605 C 0.42580152,11.35774 0.4127107,11.161947 0.4127107,6.3980138 c 0,-4.79353 0.0113834,-4.9591578 0.37052813,-5.44238122 C 1.4662401,0.03756508 1.7502547,3.4146019e-8 8.0116686,3.4146019e-8 14.275358,3.4146019e-8 14.532053,0.03528851 15.245789,0.99490515 c 0.322149,0.43313655 0.3415,0.73991795 0.3415,5.40310865 0,4.7639332 -0.01309,4.9602962 -0.360283,5.3820492 -0.517374,0.62893 -1.223141,0.926605 -2.199264,0.926605 -0.757562,0 -0.863427,0.0444 -0.956771,0.400125 -0.141723,0.54071 -0.887901,1.363157 -1.657416,1.828167 -0.7757747,0.468424 -2.7735536,1.075157 -3.509487,1.064912 l -0.5424168,-0.0074 z m 3.1161927,-4.946636 c 0.679017,-0.311335 1.334698,-1.314208 1.495203,-2.2863465 0.07684,-0.4655798 0.0996,-0.884487 0.05122,-0.9311588 -0.175303,-0.1673352 -3.1349746,-0.087082 -3.1349746,0.085375 0,0.093913 -0.1058655,0.6892627 0.028462,0.9971814 C 8.7225578,8.9985406 9.1329277,8.7833955 9.4613369,8.8260834 9.7436439,8.8630814 9.8978893,9.017323 9.661685,9.3241046 9.4545112,9.5927521 9.2120461,9.6530834 8.3571558,9.6485301 7.4470538,9.6434077 7.1362884,9.5500641 6.7725902,9.2301921 6.3696195,8.875601 6.3582361,8.5984165 6.3024577,7.4156856 6.2267584,5.8174628 6.4168605,5.5271873 7.6451238,5.3655437 c 1.0188108,-0.1343236 2.070632,0.062039 2.3563542,0.6625112 0.170181,0.3574372 0.110418,0.421184 0.74561,0.421184 0.876518,0 0.935142,-0.2424654 0.595918,-1.133782 C 11.123876,4.7388901 10.92979,4.8771979 11.181362,4.3700694 11.616206,3.4929821 11.526278,2.8805577 10.860352,2.1850348 10.20524,1.5008952 9.9132573,1.5487053 10.23313,2.287485 10.348101,2.552717 10.416401,2.9824386 10.385665,3.24141 10.34184,3.6085231 10.230284,3.7240641 9.8836603,3.7627676 9.6355032,3.7906568 9.3395363,3.6990208 9.2160266,3.5567288 8.9604706,3.2619 8.4971679,3.2226274 8.2347823,3.4736304 8.1089955,3.594294 7.9160479,3.5863256 7.5973144,3.4474486 7.2125569,3.2795442 7.0884782,3.2937734 6.8095861,3.5351005 6.6274525,3.6927599 6.2973352,3.7974867 6.075929,3.7673209 5.7207684,3.7189417 5.6746658,3.6255982 5.6832033,2.9704861 5.6883258,2.5618238 5.7549185,2.0979522 5.8311868,1.9391543 6.0662531,1.4473935 5.4913938,1.5987921 4.9990638,2.1582839 4.4811212,2.7468032 4.3900543,3.8304985 4.8101001,4.4042195 c 0.2316513,0.3164572 0.047241,0.3671131 -0.08253,1.0683277 -0.6255152,3.3791482 0.022767,4.6353018 1.7183172,5.2955358 1.1093075,0.431999 2.6716727,0.415493 3.6620237,-0.0387 z"
id="path4"
style="stroke-width:0.569167" />
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>
{{ config('site', 'name') }}
</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -1,6 +1,58 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg class="{{ iconClass|default('') }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1em 1em">
<title>Open left sidepanel.</title>
<path fill-rule="evenodd" d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z"/>
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg6"
sodipodi:docname="menu.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs10" />
<sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="12.150261"
inkscape:cx="15.637524"
inkscape:cy="21.563323"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<title
id="title2">Open left sidepanel.</title>
<path
fill-rule="evenodd"
d="M 0.9999891,2.9999916 A 0.75000111,0.75000111 0 0 1 1.7499903,2.2499909 H 14.25001 a 0.75000111,0.75000111 0 1 1 0,1.5000021 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,2.9999916 Z m 0,5.0000076 A 0.75000111,0.75000111 0 0 1 1.7499903,7.2499981 H 14.25001 a 0.7500013,0.7500013 0 1 1 0,1.5000024 H 1.7499903 A 0.75000111,0.75000111 0 0 1 0.9999891,7.9999992 Z m 0.7500012,4.2500058 a 0.75000231,0.75000231 0 1 0 0,1.500004 H 14.25001 a 0.75000231,0.75000231 0 1 0 0,-1.500004 z"
id="path4"
style="stroke-width:1" />
<metadata
id="metadata12">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>Open left sidepanel.</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

Before

Width:  |  Height:  |  Size: 432 B

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -1,9 +1,68 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- https://github.com/primer/octicons -->
<!-- MIT License -->
<svg xmlns="http://www.w3.org/2000/svg" class="{{ iconClass|default('') }}" viewBox="0 0 1em 1em">
<title>
<svg
class="{{ iconClass|default('') }}"
viewBox="0 0 16 16"
width="16"
height="16"
version="1.1"
id="svg8"
sodipodi:docname="notes.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs
id="defs12" />
<sodipodi:namedview
id="namedview10"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="6.6503072"
inkscape:cx="2.2555349"
inkscape:cy="27.818264"
inkscape:window-width="1920"
inkscape:window-height="1016"
inkscape:window-x="0"
inkscape:window-y="36"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<title
id="title2">
Create a note
</title>
<path fill-rule="evenodd" d="M1.75 1A1.75 1.75 0 000 2.75v9.5C0 13.216.784 14 1.75 14H3v1.543a1.457 1.457 0 002.487 1.03L8.061 14h6.189A1.75 1.75 0 0016 12.25v-9.5A1.75 1.75 0 0014.25 1H1.75zM1.5 2.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v9.5a.25.25 0 01-.25.25h-6.5a.75.75 0 00-.53.22L4.5 15.44v-2.19a.75.75 0 00-.75-.75h-2a.25.25 0 01-.25-.25v-9.5z"/>
<path d="M22.5 8.75a.25.25 0 00-.25-.25h-3.5a.75.75 0 010-1.5h3.5c.966 0 1.75.784 1.75 1.75v9.5A1.75 1.75 0 0122.25 20H21v1.543a1.457 1.457 0 01-2.487 1.03L15.939 20H10.75A1.75 1.75 0 019 18.25v-1.465a.75.75 0 011.5 0v1.465c0 .138.112.25.25.25h5.5a.75.75 0 01.53.22l2.72 2.72v-2.19a.75.75 0 01.75-.75h2a.25.25 0 00.25-.25v-9.5z"/>
<g
id="g20"
transform="matrix(0.66666667,0,0,0.66666667,-4e-8,1.6962954e-4)">
<path
fill-rule="evenodd"
d="M 1.75,1 A 1.75,1.75 0 0 0 0,2.75 v 9.5 C 0,13.216 0.784,14 1.75,14 H 3 v 1.543 a 1.457,1.457 0 0 0 2.487,1.03 L 8.061,14 H 14.25 A 1.75,1.75 0 0 0 16,12.25 V 2.75 A 1.75,1.75 0 0 0 14.25,1 Z M 1.5,2.75 A 0.25,0.25 0 0 1 1.75,2.5 h 12.5 a 0.25,0.25 0 0 1 0.25,0.25 v 9.5 A 0.25,0.25 0 0 1 14.25,12.5 H 7.75 A 0.75,0.75 0 0 0 7.22,12.72 L 4.5,15.44 V 13.25 A 0.75,0.75 0 0 0 3.75,12.5 h -2 A 0.25,0.25 0 0 1 1.5,12.25 Z"
id="path4" />
<path
d="M 22.5,8.75 A 0.25,0.25 0 0 0 22.25,8.5 h -3.5 a 0.75,0.75 0 0 1 0,-1.5 h 3.5 C 23.216,7 24,7.784 24,8.75 v 9.5 A 1.75,1.75 0 0 1 22.25,20 H 21 v 1.543 a 1.457,1.457 0 0 1 -2.487,1.03 L 15.939,20 H 10.75 A 1.75,1.75 0 0 1 9,18.25 v -1.465 a 0.75,0.75 0 0 1 1.5,0 v 1.465 c 0,0.138 0.112,0.25 0.25,0.25 h 5.5 a 0.75,0.75 0 0 1 0.53,0.22 l 2.72,2.72 v -2.19 a 0.75,0.75 0 0 1 0.75,-0.75 h 2 a 0.25,0.25 0 0 0 0.25,-0.25 z"
id="path6" />
</g>
<metadata
id="metadata16">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:title>
Create a note
</dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
</svg>

Before

Width:  |  Height:  |  Size: 915 B

After

Width:  |  Height:  |  Size: 2.5 KiB