Revert home page to existing page
This commit is contained in:
binwiederhier
parent
31a3bb7cd6
commit
5b14c76e54
10 changed files with 66 additions and 255 deletions
10
web/public/static/css/app.css
Normal file
10
web/public/static/css/app.css
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* web app styling overrides */
|
||||
|
||||
a, a:visited {
|
||||
color: #338574;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #317f6f;
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/* general styling */
|
||||
|
||||
#site {
|
||||
html, body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1.1em;
|
||||
|
|
@ -9,16 +9,22 @@
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#site a, a:visited {
|
||||
html {
|
||||
/* prevent scrollbar from repositioning website:
|
||||
* https://www.w3docs.com/snippets/css/how-to-prevent-scrollbar-from-repositioning-web-page.html */
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
color: #338574;
|
||||
}
|
||||
|
||||
#site a:hover {
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
color: #317f6f;
|
||||
}
|
||||
|
||||
#site h1 {
|
||||
h1 {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2.5em;
|
||||
|
|
@ -28,7 +34,7 @@
|
|||
color: #666;
|
||||
}
|
||||
|
||||
#site h2 {
|
||||
h2 {
|
||||
margin-top: 30px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.8em;
|
||||
|
|
@ -36,7 +42,7 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
#site h3 {
|
||||
h3 {
|
||||
margin-top: 25px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.3em;
|
||||
|
|
@ -44,28 +50,28 @@
|
|||
color: #333;
|
||||
}
|
||||
|
||||
#site p {
|
||||
p {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
line-height: 160%;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
#site p.smallMarginBottom {
|
||||
p.smallMarginBottom {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#site b {
|
||||
b {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#site tt {
|
||||
tt {
|
||||
background: #eee;
|
||||
padding: 2px 7px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#site code {
|
||||
code {
|
||||
display: block;
|
||||
background: #eee;
|
||||
font-family: monospace;
|
||||
|
|
@ -79,18 +85,18 @@
|
|||
|
||||
/* Main page */
|
||||
|
||||
#site #main {
|
||||
#main {
|
||||
max-width: 900px;
|
||||
margin: 0 auto 50px auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#site #error {
|
||||
#error {
|
||||
color: darkred;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#site #ironicCenterTagDontFreakOut {
|
||||
#ironicCenterTagDontFreakOut {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
|
|
@ -114,22 +120,22 @@
|
|||
|
||||
/* Figures */
|
||||
|
||||
#site figure {
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site figure img, figure video {
|
||||
figure img, figure video {
|
||||
filter: drop-shadow(3px 3px 3px #ccc);
|
||||
border-radius: 7px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
#site figure video {
|
||||
figure video {
|
||||
width: 100%;
|
||||
max-height: 450px;
|
||||
}
|
||||
|
||||
#site figcaption {
|
||||
figcaption {
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
padding-top: 10px;
|
||||
|
|
@ -137,18 +143,18 @@
|
|||
|
||||
/* Screenshots */
|
||||
|
||||
#site #screenshots {
|
||||
#screenshots {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#site #screenshots img {
|
||||
#screenshots img {
|
||||
height: 190px;
|
||||
margin: 3px;
|
||||
border-radius: 5px;
|
||||
filter: drop-shadow(2px 2px 2px #ddd);
|
||||
}
|
||||
|
||||
#site #screenshots .nowrap {
|
||||
#screenshots .nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -214,60 +220,52 @@
|
|||
|
||||
/* Header */
|
||||
|
||||
#site #header {
|
||||
#header {
|
||||
background: #338574;
|
||||
background: linear-gradient(150deg, rgba(51,133,116,1) 0%, rgba(86,189,168,1) 100%); filter: drop-shadow(0 5px 10px #ccc);
|
||||
height: 70px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
#site #header #headerBox {
|
||||
#header #headerBox {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
#site #header #logo {
|
||||
margin-top: 14px;
|
||||
width: 48px;
|
||||
#header #logo {
|
||||
margin-top: 23px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
#site #header #name {
|
||||
#header #name {
|
||||
float: left;
|
||||
color: white;
|
||||
font-size: 1.7em;
|
||||
font-weight: 400;
|
||||
margin: 12px 0 0 10px;
|
||||
font-size: 2.6em;
|
||||
font-weight: 300;
|
||||
margin: 35px 0 0 20px;
|
||||
}
|
||||
|
||||
#site #header #menu {
|
||||
#header ol {
|
||||
list-style-type: none;
|
||||
float: right;
|
||||
margin-top: 16px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
#site #header #menu li {
|
||||
#header ol li {
|
||||
display: inline-block;
|
||||
padding: 3px 10px;
|
||||
margin: 0 10px;
|
||||
font-weight: 400;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#site #header #menu li {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#site #header #menu li a,
|
||||
#site #header #menu li a:visited {
|
||||
#header ol li a, nav ol li a:visited {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#site #header #menu li:hover {
|
||||
background: #3f9a86;
|
||||
#header ol li a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#site li {
|
||||
li {
|
||||
padding: 4px 0;
|
||||
margin: 4px 0;
|
||||
font-size: 0.9em;
|
||||
|
|
@ -276,7 +274,7 @@
|
|||
|
||||
/* Hide top menu SMALL SCREEN */
|
||||
@media only screen and (max-width: 780px) {
|
||||
#header #menu {
|
||||
#header ol {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue