changes
This commit is contained in:
parent
a7739b3443
commit
03368d3f4d
|
|
@ -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");
|
||||
|
||||
: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 {
|
||||
margin: 0;
|
||||
background-color: var(--editor);
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -11,12 +27,10 @@ body {
|
|||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
background-color: rgba(233, 233, 233, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 0px;
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
|
|
@ -29,12 +43,10 @@ body {
|
|||
width: 160px;
|
||||
height: 90px;
|
||||
|
||||
background-color: rgba(233, 233, 233, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
@ -42,7 +54,7 @@ body {
|
|||
.burgerDropdown a {
|
||||
position: absolute;
|
||||
width: calc(100% - 14px - 4px - 7px);
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
background-color: #ffffff;
|
||||
|
||||
height: 35px;
|
||||
|
|
@ -51,7 +63,7 @@ body {
|
|||
padding-left: 7px;
|
||||
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
|
||||
|
|
@ -82,12 +94,10 @@ body {
|
|||
bottom: 0;
|
||||
height: calc(100% - 50px - 1px);
|
||||
|
||||
background-color: rgba(233, 233, 233, 0.5);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
background-color: var(--bar);
|
||||
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 0px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
|
|
@ -101,12 +111,12 @@ body {
|
|||
margin: 7px;
|
||||
margin-bottom: 0;
|
||||
background-color: #ffffff;
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
|
||||
font-size: 15px;
|
||||
|
|
@ -135,7 +145,8 @@ body {
|
|||
}
|
||||
|
||||
.notesBar .selected {
|
||||
background-color: #157efb !important;
|
||||
background-color: var(--theme-color) !important;
|
||||
border: none;
|
||||
color: white
|
||||
}
|
||||
|
||||
|
|
@ -186,7 +197,7 @@ body {
|
|||
position: fixed;
|
||||
background-color: white;
|
||||
padding: 10px;
|
||||
color: black;
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
min-width: 338.5px
|
||||
}
|
||||
|
|
@ -198,10 +209,10 @@ body {
|
|||
margin-bottom: 7px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
color: white;
|
||||
color: var(--theme-text-color);
|
||||
border: none;
|
||||
text-decoration: none;
|
||||
background-color: #157efb;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
|
@ -222,30 +233,30 @@ body {
|
|||
padding-right: 5px;
|
||||
margin-bottom: 7px;
|
||||
border: solid;
|
||||
border-color: #dadada;
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.optionsDiv input:focus {
|
||||
outline: 0;
|
||||
border-color: #157efb;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv progress {
|
||||
width: 100%;
|
||||
background-color: #d8d8d8;
|
||||
background-color: var(--session-color);
|
||||
border: none;
|
||||
border-radius: 99px;
|
||||
height: 7px;
|
||||
}
|
||||
|
||||
.optionsDiv progress::-moz-progress-bar {
|
||||
background: #157efb;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv progresss::-webkit-progress-value {
|
||||
background: #157efb;
|
||||
background: var(--theme-color);
|
||||
}
|
||||
|
||||
.optionsDiv .exit {
|
||||
|
|
@ -254,8 +265,8 @@ body {
|
|||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
background-color: #e9e9e9;
|
||||
color: black;
|
||||
background-color: var(--exit-color);
|
||||
color: var(--text-color);
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -268,23 +279,25 @@ body {
|
|||
.optionsDiv .section {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #d8d8d8;
|
||||
background-color: var(--border-color);
|
||||
margin-top: 2px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sessionDiv div {
|
||||
background-color: #f4f4f4;
|
||||
background-color: var(--session-color);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 5px;
|
||||
padding: 10px;
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.sessionDiv div p {
|
||||
display: inline;
|
||||
position: absolute;
|
||||
transform: translateY(-7.5px);
|
||||
}
|
||||
|
||||
.sessionDiv div button {
|
||||
position: absolute;
|
||||
border-radius: 99px;
|
||||
|
|
@ -294,6 +307,7 @@ body {
|
|||
font-size: 16px;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.sessionDiv img {
|
||||
display: inline;
|
||||
filter: none;
|
||||
|
|
@ -315,13 +329,13 @@ body {
|
|||
padding-right: 10px;
|
||||
|
||||
border: solid;
|
||||
border-color: rgb(207, 207, 207);
|
||||
border-color: var(--border-color);
|
||||
border-width: 1px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.inoutdiv button {
|
||||
background-color: #157efb;
|
||||
background-color: var(--theme-color);
|
||||
color: white;
|
||||
padding: 10px;
|
||||
padding-left: 20px;
|
||||
|
|
@ -397,16 +411,23 @@ body {
|
|||
margin-right: 5px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
background-color: #157efb;
|
||||
background-color: var(--theme-color);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.mainDiv .feature {
|
||||
width: calc(100% - 20px);
|
||||
width: calc(100% - 7vh - 7vh - 3.5vh);
|
||||
margin-bottom: 10px;
|
||||
margin-left: 7vh;
|
||||
margin-right: 7vh;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
border: solid;
|
||||
border-radius: 8px;
|
||||
border-width: 1px;
|
||||
border-color: var(--border-color);
|
||||
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 17px;
|
||||
|
|
@ -431,10 +452,12 @@ body {
|
|||
text-align: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.links a {
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links a:hover {
|
||||
text-decoration: dashed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,25 +8,25 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/style.css" />
|
||||
<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>
|
||||
|
||||
<body>
|
||||
<div class="mainDiv">
|
||||
<div class="startDiv">
|
||||
<h1 class="w300">burgernotes</h1>
|
||||
<p>simple note taking, everywhere you go.</p>
|
||||
<p>simple note-taking app</p>
|
||||
<br>
|
||||
<a href="/app">open in your browser</a>
|
||||
<!--<a href="/download">download app</a>-->
|
||||
</div>
|
||||
<br><br><br>
|
||||
<div class="feature green">
|
||||
<h4 class="w500">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>
|
||||
<h3 class="w300">secure</h4>
|
||||
<p>all your notes are fully end-to-end encrypted. only you can read your notes, not anyone else.</p>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue