mirror of
https://github.com/Findus23/nonsense.git
synced 2024-09-19 16:03:50 +02:00
style changes
This commit is contained in:
parent
8ee8ff77e0
commit
5484fd6473
4 changed files with 69 additions and 42 deletions
|
@ -46,7 +46,6 @@
|
||||||
<path d="M121.4 198.8c-.2-.2-5.1-.4-10.9-.5-5.7-.1-10.4-.4-10.4-.7 0-.3 9-10 20-21.8l20.1-21.4-50.8-.2-50.9-.2V134.3l51-.2 51.1-.2-16.7-17.6-20.4-21.6-3.8-3.9H124.4l24.6 26.3a687.5 687.5 0 0 1 24.6 27.1c0 .7-41.6 45-48.7 52-1.7 1.6-3.3 2.8-3.5 2.6z"></path>
|
<path d="M121.4 198.8c-.2-.2-5.1-.4-10.9-.5-5.7-.1-10.4-.4-10.4-.7 0-.3 9-10 20-21.8l20.1-21.4-50.8-.2-50.9-.2V134.3l51-.2 51.1-.2-16.7-17.6-20.4-21.6-3.8-3.9H124.4l24.6 26.3a687.5 687.5 0 0 1 24.6 27.1c0 .7-41.6 45-48.7 52-1.7 1.6-3.3 2.8-3.5 2.6z"></path>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
<span id="button">Neu Generieren</span>
|
|
||||||
</a>
|
</a>
|
||||||
<div id="box">
|
<div id="box">
|
||||||
<div id="name">
|
<div id="name">
|
||||||
|
@ -66,8 +65,8 @@
|
||||||
fill="currentColor" class="octo-body"></path>
|
fill="currentColor" class="octo-body"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="https://lw1.at/?pk_campaign=nonsense" id="more_information" target="_blank">
|
<a href="https://lw1.at/?pk_campaign=nonsense" id="more_information" target="_blank" title="Mehr Projekte">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||||
<path class="circle"
|
<path class="circle"
|
||||||
d="m12 2.085c-5.477 0-9.915 4.438-9.915 9.916 0 5.48 4.438 9.92 9.916 9.92 5.48 0 9.92-4.44 9.92-9.913 0-5.477-4.44-9.915-9.913-9.915zm.002 18a8.084 8.084 0 1 1 0 -16.17 8.084 8.084 0 0 1 0 16.17z"></path>
|
d="m12 2.085c-5.477 0-9.915 4.438-9.915 9.916 0 5.48 4.438 9.92 9.916 9.92 5.48 0 9.92-4.44 9.92-9.913 0-5.477-4.44-9.915-9.913-9.915zm.002 18a8.084 8.084 0 1 1 0 -16.17 8.084 8.084 0 0 1 0 16.17z"></path>
|
||||||
<path class="info"
|
<path class="info"
|
||||||
|
|
100
public/style.css
100
public/style.css
|
@ -3,61 +3,76 @@ body, html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #003399;
|
background: #003399;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: "Verdana", "Liberation Sans", sans-serif; }
|
font-family: "Noto Sans", "Liberation Sans", "Verdana", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
#contentbox {
|
#contentbox {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%; }
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
#box {
|
#box {
|
||||||
background: #ffcc00;
|
background: #ffcc00;
|
||||||
padding: 16px; }
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
#buttonwrapper {
|
#buttonwrapper {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 50px;
|
top: 50px;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center; }
|
align-items: center;
|
||||||
@media screen and (max-height: 400px) {
|
}
|
||||||
#buttonwrapper {
|
@media screen and (max-height: 400px) {
|
||||||
top: 10px; } }
|
#buttonwrapper {
|
||||||
#buttonwrapper:hover {
|
top: 10px;
|
||||||
text-decoration: none; }
|
}
|
||||||
#buttonwrapper:hover #icon {
|
}
|
||||||
transform: rotate(90deg); }
|
#buttonwrapper:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
#buttonwrapper:hover #icon {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
#icon {
|
#icon {
|
||||||
width: 70px;
|
width: 70px;
|
||||||
height: 70px;
|
height: 70px;
|
||||||
transition: transform .3s;
|
transition: transform 0.3s;
|
||||||
margin-right: 10px; }
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
#button {
|
#button {
|
||||||
color: white;
|
color: white;
|
||||||
text-transform: uppercase; }
|
/*text-transform: uppercase;*/
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
#name {
|
#name {
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 16px; }
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
#description {
|
#description {
|
||||||
font-size: 1.2rem; }
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
#share {
|
#share {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
#share svg {
|
}
|
||||||
fill: white;
|
#share svg {
|
||||||
width: 40px;
|
fill: white;
|
||||||
height: 40px;
|
width: 40px;
|
||||||
display: block; }
|
height: 40px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.github-corner svg {
|
.github-corner svg {
|
||||||
fill: #ffcc00;
|
fill: #ffcc00;
|
||||||
|
@ -65,32 +80,43 @@ body, html {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
border: 0;
|
border: 0;
|
||||||
right: 0; }
|
right: 0;
|
||||||
|
}
|
||||||
.github-corner:hover .octo-arm {
|
.github-corner:hover .octo-arm {
|
||||||
animation: octocat-wave 560ms ease-in-out; }
|
animation: octocat-wave 560ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
#more_information {
|
#more_information {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
padding: 10px; }
|
padding: 10px;
|
||||||
#more_information svg {
|
}
|
||||||
fill: white;
|
#more_information svg {
|
||||||
width: 32px;
|
fill: white;
|
||||||
height: 32px;
|
width: 32px;
|
||||||
display: block; }
|
height: 32px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes octocat-wave {
|
@keyframes octocat-wave {
|
||||||
0%, 100% {
|
0%, 100% {
|
||||||
transform: rotate(0); }
|
transform: rotate(0);
|
||||||
|
}
|
||||||
20%, 60% {
|
20%, 60% {
|
||||||
transform: rotate(-25deg); }
|
transform: rotate(-25deg);
|
||||||
|
}
|
||||||
40%, 80% {
|
40%, 80% {
|
||||||
transform: rotate(10deg); } }
|
transform: rotate(10deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@media (max-width: 500px) {
|
@media (max-width: 500px) {
|
||||||
.github-corner:hover .octo-arm {
|
.github-corner:hover .octo-arm {
|
||||||
animation: none; }
|
animation: none;
|
||||||
|
}
|
||||||
.github-corner .octo-arm {
|
.github-corner .octo-arm {
|
||||||
animation: octocat-wave 560ms ease-in-out; } }
|
animation: octocat-wave 560ms ease-in-out;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=style.css.map */
|
||||||
|
|
1
public/style.css.map
Normal file
1
public/style.css.map
Normal file
|
@ -0,0 +1 @@
|
||||||
|
{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA,YALW;EAMX;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,YApBa;EAqBb;;;AAGF;EAIE;EACA;EACA;EACA;EACA;;AAPA;EADF;IAEI;;;AAOF;EACE;;AACA;EACE;;;AAKN;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAKF;EACE,MA/EW;EAgFX,OA/ES;EAgFT;EACA;EACA;EACA;;AAEF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;IACE;;EAEF;IACE;;EAEF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE","file":"style.css"}
|
|
@ -6,7 +6,7 @@ body, html {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: $famousBlue;
|
background: $famousBlue;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: "Verdana", "Liberation Sans", sans-serif;
|
font-family: "Noto Sans", "Liberation Sans", "Verdana", sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
#contentbox {
|
#contentbox {
|
||||||
|
@ -49,6 +49,7 @@ body, html {
|
||||||
#button {
|
#button {
|
||||||
color: white;
|
color: white;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#name {
|
#name {
|
||||||
|
|
Loading…
Reference in a new issue