Added Frontend

This commit is contained in:
2022-02-06 22:25:00 +01:00
parent daab052928
commit 303d58c87b
19 changed files with 1680 additions and 0 deletions

245
frontend/css/index.css Normal file
View File

@@ -0,0 +1,245 @@
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
background-color: #03071E;
color: #EAE2B7;
}
a {
color: inherit;
font-size: 125%;
text-decoration: none;
letter-spacing: 2px;
}
p {
font-size: 150%;
margin: 0;
}
h3 {
font-size: 200%;
margin: 0;
}
ul {
display: flex;
flex-direction: row;
font-size: 20px;
list-style: none;
}
ul li {
padding-right: 30px;
}
ol {
display: flex;
flex-direction: column;
list-style: georgian;
}
.header {
background-color: #03071E;
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
font-family: "Roboto", sans-serif;
}
.header-title {
margin: 100px 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Staatliches", sans-serif;
}
.header-title h1 {
font-size: 90px;
letter-spacing: 30px;
margin: 0;
}
.header-title h2 {
font-size: 30px;
letter-spacing: 10px;
margin: 0;
}
.divider {
height: 3px;
background-color: #ad080f;
}
.navigation {
background-color: black;
color: inherit;
font-family: "Roboto", sans-serif;
width: 100%;
padding-top: 1%;
padding-bottom: 1%;
height: 5%;
min-height: 50px;
display: flex;
align-items: center;
}
.navigation img {
margin-right: auto;
width: 3%;
min-width: 30px;
padding-left: 2.5%;
}
.navigation a {
padding: 0 2%;
font-size: 200%;
font-weight: bolder;
}
.article {
padding: 2%;
}
.article:hover {
color: white;
}
.article-body {
width: 60;
font-size: 80%;
font-weight: normal;
margin-top: 1%;
font-family: "Roboto Mono", monospace;
}
.article-body, .article-body-fulltext {
width: 100%;
}
.article-description {
font-weight: 500;
font-family: "Roboto Mono", monospace;
color: #D00000;
font-size: 75%;
margin-top: 0.5%;
}
.article-description:p {
white-space: pre;
}
.articles {
margin: auto;
width: 80%;
font-family: "Roboto", sans-serif;
}
.foot {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 2.5% 0;
}
.foot a {
font-family: "Roboto Mono", monospace;
font-weight: normal;
padding: 0 10%;
}
i {
margin-right: 20px;
}
.about-section {
font-family: "Roboto", sans-serif;
width: 60%;
text-align: center;
}
.legal-section {
font-family: "Roboto", sans-serif;
width: 60%;
}
.legal-section p {
margin-bottom: 5%;
}
.contact-section {
font-family: "Roboto", sans-serif;
width: 60%;
}
.contact-section p {
margin-bottom: 5%;
}
input {
border: 2px solid #D62828;
padding: 5px 3px;
background: #03071E;
color: #EAE2B7;
margin: 0 10px;
font-size: 1rem;
border-radius: 3px;
max-width: 200px;
width: 10%;
min-width: 100px;
}
@media screen and (max-width: 1000px) {
.navigation {
flex-direction: column;
}
.navigation img {
margin: 10px 0;
padding: 0;
}
.navigation * {
margin: 5px 0;
}
.header-title {
text-align: center;
}
.header-title h1 {
font-size: 50px;
letter-spacing: 20px;
}
.header-title h2 {
font-size: 20px;
letter-spacing: 10px;
}
.articles {
width: 95%;
}
.articles div {
margin: 10px 0;
}
h3 {
font-size: 130%;
}
p {
font-size: 100%;
}
.foot {
flex-direction: column;
}
}
@media screen and (max-width: 500px) {
.header-title h1 {
font-size: 40px;
letter-spacing: 5px;
}
.header-title h2 {
letter-spacing: 3px;
}
.article-description p {
display: flex;
flex-direction: row;
justify-content: space-between;
}
}/*# sourceMappingURL=index.css.map */

View File

