Last active
September 24, 2022 14:03
-
-
Save ssaunier/dbf2b76987ec62258d7ad51f0162a0ed to your computer and use it in GitHub Desktop.
Boilerplate CSS code for React Giphy
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #root > div { | |
| display: flex; | |
| height: 100vh; | |
| } | |
| .left-scene { | |
| flex: 0 0 60%; | |
| position: sticky; | |
| display: flex; | |
| flex-direction: column; | |
| .form-search { | |
| padding: 60px 60px 60px 120px; | |
| border: none; | |
| font-size: 2.6em; | |
| box-shadow: none; | |
| &:focus { | |
| box-shadow: none; | |
| } | |
| } | |
| &:before { | |
| content: '\F002'; | |
| position: absolute; | |
| top: 35px; | |
| left: 60px; | |
| font-family: FontAwesome; | |
| font-size: 2.6em; | |
| opacity: 0.4; | |
| } | |
| .selected-gif { | |
| text-align: center; | |
| display: flex; | |
| flex-grow: 1; | |
| height: calc(100vh - 232px); | |
| background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.22'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); | |
| .gif { | |
| max-width: 80%; | |
| max-height: 80%; | |
| margin: auto; | |
| } | |
| } | |
| } | |
| .right-scene { | |
| flex: 0 0 40%; | |
| background-color: #ecf0f1; | |
| overflow: scroll; | |
| .gif-list { | |
| column-count: 2; | |
| column-gap: 5px; | |
| padding: 5px; | |
| .gif { | |
| width: 100%; | |
| margin: 5px; | |
| cursor: pointer; | |
| } | |
| } | |
| } |
Hi @ssaunier
The search logo doesn't seem to show up, even with the hack posted previously
best regards
Wilson
when I used this fontawesome cdn below the search icon showed correctly
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi @ssaunier,
I also had issue with the search icon, I had a rectangle no matter which icon I tested.
I'm speaking for windows wsl2 ubuntu with lewagon full setup and font awesome V5.15.4.
In order to see icons, we need to had quotes around font-family (which is '5 free') and the font-weight on 900.
Same as Karel then.
&:before { content: '\f002'; position: absolute; top: 35px; left: 60px; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 2.6em; opacity: 0.4; }