Ailur
/
burgernotes
3
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

changes

This commit is contained in:
maaa 2023-08-26 18:57:56 +02:00
parent a7739b3443
commit 03368d3f4d
2 changed files with 61 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
static/css/style.css
View File

@ -1,7 +1,23 @@
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
:root {
--bar: #f4f4f4;
--editor: #ffffff;
--text-color: #000000;
--border-color: #dadada;
--theme-color: #157efb;
--theme-text-color: #ffffff;
--exit-color: #e9e9e9;
--session-color: #f4f4f4;
}
p, h1, h2, h3, h4, h5, h6 {
color: var(--text-color);
}
body { body {
margin: 0; margin: 0;
background-color: var(--editor);
font-family: "Inter", sans-serif; font-family: "Inter", sans-serif;
} }
@ -11,12 +27,10 @@ body {
width: 100%; width: 100%;
height: 50px; height: 50px;
background-color: rgba(233, 233, 233, 0.5); background-color: var(--bar);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 0px; border-width: 0px;
border-bottom-width: 1px; border-bottom-width: 1px;
} }
@ -29,12 +43,10 @@ body {
width: 160px; width: 160px;
height: 90px; height: 90px;
background-color: rgba(233, 233, 233, 0.5); background-color: var(--bar);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 1px; border-width: 1px;
border-radius: 8px; border-radius: 8px;
} }
@ -42,7 +54,7 @@ body {
.burgerDropdown a { .burgerDropdown a {
position: absolute; position: absolute;
width: calc(100% - 14px - 4px - 7px); width: calc(100% - 14px - 4px - 7px);
color: black; color: var(--text-color);
background-color: #ffffff; background-color: #ffffff;
height: 35px; height: 35px;
@ -51,7 +63,7 @@ body {
padding-left: 7px; padding-left: 7px;
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 1px; border-width: 1px;
border-radius: 8px; border-radius: 8px;
@ -82,12 +94,10 @@ body {
bottom: 0; bottom: 0;
height: calc(100% - 50px - 1px); height: calc(100% - 50px - 1px);
background-color: rgba(233, 233, 233, 0.5); background-color: var(--bar);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 0px; border-width: 0px;
border-right-width: 1px; border-right-width: 1px;
border-top-width: 1px; border-top-width: 1px;
@ -101,12 +111,12 @@ body {
margin: 7px; margin: 7px;
margin-bottom: 0; margin-bottom: 0;
background-color: #ffffff; background-color: #ffffff;
color: black; color: var(--text-color);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 1px; border-width: 1px;
font-size: 15px; font-size: 15px;
@ -135,7 +145,8 @@ body {
} }
.notesBar .selected { .notesBar .selected {
background-color: #157efb !important; background-color: var(--theme-color) !important;
border: none;
color: white color: white
} }
@ -186,7 +197,7 @@ body {
position: fixed; position: fixed;
background-color: white; background-color: white;
padding: 10px; padding: 10px;
color: black; color: var(--text-color);
border-radius: 8px; border-radius: 8px;
min-width: 338.5px min-width: 338.5px
} }
@ -198,10 +209,10 @@ body {
margin-bottom: 7px; margin-bottom: 7px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
color: white; color: var(--theme-text-color);
border: none; border: none;
text-decoration: none; text-decoration: none;
background-color: #157efb; background-color: var(--theme-color);
border-radius: 8px; border-radius: 8px;
} }
@ -222,30 +233,30 @@ body {
padding-right: 5px; padding-right: 5px;
margin-bottom: 7px; margin-bottom: 7px;
border: solid; border: solid;
border-color: #dadada; border-color: var(--border-color);
border-width: 1px; border-width: 1px;
border-radius: 8px; border-radius: 8px;
} }
.optionsDiv input:focus { .optionsDiv input:focus {
outline: 0; outline: 0;
border-color: #157efb; border-color: var(--theme-color);
} }
.optionsDiv progress { .optionsDiv progress {
width: 100%; width: 100%;
background-color: #d8d8d8; background-color: var(--session-color);
border: none; border: none;
border-radius: 99px; border-radius: 99px;
height: 7px; height: 7px;
} }
.optionsDiv progress::-moz-progress-bar { .optionsDiv progress::-moz-progress-bar {
background: #157efb; background: var(--theme-color);
} }
.optionsDiv progresss::-webkit-progress-value { .optionsDiv progresss::-webkit-progress-value {
background: #157efb; background: var(--theme-color);
} }
.optionsDiv .exit { .optionsDiv .exit {
@ -254,8 +265,8 @@ body {
width: 40px; width: 40px;
height: 40px; height: 40px;
font-size: 16px; font-size: 16px;
background-color: #e9e9e9; background-color: var(--exit-color);
color: black; color: var(--text-color);
border-radius: 100%; border-radius: 100%;
} }
@ -268,23 +279,25 @@ body {
.optionsDiv .section { .optionsDiv .section {
width: 100%; width: 100%;
height: 1px; height: 1px;
background-color: #d8d8d8; background-color: var(--border-color);
margin-top: 2px; margin-top: 2px;
margin-bottom: 10px; margin-bottom: 10px;
} }
.sessionDiv div { .sessionDiv div {
background-color: #f4f4f4; background-color: var(--session-color);
border-radius: 8px; border-radius: 8px;
margin-bottom: 5px; margin-bottom: 5px;
padding: 10px; padding: 10px;
height: 35px; height: 35px;
} }
.sessionDiv div p { .sessionDiv div p {
display: inline; display: inline;
position: absolute; position: absolute;
transform: translateY(-7.5px); transform: translateY(-7.5px);
} }
.sessionDiv div button { .sessionDiv div button {
position: absolute; position: absolute;
border-radius: 99px; border-radius: 99px;
@ -294,6 +307,7 @@ body {
font-size: 16px; font-size: 16px;
transform: translateY(-2px); transform: translateY(-2px);
} }
.sessionDiv img { .sessionDiv img {
display: inline; display: inline;
filter: none; filter: none;
@ -315,13 +329,13 @@ body {
padding-right: 10px; padding-right: 10px;
border: solid; border: solid;
border-color: rgb(207, 207, 207); border-color: var(--border-color);
border-width: 1px; border-width: 1px;
border-radius: 8px; border-radius: 8px;
} }
.inoutdiv button { .inoutdiv button {
background-color: #157efb; background-color: var(--theme-color);
color: white; color: white;
padding: 10px; padding: 10px;
padding-left: 20px; padding-left: 20px;
@ -397,16 +411,23 @@ body {
margin-right: 5px; margin-right: 5px;
color: white; color: white;
text-decoration: none; text-decoration: none;
background-color: #157efb; background-color: var(--theme-color);
border-radius: 8px; border-radius: 8px;
} }
.mainDiv .feature { .mainDiv .feature {
width: calc(100% - 20px); width: calc(100% - 7vh - 7vh - 3.5vh);
margin-bottom: 10px; margin-bottom: 10px;
margin-left: 7vh;
margin-right: 7vh;
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;
border: solid;
border-radius: 8px;
border-width: 1px;
border-color: var(--border-color);
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
font-size: 17px; font-size: 17px;
@ -431,10 +452,12 @@ body {
text-align: center; text-align: center;
padding: 10px; padding: 10px;
} }
.links a { .links a {
margin-left: 5px; margin-left: 5px;
text-decoration: none; text-decoration: none;
} }
.links a:hover { .links a:hover {
text-decoration: dashed; text-decoration: dashed;
} }

10
templates/main.html
View File

@ -8,25 +8,25 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="/static/css/style.css" /> <link rel="stylesheet" type="text/css" href="/static/css/style.css" />
<meta content="burgernotes" property="og:title" /> <meta content="burgernotes" property="og:title" />
<meta content="simple note taking app" property="og:description" /> <meta content="simple note-taking app :3" property="og:description" />
</head> </head>
<body> <body>
<div class="mainDiv"> <div class="mainDiv">
<div class="startDiv"> <div class="startDiv">
<h1 class="w300">burgernotes</h1> <h1 class="w300">burgernotes</h1>
<p>simple note taking, everywhere you go.</p> <p>simple note-taking app</p>
<br> <br>
<a href="/app">open in your browser</a> <a href="/app">open in your browser</a>
<!--<a href="/download">download app</a>--> <!--<a href="/download">download app</a>-->
</div> </div>
<br><br><br> <br><br><br>
<div class="feature green"> <div class="feature green">
<h4 class="w500">secure</h4> <h3 class="w300">secure</h4>
<p>all your notes are fully <b>end-to-end encrypted</b>. only <b>you</b> can read your notes, not anyone else.</p> <p>all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.</p>
</div> </div>
<div class="feature yellow"> <div class="feature yellow">
<h4 class="w500">always up-to-date</h4> <h3 class="w300">always up-to-date</h4>
<p>your notes seamlessly sync across your devices.</p> <p>your notes seamlessly sync across your devices.</p>
</div> </div>
</div> </div>