Skip to content

Commit 865d65b

Browse files
hecrjhecrj
committed
Replace Bulma with Pico CSS
1 parent 5974452 commit 865d65b

File tree

4 files changed

+108
-139
lines changed

4 files changed

+108
-139
lines changed

‎.gitmodules‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎libraries/bulma‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎sass/main.sass‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
11
@charset "utf-8"
22

3-
@import "../libraries/bulma/sass/utilities/initial-variables.sass"
3+
body > header
4+
z-index: 2
5+
position: sticky
6+
top: 0
7+
backdrop-filter: blur(1rem)
8+
background-color: color-mix(in srgb, var(--pico-background-color) 90%, transparent)
49

5-
$blue: #3645ff
6-
$primary: $blue
7-
$background: $white
8-
$secondary: #45a2f8
9-
//$scheme-main: $black
10-
//$scheme-invert: $white
11-
//$text: $white-ter
12-
//$text-strong: $white
13-
//$text-invert: $black
10+
nav details[class=dropdown] summary:not(:hover,:focus,:focus-visible), nav details[class=dropdown]:not(:focus-within) summary
11+
border-color: transparent
12+
background-color: transparent
1413

15-
@import "../libraries/bulma/bulma.sass"
14+
.hero
15+
text-align: center
1616

17+
h1
18+
margin-top: 0
1719

18-
.hero.is-primary.is-bold
19-
$gradient-top-left: darken(saturate(adjust-hue($primary, -10deg), 10%), 10%)
20-
$gradient-bottom-right: lighten(saturate(adjust-hue($secondary, 10deg), 5%), 5%)
21-
background-image: linear-gradient(141deg, $gradient-top-left 0%, $primary 71%, $gradient-bottom-right 100%)
22-
+mobile
23-
.navbar-menu
24-
background-image: linear-gradient(141deg, $gradient-top-left 0%, $primary 71%, $gradient-bottom-right 100%)
20+
.grid
21+
display: flex
22+
justify-content: center
23+
24+
#showcase
25+
margin-top: calc(var(--pico-block-spacing-vertical) * 4)
2526

2627
#showcase-items
2728
display: grid
2829
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))
2930
gap: 2rem
3031
align-items: start
3132

33+
header
34+
padding: 0
35+
36+
img
37+
height: 200px
38+
39+
footer
40+
text-align: center
41+
3242
img
3343
object-fit: cover

‎templates/index.html‎

Lines changed: 80 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -8,121 +8,97 @@
88

99
<title>iced - A cross-platform GUI library for Rust</title>
1010

11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.blue.min.css">
1112
<link rel="stylesheet" href="main.css">
1213

1314
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
1415
integrity="sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg=="
1516
crossorigin="anonymous"></script>
1617
</head>
17-
<body class="has-navbar-fixed-top">
18-
<!-- Navigation Bar -->
19-
<nav class="navbar is-fixed-top" role="navigation" aria-label="dropdown navigation">
20-
<div class="container">
21-
<div class="navbar-brand">
22-
<a class="navbar-item py-0" href="/">
23-
<img src="logo.black.svg" style="max-height: 2.0rem">
24-
</a>
25-
26-
<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
27-
<span aria-hidden="true"></span>
28-
<span aria-hidden="true"></span>
29-
<span aria-hidden="true"></span>
30-
</a>
31-
</div>
32-
33-
<div id="navbar" class="navbar-menu">
34-
<div class="navbar-end">
35-
<a class="navbar-item" href="https://book.iced.rs/">
18+
<body>
19+
<header>
20+
<nav class="container">
21+
<ul>
22+
<li>
23+
<img alt="iced logo (white)" src="logo.white.svg" style="height: 40px">
24+
</li>
25+
</ul>
26+
<ul>
27+
<li>
28+
<details class="dropdown">
29+
<summary>Documentation</summary>
30+
<ul>
31+
<li>
32+
<a href="https://book.iced.rs/">
33+
<span class="icon">
34+
<i class="fas fa-bookmark"></i>
35+
</span>
36+
<span>Guide</span>
37+
</a>
38+
</li>
39+
<li>
40+
<a href="https://docs.rs/iced/">
41+
<span class="icon">
42+
<i class="fas fa-box"></i>
43+
</span>
44+
<span>Latest Release</span>
45+
</a>
46+
</li>
47+
<li>
48+
<a href="https://docs.iced.rs/iced/">
49+
<span class="icon">
50+
<i class="fas fa-code-branch"></i>
51+
</span>
52+
<span>Development Branch</span>
53+
</a>
54+
</li>
55+
</ul>
56+
</details>
57+
</li>
58+
<li>
59+
<a href="https://discourse.iced.rs/">
3660
<span class="icon">
37-
<i class="fas fa-bookmark"></i>
61+
<i class="fab fa-discourse"></i>
3862
</span>
39-
<span class="ml-1">Guide</span>
4063
</a>
41-
42-
<div class="navbar-item has-dropdown is-hoverable">
43-
<a class="navbar-link">
44-
<span class="icon">
45-
<i class="fas fa-book"></i>
46-
</span>
47-
<span class="ml-1">API Reference</span>
48-
</a>
49-
50-
<div class="navbar-dropdown">
51-
<a class="navbar-item" href="https://docs.rs/iced/">
52-
<span class="icon">
53-
<i class="fas fa-box"></i>
54-
</span>
55-
<span class="ml-1">Latest release</span>
56-
</a>
57-
58-
<a class="navbar-item" href="https://docs.iced.rs/iced/">
59-
<span class="icon">
60-
<i class="fas fa-code-branch"></i>
61-
</span>
62-
<span class="ml-1">Development branch</span>
63-
</a>
64-
</div>
65-
</div>
66-
67-
<a class="navbar-item" href="https://discourse.iced.rs">
64+
</li>
65+
<li>
66+
<a href="https://discord.gg/3xZJ65GAhd">
6867
<span class="icon">
69-
<i class="fab fa-discourse"></i>
68+
<i class="fab fa-discord"></i>
7069
</span>
71-
<span>Discourse</span>
7270
</a>
73-
74-
<a class="navbar-item" href="https://discord.gg/3xZJ65GAhd">
71+
</li>
72+
<li>
73+
<a href="https://github.com/iced-rs/iced">
7574
<span class="icon">
76-
<i class="fab fa-discord"></i>
75+
<i class="fab fa-github"></i>
7776
</span>
78-
<span>Discord</span>
7977
</a>
80-
81-
<div class="navbar-item">
82-
<a class="button is-primary is-outlined" href="https://github.com/iced-rs/iced">
83-
<span class="icon">
84-
<i class="fab fa-github"></i>
85-
</span>
86-
<span>GitHub</span>
87-
</a>
88-
</div>
89-
</div>
78+
</li>
79+
</ul>
80+
</nav>
81+
</header>
82+
<main class="container">
83+
<section class="hero">
84+
<img alt="iced logo" src="logo.svg">
85+
<h1>iced</h1>
86+
<p class="secondary">
87+
A cross-platform GUI library for Rust focused on simplicity and type-safety.
88+
</p>
89+
<div class="grid">
90+
<a role="button" href="https://book.iced.rs/">Get started</a>
91+
<a role="button" href="https://github.com/iced-rs/iced" class="contrast">Contribute</a>
9092
</div>
91-
</div>
92-
</nav>
93+
</section>
9394

