mirror of
https://github.com/rjNemo/devbook_ts
synced 2026-06-12 13:36:43 +00:00
add static assets for styling
This commit is contained in:
parent
3164d231e6
commit
fea8c3b281
9 changed files with 1085 additions and 14 deletions
|
|
@ -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 ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import './static/css/style.min.css';
|
||||
import App from './App';
|
||||
import * as serviceWorker from './serviceWorker';
|
||||
|
||||
|
|
|
|||
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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue