balsoft/ligo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[LIGO-95] I AM A CSS GENIUS\!\!

Browse Source
This commit is contained in:
Sarah Fowler 2019-09-25 17:36:43 -04:00
parent f61a91f36f
commit f542cde283
3 changed files with 63 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gitlab-pages/website/pages/en/index.js
View File

@ -107,6 +107,7 @@ class HomeSplash extends React.Component {
const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`; const docUrl = doc => `${baseUrl}${docsPart}${langPart}${doc}`;
const SampleCode = props => ( const SampleCode = props => (
<div className="sample-code-container">
<div className="sample-code"> <div className="sample-code">
<div className="tabs"> <div className="tabs">
<div className="nav-tabs"> <div className="nav-tabs">
@ -133,6 +134,7 @@ class HomeSplash extends React.Component {
</div> </div>
</div> </div>
</div> </div>
</div>
); );
return ( return (

33
gitlab-pages/website/static/css/custom.css
View File

@ -159,15 +159,27 @@ footnote {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: var(--padding-level-4); padding: var(--padding-level-3);
} }
.home-text { .home-text {
max-width: 40%; max-width: 40%;
} }
.code-sample { .sample-code-container {
max-width: 55%; display: flex;
justify-content: center;
box-sizing: border-box;
max-width: 60%;
background: url("/img/geo.svg") top right/140px 140px no-repeat,
url("/img/geo.svg") bottom left/200px 200px no-repeat;
}
.sample-code {
max-width: 80%;
padding: 25px;
box-shadow: 0px 0px 70px rgba(13, 15, 51, 0.06);
background-color: white;
} }
blockquote { blockquote {
@ -555,12 +567,25 @@ body
} }
@media only screen and (max-width: 1023px) { @media only screen and (max-width: 1023px) {
.home-container {
flex-direction: column-reverse;
margin-top: var(--padding-level-1);
}
.home-text {
align-content: center;
text-align: center;
max-width: 90%;
padding-top: var(--padding-level-2);
}
.sample-code-container {
max-width: 100%;
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
} }
@media only screen and (min-width: 1400px) { @media only screen and (min-width: 1440px) {
.landing h4.tagline-text { .landing h4.tagline-text {
font-size: 2.25rem; font-size: 2.25rem;
} }

11
gitlab-pages/website/static/img/geo.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="283" height="293" viewBox="0 0 283 293" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5493 9.85961L22.8389 40.1643L44.2426 17.8585L14.5493 9.85961Z" fill="#FC683A"/>
<path d="M256.608 227L215 282.348L282.301 293L256.608 227Z" fill="#EFEFEF"/>
<circle cx="100" cy="154" r="74" stroke="url(#paint0_linear)" stroke-width="52"/>
<defs>
<linearGradient id="paint0_linear" x1="100" y1="54.0002" x2="100" y2="254" gradientUnits="userSpaceOnUse">
<stop stop-color="#3AA0FF"/>
<stop offset="1" stop-color="#0072DC"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B