language-servers/roc
1
0
Fork 0
mirror of https://github.com/roc-lang/roc.git synced 2025-10-03 16:44:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Tapered corners

Browse source
This commit is contained in:
Richard Feldman 2020-05-17 11:30:12 -04:00
parent 7b67f04383
commit b69d4965ca
2 changed files with 22 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

2
www/index.html
View file

@ -15,7 +15,7 @@
<header class="top-header"> <header class="top-header">
<nav class="main-nav"> <nav class="main-nav">
<a class="nav-elem logo" href="/"> <a class="nav-elem logo" href="/">
<svg width="48" height="48" viewBox="0 0 51 53" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg width="48" height="48" viewBox="0 0 51 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<polygon points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086" class="logo-solid"/> <polygon points="0,0 23.8834,3.21052 37.2438,19.0101 45.9665,16.6324 50.5,22 45,22 44.0315,26.3689 26.4673,39.3424 27.4527,45.2132 17.655,53 23.6751,22.7086" class="logo-solid"/>
</svg> </svg>
</a> </a>

58
www/styles.css
View file

@ -1,14 +1,13 @@
:root { :root {
/* --link-color: #208848; */ --link-color: #5c0bff;
--link-color: #5C0BFF;
/* --link-color: #952294; */
--text-color: #333333; --text-color: #333333;
--logo-solid: #aaaaaa; --logo-solid: #aaaaaa;
--main-bg-color: #fdfdfd; --main-bg-color: #fdfdfd;
--border-bg-color: #eeeeee; --border-bg-color: #dddddd;
--logo-primary: #9d9d9d; --logo-primary: #9d9d9d;
--logo-secondary: #bababa; --logo-secondary: #bababa;
--faded-color: #777777; --faded-color: #777777;
--main-width: 720px;
} }
a { a {
@ -86,8 +85,7 @@ a:hover {
margin-top: 8px; margin-top: 8px;
font-size: 24px; font-size: 24px;
font-weight: bold; font-weight: bold;
color: var(--text-color); color: var(--faded-color);
opacity: 0.5;
} }
body { body {
@ -114,11 +112,13 @@ p {
main { main {
font-size: 18px; font-size: 18px;
line-height: 32px; line-height: 32px;
padding: 24px 32px; padding: 32px;
width: 720px; width: var(--main-width);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
background-color: var(--main-bg-color); background-color: var(--main-bg-color);
position: relative;
clip-path: polygon(0 100%, 100% 100%, 100% 48px, 668px 0, 0px 0px);
} }
.sidebar { .sidebar {
@ -133,7 +133,7 @@ main {
font-weight: normal; font-weight: normal;
padding-left: 36px; padding-left: 36px;
box-sizing: border-box; box-sizing: border-box;
opacity: 0.75; color: var(--faded-color);
} }
.module-name { .module-name {
@ -141,7 +141,8 @@ main {
line-height: 56px; line-height: 56px;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-weight: normal; font-weight: normal;
padding: 0 0 18px 0; margin: 0;
padding-bottom: 18px;
color: var(--faded-color); color: var(--faded-color);
} }
@ -149,8 +150,7 @@ main {
font-size: 24px; font-size: 24px;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
font-weight: normal; font-weight: normal;
color: var(--text-color); color: var(--faded-color);
opacity: 0.5;
display: block; display: block;
width: 100%; width: 100%;
padding: 8px 16px; padding: 8px 16px;
@ -197,10 +197,13 @@ h4 {
font-size: 18px; font-size: 18px;
margin-bottom: 16px; margin-bottom: 16px;
padding: 12px 16px; padding: 12px 16px;
border-radius: 16px; border: 1px solid var(--faded-color);
background-color: #eeeeee; color: var(--faded-color);
border: 1px solid #444444; background: none;
color: #111111; }
.module-search:focus {
background-color: var(--main-bg-color);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -209,17 +212,8 @@ h4 {
--border-bg-color: #202020; --border-bg-color: #202020;
--text-color: #fefefe; --text-color: #fefefe;
--logo-solid: #777777; --logo-solid: #777777;
--faded-color: #777777; --faded-color: #bbbbbb;
/* --link-color: #69dc9e; */ --link-color: #ab82ff;
--link-color: #AB82FF;
/* --link-color: #C87CDE; */
/* --link-color: #11b5e4; */
/* --link-color: #34d1bf; */
/* --link-color: #16C6D0; */
/* --link-color: #0C7489; */
/* --link-color: #0affff; */
/* --link-color: #00EBEB; */
/* --link-color: #00e6e6; */
--logo-primary: #ffffffee; --logo-primary: #ffffffee;
--logo-secondary: #ffffffaa; --logo-secondary: #ffffffaa;
} }
@ -228,18 +222,8 @@ h4 {
scrollbar-color: #444444 #2f2f2f; scrollbar-color: #444444 #2f2f2f;
} }
.module-search {
background-color: #1b1d23;
border: 1px solid #444444;
color: #fefefefe;
}
.sidebar-link:hover { .sidebar-link:hover {
color: #fefefe; color: #fefefe;
background-color: #229156; background-color: #229156;
} }
.sidebar-heading {
color: #aaaaaa;
}
} }