How to add under highlight to text in css

Issue #701

Use mark. This does not work for multiline

1
2
3
4
5
6
7
8
<p>
<mark css={css`
display: inline-block;
line-height: 0em;
padding-bottom: 0.5em;
`}>{feature.title}
</mark>
</p>

Another way is to use background

1
2
3
.highlight {
background: linear-gradient(180deg,rgba(255,255,255,0) 50%, #FFD0AE 50%);
}

Read more

How to conditionally apply css in emotion js

Issue #649

Check flag then define css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const Picture = (feature) => {
const shadowCss = feature.shadow ? css`
border-radius: 5px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
` : css``

return (
<div css={css`
width: 40vw;
@media (max-width: 420px) {
width: 98vw;
}
`}>
<div css={shadowCss}>
<img css={css`
max-width: 100%;
height: auto;
`}
src={require(`../apps/${feature.image}`)}
/>
</div>
</div>
)
}

How to make simple filter menu in css

Issue #643

Use material icons

1
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
div#filter-container {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10%;
height: 60px;
}

div#filter-items {
display: inline-flex;

background-color: #fff;
box-shadow: 0 0 1px 0 rgba(52, 46, 173, 0.25), 0 15px 30px 0 rgba(52, 46, 173, 0.1);
border-radius: 12px;
overflow: hidden;
padding: 10px;
}

a.filter-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100px;
text-decoration: none;
padding: 10px;
}

a.filter-item:hover {
background-color: rgb(239, 240, 241);
border-radius: 10px;
}

a.filter-item:active {
transform: scale(0.9);
}

a.filter-item.selected {
background-color: rgb(239, 240, 241);
border-radius: 10px;
}

span.material-icons {
font-family: "Material Icons";
display: block;
margin-bottom: 4px;
font-size: 26px;
color: mix(#fff, #342ead, 60%);
transition: 0.25s ease;
}

span.name {
display: block;
font-size: 13px;
color: mix(#fff, #342ead, 70%);
transition: 0.25s ease;
font-family: 'Open Sans', sans-serif;
font-weight: 500;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
filters.forEach((filter) => {
const item = document.createElement('a')
item.href = '#'
item.className = 'filter-item'
container.appendChild(item)

const icon = document.createElement('span')
icon.className = 'material-icons'
icon.innerText = filter.icon
item.appendChild(icon)

const name = document.createElement('span')
name.className = 'name'
name.innerText = filter.name
item.appendChild(name)

item.onclick = () => {
handleFilterClick(item, filter)
}
})

How to make simple grid gallery in css

Issue #642

Specify container with flex-wrap and justify-content, and item with float: left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
div.cards {
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10%;
}

div.card {
overflow: hidden;
float: left;
width: 220px;
color: #232330;
text-align: center;
border-radius: 10px;
border-color: silver;
box-shadow: 1px 8px 8px rgba(10, 10, 10, 0.2);
font-family: 'Open Sans', sans-serif;
margin: 16px;
transition: all .2s ease-in-out;
}

div.card:hover {
transform: scale(1.2);
}

How to edit hexo theme hiero

Issue #494

Code

Remove max-width from source/css/style.styl

1
2
3
4
5
.outer
clearfix()
// max-width: (column-width + gutter-width) * columns + gutter-width
margin: 40px auto
padding: 0 gutter-width

Change font-size of code block from source/css/_partial/highlight.styl

1
2
3
4
5
6
7
8
9
10
11
$code-block
background: $highlight-background
margin: article-padding article-padding * 0
padding: 15px article-padding
border-style: solid
border-color: color-border
border-width: 1px 0
overflow: auto
color: $highlight-foreground
font-size: 1.0em;
line-height: 1em

Change font-size of article-header from source/css/_partial/article.styl

1
2
3
4
5
6
7
8
.article-header
h1
margin: 0 0 3px 0;
font-size: 26px;
line-height: 1.2;
a
color: #404040;
text-decoration: none;

Change font-size of text from source/css/_partial/article.styl

1
2
3
4
5
6
7
8
9
.article-entry
@extend $base-style
clearfix()
color: color-default
padding: 0
p, table
line-height: line-height
margin: line-height 0
font-size: 1.1em

Dealing with CSS responsiveness in Wordpress

Issue #208

During the alpha test of LearnTalks, some of my friends reported that the screen is completely blank in the search page, and this happened in mobile only. This article is how I identify the problem and found a workaround for the issue, it may not be the solution, but at least the screen does not appear blank anymore.

As someone who likes to keep up with tech via watching conference videos, I thought it might be a good idea to collect all of these to better search and explore later. So I built a web app with React and Firebase, it is a work in progress for now. Due to time constraints, I decided to go first with Wordpress to quickly play with the idea. So there is LearnTalks.

The theme Marinate that I used didn’t want to render the search page correctly. So I head over to Chrome Dev Tool for Responsive Viewport Mode and Safari for Web Inspector

a1

a2

The tests showed that the problem only happened on certain screen resolutions. This must be due to CSS @media query which displays different layouts for different screen sizes. And somehow it didn’t work for some sizes.

1
2
3
4
5
@media screen and (max-width: 800px) {
#site-header {
display: none;
}
}

A bit about the rules

The @media rule is used in media queries to apply different styles for different media types/devices.

Media queries can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.

So I go to Wordpress Dashboard -> Appearance -> Editor to examine CSS files. Unsurprisingly, there are a bunch of media queries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@media (min-width: 600px) and (max-width: 767px) {
.main-navigation {
padding: 0;
}
.site-header .pushmenu {
margin-top:0px;
}
.social-networks li a {
line-height:2.1em !Important;
}
.search {
display: none !important;
}
.customer blockquote {
padding: 10px;
text-align: justify;
}
}

The .search selector is suspicious display: none !important;

The important directive is, well, quite important

It means, essentially, what it says; that ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’

In normal use, a rule defined in an external stylesheet is overruled by a style defined in the head of the document, which, in turn, is overruled by an in-line style within the element itself (assuming equal specificity of the selectors). Defining a rule with the !important 'attribute' (?) discards the normal concerns as regards the ‘later’ rule overriding the ‘earlier’ ones.

Luckily, this theme allows the ability to Edit CSS, so I can override that to a block attribute to always show search page

a3