stripes + central css
This commit is contained in:
Yann Esposito (Yogsototh)
parent
8da9e55d41
commit
ccdae5708f
GPG key ID:
7B19A4C650D59646
3 changed files with 71 additions and 101 deletions
69
brutalist.css
Normal file
69
brutalist.css
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
/* Brutalist style CSS */
|
||||
html {
|
||||
background:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
#002b36,
|
||||
#002b36 10px,
|
||||
#000b10 10px,
|
||||
#000b10 20px ); }
|
||||
|
||||
body {
|
||||
padding: 2em;
|
||||
display: block;
|
||||
color: #586e75;
|
||||
margin: 2em auto 0;
|
||||
max-width: 30em;
|
||||
font-family: Consolas, Menlo, monospace;
|
||||
line-height: 1.2em;
|
||||
font-size: 18px;
|
||||
background-color: #fdf6e3; }
|
||||
|
||||
strong { color: #657b83; }
|
||||
a { color: #268bd2;}
|
||||
a:visited { color: #6c71c4; }
|
||||
a:hover { color: #cb4b16; }
|
||||
a:active { color: #dc322f; }
|
||||
|
||||
a > code {
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px;
|
||||
padding: 5px;}
|
||||
|
||||
code,pre {
|
||||
background-color: #eee8d5;}
|
||||
|
||||
pre { padding: 1em;
|
||||
border: solid 2px;
|
||||
font-size: 0.7em;
|
||||
box-shadow: 8px 8px 0; }
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
background-color: #eee8d5; }
|
||||
|
||||
.button:hover {
|
||||
cursor: pointer;
|
||||
color: #FFF;
|
||||
box-shadow: 4px 4px 0 #000;
|
||||
border-color: #000; }
|
||||
|
||||
.button:active {
|
||||
box-shadow: 0 0;
|
||||
top: 4px;
|
||||
left: 4px;
|
||||
position: relative; }
|
||||
|
||||
.button.ok-button:hover {
|
||||
background-color: #859900;}
|
||||
|
||||
.button.deny-button:hover {
|
||||
background-color: #dc322f;}
|
||||
|
||||
.code {
|
||||
word-wrap: break-word; }
|
||||
50
index.html
50
index.html
|
|
@ -1,55 +1,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Authorize an App</title>
|
||||
<style>
|
||||
/* Brutalist style CSS */
|
||||
body { display: block;
|
||||
color: #586e75;
|
||||
margin: 2em auto 0;
|
||||
max-width: 30em;
|
||||
font-family: Consolas, Menlo, monospace;
|
||||
line-height: 1.2em;
|
||||
font-size: 18px;
|
||||
background-color: #fdf6e3;
|
||||
}
|
||||
strong { color: #657b83; }
|
||||
a { color: #268bd2;
|
||||
}
|
||||
a:visited { color: #6c71c4; }
|
||||
a:hover { color: #cb4b16; }
|
||||
a:active { color: #dc322f; }
|
||||
a > code {
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
code {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
|
||||
.button { display: inline-block;
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
.button:hover { cursor: pointer;
|
||||
color: #FFF;
|
||||
box-shadow: 4px 4px 0 #000;
|
||||
border-color: #000;
|
||||
}
|
||||
.button:active { box-shadow: 0 0; top: 4px; left: 4px; position: relative; }
|
||||
.button.ok-button:hover { background-color: #859900;}
|
||||
.button.deny-button:hover { background-color: #dc322f;}
|
||||
.client-name { border-bottom: solid 4px #444;
|
||||
padding: 2px;
|
||||
display: inline-block;}
|
||||
.redirect-uri { display: block;
|
||||
margin: 2em 0;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="brutalist.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Yolo App</h1>
|
||||
|
|
|
|||
53
login.html
53
login.html
|
|
@ -2,58 +2,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>OAuth2 Demo Login</title>
|
||||
<meta charset="utf-8">
|
||||
<style>
|
||||
/* Brutalist style CSS */
|
||||
body { display: block;
|
||||
color: #586e75;
|
||||
margin: 2em auto 0;
|
||||
max-width: 30em;
|
||||
font-family: Consolas, Menlo, monospace;
|
||||
line-height: 1.2em;
|
||||
font-size: 18px;
|
||||
background-color: #fdf6e3;
|
||||
}
|
||||
strong { color: #657b83; }
|
||||
a { color: #268bd2;
|
||||
}
|
||||
a:visited { color: #6c71c4; }
|
||||
a:hover { color: #cb4b16; }
|
||||
a:active { color: #dc322f; }
|
||||
a > code {
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px;
|
||||
padding: 5px;
|
||||
}
|
||||
code,pre {
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
pre { padding: 1em; border: solid 2px; font-size: 0.7em; box-shadow: 8px 8px 0; }
|
||||
|
||||
.button { display: inline-block;
|
||||
border: solid 2px;
|
||||
box-shadow: 4px 4px 0;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
padding: 5px;
|
||||
background-color: #eee8d5;
|
||||
}
|
||||
.button:hover { cursor: pointer;
|
||||
color: #FFF;
|
||||
box-shadow: 4px 4px 0 #000;
|
||||
border-color: #000;
|
||||
}
|
||||
.button:active { box-shadow: 0 0; top: 4px; left: 4px; position: relative; }
|
||||
.button.ok-button:hover { background-color: #859900;}
|
||||
.button.deny-button:hover { background-color: #dc322f;}
|
||||
.client-name { border-bottom: solid 4px #444;
|
||||
padding: 2px;
|
||||
display: inline-block;}
|
||||
.redirect-uri { display: block;
|
||||
margin: 2em 0;
|
||||
}
|
||||
.code { word-wrap: break-word; }
|
||||
</style>
|
||||
<link rel="stylesheet" href="brutalist.css" />
|
||||
</head>
|
||||
<body>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue