From 14b0294f2ad8c2bd1ed04563e933a6a50593c366 Mon Sep 17 00:00:00 2001 From: bytedream Date: Mon, 20 Dec 2021 22:53:13 +0100 Subject: [PATCH] Wrote css changes to sass --- sass/index.css | 168 +++++++++++++++++++++++---------------------- sass/index.css.map | 8 +-- sass/index.sass | 121 +++++++++++++++++++++++++++++--- 3 files changed, 199 insertions(+), 98 deletions(-) diff --git a/sass/index.css b/sass/index.css index 533053e..5af6e32 100644 --- a/sass/index.css +++ b/sass/index.css @@ -3,7 +3,7 @@ body { padding: 0; display: flex; flex-direction: column; - background-color: #03071e; + background-color: #03071E; color: #EAE2B7; } @@ -14,38 +14,59 @@ a { letter-spacing: 2px; } +p { + font-size: 150%; + margin: 0; +} + h3 { font-size: 200%; margin: 0; } -.article-description i { - padding: 0 15px 0 0; - text-decoration: none; - font-style: normal; + +ul { + display: flex; + flex-direction: row; + font-size: 20px; + list-style: none; } -p { - margin: 0; - font-size: 150%; +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 { - height: 300px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-family: 'Staatliches', sans-serif; + height: 300px; + 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; + font-size: 90px; + letter-spacing: 30px; + margin: 0; } .header-title h2 { - font-size: 30px; - letter-spacing: 10px; - margin: 0; + font-size: 30px; + letter-spacing: 10px; + margin: 0; } .divider { @@ -53,60 +74,10 @@ p { 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 { background-color: black; color: inherit; - font-family: 'Roboto', sans-serif; + font-family: "Roboto", sans-serif; width: 100%; padding-top: 1%; padding-bottom: 1%; @@ -115,13 +86,46 @@ p { align-items: center; justify-content: space-between; } - .navigation a { - padding-left: 2%; - padding-right: 2%; + 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 { @@ -129,15 +133,15 @@ p { align-items: center; justify-content: space-between; width: 100%; - margin-top: 2.5%; - margin-bottom: 2.5%; + margin: 2.5% 0; } - .foot a { - font-family: 'Roboto Mono', monospace; + font-family: "Roboto Mono", monospace; font-weight: normal; - padding-left: 10%; - padding-right: 10%; + padding: 0 10%; } -/*# sourceMappingURL=index.css.map */ +#logo { + width: 3%; + padding-left: 2.5%; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/sass/index.css.map b/sass/index.css.map index 1fd8388..c36abc8 100644 --- a/sass/index.css.map +++ b/sass/index.css.map @@ -1,7 +1 @@ -{ -"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" -} +{"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"} \ No newline at end of file diff --git a/sass/index.sass b/sass/index.sass index bd2a60a..533fb23 100644 --- a/sass/index.sass +++ b/sass/index.sass @@ -1,5 +1,5 @@ -$background-color: #EAE2B7 -$text-color: #003049 +$background-color: #03071E +$text-color: #EAE2B7 $secondary-text-color: #F77F00 $primary-color: #D62828 $secondary-color: #F77F00 @@ -9,14 +9,22 @@ body padding: 0 display: flex flex-direction: column - -.header background-color: $background-color - width: 100% - height: 100px - display: flex - align-items: center - justify-content: flex-end + 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 @@ -31,3 +39,98 @@ 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 + 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% \ No newline at end of file