}
.title.is-2 a {
- color: #222324;
+ color: #242424;
padding-left: 60px;
}
.title.is-2 a:hover {
- color: #1fc8db;
+ color: #11e4c4;
}
.title.is-2 .icon.is-large {
color: white;
}
- a.column:hover .title strong {
+ .hero.is-primary a.column,
+ .hero.is-primary a.column:hover {
+ color: white;
+ }
+
+ .hero.is-primary a.column:hover .title strong {
border-bottom: 1px solid;
}
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
- <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="{{ site.baseurl }}/css/bulma-docs.css">
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="{{ site.baseurl }}/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="{{ site.baseurl }}/favicons/manifest.json">
- <link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#1fc8db">
+ <link rel="mask-icon" href="{{ site.baseurl }}/favicons/safari-pinned-tab.svg" color="#11e4c4">
<link rel="shortcut icon" href="{{ site.baseurl }}/favicons/favicon.ico">
- <meta name="msapplication-TileColor" content="#1fc8db">
+ <meta name="msapplication-TileColor" content="#11e4c4">
<meta name="msapplication-TileImage" content="{{ site.baseurl }}/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="{{ site.baseurl }}/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
color: $white
@keyframes floatUp
- from
+ 0%
box-shadow: 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0), 0 0 0 rgba($black, 0)
transform: scale(0.86)
- to
+ 67%
+ box-shadow: 0 0 0 rgba($black, 0), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
+ transform: scale(1)
+ 100%
box-shadow: 0 20px 60px rgba($black, 0.05), 0 5px 10px rgba($black, 0.1), 0 1px 1px rgba($black, 0.2)
transform: scale(1)
#b
animation-delay: 1s
- animation-duration: 1s
+ animation-duration: 1.5s
animation-fill-mode: both
animation-name: floatUp
animation-timing-function: $curve
.input
border-color: $white
box-shadow: none
+
+html
+ \::-moz-selection
+ background: $primary
+ color: $primary-invert
+ \::selection
+ background: $primary
+ color: $primary-invert
}
@keyframes floatUp {
- from {
+ 0% {
box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0), 0 0 0 rgba(18, 18, 18, 0);
transform: scale(0.86);
}
- to {
+ 67% {
+ box-shadow: 0 0 0 rgba(18, 18, 18, 0), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
+ transform: scale(1);
+ }
+ 100% {
box-shadow: 0 20px 60px rgba(18, 18, 18, 0.05), 0 5px 10px rgba(18, 18, 18, 0.1), 0 1px 1px rgba(18, 18, 18, 0.2);
transform: scale(1);
}
#b {
animation-delay: 1s;
- animation-duration: 1s;
+ animation-duration: 1.5s;
animation-fill-mode: both;
animation-name: floatUp;
animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1);
border-color: white;
box-shadow: none;
}
+
+html ::-moz-selection {
+ background: #11e4c4;
+ color: white;
+}
+
+html ::selection {
+ background: #11e4c4;
+ color: white;
+}
<square150x150logo src="/favicons/mstile-150x150.png"/>\r
<square310x310logo src="/favicons/mstile-310x310.png"/>\r
<wide310x150logo src="/favicons/mstile-310x150.png"/>\r
- <TileColor>#1fc8db</TileColor>\r
+ <TileColor>#11e4c4</TileColor>\r
</tile>\r
</msapplication>\r
</browserconfig>\r
<p class="subtitle">Designed for <strong>mobile</strong>-first</p>
</a>
<a class="column has-text-centered" href="{{ site.baseurl }}/documentation/overview/modular/">
- <span class="icon is-large" style="margin-right: -15px;">
- <i class="fa fa-mobile"></i>
- </span>
<span class="icon is-large">
- <i class="fa fa-tablet"></i>
- </span>
- <span class="icon is-large" style="margin-right: 10px;">
- <i class="fa fa-desktop"></i>
+ <i class="fa fa-cubes"></i>
</span>
<p class="title is-4"><strong>Modular</strong></p>
<p class="subtitle">Just import what you <strong>need</strong></p>
<h3 class="title is-2">
<a href="{{ site.baseurl }}/documentation/components/media-object/">
<span class="icon is-large">
- <i class="fa fa-cubes"></i>
+ <i class="fa fa-magic"></i>
</span>
Versatile <strong>media object</strong>
</a>