TheAdversary/frontend
4
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

Wrote css changes to sass

Browse Source
This commit is contained in:
Ruben Otto
2021-12-20 22:53:13 +01:00
parent 126f7844dc
commit 14b0294f2a
3 changed files with 199 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
sass/index.css
View File

@@ -3,7 +3,7 @@ body {
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: #03071e; background-color: #03071E;
color: #EAE2B7; color: #EAE2B7;
} }
@@ -14,38 +14,59 @@ a {
letter-spacing: 2px; letter-spacing: 2px;
} }
p {
font-size: 150%;
margin: 0;
}
h3 { h3 {
font-size: 200%; font-size: 200%;
margin: 0; margin: 0;
} }
.article-description i {
padding: 0 15px 0 0; ul {
text-decoration: none; display: flex;
font-style: normal; flex-direction: row;
font-size: 20px;
list-style: none;
} }
p { ul li {
margin: 0; padding-right: 30px;
font-size: 150%; }
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 { .header-title {
height: 300px; height: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-family: 'Staatliches', sans-serif; font-family: "Staatliches", sans-serif;
} }
.header-title h1 { .header-title h1 {
font-size: 90px; font-size: 90px;
letter-spacing: 30px; letter-spacing: 30px;
margin: 0; margin: 0;
} }
.header-title h2 { .header-title h2 {
font-size: 30px; font-size: 30px;
letter-spacing: 10px; letter-spacing: 10px;
margin: 0; margin: 0;
} }
.divider { .divider {
@@ -53,60 +74,10 @@ p {
background-color: #ad080f; background-color: #ad080f;
} }
.articles {
margin: auto;
width: 80%;
font-family: 'Roboto', sans-serif;
}
.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;
}
#logo {
width: 3%;
padding-left: 2.5%;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
font-family: 'Roboto', sans-serif
}
.navigation { .navigation {
background-color: black; background-color: black;
color: inherit; color: inherit;
font-family: 'Roboto', sans-serif; font-family: "Roboto", sans-serif;
width: 100%; width: 100%;
padding-top: 1%; padding-top: 1%;
padding-bottom: 1%; padding-bottom: 1%;
@@ -115,13 +86,46 @@ p {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.navigation a { .navigation a {
padding-left: 2%; padding: 0 2%;
padding-right: 2%;
font-size: 200%; font-size: 200%;
font-weight: bolder; 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 { .foot {
@@ -129,15 +133,15 @@ p {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;
margin-top: 2.5%; margin: 2.5% 0;
margin-bottom: 2.5%;
} }
.foot a { .foot a {
font-family: 'Roboto Mono', monospace; font-family: "Roboto Mono", monospace;
font-weight: normal; font-weight: normal;
padding-left: 10%; padding: 0 10%;
padding-right: 10%;
} }
/*# sourceMappingURL=index.css.map */ #logo {
width: 3%;
padding-left: 2.5%;
}/*# sourceMappingURL=index.css.map */

8
sass/index.css.map
View File

@@ -1,7 +1 @@
{ {"version":3,"sources":["index.sass"],"names":[],"mappings":"AAMA;EACE,SAAA;EACA,UAAA;EACA,aAAA;EACA,sBAAA;EACA,yBAXiB;EAYjB,cAXW;AAMb;;AAOA;EACE,cAAA;EACA,eAAA;EACA,qBAAA;EACA,mBAAA;AAJF;;AAMA;EACE,eAAA;EACA,SAAA;AAHF;;AAKA;EACE,eAAA;EACA,SAAA;AAFF;;AAIA;EACE,aAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;AADF;AAGE;EACE,mBAAA;AADJ;;AAGA;EACE,aAAA;EACA,sBAAA;EACA,oBAAA;AAAF;;AAEA;EACE,yBA3CiB;EA4CjB,WAAA;EACA,aAAA;EACA,aAAA;EACA,mBAAA;EACA,yBAAA;EACA,iCAAA;AACF;;AACA;EACE,aAAA;EACA,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,sCAAA;AAEF;AAAE;EACE,eAAA;EACA,oBAAA;EACA,SAAA;AAEJ;AAAE;EACE,eAAA;EACA,oBAAA;EACA,SAAA;AAEJ;;AAAA;EACE,WAAA;EACA,yBAAA;AAGF;;AADA;EACE,uBAAA;EACA,cAAA;EACA,iCAAA;EACA,WAAA;EACA,eAAA;EACA,kBAAA;EACA,UAAA;EACA,aAAA;EACA,mBAAA;EACA,8BAAA;AAIF;AAFE;EACE,aAAA;EACA,eAAA;EACA,mBAAA;AAIJ;;AAFA;EACE,WAAA;AAKF;AAHE;EACE,YAAA;AAKJ;;AAHA;EACE,SAAA;EACA,cAAA;EACA,mBAAA;EACA,cAAA;EACA,qCAAA;AAMF;;AAJA;EACE,WAAA;AAOF;;AALA;EACE,gBAAA;EACA,qCAAA;EACA,cAAA;EACA,cAAA;EACA,gBAAA;AAQF;AANE;EACE,gBAAA;AAQJ;;AANA;EACE,YAAA;EACA,UAAA;EACA,iCAAA;AASF;;AAPA;EACE,aAAA;EACA,mBAAA;EACA,8BAAA;EACA,WAAA;EACA,cAAA;AAUF;AARE;EACE,qCAAA;EACA,mBAAA;EACA,cAAA;AAUJ;;AARA;EACE,SAAA;EACA,kBAAA;AAWF","file":"index.css"}
"version": 3,
"mappings": "AAMA,IAAI;EACF,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;;AAExB,OAAO;EACL,gBAAgB,EAbC,OAAO;EAcxB,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,QAAQ;;AAE3B,EAAE;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,GAAG;EACnB,SAAS,EAAE,IAAI;EACf,UAAU,EAAE,IAAI;EAEhB,KAAE;IACA,aAAa,EAAE,IAAI;;AAEvB,EAAE;EACA,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,UAAU,EAAE,QAAQ",
"sources": ["index.sass"],
"names": [],
"file": "index.css"
}

121
sass/index.sass
View File

@@ -1,5 +1,5 @@
$background-color: #EAE2B7 $background-color: #03071E
$text-color: #003049 $text-color: #EAE2B7
$secondary-text-color: #F77F00 $secondary-text-color: #F77F00
$primary-color: #D62828 $primary-color: #D62828
$secondary-color: #F77F00 $secondary-color: #F77F00
@@ -9,14 +9,22 @@ body
padding: 0 padding: 0
display: flex display: flex
flex-direction: column flex-direction: column
.header
background-color: $background-color background-color: $background-color
width: 100% color: $text-color
height: 100px
display: flex a
align-items: center color: inherit
justify-content: flex-end font-size: 125%
text-decoration: none
letter-spacing: 2px
p
font-size: 150%
margin: 0
h3
font-size: 200%
margin: 0
ul ul
display: flex display: flex
@@ -31,3 +39,98 @@ ol
display: flex display: flex
flex-direction: column flex-direction: column
list-style: georgian 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
height: 300px
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%
display: flex
align-items: center
justify-content: space-between
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%
#logo
width: 3%
padding-left: 2.5%