shuqi
/
pixel-icon-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Layout updates

This commit is contained in:
Shuqi 2023-11-13 03:45:50 +08:00
parent a07ff777da
commit c12b3bd6dc
2 changed files with 99 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -3,9 +3,22 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:image" content="./cover.png" /> <meta property="og:title" content="Pixel Icons" />
<link rel="shortcut icon" href="./favicon.png" type="image/png" /> <meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover.png" />
<meta property="og:description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<title>Pixel Icons</title> <title>Pixel Icons</title>
<meta name="description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<link rel="shortcut icon" href="./favicon.png" type="image/png" />
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-S5K34EE24W"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-S5K34EE24W');
</script>
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
@ -47,11 +60,14 @@
<rect x="460" y="10" width="30" height="10"/> <rect x="460" y="10" width="30" height="10"/>
<rect x="450" y="50" width="30" height="10"/> <rect x="450" y="50" width="30" height="10"/>
</svg> </svg>
<a class="pill ms-auto" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a> <div class="buttons">
<a class="pill" href="./download.php?icon=all" target="_blank">Download All</a>
<a class="pill" href="https://github.com/shuqikhor/PixelIcon" target="_blank">GitHub</a>
<button class="pill" id="btn-theme"> <button class="pill" id="btn-theme">
<img class="theme-icon" src="./icons/sun.svg" alt="Light"> <img class="theme-icon" src="./icons/sun.svg" alt="Light">
<img class="theme-icon" src="./icons/moon.svg" alt="Dark"> <img class="theme-icon" src="./icons/moon.svg" alt="Dark">
</button> </button>
</div>
</header> </header>
<div id="root"></div> <div id="root"></div>
</div> </div>

15
src/index.css
View File

@ -49,21 +49,30 @@ input {
margin: 0 auto; margin: 0 auto;
padding: 2rem; padding: 2rem;
font-size: 9pt; font-size: 9pt;
box-sizing: border-box;
} }
header { header {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 1rem; gap: 18px;
/* line-height: 3.2rem; */ flex-wrap: wrap;
margin: 36px 0 54px;
}
header .buttons {
display: flex;
gap: 18px;
justify-content: flex-start;
align-items: center;
} }
#site-title { #site-title {
height: 30px; height: 30px;
width: auto; width: auto;
fill: currentColor; fill: currentColor;
margin: 36px 0; margin-right: auto;
} }
h1 { h1 {