Skip to content

Commit

Permalink
#8
Browse files Browse the repository at this point in the history
  • Loading branch information
@extratone
extratone committed Dec 23, 2021
1 parent 391adb8 commit d8c6ae4
Show file tree
Hide file tree
Showing 63 changed files with 12,380 additions and 0 deletions.
243 changes: 243 additions & 0 deletions documentation/missrose.org/css/iphonex.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
.phone-wrapper {
width: 75%;
float: right;
}
.phone {
position: relative;
padding: 6% 7%;
}
.phone-ls {
padding: 3.3% 3%;
}
.phone-body {
position: absolute;
top: 0;
right: 1%;
bottom: 0;
left: 1%;
background: linear-gradient(to top, #e5e5e5 0%, #f7f7f9 10%, #eeeef0 90%);
border-radius: 14%/7%;
box-shadow: inset 0 0 3px 1px #000
}
.phone-ls>.phone-body {
top: 1%;
right: 0;
bottom: 1%;
left: 0;
border-radius: 7%/14%;
}
.phone-body:before {
content: '';
position: absolute;
top: .7%;
right: 1.4%;
bottom: .7%;
left: 1.4%;
background-color: #000;
border-radius: 13%/7%;
box-shadow: 0 0 3px #000
}
.phone-ls>.phone-body:before {
top: 1.4%;
right: .7%;
bottom: 1.4%;
left: .7%;
border-radius: 7%/13%;
}
.phone-body:after {
content: '';
position: absolute;
top: 1%;
right: 2.3%;
bottom: 1%;
left: 2.3%;
background-color: #000;
box-shadow: inset 0 0 10px 2px #fff;
border-radius: 13%/6.5%;
}
.phone-ls>.phone-body:after {
top: 2.3%;
right: 1%;
bottom: 2.3%;
left: 1%;
border-radius: 6.5%/13%;
}
.phone-body-cut {
position: absolute;
z-index: 2;
top: 3%;
left: 50%;
width: 50%;
height: 3.5%;
background-color: #000;
border-radius: 0 0 10% 10%/80%;
transform: translate3d(-50%, 0, 0);
}
.phone-ls .phone-body-cut {
top: 50%;
left: 3%;
width: 3.5%;
height: 50%;
border-radius: 0 80% 80% 0/10%;
transform: translate3d(0, -50%, 0);
}
.phone-body-speaker,
.phone-body-camera,
.phone-body-sensor {
position: absolute;
z-index: 2;
background-color: #222;
transform: translate(-50%, -50%);
}
.phone-body-speaker {
top: 4%;
left: 50%;
width: 12%;
height: .8%;
border-radius: 5px;
}
.phone-ls .phone-body-speaker {
top: 50%;
left: 4%;
width: .8%;
height: 12%;
}
.phone-body-camera {
top: 4%;
left: 36%;
width: 3.5%;
height: 1.7%;
border-radius: 50%;
box-shadow: inset 0 0 2px 1px #000;
}
.phone-ls .phone-body-camera {
top: 64%;
left: 4%;
width: 1.7%;
height: 3.5%;
}
.phone-body-sensor {
top: 4%;
left: 61%;
width: 2.2%;
height: 1.1%;
border-radius: 50%;
background-color: #2a4a73;
box-shadow: inset 0 0 2px 1px #000;
}
.phone-ls .phone-body-sensor {
top: 39%;
left: 4%;
width: 1.1%;
height: 2.2%;
}
.phone-body-mute,
.phone-body-up,
.phone-body-down,
.phone-body-right {
position: absolute;
background-color: #b5b8ba;
box-shadow: inset 0 5px 5px -3px rgba(0, 0, 0, .5), inset 0 -5px 5px -3px rgba(0, 0, 0, .5);
transform: translate(0, -50%);
}
.phone-ls .phone-body-mute,
.phone-ls .phone-body-up,
.phone-ls .phone-body-down,
.phone-ls .phone-body-right {
box-shadow: inset 5px 0 5px -3px rgba(0, 0, 0, .5), inset -5px 0 5px -3px rgba(0, 0, 0, .5);
transform: translate(-50%, 0);
}
.phone-ls .phone-body-right {
background-color: #f4f6f6;
}
.phone-body-mute {
top: 14.7%;
left: -.7%;
width: .7%;
height: 4%;
border-radius: 1px 0 0 1px;
}
.phone-ls .phone-body-mute {
top: auto;
left: 14.7%;
bottom: -.7%;
width: 4%;
height: .7%;
border-radius: 0 0 1px 1px;
}
.phone-body-up,
.phone-body-down {
left: -1%;
width: 1%;
height: 7.5%;
border-radius: 2px 0 0 2px;
}
.phone-ls .phone-body-up,
.phone-ls .phone-body-down {
bottom: -1%;
width: 7.5%;
height: 1%;
border-radius: 0 0 2px 2px;
}
.phone-body-up {
top: 25%;
}
.phone-ls .phone-body-up {
top: auto;
left: 25%;
}
.phone-body-down {
top: 34%;
}
.phone-ls .phone-body-down {
top: auto;
left: 34%;
}
.phone-body-right {
top: 25%;
right: -1%;
width: 1%;
height: 7.5%;
border-radius: 0 2px 2px 0;
}
.phone-ls .phone-body-right {
top: -1%;
right: auto;
left: 25%;
width: 7.5%;
height: 1%;
border-radius: 2px 2px 0 0;
}
.phone-screen {
position: relative;
z-index: 1;
}
.phone-screen- {
position: relative;
padding-bottom: 218%;
background-color: #888;
border-radius: 10%/5%;
box-shadow: 0 0 10px #000;
}
.phone-ls .phone-screen- {
padding-bottom: 46%;
border-radius: 5%/10%;
}
.phone-screen-frame {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
border-radius: inherit;
background-size: cover;
background-position: center center
}
.phone-screen-frame>.fa {
position: absolute;
top: 50%;
left: 50%;
font-size: 5em;
transform: translate(-50%, -50%);
}
124 changes: 124 additions & 0 deletions documentation/missrose.org/css/objective.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
/* Object Framework */
.row {
display: flex;
flex-wrap: wrap;
}
.row.align-stretch {
align-items: stretch;
}
.col-1,.col-2,.col-3,.col-4,.col-5,
.col-6,.col-7,.col-8,.col-9,.col-10 {
width: 100%;
max-width: 100%;
padding: 0 1rem;
}

.justify-evenly {
justify-content: space-evenly;
}
.justify-between {
justify-content: space-between;
}

.mb-1 {
margin-bottom: 1rem;
}
.mb-2 {
margin-bottom: 2rem;
}
.my-1 {
margin: 1rem 0;
}

/* Buttons */
.btn {
font-size: 1.25rem;
font-weight: bold;
display: inline-block;
color: white;
border-radius: .5rem;
padding: 1rem 1.5rem;
background-color: #d56503;
text-decoration: none;
transition: 0.3s ease-in-out;
}
.btn:hover {
background: #049fff;
}
/*.btn-nav {
font-size: 1.25rem;
font-weight: bold;
display: inline-block;
color: white;
border-radius: .5rem;
padding: 0.75rem 1rem;
background-color: #d56503;
text-decoration: none;
border: 1px solid transparent;
}*/

/* Desktop Layout */
@media only screen and (min-width: 768px) {
.container {
max-width: 85rem;
margin: 0 auto;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.col-1 {
flex: 0 0 10%;
max-width: 10%;
}
.col-2 {
flex: 0 0 20%;
max-width: 20%;
}
.col-3 {
flex: 0 0 30%;
max-width: 30%;
}
.col-4 {
flex: 0 0 40%;
max-width: 40%;
}
.col-5 {
flex: 0 0 50%;
max-width: 50%;
}
.col-6 {
flex: 0 0 60%;
max-width: 60%;
}
.col-7 {
flex: 0 0 70%;
max-width: 70%;
}
.col-8 {
flex: 0 0 80%;
max-width: 80%;
}
.col-9 {
flex: 0 0 90%;
max-width: 90%;
}
.col-10 {
flex: 0 0 100%;
max-width: 100%;
}
}

/* Text */
.text-center {
text-align: center;
}

/* Spacing *
.pr-4 {
padding-right: 4rem;
}
.pl-4 {
padding-left: 4rem;
}*/
Loading

0 comments on commit d8c6ae4

Please sign in to comment.