I'm showing icons from an icon font inside rounded containers.
This is the web page
This is the CSS for the icons
.icon .circle:before{
font-family: "PlayAgenda", sans-serif !important;
-webkit-font-smoothing: antialiased;
-o-transform: scale(1);
text-rendering: optimizeLegibility;
font-style: normal;
margin: 0 auto;
}
.icon .circle {
display: inline-block;
font-weight: normal;
border-radius: 50%;
width: 1px;
height: 1px;
padding: 32px;
margin: 0;
overflow: hidden;
font-size: 57px;
text-align: center;
position: relative;
}
.icon .circle:before{
color: #FFFFFF;
position: absolute;
margin-top: -0.4em;
margin-left: -25px;
display: block;
width: 50px;
top: 50%;
}
.icon.console .circle:before{ content: 'A'; }
.icon.board .circle:before{ content: 'G'; }
.icon.card .circle:before{ content: 'C'; }
.icon.war .circle:before{ content: 'B'; }
.icon.gdr .circle:before{ content: 'E'; }
.icon.console-background .circle{ background-color: #009EDB; }
.icon.board-background .circle { background-color: #8CC63E; }
.icon.card-background .circle{ background-color: #7F3F98; }
.icon.war-background .circle { background-color: #F04F38; }
.icon.gdr-background .circle{ background-color: #FAA619; }
I want to achieve this result
But on Android and OSX I get this
Could someone help me figure how to fix this?
Related
I came across this amazing looking 404 error page https://codepen.io/dsenneff/pen/mjZgmN
I followed the tutorial here to make the SVG mobile responsive but I couldn't get it to work.
Any hint you can provide would highly be appreciated.
Thanks
CSS
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,900");
body,
html {
margin: 0;
padding: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
background-color: #09334f;
position: relative;
}
#yetiSVG {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: inline-block;
}
#lightSVG {
position: absolute;
top: -24rem;
left: 0;
overflow: visible;
display: inline-block;
}
.content {
padding: 5rem 3rem 0 25rem;
position: relative;
z-index: 10;
font-family: "Source Sans Pro", sans-serif;
color: #fff;
}
.content h3 {
margin: 0 0 0.8rem;
font-size: 2.625rem;
font-weight: 900;
line-height: 120%;
}
.content p {
font-size: 1.25rem;
font-weight: normal;
line-height: 150%;
color: #d1e2ed;
}
.content p span {
text-decoration: line-through;
}
svg {
max-width: 100%;
}
.svg-container {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
padding-bottom: 100%;
/* vertical-align: middle; */
/* overflow: hidden; */
}
I was trying to make this parallax-website. In the CSS I am defining properties for .image1 . So I wrote down properties and then just below it I again wrote some properties for the same class .image1. But only the ~ opacity, position (from 1st) and other properties defined (from 2 time) were applied. I checked the it using Inspect Element and all other properties were cut down. I am not able to understand why this is happening. Please help me.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.70;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg');
min-height: 100%;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
I think you need to mention background image as "background-image". You are declaring background property individually. or you can write like that way :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-family: 'Lato', sans-serif;
font-weight: 400;
line-height: 1.8em;
color: #666;
}
.image1 {
background: url('https://jolly-kalam-23776e.netlify.app/parallaxsite/img/image1.jpg') no-repeat fixed center center;
background-size: cover;
min-height: 100%;
opacity: 0.70;
position: relative;
}
.text-box-image1 {
position: absolute;
/* To bring that box in center */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.text-image1 {
font-size: 27px;
letter-spacing: 8px;
color: white;
background-color: #111;
padding: 20px;
}
.section-one {
padding: 50px 80px;
}
.section-one .heading {
text-align: center;
letter-spacing: 1px;
margin: 20px;
}
p {
text-align: center;
font-size: 17px;
}
<div class="image1">
<div class="text-box-image1">
<span class="text-image1">PARALLAX WEBSITE</span>
</div>
</div>
This code works in Chrome, the cursor appears as a pointer and registering the click event as it should, but not in Firefox. Can you tell my why?
#import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');
button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
background: none !important;
text-indent: initial;
-webkit-font-smoothing: antialiased;
vertical-align: top;
font-size: 0;
width: 0;
height: 0;
border: none;
}
button.slick-arrow:before {
display: block;
position: absolute;
font: normal 32px/1 'dashicons';
padding: 8px;
opacity: 0.6;
color: #000;
cursor: pointer;
}
button.slick-arrow:hover:before {
opacity: 1;
}
button.slick-prev:before {
content: "\f341";
left: 8px;
}
button.slick-next:before {
content: "\f345";
right: 8px;
}
<button class="slick-prev slick-arrow">Click me!</button>
The issue lays within the positioning of your before element. Since it is positioned absolutely, and the button itself has it's width and height set to 0, the element size is zero, and you cannot interact with it.
To fix this, remove width: 0; and height: 0; from the button, and remove the position: absolute; from the :before-pseudo.
Additionally, add cursor: pointer; to your button.
#import url('https://rawcdn.githack.com/WordPress/dashicons/242e2712334e30648b328e91c44366d55ef2146a/icon-font/css/dashicons.css');
button.slick-arrow,
button.slick-arrow:hover,
button.slick-arrow:focus {
background: none !important;
text-indent: initial;
-webkit-font-smoothing: antialiased;
vertical-align: top;
font-size: 0;
border: none;
cursor: pointer;
}
button.slick-arrow:before {
display: block;
font: normal 32px/1 'dashicons';
padding: 8px;
opacity: 0.6;
color: #000;
}
button.slick-arrow:hover:before {
opacity: 1;
}
button.slick-prev:before {
content: "\f341";
left: 8px;
}
button.slick-next:before {
content: "\f345";
right: 8px;
}
<button class="slick-arrow slick-prev">Click me!</button>
My jekyll sight had been running fine for a while until I add a blog post, which works perfectly locally, but then I get an error via email from GitHub saying
SCSS file Desktop/my-blog/css/style.scss has an error on line 1: File to import not found or unreadable: ../_sass/bootstrap. Load path: /hoosegow/.bundle/ruby/2.4.0/gems/jekyll-theme-primer-0.4.0/_sass.
I went to report this as an issue on the theme I was using, but I noticed that others were having similar build issues with Jekyll. Here's the link to that thread
Also, here is my style.css file, which seems to be causing the error.
---
---
#import '../_sass/bootstrap';
#import '../_sass/syntax-highlighting';
%oswald { font-family: 'Oswald', sans-serif; }
%roboto { font-family: 'Roboto Condensed', sans-serif; }
body {
#extend %roboto;
font-size: 18px;
line-height: 30px;
padding-top: 51px;
-webkit-font-smoothing: antialiased;
}
p {
margin-bottom: 30px;
}
section, header, footer, main, article, nav, aside { position: relative; }
a {
outline: none !important;
text-decoration: none !important;
transition: all 225ms ease;
color: rgb(19, 100, 214);
&:hover { color: #6165FF; }
}
.btn {
text-transform: uppercase;
font-weight: 400;
#extend %oswald;
}
h1, h2, h3, h4, h5, h6 { #extend %oswald; }
::selection {
background: #086AFF;
color: #fff;
}
nav.navbar {
margin: 0;
a {
text-transform: uppercase;
font-size: 16px;
}
.navbar-brand {
text-transform: none;
i {
transition: inherit;
color: rgb(19, 100, 214);
transform: scale(1);
}
&:hover i {
color: rgb(19, 100, 214);
transform: scale(1.35);
}
}
}
.title-group {
text-align: center;
padding: 0 15px;
margin: 50px 0 100px;
p {
max-width: 800px;
margin: 25px auto 0;
}
}
h1.special {
position: relative;
text-align: center;
overflow: hidden;
margin: 4;
text-transform: uppercase;
#extend %oswald;
font-size: 69px;
line-height: 69px;
font-weight: 700;
color: rgb(19, 100, 214);
span {
display: inline-block;
position: relative;
padding: 0 15px;
max-width: 1000px;
&:before, &:after {
content: '';
position: absolute;
display: block;
height: 1px;
background: #e8e8e8;
width: 99999999px;
top: 50%;
transform: translateY(-50%);
}
&:before { left: 100%; }
&:after { right: 100%; }
}
}
.tile {
position: relative;
box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.135);
margin-bottom: 125px;
.inner-guts { padding: 50px; }
h2 {
margin: 0;
font-size: 100px;
font-weight: 400;
letter-spacing: -0.05em;
line-height: 100px;
}
.featurette {
position: relative;
display: block;
overflow: hidden;
margin-bottom: 15px;
width: 100%;
height: 550px;
background-color: #e8e8e8;
.img {
background-size: cover;
background-position: 50% 0;
background-repeat: no-repeat;
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 225ms ease;
transform: scale(1);
&:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
content: '';
background: #000;
opacity: 0.4;
transition: all 225ms ease;
}
}
iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&:hover {
.img {
transform: scale(1.2);
&:before {
opacity: 0.2;
}
}
}
}
.excerpt {
font-size: 35px;
font-weight: 300;
line-height: 49px;
color: #484848;
p {
margin: 0;
}
}
.tags {
position: absolute;
left: 0;
top: 100%;
margin-top: 15px;
span {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
text-transform: uppercase;
#extend %oswald;
}
}
.read-more {
margin-top: 50px;
width: 100%;
max-width: 175px;
position: relative;
padding-right: 75px;
i {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-54%);
font-size: 31px;
line-height: 100%;
}
}
}
aside {
font-size: 17px;
color: #525252;
margin: 16px 0;
#extend %oswald;
span {
text-transform: uppercase;
margin: 0 5px;
}
}
.site-footer {
margin-top: 200px;
}
.pagination-wrap {
text-align: center;
}
.topper {
height: 500px;
position: relative;
.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
}
}
pre {
margin: 75px -100px;
}
#media only screen and (max-width : 991px) {
pre {
margin-left: 0;
margin-right: 0;
}
}
#media only screen and (max-width : 480px) {
.tile .featurette, .topper {
height: 300px;
}
h1.special,
.tile h2 {
font-size: 40px;
line-height: 44px;
}
.tile .inner-guts {
padding: 15px 25px;
}
.tile .excerpt {
font-size: 22px;
line-height: 35px;
}
}
Any advice is extremely helpful!
The error is telling you that the file bootstrap.scss can't be imported; either because it isn't in the location specified (the theme /_scss/ directory) or because it isn't called bootstrap.scss. The link you posted seems completely unrelated.
I'm building a website with WordPress, and the theme I am using has hover on post effect. I would like to reverse it, so the post image would be darker before hover, and full color with mouse on it.
Website: http://fotozakatek.com
I'm not really familiar with CSS, but that's probably the right piece of code:
.posts { margin-top: -3.95%; }
.posts .post {
display: block;
background-color: #ffffff;
width: 30.7%;
margin-top: 3.95%;
padding-bottom: 30.7%;
float: left;
position: relative;
background-size: cover;
background-position: center;
}
.posts .post + .post { margin-left: 3.95%; }
.posts .post:nth-child(3n+1) { margin-left: 0; }
.post-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.archive-post-overlay {
background: #fff;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.sticky .post-overlay > p {
position: absolute;
top: 30px;
left: 30px;
font-size: 0.875em;
text-transform: uppercase;
color: #999;
}
.sticky .post-overlay > p span {
margin-right: 9px;
font-size: 18px;
position: relative;
bottom: -1px;
}
.archive-post-header {
position: absolute;
right: 30px;
bottom: 30px;
left: 30px;
}
.archive-post-title {
font-size: 1.375em;
line-height: 120%;
font-weight: 700;
text-transform: uppercase;
color: #222;
word-break: break-word;
-ms-word-break: break-word;
}
.archive-post-date {
margin-bottom: 5px;
font-size: 0.875em;
color: #999;
text-transform: uppercase;
}
.post:hover .post-overlay { opacity: 1; }
.post:hover .archive-post-title { color: #3bc492; }
You have an overlay that is hidden (opacity: 0), then on :hover, the overlay shows (opacity: 1). You want to reverse those so that the overlay is visible by default, and hidden on hover.
These changes are in style.css
~ line 604, in .post-overlay remove the opacity: 0.5
~ line 669, in .has-post-thumbnail .post-overlay remove opacity: 0
~ line 664, in .post:hover .post-overlay change opacity: 1 to opacity: 0.