@@ -0,0 +1 @@
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAMA;EACE,SAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,yBAXiB;EAYjB,cAXW;ACMb;;ADOA;EACE,cAAA;EACA,eAAA;EACA,qBAAA;EACA,mBAAA;ACJF;;ADMA;EACE,eAAA;EACA,SAAA;ACHF;;ADKA;EACE,eAAA;EACA,SAAA;ACFF;;ADIA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;ACDF;ADGE;EACE,mBAAA;ACDJ;;ADGA;EACE,aAAA;EACA,sBAAA;EACA,oBAAA;ACAF;;ADEA;EACE,yBA3CiB;EA4CjB,WAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,iCAAA;ACCF;;ADCA;EACE,eAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,sCAAA;ACEF;ADAE;EACE,eAAA;EACA,oBAAA;EACA,SAAA;ACEJ;ADAE;EACE,eAAA;EACA,oBAAA;EACA,SAAA;ACEJ;;ADAA;EACE,WAAA;EACA,yBAAA;ACGF;;ADDA;EACE,uBAAA;EACA,cAAA;EACA,iCAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;EACA,UAAA;EACA,gBAAA;EACA,aAAA;EACA,mBAAA;ACIF;ADFE;EACE,kBAAA;EACA,SAAA;EACA,eAAA;EACA,kBAAA;ACIJ;ADFE;EACE,aAAA;EACA,eAAA;EACA,mBAAA;ACIJ;;ADFA;EACE,WAAA;ACKF;ADHE;EACE,YAAA;ACKJ;;ADHA;EACE,SAAA;EACA,cAAA;EACA,mBAAA;EACA,cAAA;EACA,qCAAA;ACMF;;ADJA;EACE,WAAA;ACOF;;ADLA;EACE,gBAAA;EACA,qCAAA;EACA,cAAA;EACA,cAAA;EACA,gBAAA;ACQF;ADNE;EACE,gBAAA;ACQJ;;ADNA;EACE,YAAA;EACA,UAAA;EACA,iCAAA;ACSF;;ADPA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,WAAA;EACA,cAAA;ACUF;ADRE;EACE,qCAAA;EACA,mBAAA;EACA,cAAA;ACUJ;;ADRA;EACE,kBAAA;ACWF;;ADTA;EACE,iCAAA;EACA,UAAA;EACA,kBAAA;ACYF;ADPA;EACE,iCAAA;EACA,UAAA;ACSF;ADLA;EACE,iBAAA;ACOF;;ADJA;EACE,iCAAA;EACA,UAAA;ACOF;ADHA;EACE,iBAAA;ACKF;;ADFA;EACI,yBAAA;EACA,gBAAA;EACA,mBA7Ke;EA8Kf,cA7KS;EA8KT,cAAA;EACA,eAAA;EACA,kBAAA;EACA,gBAAA;EACA,UAAA;EACA,gBAAA;ACKJ;;ADFA;EACE;IACE,sBAAA;ECKF;EDHE;IACE,cAAA;IACA,UAAA;ECKJ;EDHE;IACE,aAAA;ECKJ;;EDHA;IACE,kBAAA;ECMF;EDJE;IACE,eAAA;IACA,oBAAA;ECMJ;EDJE;IACE,eAAA;IACA,oBAAA;ECMJ;;EDJA;IACE,UAAA;ECOF;EDLE;IACE,cAAA;ECOJ;;EDLA;IACE,eAAA;ECQF;;EDPA;IACE,eAAA;ECUF;;EDRA;IACE,sBAAA;ECWF;AACF;ADRA;EAEI;IACE,eAAA;IACA,mBAAA;ECSJ;EDPE;IACE,mBAAA;ECSJ;;EDNE;IACE,aAAA;IACA,mBAAA;IACA,8BAAA;ECSJ;AACF","file":"index.css"}

235
frontend/css/index.sass Normal file
View File

@@ -0,0 +1,235 @@
$background-color: #03071E
$text-color: #EAE2B7
$secondary-text-color: #F77F00
$primary-color: #D62828
$secondary-color: #F77F00
body
margin: 0
padding: 0
display: flex
flex-direction: column
background-color: $background-color
color: $text-color
a
color: inherit
font-size: 125%
text-decoration: none
letter-spacing: 2px
p
font-size: 150%
margin: 0
h3
font-size: 200%
margin: 0
ul
display: flex
flex-direction: row
font-size: 20px
list-style: none
li
padding-right: 30px
ol
display: flex
flex-direction: column
list-style: georgian
.header
background-color: $background-color
width: 100%
height: 100px
display: flex
align-items: center
justify-content: flex-end
font-family: 'Roboto', sans-serif
.header-title
margin: 100px 0
display: flex
flex-direction: column
align-items: center
justify-content: center
font-family: 'Staatliches', sans-serif
h1
font-size: 90px
letter-spacing: 30px
margin: 0
h2
font-size: 30px
letter-spacing: 10px
margin: 0
.divider
height: 3px
background-color: #ad080f
.navigation
background-color: black
color: inherit
font-family: 'Roboto', sans-serif
width: 100%
padding-top: 1%
padding-bottom: 1%
height: 5%
min-height: 50px
display: flex
align-items: center
img
margin-right: auto
width: 3%
min-width: 30px
padding-left: 2.5%
a
padding: 0 2%
font-size: 200%
font-weight: bolder
.article
padding: 2%
&:hover
color: white
.article-body
width: 60
font-size: 80%
font-weight: normal
margin-top: 1%
font-family: 'Roboto Mono', monospace
.article-body, .article-body-fulltext
width: 100%
.article-description
font-weight: 500
font-family: 'Roboto Mono', monospace
color: #D00000
font-size: 75%
margin-top: 0.5%
&:p
white-space: pre
.articles
margin: auto
width: 80%
font-family: 'Roboto', sans-serif
.foot
display: flex
align-items: center
justify-content: space-between
width: 100%
margin: 2.5% 0
a
font-family: 'Roboto Mono', monospace
font-weight: normal
padding: 0 10%
i
margin-right: 20px
.about-section
font-family: "Roboto", sans-serif
width: 60%
text-align: center
margin:auto
.legal-section
font-family: "Roboto", sans-serif
width: 60%
margin:auto
.legal-section p
margin-bottom: 5%
.contact-section
font-family: "Roboto", sans-serif
width: 60%
margin:auto
.contact-section p
margin-bottom: 5%
input
border: 2px solid $primary-color
padding: 5px 3px
background: $background-color
color: $text-color
margin: 0 10px
font-size: 1rem
border-radius: 3px
max-width: 200px
width: 10%
min-width: 100px
@media screen and (max-width: 1000px)
.navigation
flex-direction: column
img
margin: 10px 0
padding: 0
*
margin: 5px 0
.header-title
text-align: center
h1
font-size: 50px
letter-spacing: 20px
h2
font-size: 20px
letter-spacing: 10px
.articles
width: 95%
div
margin: 10px 0
h3
font-size: 130%
p
font-size: 100%
.foot
flex-direction: column
@media screen and (max-width: 500px)
.header-title
h1
font-size: 40px
letter-spacing: 5px
h2
letter-spacing: 3px
.article-description
p
display: flex
flex-direction: row
justify-content: space-between