mirror of
https://github.com/mgerb/mywebsite
synced 2026-01-11 02:12:53 +00:00
too many changes - load posts now
This commit is contained in:
1
client/assets/css/dracula.css
Normal file
1
client/assets/css/dracula.css
Normal file
@@ -0,0 +1 @@
|
||||
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#282a36}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-link{color:#8be9fd}.hljs-function .hljs-keyword{color:#ff79c6}.hljs,.hljs-subst{color:#f8f8f2}.hljs-string,.hljs-title,.hljs-name,.hljs-type,.hljs-attribute,.hljs-symbol,.hljs-bullet,.hljs-addition,.hljs-variable,.hljs-template-tag,.hljs-template-variable{color:#f1fa8c}.hljs-comment,.hljs-quote,.hljs-deletion,.hljs-meta{color:#6272a4}.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-title,.hljs-section,.hljs-doctag,.hljs-type,.hljs-name,.hljs-strong{font-weight:bold}.hljs-emphasis{font-style:italic}
|
||||
@@ -1,10 +1,10 @@
|
||||
.Footer{
|
||||
height: 5em;
|
||||
line-height: 5em;
|
||||
background-color: #F1F1F1;
|
||||
border-top: solid;
|
||||
border-width: 1px;
|
||||
border-color: #DADADA;
|
||||
font-weight: 300;
|
||||
margin-top: 1em;
|
||||
.Footer {
|
||||
height: 5em;
|
||||
line-height: 5em;
|
||||
background-color: #F1F1F1;
|
||||
border-top: solid;
|
||||
border-width: 1px;
|
||||
border-color: #DADADA;
|
||||
font-weight: 300;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@@ -1,22 +1,16 @@
|
||||
.Preview{
|
||||
flex: 1;
|
||||
-webkit-flex: 1;
|
||||
|
||||
.post + .post{
|
||||
margin-top: 2em;
|
||||
}
|
||||
|
||||
.date{
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.intro{
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
p{
|
||||
font-weight: 300;
|
||||
}
|
||||
.Preview {
|
||||
.post + .post {
|
||||
margin-top: 2em;
|
||||
}
|
||||
.date {
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
font-weight: 300;
|
||||
}
|
||||
.intro {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,75 +1,64 @@
|
||||
$transitionDuration: .4s;
|
||||
|
||||
.Sidebar{
|
||||
background: #fff;
|
||||
width: 300px;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
h2{
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
a.toggler{
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-height: 100%;
|
||||
padding-top: 1em;
|
||||
|
||||
transform: translateX(300px);
|
||||
-webkit-transform: translateX(300px);
|
||||
transition: transform $transitionDuration ease-out;
|
||||
-webkit-transition: transform $transitionDuration ease-out;
|
||||
|
||||
&.open {
|
||||
transform: translateX(0px);
|
||||
-webkit-transform: translateX(0px);
|
||||
border-left: 1px solid #EAEAEA;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: rgba(0,0,0,0.4);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
}
|
||||
|
||||
a.toggler{
|
||||
transform: rotate(450deg);
|
||||
}
|
||||
$transitionDuration: 0.4s;
|
||||
.Sidebar {
|
||||
background: #fff;
|
||||
width: 300px;
|
||||
padding-right: 1em;
|
||||
padding-left: 1em;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
a.toggler{
|
||||
display: block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
a.toggler {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
position: absolute;
|
||||
left: -3em;
|
||||
top: .5em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
transform: rotate(0deg);
|
||||
top: 0;
|
||||
right: 0;
|
||||
min-height: 100%;
|
||||
padding-top: 1em;
|
||||
transform: translateX(300px);
|
||||
-webkit-transform: translateX(300px);
|
||||
transition: transform $transitionDuration ease-out;
|
||||
-webkit-transition: transform $transitionDuration ease-out;
|
||||
|
||||
&:hover{
|
||||
color: #3598db;
|
||||
&.open {
|
||||
transform: translateX(0px);
|
||||
-webkit-transform: translateX(0px);
|
||||
border-left: 1px solid #EAEAEA;
|
||||
&:before {
|
||||
content: " ";
|
||||
display: block;
|
||||
background: rgba(0,0,0,0.4);
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
}
|
||||
a.toggler {
|
||||
transform: rotate(450deg);
|
||||
}
|
||||
}
|
||||
a.toggler {
|
||||
display: block;
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
position: absolute;
|
||||
left: -3em;
|
||||
top: 0.5em;
|
||||
cursor: pointer;
|
||||
color: white;
|
||||
transform: rotate(0deg);
|
||||
transition: transform $transitionDuration ease-out;
|
||||
-webkit-transition: transform $transitionDuration ease-out;
|
||||
&:hover {
|
||||
color: #3598db;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,69 +1,82 @@
|
||||
@import './utils.scss';
|
||||
|
||||
html{
|
||||
html {
|
||||
font-family: 'Roboto Slab', serif;
|
||||
}
|
||||
|
||||
body{
|
||||
position: relative;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
body {
|
||||
max-width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6{
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p{
|
||||
font-weight: 300;
|
||||
p {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
*,
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
*:after,
|
||||
*:before {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
a{
|
||||
background-color: transparent;
|
||||
color: #3598db;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover{
|
||||
color: #3598db;
|
||||
}
|
||||
a {
|
||||
background-color: transparent;
|
||||
color: #3598db;
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
color: #3598db;
|
||||
}
|
||||
}
|
||||
code,
|
||||
pre code{
|
||||
white-space: pre-wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.Layout {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.Header, .Main, .Footer {
|
||||
display: flex;
|
||||
padding-right: calc(50% - 997px / 2);
|
||||
padding-left: calc(50% - 997px / 2);
|
||||
&:before, &:after { content: " "; width: 1em; }
|
||||
}
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.Footer,
|
||||
.Header,
|
||||
.Main {
|
||||
display: flex;
|
||||
padding-right: calc(50% - 997px / 2);
|
||||
padding-left: calc(50% - 997px / 2);
|
||||
&:after,
|
||||
&:before {
|
||||
content: " ";
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.Main{
|
||||
padding-top: 1em;
|
||||
flex: 1;
|
||||
.Main {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.Content {
|
||||
flex: 1;
|
||||
|
||||
.Header{
|
||||
width: 100%;
|
||||
background: url("../images/header.jpg");
|
||||
background-size: cover;
|
||||
height: 30em;
|
||||
border-bottom: solid;
|
||||
border-width: 1px;
|
||||
border-color: #DADADA;
|
||||
|
||||
h1{
|
||||
text-align: center;
|
||||
}
|
||||
img{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.Header {
|
||||
width: 100%;
|
||||
background: url("../images/header.jpg");
|
||||
background-size: cover;
|
||||
height: 30em;
|
||||
border-bottom: solid;
|
||||
border-width: 1px;
|
||||
border-color: #DADADA;
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
/* Effect 1: Brackets */
|
||||
.link{
|
||||
.link {
|
||||
position: relative;
|
||||
|
||||
&:before{
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
@@ -16,10 +15,9 @@
|
||||
-webkit-transition: all 0.2s ease-in-out 0s;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
|
||||
&:hover:before{
|
||||
&:hover:before {
|
||||
visibility: visible;
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user