diff options
Diffstat (limited to 'CSS/main.css')
| -rw-r--r-- | CSS/main.css | 228 |
1 files changed, 98 insertions, 130 deletions
diff --git a/CSS/main.css b/CSS/main.css index 0ba775a..f49e8bd 100644 --- a/CSS/main.css +++ b/CSS/main.css @@ -6,86 +6,35 @@ * Main color: #00558e * Secondary color: #0b3075 */ - @font-face{ - font-family:IBM Plex Mono; - src: url(../fonts/IBMPlexMono-Regular.ttf); - } - body, html{ - height: calc(100% - 2em); - } + :root { + --main-bg-color: #eaefef; + --code-bg-color: #d4d9d9; + --main-color: #00558e; + --second-color: #0b3075; + } body{ - background-color:#eaefef; - color:#00558e; - font-family:IBM Plex Mono; + background-color:var(--main-bg-color); + color:var(--main-color); } a{ - color: #00558e; + color: var(--main-color); } ul.topBar{ - text-transform:uppercase; - margin:0; - padding:0; - overflow:hidden; - background-color:#00558e; - list-style-type:none; - } - li.topLink{ - float:left; + background-color:var(--main-color); } li.topLink a{ - display:block; - color:#eaefef; - text-align:center; - padding:14px 16px; - text-decoration:none; + color:var(--main-bg-color); } li.topLink a:hover{ - background-color:#0b3075; - } - .main{ - margin:auto; - width: 60%; + background-color:var(--second-color); } .search{ - padding:12px 20px 12px; - width:90%; - border-radius:5px; - margin-left:auto; - margin-right:auto; - margin-bottom:15em; - color:#00558e; - background-color:#eaefef; - font-family:IBM Plex Mono; - border-color:#00558e; - + color:var(--main-color); + background-color:var(--main-bg-color); + border-color:var(--main-color); } pre code { - background-color: #d4d9d9; - border: 1px solid #999; - display: block; - overflow:scroll; - padding: 20px; - } - .icon{ - font-size:200px; - margin-top:10px; - margin-bottom:10px; - } - @media only screen and (orientation: portrait){ - .main{ - margin:auto; - width:90%; - font-size:36px; - } - li.topLink a{ - font-size:36px; - } - .search{ - font-size:36px; - } - .icon{ - font-size:256px; - } + background-color: var(--code-bg-color); } } @@ -97,85 +46,104 @@ * Main color: #00558e * Secondary color: #0b3075 */ - @font-face{ - font-family:IBM Plex Mono; - src: url(../fonts/IBMPlexMono-Regular.ttf); - } - body, html{ - height: calc(100% - 2em); + :root { + --main-bg-color: #0D1F22; + --code-bg-color: #081417; + --main-color: #00558e; + --second-color: #0b3075; + --text-color: #eaefef; } body{ - background-color:#0D1F22; - color:#eaefef; - font-family:IBM Plex Mono; + background-color:var(--main-bg-color); + color:var(--text-color); } a{ - color: #eaefef; + color: var(--text-color); } ul.topBar{ - text-transform:uppercase; - margin:0; - padding:0; - overflow:hidden; - background-color:#00558e; - list-style-type:none; - } - li.topLink{ - float:left; + background-color:var(--main-color); } li.topLink a{ - display:block; - color:#eaefef; - text-align:center; - padding:14px 16px; - text-decoration:none; + color:var(--text-color); } li.topLink a:hover{ - background-color:#0b3075; + background-color:var(--second-color); + } + .search{ + color:var(--main-color); + background-color:var(--text-color); + border-color:var(--main-color); } + pre code { + background-color: var(--code-bg-color); + } +} +/* Common CSS styling */ + +@font-face{ + font-family:IBM Plex Mono; + src: url(../fonts/IBMPlexMono-Regular.ttf); +} +body, html{ + height: calc(100% - 2em); +} +body{ + font-family:IBM Plex Mono; +} +ul.topBar{ + text-transform:uppercase; + margin:0; + padding:0; + overflow:hidden; + list-style-type:none; +} +li.topLink{ + float:left; +} +li.topLink a{ + display:block; + text-align:center; + padding:14px 16px; + text-decoration:none; +} +.main{ + margin:auto; + width:60%; +} +.search{ + padding:12px 20px 12px; + width:90%; + border-radius:5px; + margin-left:auto; + margin-right:auto; + margin-bottom:15em; + font-family:IBM Plex Mono; +} +pre code { + border: 1px solid #999; + display: block; + overflow:scroll; + padding: 20px; +} +.icon{ + font-size:200px; + margin-top:10px; + margin-bottom:10px; +} + +@media only screen and (orientation: portrait){ .main{ margin:auto; - width:60%; - } - .search{ - padding:12px 20px 12px; width:90%; - border-radius:5px; - margin-left:auto; - margin-right:auto; - margin-bottom:15em; - color:#00558e; - background-color:#eaefef; - font-family:IBM Plex Mono; - border-color:#00558e; - + font-size:36px; } - pre code { - background-color: #081417; - border: 1px solid #999; - display: block; - overflow:scroll; - padding: 20px; + li.topLink a{ + font-size:36px; + } + .search{ + font-size:36px; } .icon{ - font-size:200px; - margin-top:10px; - margin-bottom:10px; - } - @media only screen and (orientation: portrait){ - .main{ - margin:auto; - width:90%; - font-size:36px; - } - li.topLink a{ - font-size:36px; - } - .search{ - font-size:36px; - } - .icon{ - font-size:256px; - } + font-size:256px; } }
\ No newline at end of file |