cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

index2.html: lay out css style to style2.css

Browse source
This commit is contained in:
coon 2023-11-07 21:34:11 +01:00
parent 0515812c4e
commit 60cf813056
2 changed files with 65 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
static/index2.html
View file

@ -5,68 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>WebSocket</title> <title>WebSocket</title>
<style> <link rel="stylesheet" type="text/css" href="style2.css" />
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 128px 1fr 1fr 32px;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "header" "playlist" "db" "footer";
}
header {
display: grid;
grid-template-columns: 128px 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "config playback-controls playlist-controls track-info";
grid-area: header;
}
section.playlist {
grid-area: playlist;
}
header .config {
grid-area: config;
}
header .playback-controls {
grid-area: playback-controls;
}
header .playlist-controls {
grid-area: playlist-controls;
}
header .track-info {
grid-area: track-info;
}
footer {
grid-area: footer;
}
section.db {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "tabs result";
grid-area: db;
}
.db .tabs {
grid-area: tabs;
}
.db .result {
grid-area: result;
}
</style>
</head> </head>
<body> <body>
<header class="header"> <header class="header">

64
static/style2.css Normal file
View file

@ -0,0 +1,64 @@
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 128px 1fr 1fr 32px;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "header" "playlist" "db" "footer";
}
header {
display: grid;
grid-template-columns: 128px 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "config playback-controls playlist-controls track-info";
grid-area: header;
}
div {
border: dotted 1px;
}
section.playlist {
grid-area: playlist;
}
header .config {
grid-area: config;
}
header .playback-controls {
grid-area: playback-controls;
}
header .playlist-controls {
grid-area: playlist-controls;
}
header .track-info {
grid-area: track-info;
}
footer {
grid-area: footer;
}
section.db {
display: grid;
grid-template-columns: 0.7fr 1.3fr;
grid-template-rows: 1fr;
gap: 0 0;
grid-auto-flow: row;
grid-template-areas: "tabs result";
grid-area: db;
}
.db .tabs {
grid-area: tabs;
}
.db .result {
grid-area: result;
}