mirror of
https://github.com/NovaOSS/nova-web.git
synced 2024-11-25 16:13:58 +01:00
Homepage fronte-end 70% done
This commit is contained in:
nsde
parent
228f19b87b
commit
9f681e94a9
21
.vscode/settings.json
vendored
Normal file
21
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"files.exclude": {
|
||||
"**/.git": true,
|
||||
"**/.svn": true,
|
||||
"**/.hg": true,
|
||||
"**/CVS": true,
|
||||
"**/.DS_Store": true,
|
||||
"**/Thumbs.db": true,
|
||||
"**/__pycache__": true,
|
||||
"**/.vscode": true,
|
||||
"**/*.map": true,
|
||||
"static/css/base.css": true,
|
||||
"static/css/home.css": true,
|
||||
"static/css/navbar.css": true
|
||||
},
|
||||
"hide-files.files": [
|
||||
"static/css/base.css",
|
||||
"static/css/home.css",
|
||||
"static/css/navbar.css"
|
||||
]
|
||||
}
|
||||
24
app.py
Normal file
24
app.py
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
import os
|
||||
import flask
|
||||
import logging
|
||||
|
||||
from dotenv import load_dotenv
|
||||
|
||||
load_dotenv()
|
||||
|
||||
app = flask.Flask(__name__)
|
||||
|
||||
log = logging.getLogger('werkzeug')
|
||||
log.disabled = True
|
||||
|
||||
@app.context_processor
|
||||
def inject_variables():
|
||||
return {
|
||||
'contact_email': os.getenv('CONTACT_EMAIL')
|
||||
}
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return flask.render_template('index.html')
|
||||
|
||||
app.run(debug=True, use_evalex=False, port=2323)
|
||||
13
static/css/_vars.sass
Normal file
13
static/css/_vars.sass
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
$text: #f3f3f3
|
||||
$background: #03060d
|
||||
$secondary: #253038
|
||||
$border: #161d2bb0
|
||||
|
||||
$primary: #922646
|
||||
$primary-light: #f45a88
|
||||
$accent: #28aaf0
|
||||
|
||||
$edge: 5px
|
||||
|
||||
$main-width: 800px
|
||||
$more-width: 1000px
|
||||
57
static/css/base.css
Normal file
57
static/css/base.css
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap");
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #03060d;
|
||||
}
|
||||
|
||||
nav, main, footer {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
border: none;
|
||||
color: #f3f3f3;
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1, h1 *, h2, h2 *, h3, h3 * {
|
||||
font-weight: 700;
|
||||
line-height: 4.8rem;
|
||||
font-family: "Syne", sans-serif;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 18px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
color: #f3f3f3;
|
||||
background: #f45a88;
|
||||
padding: 5px 7px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
body {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
}/*# sourceMappingURL=base.css.map */
|
||||
1
static/css/base.css.map
Normal file
1
static/css/base.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["base.sass","base.css","_vars.sass"],"names":[],"mappings":"AACQ,kFAAA;AAER;EACI,uBAAA;ACDJ;;ADGA;EACI,yBENS;ADMb;;ADEA;EACI,gBECS;EFAT,cAAA;ACCJ;;ADCA;EACI,sBAAA;EACA,YAAA;EACA,cEhBG;EFiBH,gCAAA;ACEJ;;ADAA;EACI,qBAAA;ACGJ;;ADAI;EACI,gBAAA;EACA,mBAAA;EACA,+BAAA;ACGR;;ADDA;EACI,cAAA;EACA,eAAA;ACIJ;;ADFA;EACI,iBAAA;EACA,iBAAA;ACKJ;;ADHA;EACI,aAAA;ACMJ;;ADJA;EACI,cExCG;EFyCH,mBEnCY;EFoCZ,gBAAA;EACA,kBAAA;ACOJ;;ADLA;EACI;IACI,cAAA;ECQN;AACF","file":"base.css","sourcesContent":["@import '_vars'\n@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')\n\nhtml\n scroll-behavior: smooth\n\nbody\n background-color: $background\n\nnav, main, footer\n max-width: $main-width\n margin: 0 auto\n\n*, *::before, *::after\n box-sizing: border-box\n border: none\n color: $text\n font-family: 'Inter', sans-serif\n\na\n text-decoration: none\n\nh1, h2, h3\n &, *\n font-weight: 700\n line-height: 4.8rem\n font-family: 'Syne', sans-serif\n\nimg\n display: block\n max-width: 100%\n\np\n line-height: 18px\n line-height: 32px\n\n:focus:not(:focus-visible)\n outline: none\n\nmark\n color: $text\n background: $primary-light\n padding: 5px 7px\n border-radius: 5px\n\n@media (max-width: 900px)\n body\n margin: 0 2rem\n\n","@import url(\"https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap\");\nhtml {\n scroll-behavior: smooth;\n}\n\nbody {\n background-color: #03060d;\n}\n\nnav, main, footer {\n max-width: 800px;\n margin: 0 auto;\n}\n\n*, *::before, *::after {\n box-sizing: border-box;\n border: none;\n color: #f3f3f3;\n font-family: \"Inter\", sans-serif;\n}\n\na {\n text-decoration: none;\n}\n\nh1, h1 *, h2, h2 *, h3, h3 * {\n font-weight: 700;\n line-height: 4.8rem;\n font-family: \"Syne\", sans-serif;\n}\n\nimg {\n display: block;\n max-width: 100%;\n}\n\np {\n line-height: 18px;\n line-height: 32px;\n}\n\n:focus:not(:focus-visible) {\n outline: none;\n}\n\nmark {\n color: #f3f3f3;\n background: #f45a88;\n padding: 5px 7px;\n border-radius: 5px;\n}\n\n@media (max-width: 900px) {\n body {\n margin: 0 2rem;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
|
||||
49
static/css/base.sass
Normal file
49
static/css/base.sass
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@import '_vars'
|
||||
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap')
|
||||
|
||||
html
|
||||
scroll-behavior: smooth
|
||||
|
||||
body
|
||||
background-color: $background
|
||||
|
||||
nav, main, footer
|
||||
max-width: $main-width
|
||||
margin: 0 auto
|
||||
|
||||
*, *::before, *::after
|
||||
box-sizing: border-box
|
||||
border: none
|
||||
color: $text
|
||||
font-family: 'Inter', sans-serif
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
|
||||
h1, h2, h3
|
||||
&, *
|
||||
font-weight: 700
|
||||
line-height: 4.8rem
|
||||
font-family: 'Syne', sans-serif
|
||||
|
||||
img
|
||||
display: block
|
||||
max-width: 100%
|
||||
|
||||
p
|
||||
line-height: 18px
|
||||
line-height: 32px
|
||||
|
||||
:focus:not(:focus-visible)
|
||||
outline: none
|
||||
|
||||
mark
|
||||
color: $text
|
||||
background: $primary-light
|
||||
padding: 5px 7px
|
||||
border-radius: 5px
|
||||
|
||||
@media (max-width: 900px)
|
||||
body
|
||||
margin: 0 2rem
|
||||
|
||||
58
static/css/footer.css
Normal file
58
static/css/footer.css
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
footer {
|
||||
padding-top: 4rem;
|
||||
margin: 4rem auto;
|
||||
max-width: 800px;
|
||||
}
|
||||
footer.wide {
|
||||
max-width: 1000px;
|
||||
}
|
||||
footer div.rows {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
footer div.rows div.row {
|
||||
margin-right: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
footer div.rows div.row:last-child {
|
||||
margin-right: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
footer div.rows div.row h2 {
|
||||
opacity: 1;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
margin: 1rem 0;
|
||||
line-height: normal;
|
||||
}
|
||||
footer div.rows div.row a {
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
font-size: 14px;
|
||||
opacity: 0.6;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
footer div.rows div.row a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
footer p {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
footer div.rows {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
footer div.rows div.row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
footer div.rows {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}/*# sourceMappingURL=footer.css.map */
|
||||
1
static/css/footer.css.map
Normal file
1
static/css/footer.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["footer.sass","_vars.sass","footer.css"],"names":[],"mappings":"AAEA;EACI,iBAAA;EACA,iBAAA;EACA,gBCMS;ACPb;AFGI;EACI,iBCIK;ACLb;AFGI;EACI,aAAA;EACA,sBAAA;EAEA,mBAAA;AEFR;AFIQ;EACI,oBAAA;EACA,qBAAA;AEFZ;AFIY;EACI,eAAA;EACA,gBAAA;AEFhB;AFIY;EACI,UAAA;EACA,eAAA;EACA,gBAAA;EACA,cAAA;EACA,mBAAA;AEFhB;AFIY;EACI,uBAAA;EAAA,kBAAA;EACA,eAAA;EACA,YAAA;EACA,cAAA;EACA,qBAAA;EACA,mBAAA;AEFhB;AFIgB;EACI,YAAA;AEFpB;AFII;EACI,YAAA;AEFR;;AFIA;EAEQ;IACI,mBAAA;IACA,qCAAA;EEFV;EFIU;IACI,mBAAA;EEFd;AACF;AFGA;EAEQ;IACI,0BAAA;EEFV;AACF","file":"footer.css","sourcesContent":["@import '_vars'\n\nfooter\n padding-top: 4rem\n margin: 4rem auto\n max-width: $main-width\n\n &.wide\n max-width: $more-width\n\n div.rows\n display: grid\n grid-auto-flow: column\n // justify-content: space-between\n margin-bottom: 2rem\n\n div.row\n margin-right: 1.5rem\n margin-bottom: 0.5rem\n\n &:last-child\n margin-right: 0\n margin-bottom: 0\n\n h2\n opacity: 1\n font-size: 1rem\n font-weight: 500\n margin: 1rem 0\n line-height: normal\n\n a\n width: fit-content\n font-size: 14px\n opacity: 0.6\n display: block\n text-decoration: none\n margin-bottom: 1rem\n\n &:hover\n opacity: 0.8\n\n p\n opacity: 0.7\n\n@media (max-width: 1000px)\n footer\n div.rows\n grid-auto-flow: row\n grid-template-columns: repeat(2, 1fr)\n\n div.row\n margin-bottom: 1rem\n\n@media (max-width: 600px)\n footer\n div.rows\n grid-template-columns: 1fr\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","footer {\n padding-top: 4rem;\n margin: 4rem auto;\n max-width: 800px;\n}\nfooter.wide {\n max-width: 1000px;\n}\nfooter div.rows {\n display: grid;\n grid-auto-flow: column;\n margin-bottom: 2rem;\n}\nfooter div.rows div.row {\n margin-right: 1.5rem;\n margin-bottom: 0.5rem;\n}\nfooter div.rows div.row:last-child {\n margin-right: 0;\n margin-bottom: 0;\n}\nfooter div.rows div.row h2 {\n opacity: 1;\n font-size: 1rem;\n font-weight: 500;\n margin: 1rem 0;\n line-height: normal;\n}\nfooter div.rows div.row a {\n width: fit-content;\n font-size: 14px;\n opacity: 0.6;\n display: block;\n text-decoration: none;\n margin-bottom: 1rem;\n}\nfooter div.rows div.row a:hover {\n opacity: 0.8;\n}\nfooter p {\n opacity: 0.7;\n}\n\n@media (max-width: 1000px) {\n footer div.rows {\n grid-auto-flow: row;\n grid-template-columns: repeat(2, 1fr);\n }\n footer div.rows div.row {\n margin-bottom: 1rem;\n }\n}\n@media (max-width: 600px) {\n footer div.rows {\n grid-template-columns: 1fr;\n }\n}"]}
|
||||
58
static/css/footer.sass
Normal file
58
static/css/footer.sass
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
@import '_vars'
|
||||
|
||||
footer
|
||||
padding-top: 4rem
|
||||
margin: 4rem auto
|
||||
max-width: $main-width
|
||||
|
||||
&.wide
|
||||
max-width: $more-width
|
||||
|
||||
div.rows
|
||||
display: grid
|
||||
grid-auto-flow: column
|
||||
// justify-content: space-between
|
||||
margin-bottom: 2rem
|
||||
|
||||
div.row
|
||||
margin-right: 1.5rem
|
||||
margin-bottom: 0.5rem
|
||||
|
||||
&:last-child
|
||||
margin-right: 0
|
||||
margin-bottom: 0
|
||||
|
||||
h2
|
||||
opacity: 1
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
margin: 1rem 0
|
||||
line-height: normal
|
||||
|
||||
a
|
||||
width: fit-content
|
||||
font-size: 14px
|
||||
opacity: 0.6
|
||||
display: block
|
||||
text-decoration: none
|
||||
margin-bottom: 1rem
|
||||
|
||||
&:hover
|
||||
opacity: 0.8
|
||||
|
||||
p
|
||||
opacity: 0.7
|
||||
|
||||
@media (max-width: 1000px)
|
||||
footer
|
||||
div.rows
|
||||
grid-auto-flow: row
|
||||
grid-template-columns: repeat(2, 1fr)
|
||||
|
||||
div.row
|
||||
margin-bottom: 1rem
|
||||
|
||||
@media (max-width: 600px)
|
||||
footer
|
||||
div.rows
|
||||
grid-template-columns: 1fr
|
||||
14
static/css/home.css
Normal file
14
static/css/home.css
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
header {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
header {
|
||||
font-size: 26px;
|
||||
}
|
||||
header h1 {
|
||||
line-height: 3rem;
|
||||
}
|
||||
}/*# sourceMappingURL=home.css.map */
|
||||
1
static/css/home.css.map
Normal file
1
static/css/home.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["home.sass","_vars.sass","home.css"],"names":[],"mappings":"AAEA;EACI,gBCQS;EDPT,cAAA;EACA,eAAA;AEDJ;;AFGA;EACI;IACI,eAAA;EEAN;EFEM;IACI,iBAAA;EEAV;AACF","file":"home.css","sourcesContent":["@import '_vars'\n\nheader\n max-width: $main-width\n margin: 0 auto\n font-size: 40px\n\n@media (max-width: 800px)\n header\n font-size: 26px\n \n h1\n line-height: 3rem\n","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n","header {\n max-width: 800px;\n margin: 0 auto;\n font-size: 40px;\n}\n\n@media (max-width: 800px) {\n header {\n font-size: 26px;\n }\n header h1 {\n line-height: 3rem;\n }\n}"]}
|
||||
13
static/css/home.sass
Normal file
13
static/css/home.sass
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
@import '_vars'
|
||||
|
||||
header
|
||||
max-width: $main-width
|
||||
margin: 0 auto
|
||||
font-size: 40px
|
||||
|
||||
@media (max-width: 800px)
|
||||
header
|
||||
font-size: 26px
|
||||
|
||||
h1
|
||||
line-height: 3rem
|
||||
93
static/css/navbar.css
Normal file
93
static/css/navbar.css
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
nav > .logo {
|
||||
display: inline-block;
|
||||
stroke: #f45a88;
|
||||
min-height: 40px;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin-right: 8px;
|
||||
transition: stroke 0.2s;
|
||||
}
|
||||
nav > h1 {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
nav > h1 mark {
|
||||
font-size: 1rem;
|
||||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
nav > span {
|
||||
flex-grow: 1;
|
||||
}
|
||||
nav #menu {
|
||||
display: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.link-menu > a {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-left: 2rem;
|
||||
text-decoration: none;
|
||||
transition: color 0.1s;
|
||||
}
|
||||
.link-menu > a:hover {
|
||||
color: #f45a88;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
.link-menu {
|
||||
transform: scale(0.8) translateX(1rem);
|
||||
opacity: 0;
|
||||
z-index: 100;
|
||||
width: 200px;
|
||||
position: absolute;
|
||||
top: 5rem;
|
||||
right: 2rem;
|
||||
background: #253038;
|
||||
padding: 1rem 0;
|
||||
border-radius: 5px;
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
backdrop-filter: blur(4px);
|
||||
border: 1px solid rgba(22, 29, 43, 0.6901960784);
|
||||
transition: transform 0.2s, opacity 0.2s;
|
||||
}
|
||||
.link-menu.open {
|
||||
opacity: 1;
|
||||
transform: inherit;
|
||||
}
|
||||
.link-menu a {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
line-height: 3rem;
|
||||
}
|
||||
nav .logo {
|
||||
stroke: #f45a88;
|
||||
}
|
||||
nav #menu {
|
||||
display: block;
|
||||
min-height: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
cursor: pointer;
|
||||
transition: 0.5s;
|
||||
}
|
||||
nav #menu.active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
nav h1 {
|
||||
display: none;
|
||||
}
|
||||
}/*# sourceMappingURL=navbar.css.map */
|
||||
1
static/css/navbar.css.map
Normal file
1
static/css/navbar.css.map
Normal file
|
|
@ -0,0 +1 @@
|
|||
{"version":3,"sources":["navbar.sass","navbar.css","_vars.sass"],"names":[],"mappings":"AAEA;EACI,aAAA;EACA,mBAAA;EACA,kBAAA;ACDJ;ADGI;EACI,qBAAA;EACA,eEHQ;EFIR,gBAAA;EACA,eAAA;EACA,YAAA;EACA,WAAA;EAEA,iBAAA;EACA,uBAAA;ACFR;ADII;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACFR;ADIQ;EACI,eAAA;EACA,kBAAA;EACA,SAAA;ACFZ;ADKI;EACI,YAAA;ACHR;ADMI;EACI,aAAA;EACA,eAAA;ACJR;;ADOI;EACI,eAAA;EACA,gBAAA;EACA,iBAAA;EACA,qBAAA;EACA,sBAAA;ACJR;ADMQ;EACI,cExCI;ADoChB;;ADMA;EACI;IACI,sCAAA;IACA,UAAA;IAEA,YAAA;IACA,YAAA;IACA,kBAAA;IACA,SAAA;IACA,WAAA;IACA,mBExDI;IFyDJ,eAAA;IACA,kBEnDD;IFoDC,kCAAA;YAAA,0BAAA;IACA,gDAAA;IAEA,wCAAA;ECLN;EDOM;IACI,UAAA;IACA,kBAAA;ECLV;EDOM;IACI,eAAA;IACA,cAAA;IACA,iBAAA;ECLV;EDQM;IACI,eEvEI;EDiEd;EDQM;IACI,cAAA;IACA,gBAAA;IACA,eAAA;IACA,YAAA;IACA,WAAA;IACA,eAAA;IACA,gBAAA;ECNV;EDQU;IACI,wBAAA;ECNd;AACF;ADOA;EAEQ;IACI,aAAA;ECNV;AACF","file":"navbar.css","sourcesContent":["@import '_vars'\n\nnav\n display: flex\n align-items: center\n position: relative\n\n >.logo\n display: inline-block\n stroke: $primary-light\n min-height: 40px\n min-width: 40px\n height: 40px\n width: 40px\n\n margin-right: 8px\n transition: stroke 0.2s\n\n >h1\n font-weight: 500\n font-size: 20px\n user-select: none\n\n mark\n font-size: 1rem\n position: relative\n top: -3px\n\n\n >span\n flex-grow: 1\n\n\n #menu\n display: none\n cursor: pointer\n\n.link-menu\n >a\n font-size: 14px\n font-weight: 600\n margin-left: 2rem\n text-decoration: none\n transition: color 0.1s\n\n &:hover\n color: $primary-light\n\n@media (max-width: 800px)\n .link-menu\n transform: scale(0.8) translateX(1rem)\n opacity: 0\n\n z-index: 100\n width: 200px\n position: absolute\n top: 5rem\n right: 2rem\n background: $secondary\n padding: 1rem 0\n border-radius: $edge\n backdrop-filter: blur(4px)\n border: 1px solid $border\n\n transition: transform 0.2s, opacity 0.2s\n\n &.open\n opacity: 1\n transform: inherit\n\n a\n font-size: 20px\n display: block\n line-height: 3rem\n\n nav\n .logo\n stroke: $primary-light\n\n #menu\n display: block\n min-height: 32px\n min-width: 32px\n height: 32px\n width: 32px\n cursor: pointer\n transition: 0.5s\n\n &.active\n transform: rotate(90deg)\n\n@media (max-width: 400px)\n nav\n h1\n display: none","nav {\n display: flex;\n align-items: center;\n position: relative;\n}\nnav > .logo {\n display: inline-block;\n stroke: #f45a88;\n min-height: 40px;\n min-width: 40px;\n height: 40px;\n width: 40px;\n margin-right: 8px;\n transition: stroke 0.2s;\n}\nnav > h1 {\n font-weight: 500;\n font-size: 20px;\n user-select: none;\n}\nnav > h1 mark {\n font-size: 1rem;\n position: relative;\n top: -3px;\n}\nnav > span {\n flex-grow: 1;\n}\nnav #menu {\n display: none;\n cursor: pointer;\n}\n\n.link-menu > a {\n font-size: 14px;\n font-weight: 600;\n margin-left: 2rem;\n text-decoration: none;\n transition: color 0.1s;\n}\n.link-menu > a:hover {\n color: #f45a88;\n}\n\n@media (max-width: 800px) {\n .link-menu {\n transform: scale(0.8) translateX(1rem);\n opacity: 0;\n z-index: 100;\n width: 200px;\n position: absolute;\n top: 5rem;\n right: 2rem;\n background: #253038;\n padding: 1rem 0;\n border-radius: 5px;\n backdrop-filter: blur(4px);\n border: 1px solid rgba(22, 29, 43, 0.6901960784);\n transition: transform 0.2s, opacity 0.2s;\n }\n .link-menu.open {\n opacity: 1;\n transform: inherit;\n }\n .link-menu a {\n font-size: 20px;\n display: block;\n line-height: 3rem;\n }\n nav .logo {\n stroke: #f45a88;\n }\n nav #menu {\n display: block;\n min-height: 32px;\n min-width: 32px;\n height: 32px;\n width: 32px;\n cursor: pointer;\n transition: 0.5s;\n }\n nav #menu.active {\n transform: rotate(90deg);\n }\n}\n@media (max-width: 400px) {\n nav h1 {\n display: none;\n }\n}","$text: #f3f3f3\n$background: #03060d\n$secondary: #253038\n$border: #161d2bb0\n\n$primary: #922646\n$primary-light: #f45a88\n$accent: #28aaf0\n\n$edge: 5px\n\n$main-width: 800px\n$more-width: 1000px\n"]}
|
||||
95
static/css/navbar.sass
Normal file
95
static/css/navbar.sass
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
@import '_vars'
|
||||
|
||||
nav
|
||||
display: flex
|
||||
align-items: center
|
||||
position: relative
|
||||
|
||||
>.logo
|
||||
display: inline-block
|
||||
stroke: $primary-light
|
||||
min-height: 40px
|
||||
min-width: 40px
|
||||
height: 40px
|
||||
width: 40px
|
||||
|
||||
margin-right: 8px
|
||||
transition: stroke 0.2s
|
||||
|
||||
>h1
|
||||
font-weight: 500
|
||||
font-size: 20px
|
||||
user-select: none
|
||||
|
||||
mark
|
||||
font-size: 1rem
|
||||
position: relative
|
||||
top: -3px
|
||||
|
||||
|
||||
>span
|
||||
flex-grow: 1
|
||||
|
||||
|
||||
#menu
|
||||
display: none
|
||||
cursor: pointer
|
||||
|
||||
.link-menu
|
||||
>a
|
||||
font-size: 14px
|
||||
font-weight: 600
|
||||
margin-left: 2rem
|
||||
text-decoration: none
|
||||
transition: color 0.1s
|
||||
|
||||
&:hover
|
||||
color: $primary-light
|
||||
|
||||
@media (max-width: 800px)
|
||||
.link-menu
|
||||
transform: scale(0.8) translateX(1rem)
|
||||
opacity: 0
|
||||
|
||||
z-index: 100
|
||||
width: 200px
|
||||
position: absolute
|
||||
top: 5rem
|
||||
right: 2rem
|
||||
background: $secondary
|
||||
padding: 1rem 0
|
||||
border-radius: $edge
|
||||
backdrop-filter: blur(4px)
|
||||
border: 1px solid $border
|
||||
|
||||
transition: transform 0.2s, opacity 0.2s
|
||||
|
||||
&.open
|
||||
opacity: 1
|
||||
transform: inherit
|
||||
|
||||
a
|
||||
font-size: 20px
|
||||
display: block
|
||||
line-height: 3rem
|
||||
|
||||
nav
|
||||
.logo
|
||||
stroke: $primary-light
|
||||
|
||||
#menu
|
||||
display: block
|
||||
min-height: 32px
|
||||
min-width: 32px
|
||||
height: 32px
|
||||
width: 32px
|
||||
cursor: pointer
|
||||
transition: 0.5s
|
||||
|
||||
&.active
|
||||
transform: rotate(90deg)
|
||||
|
||||
@media (max-width: 400px)
|
||||
nav
|
||||
h1
|
||||
display: none
|
||||
BIN
static/img/fav.ico
Normal file
BIN
static/img/fav.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
static/img/icon.png
Normal file
BIN
static/img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
9
templates/index.html
Normal file
9
templates/index.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{% include 'parts/begin.html' %}
|
||||
<link rel="stylesheet" href="/static/css/home.css">
|
||||
|
||||
<header>
|
||||
<h1>Free Generative AI for everyone</h1>
|
||||
</header>
|
||||
<main>
|
||||
</main>
|
||||
{% include 'parts/end.html' %}
|
||||
Loading…
Reference in a new issue