94-
<!-- Hero -->
95-
<section class="hero is-bold is-medium is-dark">
96-
<div class="hero-body">
97-
<div class="container is-max-desktop">
98-
<div class="columns is-vcentered">
99-
<div class="column is-one-quarter" align="center">
100-
<figure class="image is-4 is-fullwidth">
101-
<img src="logo.svg">
102-
</figure>
103-
</div>
104-
<div class="column" align="center">
105-
<h1 class="title is-1 is-spaced">iced</h1>
106-
<p class="subtitle is-3">
107-
A cross-platform GUI library for Rust focused on simplicity and type-safety.
108-
</p>
109-
<div class="buttons is-centered are-large">
110-
<a class="button is-primary" href="https://book.iced.rs/" style="width: 200px">Get started</a>
111-
<a class="button" href="https://github.com/iced-rs/iced" style="width: 200px">Contribute</a>
112-
</div>
113-
</div>
114-
</div>
115-
</div>
116-
</div>
117-
</section>
118-
119-
<!-- Showcase -->
120-
<section class="section container is-medium" id="showcase">
121-
<h1 class="title is-1"><a href="#showcase">#</a> Showcase</h1>
95+
<section id="showcase">
96+
<h1><a href="#showcase" class="secondary">#</a> Showcase</h1>
12297

123-
<div id="showcase-items">
124-
</div>
125-
</section>
98+
<div id="showcase-items">
99+
</div>
100+
</section>
101+
</main>
126102
<script src="main.js"></script>
127103
<script>
128104
// List of showcase projects; Edit this list to add or remove projects
@@ -363,31 +339,18 @@ <h1 class="title is-1"><a href="#showcase">#</a> Showcase</h1>
363339
const source = has_webp ? `<source srcset="${thumbnail_webp}">` : "";
364340

365341
return `
366-
<div class="card">
367-
<div class="card-image">
342+
<article>
343+
<header>
368344
<a href="${website}">
369-
<picture class="image is-3by2">
345+
<picture>
370346
${source}
371347
<img src="${thumbnail}" loading="lazy">
372348
</picture>
373349
</a>
374-
</div>
375-
<div class="card-content">
376-
<div class="media">
377-
<div class="media-content">
378-
<p class="title is-4">${name}</p>
379-
<p class="subtitle is-6">${description}</p>
380-
</div>
381-
</div>
382-
</div>
383-
<footer class="card-footer">
384-
<a href="${website}" class="card-footer-item">
385-
<span class="icon">
386-
<i class="fas fa-external-link-alt"></i>
387-
</span>
388-
<span>Learn more</span></a>
389-
</footer>
390-
</div>
350+
</header>
351+
<h3><a href="${website}" class="contrast">${name}</a></h3>
352+
${description}
353+
</article>
391354
`;
392355
}
393356

0 commit comments

Comments
 (0)