mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-06 02:36:39 +00:00
Create and style Landing page (#2)
* readme * specify landing must show app name * clean default project * write landing page layout * add static assets for styling * add Landing page unit test install fontawesome
This commit is contained in:
Ruidy
GitHub
parent
7ccb8fb9aa
commit
ef6d97f2fc
20 changed files with 1210 additions and 127 deletions
11
README.md
11
README.md
|
|
@ -3,7 +3,8 @@
|
||||||
|
|
||||||
|
|
||||||
Social App for connecting with developers & tech enthusiasts.
|
Social App for connecting with developers & tech enthusiasts.
|
||||||
🕸 [Check it out](https://devbook.onrender.com/)
|
|
||||||
|
🕸 [Check it out!](https://devbook.onrender.com/)
|
||||||
|
|
||||||
## Tests
|
## Tests
|
||||||
|
|
||||||
|
|
@ -19,6 +20,14 @@ yarn cypress
|
||||||
|
|
||||||
and edit your E2E test cases in `cypress/integration/` folder.
|
and edit your E2E test cases in `cypress/integration/` folder.
|
||||||
|
|
||||||
|
### Unit
|
||||||
|
|
||||||
|
Open test runner with:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
yarn test
|
||||||
|
```
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
We use Github Actions to check push and pull requests.
|
We use Github Actions to check push and pull requests.
|
||||||
|
|
|
||||||
6
cypress/integration/landing.spec.js
Normal file
6
cypress/integration/landing.spec.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
describe('Landing page', () => {
|
||||||
|
it('contains app name', () => {
|
||||||
|
cy.visit('/');
|
||||||
|
cy.get('h1').contains('DevBook');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
describe('smoke', () => {
|
|
||||||
it('sees learn', () => {
|
|
||||||
cy.visit('/');
|
|
||||||
cy.get('a').contains('Learn');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
@ -3,6 +3,12 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@fortawesome/fontawesome-free": "^5.13.0",
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^1.2.28",
|
||||||
|
"@fortawesome/free-brands-svg-icons": "^5.13.0",
|
||||||
|
"@fortawesome/free-regular-svg-icons": "^5.13.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^5.13.0",
|
||||||
|
"@fortawesome/react-fontawesome": "^0.1.9",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.3.2",
|
"@testing-library/react": "^9.3.2",
|
||||||
"@testing-library/user-event": "^7.1.2",
|
"@testing-library/user-event": "^7.1.2",
|
||||||
|
|
@ -38,4 +44,4 @@
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,40 +4,18 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#17a2b8" />
|
||||||
<meta
|
<meta
|
||||||
name="description"
|
name="description"
|
||||||
content="Web site created using create-react-app"
|
content="Create developer profiles, portfolio, share and get help from other
|
||||||
|
devs"
|
||||||
/>
|
/>
|
||||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
<!--
|
|
||||||
manifest.json provides metadata used when your web app is installed on a
|
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
||||||
-->
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
<!--
|
<title>DevBook</title>
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
|
||||||
Only files inside the `public` folder can be referenced from the HTML.
|
|
||||||
|
|
||||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
|
||||||
-->
|
|
||||||
<title>React App</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<!--
|
|
||||||
This HTML file is a template.
|
|
||||||
If you open it directly in the browser, you will see an empty page.
|
|
||||||
|
|
||||||
You can add webfonts, meta tags, or analytics to this file.
|
|
||||||
The build step will place the bundled scripts into the <body> tag.
|
|
||||||
|
|
||||||
To begin the development, run `npm start` or `yarn start`.
|
|
||||||
To create a production bundle, use `npm run build` or `yarn build`.
|
|
||||||
-->
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"short_name": "React App",
|
"short_name": "DevBook",
|
||||||
"name": "Create React App Sample",
|
"name": "DevBook | Social App for devs",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "favicon.ico",
|
"src": "favicon.ico",
|
||||||
|
|
@ -20,6 +20,6 @@
|
||||||
],
|
],
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"theme_color": "#000000",
|
"theme_color": "#17a2b8",
|
||||||
"background_color": "#ffffff"
|
"background_color": "#000000"
|
||||||
}
|
}
|
||||||
38
src/App.css
38
src/App.css
|
|
@ -1,38 +0,0 @@
|
||||||
.App {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-logo {
|
|
||||||
height: 40vmin;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.App-logo {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color: #282c34;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(10px + 2vmin);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-link {
|
|
||||||
color: #61dafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { render } from '@testing-library/react';
|
import {render} from '@testing-library/react';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
|
|
||||||
test('renders learn react link', () => {
|
test('renders learn react link', () => {
|
||||||
const { getByText } = render(<App />);
|
const {getAllByText} = render(<App />);
|
||||||
const linkElement = getByText(/learn react/i);
|
const title = getAllByText('DevBook');
|
||||||
expect(linkElement).toBeInTheDocument();
|
expect(title.length).toEqual(2);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
64
src/App.tsx
64
src/App.tsx
|
|
@ -1,26 +1,48 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import logo from './logo.svg';
|
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
|
||||||
import './App.css';
|
import {faCode} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
const App = () => {
|
||||||
function App() {
|
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<>
|
||||||
<header className="App-header">
|
<nav className="navbar bg-dark">
|
||||||
<img src={logo} className="App-logo" alt="logo" />
|
<h1>
|
||||||
<p>
|
<a href="dashboard.html">
|
||||||
Edit <code>src/App.tsx</code> and save to reload.
|
<FontAwesomeIcon icon={faCode} /> {' '} DevBook
|
||||||
</p>
|
</a>
|
||||||
<a
|
</h1>
|
||||||
className="App-link"
|
<ul>
|
||||||
href="https://reactjs.org"
|
<li>
|
||||||
target="_blank"
|
<a href="profiles.html">Developers</a>
|
||||||
rel="noopener noreferrer"
|
</li>
|
||||||
>
|
<li>
|
||||||
Learn React
|
<a href="register.html">Register</a>
|
||||||
</a>
|
</li>
|
||||||
</header>
|
<li>
|
||||||
</div>
|
<a href="login.html">Login</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<section className="landing">
|
||||||
|
<div className="dark-overlay">
|
||||||
|
<div className="landing-inner">
|
||||||
|
<h1 className="x-large">DevBook</h1>
|
||||||
|
<p className="lead">
|
||||||
|
Create developer profiles, portfolio, share and get help from
|
||||||
|
other devs
|
||||||
|
</p>
|
||||||
|
<div className="buttons">
|
||||||
|
<a href="register.html" className="btn btn-primary">
|
||||||
|
Sign up
|
||||||
|
</a>
|
||||||
|
<a href="login.html" className="btn btn-light">
|
||||||
|
Login
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|
|
||||||
|
|
@ -1,13 +0,0 @@
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
|
||||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
||||||
monospace;
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import './index.css';
|
import './static/css/style.min.css';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import * as serviceWorker from './serviceWorker';
|
import * as serviceWorker from './serviceWorker';
|
||||||
|
|
||||||
|
|
@ -8,10 +8,7 @@ ReactDOM.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>,
|
</React.StrictMode>,
|
||||||
document.getElementById('root')
|
document.getElementById('root'),
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want your app to work offline and load faster, you can change
|
|
||||||
// unregister() to register() below. Note this comes with some pitfalls.
|
|
||||||
// Learn more about service workers: https://bit.ly/CRA-PWA
|
|
||||||
serviceWorker.unregister();
|
serviceWorker.unregister();
|
||||||
|
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
|
||||||
<g fill="#61DAFB">
|
|
||||||
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
|
||||||
<circle cx="420.9" cy="296.5" r="45.7"/>
|
|
||||||
<path d="M520.5 78.1z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 2.6 KiB |
542
src/static/css/style.min.css
vendored
Normal file
542
src/static/css/style.min.css
vendored
Normal file
|
|
@ -0,0 +1,542 @@
|
||||||
|
.m-1 {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
.my-1 {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.p-1 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.py-1 {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
.m-2 {
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
.my-2 {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.p-2 {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.py-2 {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.m-3 {
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
|
.my-3 {
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
.p-3 {
|
||||||
|
padding: 3rem;
|
||||||
|
}
|
||||||
|
.py-3 {
|
||||||
|
padding: 3rem 0;
|
||||||
|
}
|
||||||
|
.m-4 {
|
||||||
|
margin: 4rem;
|
||||||
|
}
|
||||||
|
.my-4 {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
.p-4 {
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
||||||
|
.py-4 {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
.m-5 {
|
||||||
|
margin: 5rem;
|
||||||
|
}
|
||||||
|
.my-5 {
|
||||||
|
margin: 5rem 0;
|
||||||
|
}
|
||||||
|
.p-5 {
|
||||||
|
padding: 5rem;
|
||||||
|
}
|
||||||
|
.py-5 {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
.m-1 {
|
||||||
|
margin: 1rem;
|
||||||
|
}
|
||||||
|
.my-1 {
|
||||||
|
margin: 1rem 0;
|
||||||
|
}
|
||||||
|
.p-1 {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
.py-1 {
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
.m-2 {
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
.my-2 {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.p-2 {
|
||||||
|
padding: 2rem;
|
||||||
|
}
|
||||||
|
.py-2 {
|
||||||
|
padding: 2rem 0;
|
||||||
|
}
|
||||||
|
.m-3 {
|
||||||
|
margin: 3rem;
|
||||||
|
}
|
||||||
|
.my-3 {
|
||||||
|
margin: 3rem 0;
|
||||||
|
}
|
||||||
|
.p-3 {
|
||||||
|
padding: 3rem;
|
||||||
|
}
|
||||||
|
.py-3 {
|
||||||
|
padding: 3rem 0;
|
||||||
|
}
|
||||||
|
.m-4 {
|
||||||
|
margin: 4rem;
|
||||||
|
}
|
||||||
|
.my-4 {
|
||||||
|
margin: 4rem 0;
|
||||||
|
}
|
||||||
|
.p-4 {
|
||||||
|
padding: 4rem;
|
||||||
|
}
|
||||||
|
.py-4 {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
.m-5 {
|
||||||
|
margin: 5rem;
|
||||||
|
}
|
||||||
|
.my-5 {
|
||||||
|
margin: 5rem 0;
|
||||||
|
}
|
||||||
|
.p-5 {
|
||||||
|
padding: 5rem;
|
||||||
|
}
|
||||||
|
.py-5 {
|
||||||
|
padding: 5rem 0;
|
||||||
|
}
|
||||||
|
.bg-primary {
|
||||||
|
background-color: #17a2b8;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-light {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
border: #ccc 1px solid;
|
||||||
|
}
|
||||||
|
.bg-dark {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-danger {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-success {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.bg-white {
|
||||||
|
background-color: #fff;
|
||||||
|
color: #333;
|
||||||
|
border: #ccc 1px solid;
|
||||||
|
}
|
||||||
|
.dark-overlay {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
.x-large {
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.large {
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.lead {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.text-primary {
|
||||||
|
color: #17a2b8;
|
||||||
|
}
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
padding: 0.4rem 1.3rem;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
}
|
||||||
|
.btn.btn-primary {
|
||||||
|
background-color: #17a2b8;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn.btn-primary:hover {
|
||||||
|
background: #1ab6cf;
|
||||||
|
}
|
||||||
|
.btn.btn-dark {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn.btn-dark:hover {
|
||||||
|
background: #3f474e;
|
||||||
|
}
|
||||||
|
.btn.btn-light {
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.btn.btn-light:hover {
|
||||||
|
background: #626d78;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
.btn.btn-danger {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn.btn-danger:hover {
|
||||||
|
background: #e04b59;
|
||||||
|
}
|
||||||
|
.btn.btn-success {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn.btn-success:hover {
|
||||||
|
background: #2dbc4e;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
max-width: 1100px;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 2rem;
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
.alert {
|
||||||
|
padding: 0.8rem;
|
||||||
|
margin: 1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
background-color: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
.alert.alert-primary {
|
||||||
|
background-color: #17a2b8;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.alert.alert-dark {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.alert.alert-success {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.alert.alert-danger {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.round-img {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
height: 1px;
|
||||||
|
background: #ccc;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.3rem;
|
||||||
|
background: #f4f4f4;
|
||||||
|
color: #333;
|
||||||
|
border-radius: 1rem;
|
||||||
|
}
|
||||||
|
.badge.badge-primary {
|
||||||
|
background-color: #17a2b8;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.badge.badge-dark {
|
||||||
|
background-color: #343a40;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.badge.badge-success {
|
||||||
|
background-color: #28a745;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.badge.badge-danger {
|
||||||
|
background-color: #dc3545;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.table th,
|
||||||
|
.table td {
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.table th {
|
||||||
|
background: #f4f4f4;
|
||||||
|
}
|
||||||
|
.form-group {
|
||||||
|
margin: 1.2rem 0;
|
||||||
|
}
|
||||||
|
.form-text {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
.form input[type='text'],
|
||||||
|
.form input[type='email'],
|
||||||
|
.form input[type='password'],
|
||||||
|
.form input[type='date'],
|
||||||
|
.form select,
|
||||||
|
.form textarea {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.4rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
.form input[type='submit'] {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
.form .social-input {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.form .social-input i {
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
.form .social-input i.fa-twitter {
|
||||||
|
color: #38a1f3;
|
||||||
|
}
|
||||||
|
.form .social-input i.fa-facebook {
|
||||||
|
color: #3b5998;
|
||||||
|
}
|
||||||
|
.form .social-input i.fa-instagram {
|
||||||
|
color: #3f729b;
|
||||||
|
}
|
||||||
|
.form .social-input i.fa-youtube {
|
||||||
|
color: #c4302b;
|
||||||
|
}
|
||||||
|
.form .social-input i.fa-linkedin {
|
||||||
|
color: #0077b5;
|
||||||
|
}
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.hide-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
margin-top: 8rem;
|
||||||
|
}
|
||||||
|
.x-large {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
.large {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.lead {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.navbar ul {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.navbar h1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.dash-buttons a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
.profile {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.profile ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.profile-grid {
|
||||||
|
grid-template-areas: 'top' 'about' 'exp' 'edu' 'github';
|
||||||
|
}
|
||||||
|
.profile-about .skills {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.post {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.post a,
|
||||||
|
.post button {
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font-family: 'Raleway', sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
background-color: white;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #17a2b8;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.7rem 2rem;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
border-bottom: solid 1px #17a2b8;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.navbar ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.navbar a {
|
||||||
|
color: white;
|
||||||
|
padding: 0.45rem;
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
}
|
||||||
|
.navbar a:hover {
|
||||||
|
color: #17a2b8;
|
||||||
|
}
|
||||||
|
.landing {
|
||||||
|
position: relative;
|
||||||
|
background: url('../img/showcase.jpg') no-repeat center center/cover;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.landing-inner {
|
||||||
|
color: white;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.profile {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 4fr 2fr;
|
||||||
|
grid-gap: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.profile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: 'top top' 'about about' 'exp edu' 'github github';
|
||||||
|
grid-gap: 1rem;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-top {
|
||||||
|
grid-area: top;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-top img {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-top .icons a {
|
||||||
|
color: white;
|
||||||
|
margin: 0 0.3rem;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-top .icons a:hover {
|
||||||
|
color: #343a40;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-about {
|
||||||
|
grid-area: about;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-about .skills {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-exp {
|
||||||
|
grid-area: exp;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-edu {
|
||||||
|
grid-area: edu;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-exp > div,
|
||||||
|
.profile-grid .profile-edu > div {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: #ccc 1px dotted;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-exp > div:last-child,
|
||||||
|
.profile-grid .profile-edu > div:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-exp > div p,
|
||||||
|
.profile-grid .profile-edu > div p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-github {
|
||||||
|
grid-area: github;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-github .repo {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-github .repo > div:first-child {
|
||||||
|
flex: 7;
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
.profile-grid .profile-github .repo > div:last-child {
|
||||||
|
flex: 3;
|
||||||
|
flex-basis: 30%;
|
||||||
|
}
|
||||||
|
.post-form-header {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
.post {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
grid-gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.post > div:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.post img {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
BIN
src/static/img/showcase.jpg
Normal file
BIN
src/static/img/showcase.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 300 KiB |
39
src/static/scss/_config.scss
Normal file
39
src/static/scss/_config.scss
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
$primary-color: #17a2b8;
|
||||||
|
$dark-color: #343a40;
|
||||||
|
$light-color: #f4f4f4;
|
||||||
|
$danger-color: #dc3545;
|
||||||
|
$success-color: #28a745;
|
||||||
|
$dark: #333;
|
||||||
|
$max-width: 1100px;
|
||||||
|
|
||||||
|
// set text color based on background
|
||||||
|
@function set-text-color($color) {
|
||||||
|
@if (lightness($color) >60) {
|
||||||
|
@return $dark;
|
||||||
|
} @else {
|
||||||
|
@return white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// set background and text color
|
||||||
|
@mixin set-background($color) {
|
||||||
|
background-color: $color;
|
||||||
|
color: set-text-color($color);
|
||||||
|
}
|
||||||
|
|
||||||
|
// margin and padding
|
||||||
|
$spaceamounts: (1, 2, 3, 4, 5);
|
||||||
|
|
||||||
|
@each $space in $spaceamounts {
|
||||||
|
.m-#{$space} {
|
||||||
|
margin: #{$space}rem;
|
||||||
|
}
|
||||||
|
.my-#{$space} {
|
||||||
|
margin: #{$space}rem 0;
|
||||||
|
}
|
||||||
|
.p-#{$space} {
|
||||||
|
padding: #{$space}rem;
|
||||||
|
}
|
||||||
|
.py-#{$space} {
|
||||||
|
padding: #{$space}rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
src/static/scss/_form.scss
Normal file
52
src/static/scss/_form.scss
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
.form {
|
||||||
|
&-group {
|
||||||
|
margin: 1.2rem 0;
|
||||||
|
}
|
||||||
|
&-text {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.3rem;
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
input[type="text"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="date"],
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.4rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="submit"] {
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-input {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
i {
|
||||||
|
padding: 0.5rem;
|
||||||
|
width: 4rem;
|
||||||
|
|
||||||
|
&.fa-twitter {
|
||||||
|
color: #38a1f3;
|
||||||
|
}
|
||||||
|
&.fa-facebook {
|
||||||
|
color: #3b5998;
|
||||||
|
}
|
||||||
|
&.fa-instagram {
|
||||||
|
color: #3f729b;
|
||||||
|
}
|
||||||
|
&.fa-youtube {
|
||||||
|
color: #c4302b;
|
||||||
|
}
|
||||||
|
&.fa-linkedin {
|
||||||
|
color: #0077b5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
76
src/static/scss/_mobile.scss
Normal file
76
src/static/scss/_mobile.scss
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.hide-sm {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin-top: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text Styles
|
||||||
|
.x-large {
|
||||||
|
font-size: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
.navbar {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dash-buttons a {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profiles
|
||||||
|
.profile {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-grid {
|
||||||
|
grid-template-areas:
|
||||||
|
"top"
|
||||||
|
"about"
|
||||||
|
"exp"
|
||||||
|
"edu"
|
||||||
|
"github";
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-about {
|
||||||
|
.skills {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
a,
|
||||||
|
button {
|
||||||
|
padding: 0.3rem 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
183
src/static/scss/_utils.scss
Normal file
183
src/static/scss/_utils.scss
Normal file
|
|
@ -0,0 +1,183 @@
|
||||||
|
@import "_config";
|
||||||
|
|
||||||
|
// Backgrounds
|
||||||
|
|
||||||
|
.bg {
|
||||||
|
&-primary {
|
||||||
|
@include set-background($primary-color);
|
||||||
|
}
|
||||||
|
&-light {
|
||||||
|
@include set-background($light-color);
|
||||||
|
border: #ccc 1px solid;
|
||||||
|
}
|
||||||
|
&-dark {
|
||||||
|
@include set-background($dark-color);
|
||||||
|
}
|
||||||
|
&-danger {
|
||||||
|
@include set-background($danger-color);
|
||||||
|
}
|
||||||
|
&-success {
|
||||||
|
@include set-background($success-color);
|
||||||
|
}
|
||||||
|
&-white {
|
||||||
|
@include set-background(white);
|
||||||
|
border: #ccc 1px solid;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// dark overlay
|
||||||
|
.dark-overlay {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Text-styles
|
||||||
|
.x-large {
|
||||||
|
font-size: 4rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.large {
|
||||||
|
font-size: 3rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.lead {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Buttons
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
background-color: $light-color;
|
||||||
|
color: $dark;
|
||||||
|
padding: 0.4rem 1.3rem;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
outline: none;
|
||||||
|
transition: all 0.3s ease-in;
|
||||||
|
|
||||||
|
&.btn-primary {
|
||||||
|
@include set-background($primary-color);
|
||||||
|
&:hover {
|
||||||
|
background: lighten($primary-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-dark {
|
||||||
|
@include set-background($dark-color);
|
||||||
|
&:hover {
|
||||||
|
background: lighten($dark-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-light {
|
||||||
|
@include set-background($light-color);
|
||||||
|
&:hover {
|
||||||
|
background: lighten($dark-color, 20%);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-danger {
|
||||||
|
@include set-background($danger-color);
|
||||||
|
&:hover {
|
||||||
|
background: lighten($danger-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.btn-success {
|
||||||
|
@include set-background($success-color);
|
||||||
|
&:hover {
|
||||||
|
background: lighten($success-color, 5%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Container
|
||||||
|
.container {
|
||||||
|
max-width: $max-width;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0 2rem;
|
||||||
|
margin-top: 5rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alerts
|
||||||
|
.alert {
|
||||||
|
padding: 0.8rem;
|
||||||
|
margin: 1rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
background-color: $light-color;
|
||||||
|
color: $dark;
|
||||||
|
|
||||||
|
&.alert-primary {
|
||||||
|
@include set-background($primary-color);
|
||||||
|
}
|
||||||
|
&.alert-dark {
|
||||||
|
@include set-background($dark-color);
|
||||||
|
}
|
||||||
|
&.alert-success {
|
||||||
|
@include set-background($success-color);
|
||||||
|
}
|
||||||
|
&.alert-danger {
|
||||||
|
@include set-background($danger-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.round-img {
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 1px;
|
||||||
|
background: #ccc;
|
||||||
|
margin: 1.5rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// badge
|
||||||
|
.badge {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
padding: 0.1rem;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0.3rem;
|
||||||
|
background: $light-color;
|
||||||
|
color: $dark;
|
||||||
|
border-radius: 1rem;
|
||||||
|
|
||||||
|
&.badge-primary {
|
||||||
|
@include set-background($primary-color);
|
||||||
|
}
|
||||||
|
&.badge-dark {
|
||||||
|
@include set-background($dark-color);
|
||||||
|
}
|
||||||
|
&.badge-success {
|
||||||
|
@include set-background($success-color);
|
||||||
|
}
|
||||||
|
&.badge-danger {
|
||||||
|
@include set-background($danger-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Table
|
||||||
|
.table {
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 1rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
background: $light-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
192
src/static/scss/style.scss
Normal file
192
src/static/scss/style.scss
Normal file
|
|
@ -0,0 +1,192 @@
|
||||||
|
@import "_config";
|
||||||
|
@import "_utils";
|
||||||
|
@import "_form";
|
||||||
|
@import "_mobile";
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Raleway", sans-serif;
|
||||||
|
font-size: 1rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
background-color: white;
|
||||||
|
color: $dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Navbar
|
||||||
|
|
||||||
|
.navbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.7rem 2rem;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
border-bottom: solid 1px $primary-color;
|
||||||
|
opacity: 0.9;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
padding: 0.45rem;
|
||||||
|
margin: 0 0.25rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// landing
|
||||||
|
.landing {
|
||||||
|
position: relative;
|
||||||
|
background: url("../img/showcase.jpg") no-repeat center center/cover;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
&-inner {
|
||||||
|
color: white;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 80%;
|
||||||
|
margin: auto;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// profiles
|
||||||
|
.profile {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 2fr 4fr 2fr;
|
||||||
|
grid-gap: 2rem;
|
||||||
|
padding: 1rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Profile Page
|
||||||
|
|
||||||
|
.profile-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas: "top top" "about about" "exp edu" "github github";
|
||||||
|
grid-gap: 1rem;
|
||||||
|
|
||||||
|
.profile-top {
|
||||||
|
grid-area: top;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons a {
|
||||||
|
color: white;
|
||||||
|
margin: 0 0.3rem;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $dark-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-about {
|
||||||
|
grid-area: about;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.skills {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.profile-exp {
|
||||||
|
grid-area: exp;
|
||||||
|
}
|
||||||
|
.profile-edu {
|
||||||
|
grid-area: edu;
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-exp,
|
||||||
|
.profile-edu {
|
||||||
|
& > div {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
border-bottom: #ccc 1px dotted;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0.5rem 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.profile-github {
|
||||||
|
grid-area: github;
|
||||||
|
|
||||||
|
.repo {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& > div:first-child {
|
||||||
|
flex: 7;
|
||||||
|
flex-basis: 70%;
|
||||||
|
}
|
||||||
|
& > div:last-child {
|
||||||
|
flex: 3;
|
||||||
|
flex-basis: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Posts
|
||||||
|
.post-form-header {
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 4fr;
|
||||||
|
grid-gap: 2rem;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > div:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
45
yarn.lock
45
yarn.lock
|
|
@ -1082,6 +1082,51 @@
|
||||||
debug "^3.1.0"
|
debug "^3.1.0"
|
||||||
lodash.once "^4.1.1"
|
lodash.once "^4.1.1"
|
||||||
|
|
||||||
|
"@fortawesome/fontawesome-common-types@^0.2.28":
|
||||||
|
version "0.2.28"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2"
|
||||||
|
integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==
|
||||||
|
|
||||||
|
"@fortawesome/fontawesome-free@^5.13.0":
|
||||||
|
version "5.13.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.13.0.tgz#fcb113d1aca4b471b709e8c9c168674fbd6e06d9"
|
||||||
|
integrity sha512-xKOeQEl5O47GPZYIMToj6uuA2syyFlq9EMSl2ui0uytjY9xbe8XS0pexNWmxrdcCyNGyDmLyYw5FtKsalBUeOg==
|
||||||
|
|
||||||
|
"@fortawesome/fontawesome-svg-core@^1.2.28":
|
||||||
|
version "1.2.28"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9"
|
||||||
|
integrity sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==
|
||||||
|
dependencies:
|
||||||
|
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||||
|
|
||||||
|
"@fortawesome/free-brands-svg-icons@^5.13.0":
|
||||||
|
version "5.13.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.13.0.tgz#e79de73ba6555055204828dca9c0691e7ce5242b"
|
||||||
|
integrity sha512-/6xXiJFCMEQxqxXbL0FPJpwq5Cv6MRrjsbJEmH/t5vOvB4dILDpnY0f7zZSlA8+TG7jwlt12miF/yZpZkykucA==
|
||||||
|
dependencies:
|
||||||
|
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||||
|
|
||||||
|
"@fortawesome/free-regular-svg-icons@^5.13.0":
|
||||||
|
version "5.13.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.13.0.tgz#925a13d8bdda0678f71551828cac80ab47b8150c"
|
||||||
|
integrity sha512-70FAyiS5j+ANYD4dh9NGowTorNDnyvQHHpCM7FpnF7GxtDjBUCKdrFqCPzesEIpNDFNd+La3vex+jDk4nnUfpA==
|
||||||
|
dependencies:
|
||||||
|
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||||
|
|
||||||
|
"@fortawesome/free-solid-svg-icons@^5.13.0":
|
||||||
|
version "5.13.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.0.tgz#44d9118668ad96b4fd5c9434a43efc5903525739"
|
||||||
|
integrity sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==
|
||||||
|
dependencies:
|
||||||
|
"@fortawesome/fontawesome-common-types" "^0.2.28"
|
||||||
|
|
||||||
|
"@fortawesome/react-fontawesome@^0.1.9":
|
||||||
|
version "0.1.9"
|
||||||
|
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.9.tgz#c865b9286c707407effcec99958043711367cd02"
|
||||||
|
integrity sha512-49V3WNysLZU5fZ3sqSuys4nGRytsrxJktbv3vuaXkEoxv22C6T7TEG0TW6+nqVjMnkfCQd5xOnmJoZHMF78tOw==
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.7.2"
|
||||||
|
|
||||||
"@hapi/address@2.x.x":
|
"@hapi/address@2.x.x":
|
||||||
version "2.1.4"
|
version "2.1.4"
|
||||||
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
|
resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue