Compare commits
1 Commits
Author | SHA1 | Date |
---|---|---|
Emilia Allison | 8dd01bb4b0 |
|
@ -5,10 +5,10 @@
|
||||||
<link rel="stylesheet" href="/css/about.css">
|
<link rel="stylesheet" href="/css/about.css">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="flex center">
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
</div>
|
</div>
|
||||||
<div class="outerdiv contentholder">
|
<div class="outerdiv contentholder flex center">
|
||||||
<div class="contentholder__topfiller"></div>
|
<div class="contentholder__topfiller"></div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>
|
<h1>
|
||||||
|
|
|
@ -17,10 +17,10 @@
|
||||||
<!-- Twitter -->
|
<!-- Twitter -->
|
||||||
<meta property="twitter:card" content="summary_large_image" />
|
<meta property="twitter:card" content="summary_large_image" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="flex center">
|
||||||
<div class="overlay">
|
<div class="overlay">
|
||||||
</div>
|
</div>
|
||||||
<div class="outerdiv">
|
<div class="outerdiv flex center container">
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<h1 class="name__header">Emilia</h1>
|
<h1 class="name__header">Emilia</h1>
|
||||||
<!--<p class="name__subcontent">she/her</p>-->
|
<!--<p class="name__subcontent">she/her</p>-->
|
||||||
|
|
|
@ -0,0 +1,27 @@
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
body, h1, h2, h3, h4, h5, h6, p
|
||||||
|
margin: 0
|
||||||
|
|
||||||
|
body
|
||||||
|
line-height: 1.5
|
||||||
|
min-height: 100vh
|
||||||
|
|
||||||
|
img, picture
|
||||||
|
max-width: 100%
|
||||||
|
display: block
|
||||||
|
|
||||||
|
input, button, textarea, select
|
||||||
|
font: inherit
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce)
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after
|
||||||
|
animation-duration: 0.01ms !important
|
||||||
|
animation-iteration-count: 1 !important
|
||||||
|
transition-duration: 0.01ms !important
|
||||||
|
scroll-behaviour: auto !important
|
|
@ -0,0 +1,47 @@
|
||||||
|
@import 'responsive'
|
||||||
|
|
||||||
|
.overlay
|
||||||
|
width: 100%
|
||||||
|
height: 100vh
|
||||||
|
|
||||||
|
position: fixed
|
||||||
|
|
||||||
|
//opacity: 0.03
|
||||||
|
opacity: 0.2
|
||||||
|
z-index: 1 !important
|
||||||
|
background-image: url('../img/noise.gif')
|
||||||
|
background-size: 25%
|
||||||
|
|
||||||
|
@include mobile()
|
||||||
|
background-size: 200%
|
||||||
|
|
||||||
|
.contentholder
|
||||||
|
justify-content: flex-start
|
||||||
|
overflow: scroll
|
||||||
|
div
|
||||||
|
width: 30rem
|
||||||
|
margin: 1% 0
|
||||||
|
|
||||||
|
@include mobile
|
||||||
|
width: 20rem
|
||||||
|
|
||||||
|
.contentholder__topfiller
|
||||||
|
height: 5%
|
||||||
|
background-color: transparent
|
||||||
|
|
||||||
|
/* New */
|
||||||
|
|
||||||
|
.flex
|
||||||
|
display: flex
|
||||||
|
gap: 2rem
|
||||||
|
|
||||||
|
.center
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
flex-direction: column
|
||||||
|
align-content: center
|
||||||
|
|
||||||
|
.container
|
||||||
|
padding-inline: 2em
|
||||||
|
margin-inline: auto
|
||||||
|
max-width: 90rem
|
|
@ -1,3 +1,5 @@
|
||||||
|
@import 'base'
|
||||||
|
@import 'classes'
|
||||||
@import 'responsive'
|
@import 'responsive'
|
||||||
@import 'anim'
|
@import 'anim'
|
||||||
|
|
||||||
|
@ -8,18 +10,11 @@ $outer-bg: #091519
|
||||||
//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
|
//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
|
||||||
$inner-bg: #112932
|
$inner-bg: #112932
|
||||||
|
|
||||||
@mixin div-center()
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
flex-direction: column
|
|
||||||
align-content: center
|
|
||||||
|
|
||||||
*
|
*
|
||||||
border-color: $tertiary-color
|
border-color: $tertiary-color
|
||||||
|
|
||||||
body
|
body
|
||||||
@include div-center()
|
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 100%
|
height: 100%
|
||||||
padding: 0 0 0 0
|
padding: 0 0 0 0
|
||||||
|
@ -31,22 +26,7 @@ body
|
||||||
@include mobile()
|
@include mobile()
|
||||||
--is-mobile: 1
|
--is-mobile: 1
|
||||||
|
|
||||||
.overlay
|
|
||||||
width: 100%
|
|
||||||
height: 100vh
|
|
||||||
|
|
||||||
position: fixed
|
|
||||||
|
|
||||||
opacity: 0.03
|
|
||||||
z-index: 1
|
|
||||||
background-image: url('../img/noise.gif')
|
|
||||||
background-size: 25%
|
|
||||||
|
|
||||||
@include mobile()
|
|
||||||
background-size: 200%
|
|
||||||
|
|
||||||
.outerdiv
|
.outerdiv
|
||||||
@include div-center()
|
|
||||||
width: 90%
|
width: 90%
|
||||||
height: 100vh
|
height: 100vh
|
||||||
background-color: $outer-bg
|
background-color: $outer-bg
|
||||||
|
@ -55,19 +35,6 @@ body
|
||||||
@include mobile()
|
@include mobile()
|
||||||
width: 100%
|
width: 100%
|
||||||
|
|
||||||
.contentholder
|
|
||||||
justify-content: flex-start
|
|
||||||
overflow: scroll
|
|
||||||
div
|
|
||||||
width: 30rem
|
|
||||||
margin: 1% 0
|
|
||||||
|
|
||||||
@include mobile
|
|
||||||
width: 20rem
|
|
||||||
|
|
||||||
.contentholder__topfiller
|
|
||||||
height: 5%
|
|
||||||
background-color: transparent
|
|
||||||
|
|
||||||
.content
|
.content
|
||||||
z-index: 100
|
z-index: 100
|
||||||
|
|
Loading…
Reference in New Issue