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
GPG key ID:
54DE4D798D244853
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>
|
||||
</g>
|
||||
</svg>
|
||||
<span id="button">Neu Generieren</span>
|
||||
</a>
|
||||
<div id="box">
|
||||
<div id="name">
|
||||
|
|
@ -66,8 +65,8 @@
|
|||
fill="currentColor" class="octo-body"></path>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="https://lw1.at/?pk_campaign=nonsense" id="more_information" target="_blank">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
||||
<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">
|
||||
<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>
|
||||
<path class="info"
|
||||
|
|
|
|||
100
public/style.css
100
public/style.css
|
|
@ -3,61 +3,76 @@ body, html {
|
|||
margin: 0;
|
||||
background: #003399;
|
||||
height: 100%;
|
||||
font-family: "Verdana", "Liberation Sans", sans-serif; }
|
||||
font-family: "Noto Sans", "Liberation Sans", "Verdana", sans-serif;
|
||||
}
|
||||
|
||||
#contentbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
height: 100%; }
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box {
|
||||
background: #ffcc00;
|
||||
padding: 16px; }
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#buttonwrapper {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center; }
|
||||
@media screen and (max-height: 400px) {
|
||||
#buttonwrapper {
|
||||
top: 10px; } }
|
||||
#buttonwrapper:hover {
|
||||
text-decoration: none; }
|
||||
#buttonwrapper:hover #icon {
|
||||
transform: rotate(90deg); }
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (max-height: 400px) {
|
||||
#buttonwrapper {
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
#buttonwrapper:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
#buttonwrapper:hover #icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
transition: transform .3s;
|
||||
margin-right: 10px; }
|
||||
transition: transform 0.3s;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#button {
|
||||
color: white;
|
||||
text-transform: uppercase; }
|
||||
/*text-transform: uppercase;*/
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#name {
|
||||
font-size: 2.25rem;
|
||||
text-align: center;
|
||||
margin-bottom: 16px; }
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#description {
|
||||
font-size: 1.2rem; }
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
#share {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px; }
|
||||
#share svg {
|
||||
fill: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: block; }
|
||||
padding: 10px;
|
||||
}
|
||||
#share svg {
|
||||
fill: white;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.github-corner svg {
|
||||
fill: #ffcc00;
|
||||
|
|
@ -65,32 +80,43 @@ body, html {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
border: 0;
|
||||
right: 0; }
|
||||
|
||||
right: 0;
|
||||
}
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out; }
|
||||
animation: octocat-wave 560ms ease-in-out;
|
||||
}
|
||||
|
||||
#more_information {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px; }
|
||||
#more_information svg {
|
||||
fill: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block; }
|
||||
padding: 10px;
|
||||
}
|
||||
#more_information svg {
|
||||
fill: white;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@keyframes octocat-wave {
|
||||
0%, 100% {
|
||||
transform: rotate(0); }
|
||||
transform: rotate(0);
|
||||
}
|
||||
20%, 60% {
|
||||
transform: rotate(-25deg); }
|
||||
transform: rotate(-25deg);
|
||||
}
|
||||
40%, 80% {
|
||||
transform: rotate(10deg); } }
|
||||
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
@media (max-width: 500px) {
|
||||
.github-corner:hover .octo-arm {
|
||||
animation: none; }
|
||||
animation: none;
|
||||
}
|
||||
.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;
|
||||
background: $famousBlue;
|
||||
height: 100%;
|
||||
font-family: "Verdana", "Liberation Sans", sans-serif;
|
||||
font-family: "Noto Sans", "Liberation Sans", "Verdana", sans-serif;
|
||||
}
|
||||
|
||||
#contentbox {
|
||||
|
|
@ -49,6 +49,7 @@ body, html {
|
|||
#button {
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#name {
|
||||
|
|
@ -121,4 +122,4 @@ body, html {
|
|||
.github-corner .octo-arm {
|
||||
animation: octocat-wave 560ms ease-in-out
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue