I would like to customize this answer from a api. I tried with css grid but cant do it. I don't know if I am adding classes well
#import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
.image-grid{
--gap: 16px;
--num-cols: 5;
--row-height: 500px;
box-sizing: border-box;
padding: var(--gap);
display: grid;
grid-template-columns: repeat(var(--num-cols),1fr);
grid-auto-rows: var(--row-height);
gap: var(--gap);
}
.image-grid > img {
width: 100%;
height: 100%;
object-fit: cover;
}
#media screen and (max-width: 1024px) {
.image-grid {
--num-cols: 2;
--row-height: 150px;
}
}
Related
I want to show some global message on my Docusaurus site. Something like:
https://codesandbox.io/s/duudl
https://next.ant.design/components/alert/
Is this possible?
You will have to inject the DOM via scripts. An example is React Native website where they injected feedback banners at the bottom of the page - https://facebook.github.io/react-native/docs/getting-started
Look at their repo and the script they used.
Update: you can now add it to the docusaurus.config.js file:
themeConfig:
/** #type {import('#docusaurus/preset-classic').ThemeConfig} */
({
announcementBar: {
id: 'support_ukraine',
content:
'Support Ukraine 🇺🇦 <a target="_blank" rel="noopener noreferrer" href="https://opensource.facebook.com/support-ukraine"> Help Provide Humanitarian Aid to Ukraine</a>.',
backgroundColor: '#20232a',
textColor: '#fff',
isCloseable: false,
},
...
You can style it with these CSS selectors in src/css/customTheme.scss:
/* Announcement banner */
:root {
--docusaurus-announcement-bar-height: auto !important;
}
div[class^="announcementBar"][role="banner"] {
border-bottom-color: var(--deepdark);
button.close {
svg {
fill: white;
}
}
}
div[class^="announcementBarContent"] {
line-height: 40px;
font-size: 20px;
font-weight: bold;
padding: 8px 30px;
a {
text-decoration: underline;
display: inline-block;
color: var(--brand) !important;
&:hover {
color: var(--ifm-color-primary) !important;
}
}
}
#media only screen and (max-width: 768px) {
.announcement {
font-size: 18px;
}
}
#media only screen and (max-width: 500px) {
.announcement {
font-size: 15px;
line-height: 22px;
padding: 6px 30px;
}
}
I am using a number of Pseudo elements throughout a website I am building. They all look great except in IE. I am testing it in IE 10 and 11 to start off with.
For some reason the positioning is always slightly off - in the example below, about 5 px for each element.
I have tried changing the display and positions, setting the origins, but nothing seems to work.
Any help would be appreciated.
.home .welcome-row h1 {
position: relative;
margin-bottom: 0;
}
.home .welcome-row h1:before {
background-image: url('/wp-content/uploads/2017/10/welcome-line-1.png');
-webkit-transform: translateY(-23px);
-moz-transform: translateY(-23px);
-o-transform: translateY(-23px);
transform: translateY(-23px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
.home .welcome-row h1:after {
background-image: url('wp-content/uploads/2017/10/welcome-line-2.png');
-webkit-transform: translateY(5px);
-moz-transform: translateY(5px);
-o-transform: translateY(5px);
transform: translateY(5px);
background-size: 260px 13px;
background-repeat: no-repeat;
width: 260px;
height: 13px;
content:"";
position: absolute;
display: block;
}
*EDIT - I have added any additional theme styles that are applied incase they have any relevance.
*:after,
*:before {
box-sizing:border-box
}
:-webkit-any(article,aside,nav,section) h1 {
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}
user agent stylesheet
h1 {
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
h1 {
margin: 0;
padding: 0;
}
I am unable to change padding for one element on mobile devices. The queries are working for several properties, but padding will not work (neither will line height if I try to use that). Basic styling in custom css is:
#topright {
font-size: 20px;
letter-spacing: 4px;
color: rgba(255,255,255,1.0);
padding-top: 8px !important;
padding-bottom: 8px !important;
font-weight: 200;
}
Media query for phone is
/* Custom, iPhone Retina */
#media only screen and (min-width : 320px) {
.header-2 .logo {
width: 250px;
}
.footer-widget ul li {
width: 100%;
}
.footer-widget ul {
padding-left: 0;
padding-right: 0;
}
div.vc_column-inner vc_custom_1476556729591 {
padding-left: 0;
padding-right: 0;
}
.footer-widget .textwidget p {
text-align: center;
}
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
The smaller padding number will not be applied. If I remove !important from main css, then the phone query gets applied to all devices. It's weird because all the other properties for the phone query are working fine.
From this helpful page on media queries, min-width: 320px means:
"If [device width] is greater than or equal to 320px, then do {...}"
In other words, the media query you think you created to target only iPhone will actually be firing for all devices which have a width of 320px or greater. Instead, I think you intended to use max-width
So use this CSS:
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
.header-2 .logo {
width: 250px;
}
...
#topright {
padding-top: 1px;
padding-bottom: 1px
}
}
And you should also remove the !important directives from your main.css file.
Today I have noticed a weird behavior of Safari (9.0) when I applied a transition to an element that was translating on the X axis while the width was also increasing.
I have reproduced the behavior in this JsFiddle. Here is an embed code for those who like it better. In Firefox and Chrome it looks pretty smooth but not in Safari, does anyone have a solution or a best way to achieve the same effect?
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() { container.classList.toggle('open'); });
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, transform 1s;
}
.open ul {
width: 200%;
transform: translateX(-50%);
}
li {
/* Just some style first */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
padding: 1em 0;
display: inline-block;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Re-posting as an answer.
Here is the jsFiddle result and snippet as below:
var button = document.getElementsByTagName('button')[0];
var container = document.getElementsByTagName('div')[0];
var timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50, ease: Power2.easeInOut });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Hope this is helpful.
P.S. I have been using GSAP for quite a while now and I don't remember getting stuck on any browser-specific issues unless a browser would do something differently. A little research into GSAP and it would tell you that browser compatibility is one of their main selling points.
By animating margin-left instead of translateX the result is acceptable in Safari:
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: width 1s, margin-left 1s;
}
.open ul {
width: 200%;
margin-left:-100%;
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
Using scaleX instead of animating width is smoother, but probably not what you want.
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
});
.container {
width: 100%;
overflow: hidden;
}
ul {
display: block;
width: 100%;
padding: 0;
margin: 0;
transition: transform 1s;
}
.open ul {
transform: translateX(-50%) scaleX(2);
}
li {
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
background-color: red;
display: inline-block;
padding: 1em 0;
width: calc(50% - 4px);
}
li:first-child {
background-color: green;
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
So, I will try to sum up the two best solutions here : one with CSS transform and the other with Javascript animation (GSAP).
CSS TRANSFORM
In terms of performance, it is recommended to only animate transforms (translate, scale, rotate) and opacity. If you are interested in more optimisation details you can have a look at this article by Anna Migas.
So, as #Meiko suggested, the best solution is to only animate scale and translate properties. Here is a code sample (and the JSFiddle)
var button = document.getElementsByTagName('button')[0],
container = document.getElementsByTagName('div')[0];
button.addEventListener('click', function() {
container.classList.toggle('open');
})
.container,
ul {
width: 100%;
}
ul {
overflow: hidden;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
position: relative;
transition: transform 1s;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li::before {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
background-color: red;
z-index: -1;
transition: transform 1s;
}
li:first-child::before {
background-color: green;
}
.open li:first-child {
transform: translateX(-100%);
}
.open li:nth-of-type(2) {
transform: translateX(-50%);
}
.open li:nth-of-type(2)::before {
transform: scaleX(2);
}
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Only use a tiny bit of Javascript to toggle class,
The browser support is quite good (needs vendor-specific properties and some testing),
Really fast and light on GPU memory.
CONS:
Pretty limited in terms of usage (the actual width of the second cell stays the same),
Needs more lines of CSS.
JS ANIMATION (WITH GSAP)
This solution has been suggested by #Tahir Ahmed and use the GSAP library. As a side note, I really think that this is the best js library out there for this kind of animation. Here is a snippet of how it works (and the JSFiddle):
var button = document.getElementsByTagName('button')[0],
timeline = new TimelineMax({ paused: true });
timeline.to('ul', 1, { width: '200%', xPercent: -50 });
button.addEventListener('click', function() {
timeline.progress() > 0 ? timeline.reverse() : timeline.play();
})
.container {
width: 100%;
overflow: hidden;
}
ul {
width: 100%;
/* reset default browser styles */
padding: 0;
margin: 0;
}
li {
display: inline-block;
width: calc(50% - 2px);
background-color: red;
/* Just some style */
font-family: sans-serif;
color: #fff;
text-align: center;
text-transform: uppercase;
padding: 1em 0;
}
li:first-child {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<div class="container">
<ul>
<li>Test</li>
<li>Test</li>
</ul>
</div>
<button type="button">Toggle translation</button>
PROS:
Really flexible, sky is the limit!
You can animate properties such as display (you can't in CSS),
Compatible with every browser out there (down to IE6).
CONS:
Require a third party library (about 30kb),
Seems a bit harder for the GPU (although it needs more testing to be sure).
In the end it really depends on the animation you need but if it get's a little bit more complex than moving a container around then I will choose GSAP.
I have 2 inline divs inside a parent div:
.parent {
width: 200px;
height: 200px;
}
.div1 {
float: left;
width: 10px;
height: 10px;
background-color: blue;
}
.div2 {
position: relative;
height: 100%;
width: 100%;
right: 0px;
float: left;
background-color: red;
}
The problem is that div2 inherits the width of the parent div instead of the remaining width (i.e. 190px) and ultimately div2 ends up below div1.
Here is an example using jsfiddle: http://jsfiddle.net/jZBE6/
How can I make div2 have a width of 190px without setting a static width?
You could do it this way:
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:90%;
float:left;
background-color:red;
}
You could also do it without floating the right div (this is the way I would prefer):
.parent{
width:200px;
height:200px;
}
.div1 {
float: left;
width:10px;
height:10px;
background-color:blue;
}
.div2{
height:100%;
width:100%;
margin-left:10px;
background-color:red;
}
in case you really want a dynamic width (not just 10px case), you can't use css. But you can use javascript to set width dynamically http://jsfiddle.net/jZBE6/19/